add the apply page

2022-04-18 13:01:15 +08:00 · 2022-04-18 13:01:15 +08:00 · 05bc4a4cbe
parent 58e26cb5cf
commit 05bc4a4cbe
2 changed files with 171 additions and 106 deletions
--- a/myems-web/src/components/MyEMS/Ticket/TicketAgent.js
+++ b/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',
-        'User-UUID': getCookieValue('user_uuid'),
-        Token: getCookieValue('token')
+        'Content-type': 'application/json'
      },
      body: null
    })
@ -78,73 +83,11 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => {
        return response.json();
      })
      .then(json => {
-        console.log(json);
        if (isResponseOK) {
-          // rename keys
-          json = JSON.parse(
-            JSON.stringify([json])
-              .split('"id":')
-              .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
+          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);
        }
@ -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',
-      dataField: 'equipmentname',
+      key: 'a00',
+      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 = [
-    {
-      key: 1,
-      id: 1,
-      value: '1',
-      label: 'VPN申请'
-    },
-    {
-      key: 2,
-      id: 2,
-      value: '2',
-      label: 'VPN申请2'
-    }
-  ];
+  let applyTicket = () => {
+    console.log("You apply the ticket!!", selectedTicketType);

+    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) => (
-                      <option value={workflowType.value} key={workflowType.value}>
-                        {t(workflowType.label)}
+                    {ticketTypes.map((ticketType, index) => (
+                      <option value={ticketType.id} key={ticketType.id}>
+                        {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));
--- a/myems-web/src/components/MyEMS/Ticket/TicketApplication.js
+++ b/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,7 +269,12 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
      .catch(err => {
        console.log(err);
      });
-  }; 
+    setApplyModalIsShown(true);
+  };
+
+  let hiddenModal = () => {
+    setApplyModalIsShown(false);
+  }
  
  useEffect(() => {
    console.log('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>
  );