add the application of start step

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

@@ -21,7 +21,9 @@ import {
   Modal,
   ModalHeader,
   ModalBody,
-  ModalFooter
+  ModalFooter,
+  InputGroup,
+  InputGroupText
 } from 'reactstrap';
 import Cascader from 'rc-cascader';
 import loadable from '@loadable/component';
@@ -63,6 +65,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   const [ticketApplicationfields, setTicketApplicationfields] = useState({});
 
   const [applyModalIsShown, setApplyModalIsShown] = useState(false);
+  const [ticketApplicationPayload, setTicketApplicationPayload] = useState({});
 
   const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
@@ -272,9 +275,56 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     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(() => {
     console.log('selectedTicketType', selectedTicketType);
@@ -282,12 +332,20 @@ const TicketApplication = ({ 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>
@@ -331,9 +389,30 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       </Card>
       <Modal isOpen={applyModalIsShown}>
         <ModalHeader>{t('Ticket Application')}</ModalHeader>
-        <ModalBody>这是申请表单</ModalBody>
+        <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={hiddenModal}>
+          <Button color="primary" onClick={submitApplication}>
             {ticketApplicationfields.name}
           </Button>
           <Button onClick={hiddenModal}>{t('Cancel')}</Button>