add the apply page

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

@@ -16,7 +16,8 @@ import {
   Row,
   UncontrolledDropdown,
   Spinner,
-  CustomInput
+  CustomInput,
+  Button
 } from 'reactstrap';
 import Cascader from 'rc-cascader';
 import loadable from '@loadable/component';
@@ -30,7 +31,7 @@ import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
 
-const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => {
+const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
   useEffect(() => {
     let is_logged_in = getCookieValue('is_logged_in');
     let user_name = getCookieValue('user_name');
@@ -52,6 +53,11 @@ const TicketAgent = ({ 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 [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
   const [equipmentList, setEquipmentList] = useState([]);
@@ -61,12 +67,11 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => {
 
   useEffect(() => {
     let isResponseOK = false;
-    fetch(APIBaseURL + '/spaces/tree', {
+    // Get Ticket Type
+    fetch(APIBaseURL + '/ticket/types', {
       method: 'GET',
       headers: {
-        'Content-type': 'application/json',
+        'Content-type': 'application/json'
-        'User-UUID': getCookieValue('user_uuid'),
-        Token: getCookieValue('token')
       },
       body: null
     })
@@ -78,73 +83,11 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => {
         return response.json();
       })
       .then(json => {
-        console.log(json);
         if (isResponseOK) {
-          // rename keys
+          console.log('000', ticketTypes);
-          json = JSON.parse(
+          console.log('111', typeof json, json[0].id, json[0].name);
-            JSON.stringify([json])
+          // console.log('111', typeof(json),json);
-              .split('"id":')
+          setTicketTypes(json);
-              .join('"value":')
-              .split('"name":')
-              .join('"label":')
-          );
-          setCascaderOptions(json);
-          setSelectedSpaceName([json[0]].map(o => o.label));
-          let selectedSpaceID = [json[0]].map(o => o.value);
-          // begin of getting equipment list
-          let isSecondResponseOK = false;
-          fetch(APIBaseURL + '/reports/TicketAgent?' + 'spaceid=' + selectedSpaceID, {
-            method: 'GET',
-            headers: {
-              'Content-type': 'application/json',
-              'User-UUID': getCookieValue('user_uuid'),
-              Token: getCookieValue('token')
-            },
-            body: null
-          })
-            .then(response => {
-              if (response.ok) {
-                isSecondResponseOK = true;
-              }
-              return response.json();
-            })
-            .then(json => {
-              if (isSecondResponseOK) {
-                let json_equipments = JSON.parse(
-                  JSON.stringify([json['equipments']])
-                    .split('"id":')
-                    .join('"value":')
-                    .split('"name":')
-                    .join('"label":')
-                );
-                console.log(json);
-                let equipments = [];
-                json_equipments[0].forEach((currentValue, index) => {
-                  equipments.push({
-                    key: index,
-                    id: currentValue['id'],
-                    name: currentValue['equipment_name'],
-                    space: currentValue['space_name'],
-                    costcenter: currentValue['cost_center_name'],
-                    description: currentValue['description']
-                  });
-                });
-                setEquipmentList(equipments);
-
-                setExcelBytesBase64(json['excel_bytes_base64']);
-
-                // hide spinner
-                setSpinnerHidden(true);
-                // show export button
-                setExportButtonHidden(false);
-              } else {
-                toast.error(json.description);
-              }
-            })
-            .catch(err => {
-              console.log(err);
-            });
-          // end of getting equipment list
         } else {
           toast.error(json.description);
         }
@@ -153,6 +96,37 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => {
         console.log(err);
       });
   }, []);
+
+  useEffect(() => {
+    let isResponseOK = false;
+    // Get Ticket List
+    fetch(APIBaseURL + '/ticket/list', {
+      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'));
 
   const nameFormatter = (dataField, { name }) => (
@@ -179,40 +153,72 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => {
 
   const columns = [
     {
-      key: 'a0',
+      key: 'a00',
-      dataField: 'equipmentname',
+      dataField: 'id',
       headerClasses: 'border-0',
-      text: t('Name'),
+      text: t('ID'),
+      classes: 'border-0 py-2 align-middle',
+      sort: true
+    },
+    {
+      key: 'a0',
+      dataField: 'title',
+      headerClasses: 'border-0',
+      text: t('Title'),
       classes: 'border-0 py-2 align-middle',
-      formatter: nameFormatter,
       sort: true
     },
     {
       key: 'a1',
-      dataField: 'space',
+      dataField: 'ticket_type',
       headerClasses: 'border-0',
-      text: t('Space'),
+      text: t('Ticket Type'),
       classes: 'border-0 py-2 align-middle',
       sort: true
     },
     {
       key: 'a2',
-      dataField: 'costcenter',
+      dataField: 'sn',
       headerClasses: 'border-0',
-      text: t('Cost Center'),
+      text: t('Serial Number'),
       classes: 'border-0 py-2 align-middle',
       sort: true
     },
     {
       key: 'a3',
-      dataField: 'description',
+      dataField: 'state',
       headerClasses: 'border-0',
-      text: t('Description'),
+      text: t('Ticket State'),
       classes: 'border-0 py-2 align-middle',
       sort: true
     },
     {
       key: 'a4',
+      dataField: 'creator',
+      headerClasses: 'border-0',
+      text: t('Ticket Creator'),
+      classes: 'border-0 py-2 align-middle',
+      sort: true
+    },
+    {
+      key: 'a5',
+      dataField: 'gmt_created',
+      headerClasses: 'border-0',
+      text: t('Created Time'),
+      classes: 'border-0 py-2 align-middle',
+      sort: true
+    },
+    {
+      key: 'a6',
+      dataField: 'gmt_modified',
+      headerClasses: 'border-0',
+      text: t('Modified Time'),
+      classes: 'border-0 py-2 align-middle',
+      sort: true
+    },
+
+    {
+      key: 'a000',
       dataField: '',
       headerClasses: 'border-0',
       text: '',
@@ -225,31 +231,54 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => {
   const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
 
   let onWorkflowTypeChange = ({ target }) => {
-    console.log('onWorkflowTypeChange', target.value);
+    setSelectedTicketType(target.value);
   };
 
-  const workflowTypeOptions = [
+  let applyTicket = () => {
-    {
+    console.log("You apply the ticket!!", selectedTicketType);
-      key: 1,
-      id: 1,
-      value: '1',
-      label: 'VPN申请'
-    },
-    {
-      key: 2,
-      id: 2,
-      value: '2',
-      label: 'VPN申请2'
-    }
-  ];
 
+    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);
+  }, [ticketApplicationfields]);
 
   return (
     <Fragment>
       <div>
         <Breadcrumb>
           <BreadcrumbItem>{t('Ticket')}</BreadcrumbItem>
-          <BreadcrumbItem active>{t('My Agent')}</BreadcrumbItem>
+          <BreadcrumbItem active>{t('My Application')}</BreadcrumbItem>
         </Breadcrumb>
       </div>
       <Card className="bg-light mb-3">
@@ -262,21 +291,32 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => {
                     {t('Ticket Type')}
                   </Label>
                   <CustomInput type="select" id="workflowType" name="workflowType" onChange={onWorkflowTypeChange}>
-                    {workflowTypeOptions.map((workflowType, index) => (
+                    {ticketTypes.map((ticketType, index) => (
-                      <option value={workflowType.value} key={workflowType.value}>
+                      <option value={ticketType.id} key={ticketType.id}>
-                        {t(workflowType.label)}
+                        {t(ticketType.name)}
                       </option>
                     ))}
                   </CustomInput>
                 </FormGroup>
               </Col>
+              <Col xs="auto">
+                <br />
+                <ButtonIcon
+                  icon="external-link-alt"
+                  transform="shrink-3 down-2"
+                  color="falcon-default"
+                  onClick={applyTicket}
+                >
+                  {t('Apply')}
+                </ButtonIcon>
+              </Col>
             </Row>
           </Form>
         </CardBody>
       </Card>
-      <DetailedDataTable data={equipmentList} title={t('Ticket List')} columns={columns} pagesize={10} />
+      <DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
     </Fragment>
   );
 };
 
-export default withTranslation()(withRedirect(TicketAgent));
+export default withTranslation()(withRedirect(TicketAggent));

myems-web/src/components/MyEMS/Ticket/TicketApplication.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';
@@ -58,6 +62,8 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   const [ticketList, setTicketList] = useState([]);
   const [ticketApplicationfields, setTicketApplicationfields] = useState({});
 
+  const [applyModalIsShown, setApplyModalIsShown] = useState(false);
+
   const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
   const [equipmentList, setEquipmentList] = useState([]);
@@ -235,7 +241,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   };
 
   let applyTicket = () => {
-    console.log("You apply the ticket!!", selectedTicketType);
+    console.log('You apply the ticket!!', selectedTicketType);
 
     let isResponseOK = false;
     fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
@@ -263,8 +269,13 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
+    setApplyModalIsShown(true);
   };
 
+  let hiddenModal = () => {
+    setApplyModalIsShown(false);
+  }
+  
   useEffect(() => {
     console.log('selectedTicketType', selectedTicketType);
   }, [selectedTicketType]);
@@ -273,6 +284,10 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
     console.log('ticketApplicationfields', ticketApplicationfields);
   }, [ticketApplicationfields]);
 
+  useEffect(() => {
+    console.log('applyModalIsShown', applyModalIsShown);
+  }, [applyModalIsShown]);
+
   return (
     <Fragment>
       <div>
@@ -314,6 +329,16 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
           </Form>
         </CardBody>
       </Card>
+      <Modal isOpen={applyModalIsShown}>
+        <ModalHeader>{t('Ticket Application')}</ModalHeader>
+        <ModalBody>这是申请表单</ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={hiddenModal}>
+            {ticketApplicationfields.name}
+          </Button>
+          <Button onClick={hiddenModal}>{t('Cancel')}</Button>
+        </ModalFooter>
+      </Modal>
       <DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
     </Fragment>
   );