modify the ticke application modal

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

@@ -64,9 +64,11 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   const [ticketList, setTicketList] = useState([]);
   const [ticketApplicationfields, setTicketApplicationfields] = useState({});
 
-  const [applyModalIsShown, setApplyModalIsShown] = useState(false);
   const [ticketApplicationPayload, setTicketApplicationPayload] = useState({});
 
+  const [modalIsShown, setModalIsShown] = useState(false);
+  const [openedModalName, setOpenedModalName] = useState('');
+
   useEffect(() => {
     let isResponseOK = false;
     // Get Ticket Type
@@ -150,7 +152,8 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
         <FontAwesomeIcon icon="ellipsis-h" className="fs--1" />
       </DropdownToggle>
       <DropdownMenu right className="border py-2">
-        <DropdownItem onClick={() => console.log('View: ', id)}>{t('View Ticket')}</DropdownItem>
+        <DropdownItem onClick={viewTicketStatusModal}>{t('View State')}</DropdownItem>
+        <DropdownItem onClick={viewTicketWorkflowModal}>{t('View Workflow')}</DropdownItem>
       </DropdownMenu>
     </UncontrolledDropdown>
   );
@@ -267,7 +270,8 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
-    setApplyModalIsShown(true);
+    setModalIsShown(true);
+    setOpenedModalName('Application');
   };
 
   // Submit
@@ -309,7 +313,23 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   };
 
   let hiddenModal = () => {
-    setApplyModalIsShown(false);
+    setModalIsShown(false);
+  };
+
+  let viewTicketStatusModal = () => {
+    console.log('View Ticket Status');
+    setModalIsShown(true);
+    setOpenedModalName('Status');
+  };
+
+  let hiddenTicketWorkflowModal = () => {
+    setModalIsShown(false);
+  };
+
+  let viewTicketWorkflowModal = () => {
+    console.log('View Ticket Workflow');
+    setModalIsShown(true);
+    setOpenedModalName('Workflow');
   };
 
   let onFieldChange = (index, { target }) => {
@@ -319,6 +339,25 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
   };
 
+  let getModelContent = () => {
+    console.log("---------------------", "getModelContent");
+    switch (openedModalName) {
+      case 'Application':
+        console.log("switch application")
+        return <ModalHeader>{t('Ticket Application')}</ModalHeader>;
+      case 'Status':
+        console.log("switch status")
+        return <ModalHeader>{t('Ticket Status')}</ModalHeader>;
+
+      case 'Workflow':
+        console.log("switch workflow")
+        return <ModalHeader>{t('Ticket Workflow')}</ModalHeader>;
+      default:
+        console.log("switch none")
+        return <ModalHeader>{t('Ticket None')}</ModalHeader>;
+    }
+  };
+
   useEffect(() => {
     console.log('selectedTicketType', selectedTicketType);
   }, [selectedTicketType]);
@@ -333,12 +372,17 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   }, [ticketApplicationfields]);
 
   useEffect(() => {
-    console.log('applyModalIsShown', applyModalIsShown);
-  }, [applyModalIsShown]);
+    console.log('modalIsShown', modalIsShown);
+  }, [modalIsShown]);
 
   useEffect(() => {
     console.log('ticketApplicationPayload', ticketApplicationPayload);
   }, [ticketApplicationPayload]);
+
+  useEffect(() => {
+    console.log('openedModalName', openedModalName);
+  }, [openedModalName]);
+
   return (
     <Fragment>
       <div>
@@ -380,8 +424,9 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
           </Form>
         </CardBody>
       </Card>
-      <Modal isOpen={applyModalIsShown}>
-        <ModalHeader>{t('Ticket Application')}</ModalHeader>
+      <Modal isOpen={ modalIsShown}>
+        {getModelContent()}
+        {/* {openedModalName=='Application' &&  (<ModalHeader>{t('Ticket Application')}</ModalHeader>) } */}
         <ModalBody>
           {ticketApplicationfields.fields &&
             ticketApplicationfields.fields.map((field, index) => {
@@ -411,6 +456,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
           <Button onClick={hiddenModal}>{t('Cancel')}</Button>
         </ModalFooter>
       </Modal>
+
       <DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
     </Fragment>
   );