modify the ticket web page

myems-api/reports/ticket.py

@@ -103,7 +103,7 @@ class TicketListCollection:
 
         query = (" SELECT id, title, workflow_id, sn, state_id, creator, gmt_created, gmt_modified "
                  " FROM ticket_ticketrecord "
-                 " ORDER BY id ")
+                 " ORDER BY id DESC")
         cursor.execute(query)
         rows = cursor.fetchall()
         cursor.close()

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

@@ -95,8 +95,6 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
-    // Get Ticket List
-
   }, []);
 
   useEffect(() => {
@@ -237,7 +235,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, {
@@ -265,7 +263,6 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
-
   }; 
   
   useEffect(() => {

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

@@ -15,7 +15,9 @@ import {
   Media,
   Row,
   UncontrolledDropdown,
-  Spinner
+  Spinner,
+  CustomInput,
+  Button
 } from 'reactstrap';
 import Cascader from 'rc-cascader';
 import loadable from '@loadable/component';
@@ -51,6 +53,11 @@ const TicketIntervention = ({ 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([]);
@@ -60,12 +67,11 @@ const TicketIntervention = ({ 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
     })
@@ -77,73 +83,11 @@ const TicketIntervention = ({ 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/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
-                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);
         }
@@ -152,6 +96,37 @@ const TicketIntervention = ({ 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 }) => (
@@ -178,40 +153,72 @@ const TicketIntervention = ({ 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: '',
@@ -223,25 +230,23 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
 
   const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
 
-  let onSpaceCascaderChange = (value, selectedOptions) => {
+  let onWorkflowTypeChange = ({ target }) => {
-    setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
+    setSelectedTicketType(target.value);
-    let selectedSpaceID = value[value.length - 1];
+  };
-    // show spinner
+
-    setSpinnerHidden(false);
+  let applyTicket = () => {
-    // hide export button
+    console.log("You apply the ticket!!", selectedTicketType);
-    setExportButtonHidden(true);
+
-    // begin of getting equipment list
     let isResponseOK = false;
-    fetch(APIBaseURL + '/reports/Ticket?' + 'spaceid=' + selectedSpaceID, {
+    fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
       method: 'GET',
       headers: {
-        'Content-type': 'application/json',
+        'Content-type': 'application/json'
-        'User-UUID': getCookieValue('user_uuid'),
-        Token: getCookieValue('token')
       },
       body: null
     })
       .then(response => {
+        console.log(response);
         if (response.ok) {
           isResponseOK = true;
         }
@@ -249,33 +254,8 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
       })
       .then(json => {
         if (isResponseOK) {
-          let json_equipments = JSON.parse(
+          console.log('/ticket/apply', json);
-            JSON.stringify([json['equipments']])
+          setTicketApplicationfields(json);
-              .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);
         }
@@ -283,25 +263,15 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
-    // end of getting equipment list
+  }; 
-  };
+  
+  useEffect(() => {
+    console.log('selectedTicketType', selectedTicketType);
+  }, [selectedTicketType]);
 
-  const handleExport = e => {
+  useEffect(() => {
-    e.preventDefault();
+    console.log('ticketApplicationfields', ticketApplicationfields);
-    const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+  }, [ticketApplicationfields]);
-    const fileName = 'Ticket.xlsx';
-    var fileUrl = 'data:' + mimeType + ';base64,' + excelBytesBase64;
-    fetch(fileUrl)
-      .then(response => response.blob())
-      .then(blob => {
-        var link = window.document.createElement('a');
-        link.href = window.URL.createObjectURL(blob, { type: mimeType });
-        link.download = fileName;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-      });
-  };
 
   return (
     <Fragment>
@@ -315,26 +285,18 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
         <CardBody className="p-3">
           <Form>
             <Row form>
-              <Col xs={6} sm={3}>
-                <FormGroup className="form-group">
-                  <Label className={labelClasses} for="space">
-                    {t('Ticket Type')}
-                  </Label>
-                  <br />
-                  <Cascader
-                    options={cascaderOptions}
-                    onChange={onSpaceCascaderChange}
-                    changeOnSelect
-                    expandTrigger="hover"
-                  >
-                    <Input value={selectedSpaceName || ''} readOnly />
-                  </Cascader>
-                </FormGroup>
-              </Col>
               <Col xs="auto">
                 <FormGroup>
-                  <br />
+                  <Label className={labelClasses} for="workflowType">
-                  <Spinner color="primary" hidden={spinnerHidden} />
+                    {t('Ticket Type')}
+                  </Label>
+                  <CustomInput type="select" id="workflowType" name="workflowType" onChange={onWorkflowTypeChange}>
+                    {ticketTypes.map((ticketType, index) => (
+                      <option value={ticketType.id} key={ticketType.id}>
+                        {t(ticketType.name)}
+                      </option>
+                    ))}
+                  </CustomInput>
                 </FormGroup>
               </Col>
               <Col xs="auto">
@@ -343,17 +305,16 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
                   icon="external-link-alt"
                   transform="shrink-3 down-2"
                   color="falcon-default"
-                  hidden={exportButtonHidden}
+                  onClick={applyTicket}
-                  onClick={handleExport}
                 >
-                  {t('Export')}
+                  {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>
   );
 };

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

@@ -15,7 +15,9 @@ import {
   Media,
   Row,
   UncontrolledDropdown,
-  Spinner
+  Spinner,
+  CustomInput,
+  Button
 } from 'reactstrap';
 import Cascader from 'rc-cascader';
 import loadable from '@loadable/component';
@@ -51,6 +53,11 @@ 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 [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
   const [equipmentList, setEquipmentList] = useState([]);
@@ -60,12 +67,11 @@ const TicketList = ({ 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
     })
@@ -77,73 +83,11 @@ const TicketList = ({ 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/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
-                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);
         }
@@ -152,6 +96,37 @@ const TicketList = ({ 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 }) => (
@@ -178,40 +153,72 @@ const TicketList = ({ 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: '',
@@ -223,25 +230,23 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
 
   const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
 
-  let onSpaceCascaderChange = (value, selectedOptions) => {
+  let onWorkflowTypeChange = ({ target }) => {
-    setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
+    setSelectedTicketType(target.value);
-    let selectedSpaceID = value[value.length - 1];
+  };
-    // show spinner
+
-    setSpinnerHidden(false);
+  let applyTicket = () => {
-    // hide export button
+    console.log("You apply the ticket!!", selectedTicketType);
-    setExportButtonHidden(true);
+
-    // begin of getting equipment list
     let isResponseOK = false;
-    fetch(APIBaseURL + '/reports/Ticket?' + 'spaceid=' + selectedSpaceID, {
+    fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
       method: 'GET',
       headers: {
-        'Content-type': 'application/json',
+        'Content-type': 'application/json'
-        'User-UUID': getCookieValue('user_uuid'),
-        Token: getCookieValue('token')
       },
       body: null
     })
       .then(response => {
+        console.log(response);
         if (response.ok) {
           isResponseOK = true;
         }
@@ -249,33 +254,8 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
       })
       .then(json => {
         if (isResponseOK) {
-          let json_equipments = JSON.parse(
+          console.log('/ticket/apply', json);
-            JSON.stringify([json['equipments']])
+          setTicketApplicationfields(json);
-              .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);
         }
@@ -283,25 +263,15 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
       .catch(err => {
         console.log(err);
       });
-    // end of getting equipment list
+  }; 
-  };
+  
+  useEffect(() => {
+    console.log('selectedTicketType', selectedTicketType);
+  }, [selectedTicketType]);
 
-  const handleExport = e => {
+  useEffect(() => {
-    e.preventDefault();
+    console.log('ticketApplicationfields', ticketApplicationfields);
-    const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+  }, [ticketApplicationfields]);
-    const fileName = 'Ticket.xlsx';
-    var fileUrl = 'data:' + mimeType + ';base64,' + excelBytesBase64;
-    fetch(fileUrl)
-      .then(response => response.blob())
-      .then(blob => {
-        var link = window.document.createElement('a');
-        link.href = window.URL.createObjectURL(blob, { type: mimeType });
-        link.download = fileName;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-      });
-  };
 
   return (
     <Fragment>
@@ -315,26 +285,18 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
         <CardBody className="p-3">
           <Form>
             <Row form>
-              <Col xs={6} sm={3}>
-                <FormGroup className="form-group">
-                  <Label className={labelClasses} for="space">
-                    {t('Ticket Type')}
-                  </Label>
-                  <br />
-                  <Cascader
-                    options={cascaderOptions}
-                    onChange={onSpaceCascaderChange}
-                    changeOnSelect
-                    expandTrigger="hover"
-                  >
-                    <Input value={selectedSpaceName || ''} readOnly />
-                  </Cascader>
-                </FormGroup>
-              </Col>
               <Col xs="auto">
                 <FormGroup>
-                  <br />
+                  <Label className={labelClasses} for="workflowType">
-                  <Spinner color="primary" hidden={spinnerHidden} />
+                    {t('Ticket Type')}
+                  </Label>
+                  <CustomInput type="select" id="workflowType" name="workflowType" onChange={onWorkflowTypeChange}>
+                    {ticketTypes.map((ticketType, index) => (
+                      <option value={ticketType.id} key={ticketType.id}>
+                        {t(ticketType.name)}
+                      </option>
+                    ))}
+                  </CustomInput>
                 </FormGroup>
               </Col>
               <Col xs="auto">
@@ -343,17 +305,16 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
                   icon="external-link-alt"
                   transform="shrink-3 down-2"
                   color="falcon-default"
-                  hidden={exportButtonHidden}
+                  onClick={applyTicket}
-                  onClick={handleExport}
                 >
-                  {t('Export')}
+                  {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>
   );
 };