complete the ticket list page

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

@@ -80,7 +80,13 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
   // ticket body
   const [ticketBody, setTicketBody] = useState({});
 
+  // Init: Get Ticket Types and List
   useEffect(() => {
+    getTicketTypes();
+    getTicketList();
+  }, []);
+
+  const getTicketTypes = () => {
     let isResponseOK = false;
     // Get Ticket Type
     fetch(APIBaseURL + '/ticket/types' + '?username=admin', {
@@ -110,9 +116,9 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
-  }, []);
+  };
 
-  useEffect(() => {
+  const getTicketList = () => {
     let isResponseOK = false;
     // Get Ticket List
     fetch(APIBaseURL + '/ticket/list/agent' + '?username=admin', {
@@ -141,8 +147,7 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
-  }, []);
+  };
-
   const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
 
   const actionFormatter = (dataField, { id }) => (
@@ -409,6 +414,9 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
+
+    // Get New Ticket List
+    getTicketList();
   };
 
   const text = `
@@ -492,7 +500,7 @@ Hello world
       <Modal size="xl" isOpen={modalIsShown}>
         <ModalHeader>{t('Ticket')}</ModalHeader>;
         <ModalBody>
-          <Collapse accordion onChange={callback}>
+          <Collapse accordion onChange={callback} defaultActiveKey={4}>
             <Panel header={t('Ticket Workflow')} key="1">
               <p>{text}</p>
             </Panel>

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

@@ -37,7 +37,7 @@ import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
 import { join } from 'lodash';
-import { Steps, Timeline, Collapse } from 'antd';
+import { Steps, Timeline, Collapse, message } from 'antd';
 
 const { Step } = Steps;
 const { Panel } = Collapse;
@@ -77,65 +77,11 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   const [ticketStatus, setTicketStatus] = useState({});
 
   useEffect(() => {
-    let isResponseOK = false;
+    getTicketTypes();
-    // Get Ticket Type
-    fetch(APIBaseURL + '/ticket/types', {
-      method: 'GET',
-      headers: {
-        'Content-type': 'application/json'
-      },
-      body: null
-    })
-      .then(response => {
-        console.log(response);
-        if (response.ok) {
-          isResponseOK = true;
-        }
-        return response.json();
-      })
-      .then(json => {
-        if (isResponseOK) {
-          console.log('000', ticketTypes);
-          console.log('111', typeof json, json[0].id, json[0].name);
-          // console.log('111', typeof(json),json);
-          setTicketTypes(json);
-        } else {
-          toast.error(json.description);
-        }
-      })
-      .catch(err => {
-        console.log(err);
-      });
   }, []);
 
   useEffect(() => {
-    let isResponseOK = false;
+    getTicketList();
-    // Get Ticket List
-    fetch(APIBaseURL + '/ticket/list/apply' + '?username=admin', {
-      method: 'GET',
-      headers: {
-        'Content-type': 'application/json'
-      },
-      body: null
-    })
-      .then(response => {
-        console.log(response);
-        if (response.ok) {
-          isResponseOK = true;
-        }
-        return response.json();
-      })
-      .then(json => {
-        if (isResponseOK) {
-          console.log('/ticket/list', json);
-          setTicketList(json);
-        } else {
-          toast.error(json.description);
-        }
-      })
-      .catch(err => {
-        console.log(err);
-      });
   }, []);
 
   const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@@ -237,6 +183,65 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     setSelectedTicketType(target.value);
   };
 
+  let getTicketTypes = () => {
+    let isResponseOK = false;
+    // Get Ticket Type
+    fetch(APIBaseURL + '/ticket/types', {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json'
+      },
+      body: null
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        if (isResponseOK) {
+          setTicketTypes(json);
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
+  let getTicketList = () => {
+    let isResponseOK = false;
+    // Get Ticket List
+    fetch(APIBaseURL + '/ticket/list/apply' + '?username=admin', {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json'
+      },
+      body: null
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        if (isResponseOK) {
+          console.log('/ticket/list', json);
+          setTicketList(json);
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
   let applyTicket = () => {
     console.log('You apply the ticket!!', selectedTicketType);
 
@@ -270,7 +275,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     setOpenedModalName('Application');
   };
 
-  // Submit
+  // Submit Ticket
   let submitApplication = target => {
     hiddenModal();
     console.log('You submit the ticket.');
@@ -279,7 +284,6 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       workflow_id: ticketApplicationfields.workflow_id
     };
     setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
-    console.log('submit----', ticketApplicationPayload);
 
     let isResponseOK = false;
     fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType + '?username=admin', {
@@ -306,6 +310,9 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
+
+    // Get New Ticket List
+    getTicketList();
   };
 
   let hiddenModal = () => {
@@ -332,9 +339,6 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       })
       .then(json => {
         if (isResponseOK) {
-          console.log('/ticket/status ---', json);
-          console.log('/ticket/status ---', json['data']);
-          console.log('/ticket/status ---', json);
           let temp = json.data;
           let current_id;
           temp.value.map((item, index) => {
@@ -381,10 +385,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       })
       .then(json => {
         if (isResponseOK) {
-          console.log('/ticket/record ---', json);
-          console.log('/ticket/record ---', json['data']);
           let temp = json.data;
-          console.log('temp', temp);
           setTicketStatus({ ...temp });
           setModalIsShown(true);
           setOpenedModalName('Record');
@@ -410,8 +411,8 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
   };
 
-  let getModelHeader = () => {
+  // Get Modal
-    console.log('---------------------', 'getModelHeader');
+  let getModalHeader = () => {
     switch (openedModalName) {
       case 'Application':
         console.log('switch application');
@@ -435,8 +436,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     }
   };
 
-  let getModelBody = () => {
+  let getModalBody = () => {
-    console.log('---------------------', 'getModelBody');
     switch (openedModalName) {
       case 'Application':
         console.log('switch application');
@@ -522,7 +522,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     }
   };
 
-  let getModelFooter = () => {
+  let getModalFooter = () => {
     switch (openedModalName) {
       case 'Application':
         return (
@@ -635,9 +635,9 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
         </CardBody>
       </Card>
       <Modal size="xl" isOpen={modalIsShown}>
-        {getModelHeader()}
+        {getModalHeader()}
-        {getModelBody()}
+        {getModalBody()}
-        {getModelFooter()}
+        {getModalFooter()}
       </Modal>
 
       <DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />

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

@@ -17,7 +17,11 @@ import {
   UncontrolledDropdown,
   Spinner,
   CustomInput,
-  Button
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
 } from 'reactstrap';
 import Cascader from 'rc-cascader';
 import loadable from '@loadable/component';
@@ -30,6 +34,10 @@ import { withTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
+import { Steps, Timeline, Collapse, message } from 'antd';
+
+const { Step } = Steps;
+const { Panel } = Collapse;
 
 const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
   useEffect(() => {
@@ -53,21 +61,28 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
   let table = createRef();
 
   // State
-  const [selectedTicketType, setSelectedTicketType] = useState(1);
   const [ticketTypes, setTicketTypes] = useState([]);
   const [ticketList, setTicketList] = useState([]);
   const [ticketApplicationfields, setTicketApplicationfields] = useState({});
+  const [ticketListAll, setTicketListAll] = useState([]);
 
-  const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
+  // Select Button
-  const [cascaderOptions, setCascaderOptions] = useState(undefined);
+  const [selectedTicketType, setSelectedTicketType] = useState(1);
-  const [equipmentList, setEquipmentList] = useState([]);
+  const [selectedTicketTypeName, setSelectedTicketTypeName] = useState('');
-  const [spinnerHidden, setSpinnerHidden] = useState(false);
+
-  const [exportButtonHidden, setExportButtonHidden] = useState(true);
+  // View Button
-  const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
+  const [modalIsShown, setModalIsShown] = useState(false);
+  const [openedModalName, setOpenedModalName] = useState('');
+  const [ticketStatus, setTicketStatus] = useState({});
 
   useEffect(() => {
-    let isResponseOK = false;
     // Get Ticket Type
+    getTicketTypes();
+    getTicketList();
+  }, []);
+
+  const getTicketTypes = () => {
+    let isResponseOK = false;
     fetch(APIBaseURL + '/ticket/types', {
       method: 'GET',
       headers: {
@@ -84,10 +99,9 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
       })
       .then(json => {
         if (isResponseOK) {
-          console.log('000', ticketTypes);
-          console.log('111', typeof json, json[0].id, json[0].name);
-          // console.log('111', typeof(json),json);
           setTicketTypes(json);
+          setSelectedTicketType(json[0].id);
+          setSelectedTicketTypeName(json[0].name);
         } else {
           toast.error(json.description);
         }
@@ -95,19 +109,15 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
-  }, []);
+  };
-
+  const getTicketList = () => {
-  useEffect(() => {
     let isResponseOK = false;
-    // Get Ticket List
+    fetch(APIBaseURL + '/ticket/list/completed' + '?username=admin', {
-    fetch(APIBaseURL + '/ticket/list/completed', {
+      method: 'GET',
-      method: 'POST',
       headers: {
         'Content-type': 'application/json'
       },
-      body: JSON.stringify({
+      body: null
-        user_name: 'admin'
-      })
     })
       .then(response => {
         console.log(response);
@@ -120,6 +130,7 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
         if (isResponseOK) {
           console.log('/ticket/list', json);
           setTicketList(json);
+          setTicketListAll(json);
         } else {
           toast.error(json.description);
         }
@@ -127,8 +138,7 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
-  }, []);
+  };
-
   const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
 
   const actionFormatter = (dataField, { id }) => (
@@ -138,10 +148,212 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
         <FontAwesomeIcon icon="ellipsis-h" className="fs--1" />
       </DropdownToggle>
       <DropdownMenu right className="border py-2">
-        <DropdownItem onClick={() => console.log('Edit: ', id)}>{t('Edit Equipment')}</DropdownItem>
+        <DropdownItem onClick={viewTicketStatusModal.bind(this, id)}>{t('View State')}</DropdownItem>
+        <DropdownItem onClick={viewTicketRecordModal.bind(this, id)}>{t('View Record')}</DropdownItem>
+        <DropdownItem onClick={viewTicketWorkflowModal.bind(this, id)}>{t('View Workflow')}</DropdownItem>
       </DropdownMenu>
     </UncontrolledDropdown>
   );
+  let hiddenModal = () => {
+    setModalIsShown(false);
+  };
+
+  let viewTicketStatusModal = (id, e) => {
+    console.log('View Ticket Status', id);
+    // Get Ticket Status
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/ticket/status/' + id + '?username=admin', {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json'
+      },
+      body: null
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        if (isResponseOK) {
+          let temp = json.data;
+          let current_id;
+          temp.value.map((item, index) => {
+            console.log(
+              '/ticket/status ---',
+              item.state_id,
+              temp.current_state_id,
+              item.state_id == temp.current_state_id
+            );
+            if (item.state_id == temp.current_state_id) {
+              current_id = index;
+            }
+          });
+          console.log('temp', temp);
+          setTicketStatus({ ...temp, current_id: current_id });
+          setModalIsShown(true);
+          setOpenedModalName('Status');
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
+  let viewTicketRecordModal = (id, e) => {
+    console.log('View Ticket Record', id);
+    // Get Ticket Status
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/ticket/status/' + id + '?username=admin', {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json'
+      },
+      body: null
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        if (isResponseOK) {
+          let temp = json.data;
+          setTicketStatus({ ...temp });
+          setModalIsShown(true);
+          setOpenedModalName('Record');
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
+  let viewTicketWorkflowModal = (id, e) => {
+    console.log('View Ticket Workflow', id);
+    setModalIsShown(true);
+    setOpenedModalName('Workflow');
+  };
+
+    // Get Modal
+    let getModalHeader = () => {
+      switch (openedModalName) {
+        case 'Status':
+          console.log('switch status');
+          return <ModalHeader>{t('Ticket Status')}</ModalHeader>;
+  
+        case 'Record':
+          console.log('switch record');
+          return <ModalHeader>{t('Ticket Record')}</ModalHeader>;
+  
+        case 'Workflow':
+          console.log('switch workflow');
+          return <ModalHeader>{t('Ticket Workflow')}</ModalHeader>;
+  
+        default:
+          console.log('switch none');
+          return <ModalHeader>{t('Ticket None')}</ModalHeader>;
+      }
+    };
+  
+    let getModalBody = () => {
+      switch (openedModalName) {
+        case 'Status':
+          console.log('switch status');
+          return (
+            <ModalBody>
+              {ticketStatus && (
+                <Steps current={ticketStatus.current_id}>
+                  {ticketStatus.value.map((item, index) => {
+                    let description = '';
+                    if (index < ticketStatus.current_id) {
+                      let description_user = item.state_flow_log_list[0].participant_info.participant_alias;
+                      let description_operation = item.state_flow_log_list[0].gmt_created;
+                      let description_time = item.state_flow_log_list[0].transition.transition_name;
+                      description = description_user + description_operation + '@' + description_time;
+                    }
+                    return <Step key={item.state_id} title={item.state_name} description="" />;
+                  })}
+                </Steps>
+              )}
+            </ModalBody>
+          );
+  
+        case 'Record':
+          console.log('switch Record');
+          return (
+            <ModalBody>
+              {ticketStatus && (
+                <Timeline mode="left">
+                  <Timeline.Item key={100} label={''} />
+                  {ticketStatus.value
+                    .filter(item => item.state_flow_log_list.length > 0)
+                    .map((item, index) => {
+                      let description_user = item.state_flow_log_list[0].participant_info.participant_alias;
+                      let description_time = item.state_flow_log_list[0].gmt_created;
+                      let description_operation = item.state_flow_log_list[0].transition.transition_name;
+                      let description = "用户'" + description_user + "'发起了'" + description_operation + "'操作";
+                      return (
+                        <Timeline.Item key={index} label={description_time}>
+                          {description}
+                        </Timeline.Item>
+                      );
+                    })}
+                  <Timeline.Item key={999} label={''} />
+                </Timeline>
+              )}
+            </ModalBody>
+          );
+  
+        case 'Workflow':
+          console.log('switch workflow');
+          return <ModalBody>{t('Ticket Workflow')}</ModalBody>;
+  
+        default:
+          console.log('switch none');
+          return <ModalBody>{}</ModalBody>;
+      }
+    };
+  
+    let getModalFooter = () => {
+      switch (openedModalName) {
+        case 'Status':
+          return (
+            <ModalHeader>
+              <Button onClick={hiddenModal}>{t('Close')}</Button>
+            </ModalHeader>
+          );
+  
+        case 'Record':
+          return (
+            <ModalHeader>
+              <Button onClick={hiddenModal}>{t('Close')}</Button>
+            </ModalHeader>
+          );
+  
+        case 'Workflow':
+          return (
+            <ModalHeader>
+              <Button onClick={hiddenModal}>{t('Close')}</Button>
+            </ModalHeader>
+          );
+  
+        default:
+          return (
+            <ModalHeader>
+              <Button onClick={hiddenModal}>{t('Close')}</Button>
+            </ModalHeader>
+          );
+      }
+    };
 
   const columns = [
     {
@@ -224,46 +436,53 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
 
   let onWorkflowTypeChange = ({ target }) => {
     setSelectedTicketType(target.value);
+    ticketTypes.map(ticketType => {
+      if (ticketType.id == target.value) {
+        setSelectedTicketTypeName(ticketType.name);
+        console.log('onWorkflowTypeChange', ticketType.name, ticketType.id, target.value);
+      }
+    });
   };
 
-  let applyTicket = () => {
+  let searchTicket = () => {
-    console.log("You apply the ticket!!", selectedTicketType);
+    setTicketList(ticketListAll.filter(item => item.ticket_type === selectedTicketTypeName));
+  };
+
+  useEffect(() => {
+    console.log('ticketApplicationfields', ticketApplicationfields);
+  }, [ticketApplicationfields]);
+
+  useEffect(() => {
+    console.log('ticketList', ticketList);
+  }, [ticketList]);
+
+  useEffect(() => {
+    console.log('ticketListAll', ticketListAll);
+  }, [ticketListAll]);
+
+  useEffect(() => {
+    console.log('ticketTypes', ticketTypes);
+  }, [ticketTypes]);
 
-    let isResponseOK = false;
-    fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
-      method: 'GET',
-      headers: {
-        'Content-type': 'application/json'
-      },
-      body: null
-    })
-      .then(response => {
-        console.log(response);
-        if (response.ok) {
-          isResponseOK = true;
-        }
-        return response.json();
-      })
-      .then(json => {
-        if (isResponseOK) {
-          console.log('/ticket/apply', json);
-          setTicketApplicationfields(json);
-        } else {
-          toast.error(json.description);
-        }
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }; 
-  
   useEffect(() => {
     console.log('selectedTicketType', selectedTicketType);
   }, [selectedTicketType]);
 
   useEffect(() => {
-    console.log('ticketApplicationfields', ticketApplicationfields);
+    console.log('selectedTicketTypeName', selectedTicketTypeName);
-  }, [ticketApplicationfields]);
+  }, [selectedTicketTypeName]);
+
+  useEffect(() => {
+    console.log('ticketStatus', ticketStatus);
+  }, [ticketStatus]);
+
+  useEffect(() => {
+    console.log('modalIsShown', modalIsShown);
+  }, [modalIsShown]);
+
+  useEffect(() => {
+    console.log('openedModalName', openedModalName);
+  }, [openedModalName]);
 
   return (
     <Fragment>
@@ -297,7 +516,7 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
                   icon="external-link-alt"
                   transform="shrink-3 down-2"
                   color="falcon-default"
-                  onClick={applyTicket}
+                  onClick={searchTicket}
                 >
                   {t('Apply')}
                 </ButtonIcon>
@@ -306,6 +525,11 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
           </Form>
         </CardBody>
       </Card>
+      <Modal size="xl" isOpen={modalIsShown}>
+        {getModalHeader()}
+        {getModalBody()}
+        {getModalFooter()}
+      </Modal>
       <DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
     </Fragment>
   );