From 58e26cb5cfcebcc458850801a938f912f6b39c3e Mon Sep 17 00:00:00 2001 From: hyh123a Date: Sun, 17 Apr 2022 21:49:36 +0800 Subject: [PATCH] modify the ticket web page --- myems-api/reports/ticket.py | 2 +- .../MyEMS/Ticket/TicketApplication.js | 5 +- .../MyEMS/Ticket/TicketIntervention.js | 281 ++++++++---------- .../src/components/MyEMS/Ticket/TicketList.js | 281 ++++++++---------- 4 files changed, 244 insertions(+), 325 deletions(-) diff --git a/myems-api/reports/ticket.py b/myems-api/reports/ticket.py index daefb282..aa72e400 100644 --- a/myems-api/reports/ticket.py +++ b/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() diff --git a/myems-web/src/components/MyEMS/Ticket/TicketApplication.js b/myems-web/src/components/MyEMS/Ticket/TicketApplication.js index 0bda7ea1..09390a66 100644 --- a/myems-web/src/components/MyEMS/Ticket/TicketApplication.js +++ b/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(() => { diff --git a/myems-web/src/components/MyEMS/Ticket/TicketIntervention.js b/myems-web/src/components/MyEMS/Ticket/TicketIntervention.js index ac94ebdf..ffe603bc 100644 --- a/myems-web/src/components/MyEMS/Ticket/TicketIntervention.js +++ b/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', - 'User-UUID': getCookieValue('user_uuid'), - Token: getCookieValue('token') + 'Content-type': 'application/json' }, body: null }) @@ -77,73 +83,11 @@ const TicketIntervention = ({ 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/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 + 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); } @@ -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', - 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: '', @@ -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) => { - setSelectedSpaceName(selectedOptions.map(o => o.label).join('/')); - let selectedSpaceID = value[value.length - 1]; - // show spinner - setSpinnerHidden(false); - // hide export button - setExportButtonHidden(true); - // begin of getting equipment list + let onWorkflowTypeChange = ({ target }) => { + setSelectedTicketType(target.value); + }; + + let applyTicket = () => { + console.log("You apply the ticket!!", selectedTicketType); + let isResponseOK = false; - fetch(APIBaseURL + '/reports/Ticket?' + 'spaceid=' + selectedSpaceID, { + fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, { method: 'GET', headers: { - 'Content-type': 'application/json', - 'User-UUID': getCookieValue('user_uuid'), - Token: getCookieValue('token') + 'Content-type': 'application/json' }, 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( - 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); + console.log('/ticket/apply', json); + setTicketApplicationfields(json); } 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 => { - e.preventDefault(); - const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; - 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); - }); - }; + useEffect(() => { + console.log('ticketApplicationfields', ticketApplicationfields); + }, [ticketApplicationfields]); return ( @@ -315,26 +285,18 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
- - - -
- - - - - -
- @@ -343,17 +305,16 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => { icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default" - hidden={exportButtonHidden} - onClick={handleExport} + onClick={applyTicket} > - {t('Export')} + {t('Apply')}
- + ); }; diff --git a/myems-web/src/components/MyEMS/Ticket/TicketList.js b/myems-web/src/components/MyEMS/Ticket/TicketList.js index 330fa235..a452b3ab 100644 --- a/myems-web/src/components/MyEMS/Ticket/TicketList.js +++ b/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', - 'User-UUID': getCookieValue('user_uuid'), - Token: getCookieValue('token') + 'Content-type': 'application/json' }, body: null }) @@ -77,73 +83,11 @@ const TicketList = ({ 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/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 + 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); } @@ -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', - 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: '', @@ -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) => { - setSelectedSpaceName(selectedOptions.map(o => o.label).join('/')); - let selectedSpaceID = value[value.length - 1]; - // show spinner - setSpinnerHidden(false); - // hide export button - setExportButtonHidden(true); - // begin of getting equipment list + let onWorkflowTypeChange = ({ target }) => { + setSelectedTicketType(target.value); + }; + + let applyTicket = () => { + console.log("You apply the ticket!!", selectedTicketType); + let isResponseOK = false; - fetch(APIBaseURL + '/reports/Ticket?' + 'spaceid=' + selectedSpaceID, { + fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, { method: 'GET', headers: { - 'Content-type': 'application/json', - 'User-UUID': getCookieValue('user_uuid'), - Token: getCookieValue('token') + 'Content-type': 'application/json' }, 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( - 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); + console.log('/ticket/apply', json); + setTicketApplicationfields(json); } 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 => { - e.preventDefault(); - const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; - 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); - }); - }; + useEffect(() => { + console.log('ticketApplicationfields', ticketApplicationfields); + }, [ticketApplicationfields]); return ( @@ -315,26 +285,18 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
- - - -
- - - - - -
- @@ -343,17 +305,16 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => { icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default" - hidden={exportButtonHidden} - onClick={handleExport} + onClick={applyTicket} > - {t('Export')} + {t('Apply')}
- + ); };