modfify the ticket agent page

myems-web/src/components/MyEMS/Ticket/TicketAgent.js

@@ -17,7 +17,13 @@ import {
   UncontrolledDropdown,
   Spinner,
   CustomInput,
-  Button
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  InputGroup,
+  InputGroupText
 } from 'reactstrap';
 import Cascader from 'rc-cascader';
 import loadable from '@loadable/component';
@@ -58,6 +64,9 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
   const [ticketList, setTicketList] = useState([]);
   const [ticketApplicationfields, setTicketApplicationfields] = useState({});
 
+  const [applyModalIsShown, setApplyModalIsShown] = useState(false);
+  const [ticketApplicationPayload, setTicketApplicationPayload] = useState({});
+
   const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
   const [equipmentList, setEquipmentList] = useState([]);
@@ -234,8 +243,8 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
     setSelectedTicketType(target.value);
   };
 
-  let applyTicket = () => {
+  let searchTicket = () => {
-    console.log("You apply the ticket!!", selectedTicketType);
+    console.log('You search the ticket!!', selectedTicketType);
 
     let isResponseOK = false;
     fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
@@ -263,6 +272,56 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
+    setApplyModalIsShown(true);
+  };
+
+  // Submit
+  let submitApplication = target => {
+    hiddenModal();
+    console.log('You submit the ticket.');
+    let temp = {
+      transition_id: ticketApplicationfields.transition_id,
+      workflow_id: ticketApplicationfields.workflow_id
+    };
+    setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
+    console.log('submit----', ticketApplicationPayload);
+
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
+      method: 'POST',
+      headers: {
+        'Content-type': 'application/json'
+      },
+      body: JSON.stringify(ticketApplicationPayload)
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        if (isResponseOK) {
+          console.log('Submit /ticket/apply', json);
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
+  let hiddenModal = () => {
+    setApplyModalIsShown(false);
+  };
+
+  let onFieldChange = (index, { target }) => {
+    let temp = {};
+    // console.log('onFieldChange', e.value);
+    temp[index] = target.value;
+    setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
   };
 
   useEffect(() => {
@@ -271,14 +330,26 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
 
   useEffect(() => {
     console.log('ticketApplicationfields', ticketApplicationfields);
+    let temp = {
+      transition_id: ticketApplicationfields.transition_id,
+      workflow_id: ticketApplicationfields.workflow_id
+    };
+    setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
   }, [ticketApplicationfields]);
 
+  useEffect(() => {
+    console.log('applyModalIsShown', applyModalIsShown);
+  }, [applyModalIsShown]);
+
+  useEffect(() => {
+    console.log('ticketApplicationPayload', ticketApplicationPayload);
+  }, [ticketApplicationPayload]);
   return (
     <Fragment>
       <div>
         <Breadcrumb>
           <BreadcrumbItem>{t('Ticket')}</BreadcrumbItem>
-          <BreadcrumbItem active>{t('My Application')}</BreadcrumbItem>
+          <BreadcrumbItem active>{t('My Aggent')}</BreadcrumbItem>
         </Breadcrumb>
       </div>
       <Card className="bg-light mb-3">
@@ -305,15 +376,46 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
                   icon="external-link-alt"
                   transform="shrink-3 down-2"
                   color="falcon-default"
-                  onClick={applyTicket}
+                  onClick={searchTicket}
                 >
-                  {t('Apply')}
+                  {t('Search')}
                 </ButtonIcon>
               </Col>
             </Row>
           </Form>
         </CardBody>
       </Card>
+      <Modal isOpen={applyModalIsShown}>
+        <ModalHeader>{t('Ticket Application')}</ModalHeader>
+        <ModalBody>
+          {ticketApplicationfields.fields &&
+            ticketApplicationfields.fields.map((field, index) => {
+              if (field.field_type === 'input') {
+                return (
+                  <InputGroup key={index}>
+                    <InputGroupText>{field.field_name}</InputGroupText>
+                    <Input placeholder={field.field_name} onChange={onFieldChange.bind(this, field.field_key)} />
+                  </InputGroup>
+                );
+              } else if (field.field_type === 'text_area') {
+                return (
+                  <InputGroup key={index}>
+                    <InputGroupText>{field.field_name}</InputGroupText>
+                    <textarea placeholder={field.field_name} onChange={onFieldChange.bind(this, field.field_key)} />
+                  </InputGroup>
+                );
+              } else {
+                return <Input key={index}> Error field</Input>;
+              }
+            })}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={submitApplication}>
+            {ticketApplicationfields.name}
+          </Button>
+          <Button onClick={hiddenModal}>{t('Cancel')}</Button>
+        </ModalFooter>
+      </Modal>
       <DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
     </Fragment>
   );