add the ticket list api

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

@@ -54,6 +54,8 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
 
   // State
   const [selectedTicketType, setSelectedTicketType] = useState(undefined);
+  const [ticketTypes, setTicketTypes] = useState([]);
+  const [ticketList, setTicketList] = useState([]);
 
   const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
@@ -64,12 +66,11 @@ const TicketApplication = ({ 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
     })
@@ -81,73 +82,44 @@ const TicketApplication = ({ 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":')
+        } else {
-              .split('"name":')
+          toast.error(json.description);
-              .join('"label":')
+        }
-          );
+      })
-          setCascaderOptions(json);
+      .catch(err => {
-          setSelectedSpaceName([json[0]].map(o => o.label));
+        console.log(err);
-          let selectedSpaceID = [json[0]].map(o => o.value);
+      });
-          // begin of getting equipment list
+    // Get Ticket List
-          let isSecondResponseOK = false;
-          fetch(APIBaseURL + '/reports/Ticket?' + '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
+  useEffect(() => {
-                setSpinnerHidden(true);
+    let isResponseOK = false;
-                // show export button
+    // Get Ticket List
-                setExportButtonHidden(false);
+    fetch(APIBaseURL + '/ticket/list', {
-              } else {
+      method: 'GET',
-                toast.error(json.description);
+      headers: {
-              }
+        'Content-type': 'application/json'
-            })
+      },
-            .catch(err => {
+      body: null
-              console.log(err);
+    })
-            });
+      .then(response => {
-          // end of getting equipment list
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        if (isResponseOK) {
+          console.log('000', json);
+          // console.log('111', typeof(json),json);
+          setTicketList(json);
         } else {
           toast.error(json.description);
         }
@@ -156,6 +128,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
         console.log(err);
       });
   }, []);
+
   const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
 
   const nameFormatter = (dataField, { name }) => (
@@ -183,39 +156,64 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
   const columns = [
     {
       key: 'a0',
-      dataField: 'equipmentname',
+      dataField: 'title',
       headerClasses: 'border-0',
-      text: t('Name'),
+      text: t('Title'),
       classes: 'border-0 py-2 align-middle',
       formatter: nameFormatter,
       sort: true
     },
     {
       key: 'a1',
-      dataField: 'space',
+      dataField: 'workflow_id',
       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: 'a00',
       dataField: '',
       headerClasses: 'border-0',
       text: '',
@@ -228,23 +226,11 @@ const TicketApplication = ({ 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);
   };
-
+  useEffect(() => {
-  const workflowTypeOptions = [
+    console.log('selectedTicketType', selectedTicketType);
-    {
+  }, [selectedTicketType]);
-      key: 1,
-      id: 1,
-      value: '1',
-      label: 'VPN申请'
-    },
-    {
-      key: 2,
-      id: 2,
-      value: '2',
-      label: 'VPN申请2'
-    }
-  ];
 
   return (
     <Fragment>
@@ -264,9 +250,9 @@ const TicketApplication = ({ 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>
@@ -278,7 +264,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
                   icon="external-link-alt"
                   transform="shrink-3 down-2"
                   color="falcon-default"
-                  onClick={console.log("Apply The Ticket")}
+                  onClick={console.log('Apply The Ticket')}
                 >
                   {t('Apply')}
                 </ButtonIcon>