add the ticket step function

myems-web/package.json

@@ -17,6 +17,7 @@
     "@fullcalendar/react": "^5.3.1",
     "@fullcalendar/timegrid": "^5.3.1",
     "@loadable/component": "^5.13.2",
+    "antd": "^4.19.5",
     "attr-accept": "^2.2.2",
     "bootstrap": "^4.5.3",
     "chart.js": "^2.9.3",
@@ -73,9 +74,9 @@
     "react-toastify": "^5.5.0",
     "react-typed": "^1.2.0",
     "reactstrap": "^8.6.0",
+    "rsuite": "^5.6.1",
     "slick-carousel": "^1.8.1",
-    "uuid": "^3.4.0",
+    "uuid": "^3.4.0"
-    "rsuite": "^5.6.1"
   },
   "scripts": {
     "start": "react-scripts --openssl-legacy-provider start",
@@ -92,7 +93,6 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
-    "postcss": "^8.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",
     "gulp-clean-css": "^4.3.0",
@@ -101,6 +101,7 @@
     "gulp-rtlcss": "^1.4.1",
     "gulp-sass": "^5.0.0",
     "gulp-sourcemaps": "^2.6.5",
+    "postcss": "^8.0.0",
     "prettier": "1.17.1",
     "sass": "^1.43.4"
   }

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

@@ -36,6 +36,10 @@ import { withTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
+import { join } from 'lodash';
+import { Steps } from 'antd';
+
+const { Step } = Steps;
 
 const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   useEffect(() => {
@@ -69,6 +73,9 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   const [modalIsShown, setModalIsShown] = useState(false);
   const [openedModalName, setOpenedModalName] = useState('');
 
+  // status
+  const [ticketStatus, setTicketStatus] = useState({});
+
   useEffect(() => {
     let isResponseOK = false;
     // Get Ticket Type
@@ -152,8 +159,8 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
         <FontAwesomeIcon icon="ellipsis-h" className="fs--1" />
       </DropdownToggle>
       <DropdownMenu right className="border py-2">
-        <DropdownItem onClick={viewTicketStatusModal}>{t('View State')}</DropdownItem>
+        <DropdownItem onClick={viewTicketStatusModal.bind(this, id)}>{t('View State')}</DropdownItem>
-        <DropdownItem onClick={viewTicketWorkflowModal}>{t('View Workflow')}</DropdownItem>
+        <DropdownItem onClick={viewTicketWorkflowModal.bind(this, id)}>{t('View Workflow')}</DropdownItem>
       </DropdownMenu>
     </UncontrolledDropdown>
   );
@@ -316,18 +323,61 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     setModalIsShown(false);
   };
 
-  let viewTicketStatusModal = () => {
+  let viewTicketStatusModal = (id, e) => {
-    console.log('View Ticket Status');
+    console.log('View Ticket Status', id);
-    setModalIsShown(true);
+    // Get Ticket Status
-    setOpenedModalName('Status');
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/ticket/status/' + id, {
+      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/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) => {
+            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 hiddenTicketWorkflowModal = () => {
     setModalIsShown(false);
   };
 
-  let viewTicketWorkflowModal = () => {
+  let viewTicketWorkflowModal = (id, e) => {
-    console.log('View Ticket Workflow');
+    console.log('View Ticket Workflow', id);
     setModalIsShown(true);
     setOpenedModalName('Workflow');
   };
@@ -339,25 +389,121 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
   };
 
-  let getModelContent = () => {
+  let getModelHeader = () => {
-    console.log("---------------------", "getModelContent");
+    console.log('---------------------', 'getModelHeader');
     switch (openedModalName) {
       case 'Application':
-        console.log("switch application")
+        console.log('switch application');
         return <ModalHeader>{t('Ticket Application')}</ModalHeader>;
+
       case 'Status':
-        console.log("switch status")
+        console.log('switch status');
         return <ModalHeader>{t('Ticket Status')}</ModalHeader>;
 
       case 'Workflow':
-        console.log("switch workflow")
+        console.log('switch workflow');
         return <ModalHeader>{t('Ticket Workflow')}</ModalHeader>;
       default:
-        console.log("switch none")
+        console.log('switch none');
         return <ModalHeader>{t('Ticket None')}</ModalHeader>;
     }
   };
 
+  let getModelBody = () => {
+    console.log('---------------------', 'getModelBody');
+    switch (openedModalName) {
+      case 'Application':
+        console.log('switch application');
+        return (
+          <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>
+        );
+
+      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={description} />;
+                })}
+              </Steps>
+            )}
+          </ModalBody>
+        );
+
+      case 'Workflow':
+        console.log('switch workflow');
+        return <ModalBody>{t('Ticket Workflow')}</ModalBody>;
+      default:
+        console.log('switch none');
+        return <ModalBody>{}</ModalBody>;
+    }
+  };
+
+  let getModelFooter = () => {
+    switch (openedModalName) {
+      case 'Application':
+        return (
+          <ModalFooter>
+            <Button color="primary" onClick={submitApplication}>
+              {ticketApplicationfields.name}
+            </Button>
+            <Button onClick={hiddenModal}>{t('Close')}</Button>
+          </ModalFooter>
+        );
+
+      case 'Status':
+        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>
+        );
+    }
+  };
+
   useEffect(() => {
     console.log('selectedTicketType', selectedTicketType);
   }, [selectedTicketType]);
@@ -383,6 +529,10 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     console.log('openedModalName', openedModalName);
   }, [openedModalName]);
 
+  useEffect(() => {
+    console.log('ticketStatus', ticketStatus);
+  }, [ticketStatus]);
+
   return (
     <Fragment>
       <div>
@@ -424,37 +574,10 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
           </Form>
         </CardBody>
       </Card>
-      <Modal isOpen={ modalIsShown}>
+      <Modal size="xl" isOpen={modalIsShown}>
-        {getModelContent()}
+        {getModelHeader()}
-        {/* {openedModalName=='Application' &&  (<ModalHeader>{t('Ticket Application')}</ModalHeader>) } */}
+        {getModelBody()}
-        <ModalBody>
+        {getModelFooter()}
-          {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} />

myems-web/src/index.js

@@ -7,6 +7,7 @@ import App from './App';
 import Main from './Main';
 import './helpers/initFA';
 import './i18n';
+import 'antd/dist/antd.css';
 
 ReactDOM.render(
   <Main>