From 41ddef1071fa4886a67037166232002777a24094 Mon Sep 17 00:00:00 2001 From: jasquat Date: Tue, 1 Nov 2022 16:26:24 -0400 Subject: [PATCH] process instance list page is mostly set up now w/ burnettk --- spiffworkflow-frontend/package-lock.json | 1 + spiffworkflow-frontend/package.json | 1 + spiffworkflow-frontend/src/App.tsx | 28 +- .../src/components/NavigationBar.tsx | 41 +-- .../src/components/PaginationForTable.tsx | 168 ++--------- spiffworkflow-frontend/src/helpers.tsx | 8 + spiffworkflow-frontend/src/index.css | 15 + spiffworkflow-frontend/src/index.scss | 3 +- spiffworkflow-frontend/src/interfaces.ts | 6 + .../src/routes/HomePage.tsx | 2 +- .../src/routes/ProcessInstanceList.tsx | 265 ++++++++++++------ 11 files changed, 263 insertions(+), 275 deletions(-) diff --git a/spiffworkflow-frontend/package-lock.json b/spiffworkflow-frontend/package-lock.json index eb5462b96..faba49ba7 100644 --- a/spiffworkflow-frontend/package-lock.json +++ b/spiffworkflow-frontend/package-lock.json @@ -12,6 +12,7 @@ "@babel/plugin-transform-react-jsx": "^7.18.6", "@babel/preset-react": "^7.18.6", "@carbon/react": "^1.16.0", + "@carbon/styles": "^1.16.0", "@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0", "@monaco-editor/react": "^4.4.5", "@rjsf/core": "^4.2.0", diff --git a/spiffworkflow-frontend/package.json b/spiffworkflow-frontend/package.json index edb914b12..c3364a123 100644 --- a/spiffworkflow-frontend/package.json +++ b/spiffworkflow-frontend/package.json @@ -7,6 +7,7 @@ "@babel/plugin-transform-react-jsx": "^7.18.6", "@babel/preset-react": "^7.18.6", "@carbon/react": "^1.16.0", + "@carbon/styles": "^1.16.0", "@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0", "@monaco-editor/react": "^4.4.5", "@rjsf/core": "^4.2.0", diff --git a/spiffworkflow-frontend/src/App.tsx b/spiffworkflow-frontend/src/App.tsx index 4a078c21e..84b994838 100644 --- a/spiffworkflow-frontend/src/App.tsx +++ b/spiffworkflow-frontend/src/App.tsx @@ -54,21 +54,19 @@ export default function App() { {errorTag} -
- - } /> - } /> - } /> - } - /> - } - /> - -
+ + } /> + } /> + } /> + } + /> + } + /> + diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index 606a21184..863d4f26c 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx @@ -2,14 +2,12 @@ import { Header, Theme, HeaderName, - HeaderContainer, HeaderNavigation, HeaderMenuItem, HeaderMenu, // @ts-ignore } from '@carbon/react'; import { useEffect, useState } from 'react'; -import { Navbar, Nav } from 'react-bootstrap'; import { useLocation } from 'react-router-dom'; // @ts-expect-error TS(2307) FIXME: Cannot find module '../logo.svg' or its correspond... Remove this comment to see the full error message import logo from '../logo.svg'; @@ -89,44 +87,9 @@ export default function NavigationBar() { return activeKey === menuItemPath; }; - // return ( - // - // - // - // - // logo - // - // - // - // - // - // {loginLink()} - // {logoutLink()} - // - // - // - // ); - - // - //
- // - // [Platform] - // - // - // Link 1 - // Link 2 - // Link 3 - // - // Sub-link 1 - // Sub-link 2 - // Sub-link 3 - // - // - //
- // if (activeKey) { return ( - +
@@ -151,7 +114,7 @@ export default function NavigationBar() {
- +
); } return null; diff --git a/spiffworkflow-frontend/src/components/PaginationForTable.tsx b/spiffworkflow-frontend/src/components/PaginationForTable.tsx index c1cde1ab8..44edff636 100644 --- a/spiffworkflow-frontend/src/components/PaginationForTable.tsx +++ b/spiffworkflow-frontend/src/components/PaginationForTable.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; // @ts-ignore -import { Dropdown, Stack } from '@carbon/react'; +import { Dropdown, Stack, Pagination } from '@carbon/react'; +import { PaginationObject } from '../interfaces'; export const DEFAULT_PER_PAGE = 50; export const DEFAULT_PAGE = 1; @@ -11,9 +12,7 @@ type OwnProps = { page: number; perPage: number; perPageOptions?: number[]; - pagination: { - [key: string]: number; - }; + pagination: PaginationObject | null; tableToDisplay: any; queryParamString?: string; path: string; @@ -29,141 +28,28 @@ export default function PaginationForTable({ path, }: OwnProps) { const PER_PAGE_OPTIONS = [2, 10, 50, 100]; + const navigate = useNavigate(); - // const buildPerPageDropdown = () => { - // const perPageDropdownRows = (perPageOptions || PER_PAGE_OPTIONS).map( - // (perPageOption) => { - // if (perPageOption === perPage) { - // return ( - // - // {perPageOption} - // - // ); - // } - // return ( - // - // {perPageOption} - // - // ); - // } - // ); - // return ( - // - // - // - // Number to show: {perPage} - // - // - // {perPageDropdownRows} - // - // - // ); - // }; - // - // const buildPaginationNav = () => { - // let previousPageTag = null; - // if (page === 1) { - // previousPageTag = ( - //
  • - // - // « - // - //
    • - // ); - // } else { - // previousPageTag = ( - //
  • - // - // « - // - //
    • - // ); - // } - // - // let nextPageTag = null; - // if (page >= pagination.pages) { - // nextPageTag = ( - //
  • - // - // » - // - //
    • - // ); - // } else { - // nextPageTag = ( - //
  • - // - // » - // - //
    • - // ); - // } - // - // let startingNumber = (page - 1) * perPage + 1; - // let endingNumber = page * perPage; - // if (endingNumber > pagination.total) { - // endingNumber = pagination.total; - // } - // if (startingNumber > pagination.total) { - // startingNumber = pagination.total; - // } - // - // return ( - // - //

    - // {startingNumber}-{endingNumber} of{' '} - // {pagination.total} - //

    - // - //     - // ); - // }; - // - // return ( - //
    - // {buildPaginationNav()} - // {tableToDisplay} - // {buildPerPageDropdown()} - //
    - // ); - return null; + const updateRows = (args: any) => { + const newPage = args.page; + const { pageSize } = args; + navigate(`${path}?page=${newPage}&per_page=${pageSize}${queryParamString}`); + }; + + return ( + <> + {tableToDisplay} + + + ); } diff --git a/spiffworkflow-frontend/src/helpers.tsx b/spiffworkflow-frontend/src/helpers.tsx index 59922acff..e9bb100ae 100644 --- a/spiffworkflow-frontend/src/helpers.tsx +++ b/spiffworkflow-frontend/src/helpers.tsx @@ -90,3 +90,11 @@ export const getProcessModelFullIdentifierFromSearchParams = ( } return processModelFullIdentifier; }; + +// https://stackoverflow.com/a/71352046/6090676 +export const truncateString = (text: string, len: number) => { + if (text.length > len && text.length > 0) { + return `${text.split(' ').slice(0, len).join(' ')} ...`; + } + return text; +}; diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index 32a712d5a..763200df4 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/spiffworkflow-frontend/src/index.css @@ -26,6 +26,10 @@ span.bjs-crumb { margin-bottom: 1em; } +.spiffworkflow-header-container { + margin-bottom: 2em; +} + .active-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) { fill: yellow !important; @@ -44,6 +48,17 @@ span.bjs-crumb { margin:auto; } +.cds--btn.button-white-background { + color: #393939; + background: #FFFFFF; + background-blend-mode: multiply; + border: 1px solid #393939; +} + +.with-bottom-margin { + margin-bottom: 1em; +} + .diagram-viewer-canvas { border:1px solid #000000; height:70vh; diff --git a/spiffworkflow-frontend/src/index.scss b/spiffworkflow-frontend/src/index.scss index 61228e3b4..c96716516 100644 --- a/spiffworkflow-frontend/src/index.scss +++ b/spiffworkflow-frontend/src/index.scss @@ -1,2 +1,3 @@ @use '@carbon/react'; - +@use '@carbon/styles'; +// @include grid.flex-grid(); diff --git a/spiffworkflow-frontend/src/interfaces.ts b/spiffworkflow-frontend/src/interfaces.ts index 8e153c80b..16e1491b8 100644 --- a/spiffworkflow-frontend/src/interfaces.ts +++ b/spiffworkflow-frontend/src/interfaces.ts @@ -41,3 +41,9 @@ export interface AuthenticationItem { id: string; parameters: AuthenticationParam[]; } + +export interface PaginationObject { + count: number; + total: number; + pages: number; +} diff --git a/spiffworkflow-frontend/src/routes/HomePage.tsx b/spiffworkflow-frontend/src/routes/HomePage.tsx index da39e205d..a66ded5c7 100644 --- a/spiffworkflow-frontend/src/routes/HomePage.tsx +++ b/spiffworkflow-frontend/src/routes/HomePage.tsx @@ -54,7 +54,7 @@ export default function HomePage() { data-qa="process-instance-show-link" to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}/process-instances/${rowToUse.process_instance_id}`} > - View + View {rowToUse.process_instance_id} (null); const oneHourInSeconds = 3600; const oneMonthInSeconds = oneHourInSeconds * 24 * 30; @@ -47,13 +61,17 @@ export default function ProcessInstanceList() { const setErrorMessage = (useContext as any)(ErrorContext)[1]; - const [processStatuseSelectionOptions, setProcessStatusSelectionOptions] = + const [processStatusSelectionOptions, setProcessStatusSelectionOptions] = useState([]); const [processStatusSelection, setProcessStatusSelection] = useState< Option[] >([]); - const [processModeleSelectionOptions, setProcessModelSelectionOptions] = - useState([]); + const [processModelAvailableItems, setProcessModelAvailableItems] = useState< + ProcessModel[] + >([]); + const [processModelFilteredItems, setProcessModelFilteredItems] = useState< + ProcessModel[] + >([]); const [processModelSelection, setProcessModelSelection] = useState( [] ); @@ -124,7 +142,8 @@ export default function ProcessInstanceList() { } return item; }); - setProcessModelSelectionOptions(selectionArray); + setProcessModelAvailableItems(selectionArray); + setProcessModelFilteredItems(selectionArray); const processStatusSelectedArray: Option[] = []; const processStatusSelectionArray = PROCESS_STATUSES.map( @@ -287,7 +306,7 @@ export default function ProcessInstanceList() { id="process-model-selection" labelKey="label" onChange={setProcessModelSelection} - options={processModeleSelectionOptions} + options={processModelAvailableItems} placeholder="Choose a process model..." selected={processModelSelection} /> @@ -297,74 +316,172 @@ export default function ProcessInstanceList() { }; const processStatusSearch = () => { + // return ( + // + // + // + // Process Status:{' '} + // + // + // + // + // ); return ( - - - - Process Status:{' '} - - - - + { + return item.label || ''; + }} + selectionFeedback="top-after-reopen" + /> + ); + }; + const shouldFilterProcessModel = (options: any) => { + const processModel: ProcessModel = options.item; + const { inputValue } = options; + return ( + processModel.process_group_id.match(inputValue) || + processModel.id.match(inputValue) || + processModel.display_name.match(inputValue) ); }; const filterOptions = () => { + const { page, perPage } = getPageInfoFromSearchParams(searchParams); + // return ( + //
    + //
    + //
    + //
    + // + // {processModelSearch()} + // + //
    + // + // {dateComponent( + // 'Start Range: ', + // 'start-from', + // startFrom, + // setStartFrom + // )} + // {dateComponent('-', 'start-till', startTill, setStartTill)} + // + //
    + // + // {dateComponent( + // 'End Range: \u00A0\u00A0', + // 'end-from', + // endFrom, + // setEndFrom + // )} + // {dateComponent('-', 'end-till', endTill, setEndTill)} + // + //
    + // + // {processStatusSearch()} + // + // + // + // + //
    + //
    + //
    + //
    + //
    + // ); + // return ( + // + // + // Hello1 + // + // + // Hello2 + // + // + // ); + // return ( + // + // + // + // Span 25% + // + // + // Span 25% + // + // + // Span 25% + // + // + // Span 25% + // + // + // + // ); return ( -
    -
    -
    -
    - - {processModelSearch()} - -
    - - {dateComponent( - 'Start Range: ', - 'start-from', - startFrom, - setStartFrom - )} - {dateComponent('-', 'start-till', startTill, setStartTill)} - -
    - - {dateComponent( - 'End Range: \u00A0\u00A0', - 'end-from', - endFrom, - setEndFrom - )} - {dateComponent('-', 'end-till', endTill, setEndTill)} - -
    - - {processStatusSearch()} - - - - -
    -
    -
    -
    -
    + <> + + + { + if (processModel) { + return `${processModel.process_group_id}/${ + processModel.id + } (${truncateString(processModel.display_name, 20)})`; + } + return null; + }} + shouldFilterItem={shouldFilterProcessModel} + placeholder="Process Model" + titleText="Process model" + /> + + {processStatusSearch()} + + + + + + + + + + + + + + + ); }; @@ -444,14 +561,6 @@ export default function ProcessInstanceList() { <> {processInstanceTitleElement()} {filterOptions()} - ); }