sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

If filters are modified, enable the filter button, display a message asking users to press the filter button. Don't render the table. Sigh.

This commit is contained in:
Dan 2023-03-17 16:36:31 -04:00
parent 90aed76e21
commit 8bcf16908d
1 changed files with 65 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
View File

@ -139,6 +139,7 @@ export default function ProcessInstanceListTable({
const [startToTimeInvalid, setStartToTimeInvalid] = useState<boolean>(false); const [startToTimeInvalid, setStartToTimeInvalid] = useState<boolean>(false);
const [endFromTimeInvalid, setEndFromTimeInvalid] = useState<boolean>(false); const [endFromTimeInvalid, setEndFromTimeInvalid] = useState<boolean>(false);
const [endToTimeInvalid, setEndToTimeInvalid] = useState<boolean>(false); const [endToTimeInvalid, setEndToTimeInvalid] = useState<boolean>(false);
const [requiresRefilter, setRequiresRefilter] = useState<boolean>(false);
const processInstanceListPathPrefix = const processInstanceListPathPrefix =
variant === 'all' variant === 'all'
@ -243,6 +244,7 @@ export default function ProcessInstanceListTable({
// eslint-disable-next-line sonarjs/cognitive-complexity // eslint-disable-next-line sonarjs/cognitive-complexity
useEffect(() => { useEffect(() => {
function setProcessInstancesFromResult(result: any) { function setProcessInstancesFromResult(result: any) {
setRequiresRefilter(false);
const processInstancesFromApi = result.results; const processInstancesFromApi = result.results;
setProcessInstances(processInstancesFromApi); setProcessInstances(processInstancesFromApi);
setPagination(result.pagination); setPagination(result.pagination);
@ -793,6 +795,7 @@ export default function ProcessInstanceListTable({
); );
Object.assign(reportMetadataCopy, { columns: newColumns }); Object.assign(reportMetadataCopy, { columns: newColumns });
setReportMetadata(reportMetadataCopy); setReportMetadata(reportMetadataCopy);
setRequiresRefilter(true);
} }
}; };
@ -864,6 +867,7 @@ export default function ProcessInstanceListTable({
setReportMetadata(reportMetadataCopy); setReportMetadata(reportMetadataCopy);
setReportColumnToOperateOn(null); setReportColumnToOperateOn(null);
setShowReportColumnForm(false); setShowReportColumnForm(false);
setRequiresRefilter(true);
} }
}; };
@ -891,6 +895,7 @@ export default function ProcessInstanceListTable({
); );
} }
setReportColumnToOperateOn(reportColumnForEditing); setReportColumnToOperateOn(reportColumnForEditing);
setRequiresRefilter(true);
}; };
// options includes item and inputValue // options includes item and inputValue
@ -912,6 +917,7 @@ export default function ProcessInstanceListTable({
}; };
reportColumnToOperateOnCopy.filter_field_value = event.target.value; reportColumnToOperateOnCopy.filter_field_value = event.target.value;
setReportColumnToOperateOn(reportColumnToOperateOnCopy); setReportColumnToOperateOn(reportColumnToOperateOnCopy);
setRequiresRefilter(true);
} }
}; };
@ -950,6 +956,7 @@ export default function ProcessInstanceListTable({
value={reportColumnToOperateOn ? reportColumnToOperateOn.Header : ''} value={reportColumnToOperateOn ? reportColumnToOperateOn.Header : ''}
onChange={(event: any) => { onChange={(event: any) => {
if (reportColumnToOperateOn) { if (reportColumnToOperateOn) {
setRequiresRefilter(true);
const reportColumnToOperateOnCopy = { const reportColumnToOperateOnCopy = {
...reportColumnToOperateOn, ...reportColumnToOperateOn,
}; };
@ -1091,9 +1098,10 @@ export default function ProcessInstanceListTable({
<Grid fullWidth className="with-bottom-margin"> <Grid fullWidth className="with-bottom-margin">
<Column md={8}> <Column md={8}>
<ProcessModelSearch <ProcessModelSearch
onChange={(selection: any) => onChange={(selection: any) => {
setProcessModelSelection(selection.selectedItem) setProcessModelSelection(selection.selectedItem);
} setRequiresRefilter(true);
}}
processModels={processModelAvailableItems} processModels={processModelAvailableItems}
selectedItem={processModelSelection} selectedItem={processModelSelection}
/> />
@ -1112,6 +1120,7 @@ export default function ProcessInstanceListTable({
onInputChange={searchForProcessInitiator} onInputChange={searchForProcessInitiator}
onChange={(event: any) => { onChange={(event: any) => {
setProcessInitiatorSelection(event.selectedItem); setProcessInitiatorSelection(event.selectedItem);
setRequiresRefilter(true);
}} }}
id="process-instance-initiator-search" id="process-instance-initiator-search"
data-qa="process-instance-initiator-search" data-qa="process-instance-initiator-search"
@ -1133,9 +1142,10 @@ export default function ProcessInstanceListTable({
id="process-instance-initiator-search" id="process-instance-initiator-search"
placeholder="Enter username" placeholder="Enter username"
labelText="Process Initiator" labelText="Process Initiator"
onChange={(event: any) => onChange={(event: any) => {
setProcessInitiatorText(event.target.value) setProcessInitiatorText(event.target.value);
} setRequiresRefilter(true);
}}
/> />
); );
}} }}
@ -1150,8 +1160,14 @@ export default function ProcessInstanceListTable({
'start-from', 'start-from',
startFromDate, startFromDate,
startFromTime, startFromTime,
setStartFromDate, (val: string) => {
setStartFromTime, setStartFromDate(val);
setRequiresRefilter(true);
},
(val: string) => {
setStartFromTime(val);
setRequiresRefilter(true);
},
startFromTimeInvalid, startFromTimeInvalid,
setStartFromTimeInvalid setStartFromTimeInvalid
)} )}
@ -1162,8 +1178,14 @@ export default function ProcessInstanceListTable({
'start-to', 'start-to',
startToDate, startToDate,
startToTime, startToTime,
setStartToDate, (val: string) => {
setStartToTime, setStartToDate(val);
setRequiresRefilter(true);
},
(val: string) => {
setStartToTime(val);
setRequiresRefilter(true);
},
startToTimeInvalid, startToTimeInvalid,
setStartToTimeInvalid setStartToTimeInvalid
)} )}
@ -1174,8 +1196,14 @@ export default function ProcessInstanceListTable({
'end-from', 'end-from',
endFromDate, endFromDate,
endFromTime, endFromTime,
setEndFromDate, (val: string) => {
setEndFromTime, setEndFromDate(val);
setRequiresRefilter(true);
},
(val: string) => {
setEndFromTime(val);
setRequiresRefilter(true);
},
endFromTimeInvalid, endFromTimeInvalid,
setEndFromTimeInvalid setEndFromTimeInvalid
)} )}
@ -1186,8 +1214,14 @@ export default function ProcessInstanceListTable({
'end-to', 'end-to',
endToDate, endToDate,
endToTime, endToTime,
setEndToDate, (val: string) => {
setEndToTime, setEndToDate(val);
setRequiresRefilter(true);
},
(val: string) => {
setEndToTime(val);
setRequiresRefilter(true);
},
endToTimeInvalid, endToTimeInvalid,
setEndToTimeInvalid setEndToTimeInvalid
)} )}
@ -1205,6 +1239,7 @@ export default function ProcessInstanceListTable({
</Button> </Button>
<Button <Button
kind="secondary" kind="secondary"
disabled={!requiresRefilter}
onClick={applyFilter} onClick={applyFilter}
data-qa="filter-button" data-qa="filter-button"
className="narrow-button" className="narrow-button"
@ -1415,11 +1450,14 @@ export default function ProcessInstanceListTable({
// eslint-disable-next-line prefer-destructuring // eslint-disable-next-line prefer-destructuring
perPage = perPageOptions[1]; perPage = perPageOptions[1];
} }
return ( let resultsTable = (
<> <h2>
{reportColumnForm()} Please press the filter button when you have completed updating the
{processInstanceReportSaveTag()} filters.
{filterComponent()} </h2>
);
if (!requiresRefilter) {
resultsTable = (
<PaginationForTable <PaginationForTable
page={page} page={page}
perPage={perPage} perPage={perPage}
@ -1429,6 +1467,14 @@ export default function ProcessInstanceListTable({
perPageOptions={perPageOptions} perPageOptions={perPageOptions}
paginationClassName={paginationClassName} paginationClassName={paginationClassName}
/> />
);
}
return (
<>
{reportColumnForm()}
{processInstanceReportSaveTag()}
{filterComponent()}
{resultsTable}
</> </>
); );
} }