SHARE
TWEET

Untitled

a guest Oct 15th, 2019 78 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { AUTH_TOKEN, USER_DATA } from '../utils/constants';
  3. // import Navigation from '../components/Navigation';
  4. import Header from '../components/Header';
  5. import Kanban from '../components/Kanban';
  6. import { Row, Col, Button, Modal, ModalBody, Form, FormGroup, Label, Input } from 'reactstrap';
  7.  
  8. import { Mutation } from 'react-apollo';
  9. import gql from 'graphql-tag';
  10. import { Query } from 'react-apollo';
  11.  
  12. const BRIEF_MUTATION = gql`
  13.     mutation($title: String!, $content: String!, $appId: Int!, $musicLink: String!, $footageLink: String!, $duration: String!, $ratioSquare: Boolean!, $ratioStory: Boolean!, $ratioFiveFour: Boolean!, $ratioSixteenNine: Boolean!, $variations: Int!, $referenceLink: String!  ) {
  14.         updateBrief(title: $title, content: $content, appId: $appId, musicLink: $musicLink, footageLink: $footageLink, duration: $duration, ratioSquare: $ratioSquare, ratioStory: $ratioStory, ratioFiveFour: $ratioFiveFour, ratioSixteenNine: $ratioSixteenNine, variations: $variations,  referenceLink: $referenceLink ) {
  15.           title
  16.           content
  17.           appId
  18.           musicLink
  19.           footageLink
  20.           ratioSquare
  21.           ratioStory
  22.           ratioFiveFour
  23.           ratioSixteenNine
  24.           duration
  25.           referenceLink
  26.           variations
  27.           step
  28.         }
  29.     }
  30. `;
  31.  
  32.  
  33. const BRIEF_QUERY = gql`
  34.   query($id:Int!) {
  35.   fetchBrief(id: $id) {
  36.         title
  37.         appId
  38.         content
  39.         referenceLink
  40.         musicLink
  41.         footageLink
  42.         ratioSquare
  43.         ratioStory
  44.         ratioFiveFour
  45.         ratioSixteenNine
  46.         variations
  47.         duration
  48.         createdAt
  49.         step
  50.         isPublished
  51.         price
  52.     }
  53.   }
  54.   `;
  55.  
  56.  
  57. class EditTask extends Component {
  58.     constructor(props) {
  59.         super(props);
  60.  
  61.  
  62.         this.state = {
  63.             brief: {},
  64.             title: '',
  65.             content: '',
  66.             appId: '',
  67.             musicLink: '',
  68.             footageLink: '',
  69.             duration: '',
  70.             ratioSquare: false,
  71.             ratioStory: false,
  72.             ratioFiveFour: false,
  73.             ratioSixteenNine: false,
  74.             variations: 1,
  75.             referenceLink: '',
  76.             isPublished: 0,
  77.             isArchived: 0,
  78.             isFeatured: 0,
  79.             isAccepted: 0,
  80.             step: 0,
  81.  
  82.         };
  83.  
  84.         this.toggleSquare = this.toggleSquare.bind(this);
  85.         this.toggleStory = this.toggleStory.bind(this);
  86.         this.toggleFiveFour = this.toggleFiveFour.bind(this);
  87.         this.toggleSixteenNine = this.toggleSixteenNine.bind(this);
  88.     }
  89.  
  90.  
  91.     toggleSquare() {
  92.         this.setState(prevState => ({
  93.             ratioSquare: !prevState.ratioSquare
  94.         }));
  95.     }
  96.  
  97.     toggleStory() {
  98.         this.setState(prevState => ({
  99.             ratioStory: !prevState.ratioStory
  100.         }));
  101.     }
  102.  
  103.     toggleFiveFour() {
  104.         this.setState(prevState => ({
  105.             ratioFiveFour: !prevState.ratioFiveFour
  106.         }));
  107.     }
  108.  
  109.     toggleSixteenNine() {
  110.         this.setState(prevState => ({
  111.             ratioSixteenNine: !prevState.ratioSixteenNine
  112.         }));
  113.     }
  114.  
  115.     fetchedData(brief) {
  116.         this.setState({
  117.             title: brief.title,
  118.         })
  119.     }
  120.  
  121.  
  122.    
  123.  
  124.     render() {
  125.  
  126.         const userData = JSON.parse(localStorage.getItem(USER_DATA));
  127.         const { title, content, appId, musicLink, footageLink, duration, ratioSquare, ratioStory, ratioFiveFour, ratioSixteenNine, variations, referenceLink, isPublished, isArchived, isFeatured, isAccepted } = this.state;
  128.         const step = 0;
  129.  
  130.         const id = parseInt(this.props.match.params.id);
  131.  
  132.         return (
  133.             <>
  134.                 <Header title="Новая задача" />
  135.                 <div className="new-task-body">
  136.                 <Mutation
  137.                     mutation={BRIEF_MUTATION}
  138.                     variables={{ title, content, appId, musicLink, footageLink, duration, ratioSquare, ratioStory, ratioFiveFour, ratioSixteenNine, variations, referenceLink, isPublished, isArchived, isFeatured, isAccepted, step }}
  139.                     onCompleted={() => this.props.history.push('/')}
  140.                 >
  141.                 {updateBrief => (
  142.                     <Query query={BRIEF_QUERY} variables={{ id }} >
  143.                     {({ loading, error, data }) => {
  144.                         if (loading) return <div>Загрузка</div>
  145.                         if (error) return <div>{error.message}</div>
  146.  
  147.                         const brief = data.fetchBrief;
  148.                         this.fetchedData(brief);
  149.                        
  150.                         return (
  151.                             <>
  152.  
  153.                                 <Form>
  154.                                     <Row className="alone">
  155.                                         <Col xs="6"> <FormGroup>
  156.                                             <Input type="hidden" value={step} onChange={e => this.setState({ step: e.target.value })} name="appName" id="appName" placeholder="Введите название задачи" />
  157.                                             <Input type="hidden" value={isPublished} onChange={e => this.setState({ isPublished: e.target.value })} name="appName" id="appName" placeholder="Введите название задачи" />
  158.                                             <Input type="text" value={this.state.title} onChange={e => this.setState({ title: e.target.value })} name="appName" id="appName" placeholder="Введите название задачи" />
  159.                                         </FormGroup></Col>
  160.                                         <Col xs="4"> <FormGroup>
  161.  
  162.                                             <Input type="select" value={appId} onChange={e => this.setState({ appId: parseInt(e.target.value) })} name="select" id="exampleSelect">
  163.                                                 <option value="0">Без приложения</option>
  164.                                                 {userData ? userData.apps.map(app => <option value={app.id}>{app.title}</option>) : <option>Нет приложений</option>}
  165.  
  166.                                             </Input>
  167.                                         </FormGroup></Col>
  168.                                         <Col xs="2"><Button outline className="cancel">Отмена</Button></Col>
  169.                                     </Row>
  170.                                     <div className="task-box">
  171.                                         <FormGroup>
  172.                                             <Label for="references">Референсы</Label>
  173.                                             <Input type="text" value={referenceLink} onChange={e => this.setState({ referenceLink: e.target.value })} name="references" id="references" placeholder="Вставьте ссылку на референсы" />
  174.                                         </FormGroup>
  175.                                         <FormGroup>
  176.                                             <Label for="content">Задача</Label>
  177.                                             <Input type="textarea" value={content} onChange={e => this.setState({ content: e.target.value })} rows={4} name="content" id="content" placeholder="Распишите подробно задачу ролика" />
  178.                                         </FormGroup>
  179.  
  180.                                         <FormGroup >
  181.                                             <Label for="music">Музыка</Label>
  182.                                         </FormGroup>
  183.  
  184.  
  185.                                         <FormGroup row>
  186.                                             <Col xs={6}>
  187.                                                 <Input type="text" value={musicLink} onChange={e => this.setState({ musicLink: e.target.value })} name="music" id="music" placeholder="Вставьте ссылку на облако " />
  188.                                             </Col>
  189.                                             <Col className="reference-list" xs={3}>
  190.                                                 <a><strike>Или выберете из списка</strike></a>
  191.                                             </Col>
  192.                                             <Col xs={3}>
  193.  
  194.                                                 <Input type="text" disabled name="music_name" id="music_name" placeholder="И введите название файла" />
  195.                                             </Col>
  196.                                         </FormGroup>
  197.  
  198.                                         <FormGroup >
  199.                                             <Label for="footages">Футажи</Label>
  200.                                         </FormGroup>
  201.  
  202.  
  203.                                         <FormGroup row>
  204.                                             <Col xs={6}>
  205.                                                 <Input type="text" value={footageLink} onChange={e => this.setState({ footageLink: e.target.value })} name="footages" id="footages" placeholder="Вставьте ссылку на облако " />
  206.                                             </Col>
  207.                                             <Col className="reference-list" xs={3}>
  208.                                                 <a ><strike>Или выберете из списка</strike></a>
  209.                                             </Col>
  210.                                             <Col xs={3}>
  211.  
  212.                                                 <Input type="text" disabled name="footages_name" id="footage_name" placeholder="И введите название файла" />
  213.                                             </Col>
  214.                                         </FormGroup>
  215.  
  216.  
  217.                                         <FormGroup row>
  218.                                             <Col xs={4}>
  219.                                                 <FormGroup>
  220.                                                     <Label for="checkbox2" >Разрешение</Label><br></br>
  221.  
  222.                                                     <FormGroup check inline>
  223.  
  224.  
  225.                                                         <Input type="checkbox" name="ratio" value={ratioSquare} onChange={this.toggleSquare} id="checkbox2" />
  226.                                                         Квадрат
  227.                                  
  228.                   <Input type="checkbox" name="ratio" value={ratioStory} onChange={this.toggleStory} id="checkbox2" />
  229.                                                         Сторис
  230.                                  
  231.                   <Input type="checkbox" name="ratio" value={ratioFiveFour} onChange={this.toggleFiveFour} id="checkbox2" />
  232.                                                         5:4
  233.                   <Input type="checkbox" name="ratio" value={ratioSixteenNine} onChange={this.toggleSixteenNine} id="checkbox2" />
  234.                                                         16:9
  235.                                  
  236.               </FormGroup>
  237.                                                 </FormGroup>
  238.                                             </Col>
  239.  
  240.                                             <Col xs={4}>
  241.                                                 <FormGroup>
  242.                                                     <Label for="duration" >Длительность</Label>
  243.  
  244.                                                     <Input type="select" value={duration} onChange={e => this.setState({ duration: e.target.value })} name="duration" id="duration">
  245.                                                         <option>до 10 секунд</option>
  246.                                                         <option>до 15 секунд</option>
  247.                                                         <option>до 20 секунд</option>
  248.                                                         <option>до 25 секунд</option>
  249.                                                         <option>до 30 секунд</option>
  250.                                                     </Input>
  251.                                                 </FormGroup>
  252.                                             </Col>
  253.  
  254.                                             <Col xs={4}>
  255.                                                 <FormGroup>
  256.                                                     <Label for="variants" >Количество вариантов</Label>
  257.  
  258.                                                     <Input type="select" value={variations} onChange={e => this.setState({ variations: parseInt(e.target.value) })} name="variants" id="variants">
  259.                                                         <option value="1">1</option>
  260.                                                         <option value="2">2</option>
  261.                                                         <option value="3">3</option>
  262.                                                         <option value="4">4</option>
  263.                                                     </Input>
  264.                                                 </FormGroup>
  265.                                             </Col>
  266.                                         </FormGroup>
  267.  
  268.                                     </div>
  269.  
  270.                                     <FormGroup className="save-btn">
  271.                                      
  272.                                                     <Button color="primary " className="save" onClick={updateBrief}>Готово</Button>
  273.                                          
  274.                                     </FormGroup>
  275.  
  276.  
  277.  
  278.  
  279.                                 </Form>
  280.  
  281.                             </>
  282.                         )
  283.                     }}
  284.                 </Query>
  285.  
  286.                 )}
  287.                 </Mutation>
  288.  
  289.                 </div>
  290.             </>
  291.         )
  292.     }
  293. };
  294.  
  295. export default EditTask;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top