sartography/spiffworkflow-frontend
1
0
Fork 0
mirror of https://github.com/sartography/spiffworkflow-frontend.git synced 2025-02-24 12:18:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

updates to send query params to list endpoints in api w/ burnettk

Browse Source
This commit is contained in:
jasquat 2022-09-22 15:41:12 -04:00
parent 830c30a650
commit 7ae41c2b24
7 changed files with 84 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ProcessBreadcrumb.tsx
View File

@ -53,7 +53,7 @@ export default function ProcessBreadcrumb({
<main style={{ padding: '1rem 0' }}>
<Breadcrumb>
<Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
Home
Process Groups
</Breadcrumb.Item>
{processGroupBreadcrumb}
{processModelBreadcrumb}

2
src/components/SubNavigation.tsx
View File

@ -31,5 +31,5 @@ export default function SubNavigation() {
</Nav>
);
}
return <></>;
return null;
}

8
src/index.css
View File

@ -50,3 +50,11 @@ span.bjs-crumb {
width:90vw;
margin:auto;
}
.breadcrumb {
font-size: 1.5em;
}
.breadcrumb-item.active {
color: black;
}

3
src/routes/ProcessGroupShow.tsx
View File

@ -24,7 +24,7 @@ export default function ProcessGroupShow() {
const processResult = (result: any) => {
setProcessGroup(result);
HttpService.makeCallToBackend({
path: `/process-groups/${params.process_group_id}/process-models?per_page=${perPage}&page=${page}`,
path: `/process-models?process_group_identifier=${params.process_group_id}&per_page=${perPage}&page=${page}`,
successCallback: setProcessModelFromResult,
});
};
@ -73,7 +73,6 @@ export default function ProcessGroupShow() {
return (
<main style={{ padding: '1rem 0' }}>
<ProcessBreadcrumb processGroupId={(processGroup as any).id} />
<h2>Process Group: {(processGroup as any).id}</h2>
<ul>
<Stack direction="horizontal" gap={3}>
<Button

1
src/routes/ProcessGroups.tsx
View File

@ -75,7 +75,6 @@ export default function ProcessGroups() {
return (
<main style={{ padding: '1rem 0' }}>
<ProcessBreadcrumb />
<h2>Process Groups</h2>
<Button href="/admin/process-groups/new">Add a process group</Button>
<br />
<br />

130
src/routes/ProcessInstanceList.tsx
View File

@ -6,7 +6,14 @@ import {
useSearchParams,
} from 'react-router-dom';
import { Button, Table, Stack, Dropdown, Form } from 'react-bootstrap';
import {
Button,
Table,
Stack,
Dropdown,
Form,
InputGroup,
} from 'react-bootstrap';
// @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'reac... Remove this comment to see the full error message
import DatePicker from 'react-datepicker';
import { Typeahead } from 'react-bootstrap-typeahead';
@ -45,8 +52,8 @@ export default function ProcessInstanceList() {
const setErrorMessage = (useContext as any)(ErrorContext)[1];
const [processStatus, setProcessStatus] = useState(PROCESS_STATUSES[0]);
const [processGroupIdentifier, setProcessGroupIdentifier] = useState([]);
const [processModelIdentifier, setProcessModelIdentifier] = useState(null);
const [processModeleSelectionOptions, setProcessModelSelectionOptions] =
useState([]);
const [processModelSelection, setProcessModelSelection] = useState<Option[]>(
[]
);
@ -62,21 +69,19 @@ export default function ProcessInstanceList() {
const parametersToGetFromSearchParams = useMemo(() => {
return {
process_group_identifier: setProcessGroupIdentifier,
process_model_identifier: setProcessModelIdentifier,
process_group_identifier: null,
process_model_identifier: null,
process_status: setProcessStatus,
};
}, [setProcessStatus, setProcessGroupIdentifier, setProcessModelIdentifier]);
}, [setProcessStatus]);
// eslint-disable-next-line sonarjs/cognitive-complexity
useEffect(() => {
function setProcessInstancesFromResult(result: any) {
const processInstancesFromApi = result.results;
setProcessInstances(processInstancesFromApi);
setPagination(result.pagination);
}
function processResultForProcessModels(result: any) {
getProcessInstances();
}
function getProcessInstances() {
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
let queryParamString = `per_page=${perPage}&page=${page}`;
@ -95,9 +100,12 @@ export default function ProcessInstanceList() {
(paramName: string) => {
if (searchParams.get(paramName)) {
// @ts-expect-error TS(7053) FIXME:
const functionToCall = parametersToAlwaysFilterBy[paramName];
const functionToCall = parametersToGetFromSearchParams[paramName];
queryParamString += `&${paramName}=${searchParams.get(paramName)}`;
functionToCall(searchParams.get(paramName) || '');
if (functionToCall !== null) {
functionToCall(searchParams.get(paramName) || '');
}
}
}
);
@ -106,9 +114,30 @@ export default function ProcessInstanceList() {
successCallback: setProcessInstancesFromResult,
});
}
function processResultForProcessModels(result: any) {
let processModelFullIdentifier = '';
if (
searchParams.get('process_model_identifier') &&
searchParams.get('process_group_identifier')
) {
processModelFullIdentifier = `${searchParams.get(
'process_group_identifier'
)}/${searchParams.get('process_model_identifier')}`;
}
const selectionArray = result.results.map((item: any) => {
const label = `${item.process_group_id}/${item.id}`;
Object.assign(item, { label });
if (label === processModelFullIdentifier) {
setProcessModelSelection([item]);
}
return item;
});
setProcessModelSelectionOptions(selectionArray);
getProcessInstances();
}
HttpService.makeCallToBackend({
path: `/process-models`,
path: `/process-models?per_page=1000`,
successCallback: processResultForProcessModels,
});
}, [
@ -174,6 +203,10 @@ export default function ProcessInstanceList() {
if (processStatus && processStatus !== 'all') {
queryParamString += `&process_status=${processStatus}`;
}
if (processModelSelection.length > 0) {
const currentProcessModel: any = processModelSelection[0];
queryParamString += `&process_group_identifier=${currentProcessModel.process_group_id}&process_model_identifier=${currentProcessModel.id}`;
}
setErrorMessage('');
navigate(`/admin/process-instances?${queryParamString}`);
@ -215,16 +248,34 @@ export default function ProcessInstanceList() {
Object.keys(parametersToGetFromSearchParams).forEach(
(paramName: string) => {
if (searchParams.get(paramName)) {
// @ts-expect-error TS(7053) FIXME:
const functionToCall = parametersToAlwaysFilterBy[paramName];
queryParamString += `&${paramName}=${searchParams.get(paramName)}`;
functionToCall(searchParams.get(paramName) || '');
}
}
);
return queryParamString;
};
const processModelSearch = () => {
return (
<Form.Group>
<InputGroup>
<InputGroup.Text className="text-nowrap">
Process Model:{' '}
</InputGroup.Text>
<Typeahead
style={{ width: 500 }}
id="process-model-selection"
labelKey="label"
onChange={setProcessModelSelection}
options={processModeleSelectionOptions}
placeholder="Choose a process model..."
selected={processModelSelection}
/>
</InputGroup>
</Form.Group>
);
};
const filterOptions = () => {
const processStatusesRows = PROCESS_STATUSES.map((processStatusOption) => {
if (processStatusOption === processStatus) {
@ -248,8 +299,11 @@ export default function ProcessInstanceList() {
<div className="container">
<div className="row">
<div className="col">
{processModelSearch()}
<form onSubmit={handleFilter}>
<Stack direction="horizontal" gap={3}>
{processModelSearch()}
</Stack>
<br />
<Stack direction="horizontal" gap={3}>
{dateComponent(
'Start Range: ',
@ -290,48 +344,6 @@ export default function ProcessInstanceList() {
);
};
const processModelSearch = () => {
const options = [
{
label: 'Alabama',
population: 4780127,
capital: 'Montgomery',
region: 'South',
},
{
label: 'Alaska',
population: 710249,
capital: 'Juneau',
region: 'West',
},
{
label: 'Arizona',
population: 6392307,
capital: 'Phoenix',
region: 'West',
},
{
label: 'Arkansas',
population: 2915958,
capital: 'Little Rock',
region: 'South',
},
];
return (
<Form.Group>
<Form.Label>Single Selection</Form.Label>
<Typeahead
id="basic-typeahead-single"
labelKey="label"
onChange={setProcessModelSelection}
options={options}
placeholder="Choose a state..."
selected={processModelSelection}
/>
</Form.Group>
);
};
const buildTable = () => {
const rows = processInstances.map((row: any) => {
const formattedStartDate =
@ -394,7 +406,7 @@ export default function ProcessInstanceList() {
const { page, perPage } = getPageInfoFromSearchParams(searchParams);
return (
<main style={{ padding: '1rem 0' }}>
<h2>Process Instances for {params.process_model_id}</h2>
<h2>Process Instances</h2>
{filterOptions()}
<PaginationForTable
page={page}

8
src/routes/ProcessModelShow.tsx
View File

@ -130,9 +130,9 @@ export default function ProcessModelShow() {
<ul>
<li>
<Link
to={`/admin/process-models/${
to={`/admin/process-instances?process_group_identifier=${
(processModel as any).process_group_id
}/${(processModel as any).id}/process-instances`}
}&process_model_identifier=${(processModel as any).id}`}
data-qa="process-instance-list-link"
>
List
@ -201,10 +201,6 @@ export default function ProcessModelShow() {
processGroupId={(processModel as any).process_group_id}
processModelId={(processModel as any).id}
/>
<Stack direction="horizontal" gap={3}>
<h2>Process Model: {(processModel as any).display_name}</h2>
<span>({(processModel as any).id})</span>
</Stack>
{processInstanceResultTag}
<FileInput
processModelId={(processModel as any).id}