diff --git a/spiffworkflow-frontend/package-lock.json b/spiffworkflow-frontend/package-lock.json index faba49ba7..a72fc4069 100644 --- a/spiffworkflow-frontend/package-lock.json +++ b/spiffworkflow-frontend/package-lock.json @@ -11,6 +11,7 @@ "@babel/core": "^7.18.10", "@babel/plugin-transform-react-jsx": "^7.18.6", "@babel/preset-react": "^7.18.6", + "@carbon/icons-react": "^11.10.0", "@carbon/react": "^1.16.0", "@carbon/styles": "^1.16.0", "@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0", diff --git a/spiffworkflow-frontend/package.json b/spiffworkflow-frontend/package.json index c3364a123..c9127d7c1 100644 --- a/spiffworkflow-frontend/package.json +++ b/spiffworkflow-frontend/package.json @@ -6,6 +6,7 @@ "@babel/core": "^7.18.10", "@babel/plugin-transform-react-jsx": "^7.18.6", "@babel/preset-react": "^7.18.6", + "@carbon/icons-react": "^11.10.0", "@carbon/react": "^1.16.0", "@carbon/styles": "^1.16.0", "@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0", diff --git a/spiffworkflow-frontend/src/routes/HomePage.tsx b/spiffworkflow-frontend/src/routes/HomePage.tsx index a66ded5c7..2cfc00788 100644 --- a/spiffworkflow-frontend/src/routes/HomePage.tsx +++ b/spiffworkflow-frontend/src/routes/HomePage.tsx @@ -5,14 +5,14 @@ import { Link, useSearchParams } from 'react-router-dom'; import PaginationForTable from '../components/PaginationForTable'; import { getPageInfoFromSearchParams } from '../helpers'; import HttpService from '../services/HttpService'; -import { RecentProcessModel } from '../interfaces'; +import { PaginationObject, RecentProcessModel } from '../interfaces'; const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5; export default function HomePage() { const [searchParams] = useSearchParams(); const [tasks, setTasks] = useState([]); - const [pagination, setPagination] = useState(null); + const [pagination, setPagination] = useState(null); useEffect(() => { const { page, perPage } = getPageInfoFromSearchParams( @@ -126,10 +126,10 @@ export default function HomePage() { ); }; - const relevantProcessModelSection = - recentProcessModels.length > 0 && buildRecentProcessModelSection(); - - if (pagination) { + const tasksWaitingForMeComponent = () => { + if (pagination && pagination.total < 1) { + return null; + } const { page, perPage } = getPageInfoFromSearchParams( searchParams, PER_PAGE_FOR_TASKS_ON_HOME_PAGE @@ -145,6 +145,17 @@ export default function HomePage() { tableToDisplay={buildTable()} path="/tasks" /> + + ); + }; + + const relevantProcessModelSection = + recentProcessModels.length > 0 && buildRecentProcessModelSection(); + + if (pagination) { + return ( + <> + {tasksWaitingForMeComponent()} {relevantProcessModelSection} ); diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx index 63ee7a2fa..5be2c3c7e 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx @@ -6,6 +6,8 @@ import { useSearchParams, } from 'react-router-dom'; +// @ts-ignore +import { Filter } from '@carbon/icons-react'; import { Button, ButtonSet, @@ -57,6 +59,7 @@ export default function ProcessInstanceList() { const [startTo, setStartTo] = useState(''); const [endFrom, setEndFrom] = useState(''); const [endTo, setEndTo] = useState(''); + const [showFilterOptions, setShowFilterOptions] = useState(false); const setErrorMessage = (useContext as any)(ErrorContext)[1]; @@ -352,7 +355,9 @@ export default function ProcessInstanceList() { }; const filterOptions = () => { - const { page, perPage } = getPageInfoFromSearchParams(searchParams); + if (!showFilterOptions) { + return null; + } return ( <> @@ -394,18 +399,6 @@ export default function ProcessInstanceList() { - - - - - ); }; @@ -480,12 +473,42 @@ export default function ProcessInstanceList() { ); }; + const toggleShowFilterOptions = () => { + setShowFilterOptions(!showFilterOptions); + }; + if (pagination) { const { page, perPage } = getPageInfoFromSearchParams(searchParams); return ( <> {processInstanceTitleElement()} + + + +