From d25ac513960db4e34db4b0842444b20f9d110b9b Mon Sep 17 00:00:00 2001 From: jasquat Date: Wed, 2 Nov 2022 17:16:41 -0400 Subject: [PATCH] added search bar on process groups page w/ burnettk --- spiffworkflow-frontend/src/App.tsx | 2 - .../src/components/NavigationBar.tsx | 2 - .../src/components/PaginationForTable.tsx | 5 +- .../src/components/ProcessModelSearch.tsx | 45 ++++++++++++++++ spiffworkflow-frontend/src/index.css | 4 +- spiffworkflow-frontend/src/interfaces.ts | 4 ++ .../src/routes/ProcessGroupList.tsx | 40 +++++---------- .../src/routes/ProcessInstanceList.tsx | 51 ++++--------------- 8 files changed, 75 insertions(+), 78 deletions(-) create mode 100644 spiffworkflow-frontend/src/components/ProcessModelSearch.tsx diff --git a/spiffworkflow-frontend/src/App.tsx b/spiffworkflow-frontend/src/App.tsx index 84b99483..186ac513 100644 --- a/spiffworkflow-frontend/src/App.tsx +++ b/spiffworkflow-frontend/src/App.tsx @@ -10,7 +10,6 @@ import HomePage from './routes/HomePage'; import TaskShow from './routes/TaskShow'; import ErrorBoundary from './components/ErrorBoundary'; import AdminRoutes from './routes/AdminRoutes'; -import SubNavigation from './components/SubNavigation'; import { ErrorForDisplay } from './interfaces'; export default function App() { @@ -46,7 +45,6 @@ export default function App() { ); } - // return ( diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index cb3b5271..a51ee779 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx @@ -1,11 +1,9 @@ import { Header, Theme, - Button, HeaderName, HeaderNavigation, HeaderMenuItem, - HeaderMenu, HeaderGlobalAction, HeaderGlobalBar, // @ts-ignore diff --git a/spiffworkflow-frontend/src/components/PaginationForTable.tsx b/spiffworkflow-frontend/src/components/PaginationForTable.tsx index 44edff63..d9d94b84 100644 --- a/spiffworkflow-frontend/src/components/PaginationForTable.tsx +++ b/spiffworkflow-frontend/src/components/PaginationForTable.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import { Link, useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; // @ts-ignore -import { Dropdown, Stack, Pagination } from '@carbon/react'; +import { Pagination } from '@carbon/react'; import { PaginationObject } from '../interfaces'; export const DEFAULT_PER_PAGE = 50; diff --git a/spiffworkflow-frontend/src/components/ProcessModelSearch.tsx b/spiffworkflow-frontend/src/components/ProcessModelSearch.tsx new file mode 100644 index 00000000..679831a5 --- /dev/null +++ b/spiffworkflow-frontend/src/components/ProcessModelSearch.tsx @@ -0,0 +1,45 @@ +import { + ComboBox, + // @ts-ignore +} from '@carbon/react'; +import { truncateString } from '../helpers'; +import { ProcessModel } from '../interfaces'; + +type OwnProps = { + onChange: (..._args: any[]) => any; + processModels: ProcessModel[]; + selectedItem?: ProcessModel | null; +}; + +export default function ProcessModelSearch({ + processModels, + selectedItem, + onChange, +}: OwnProps) { + const shouldFilterProcessModel = (options: any) => { + const processModel: ProcessModel = options.item; + const { inputValue } = options; + return `${processModel.process_group_id}/${processModel.id} (${processModel.display_name})`.includes( + inputValue + ); + }; + return ( + { + if (processModel) { + return `${processModel.process_group_id}/${ + processModel.id + } (${truncateString(processModel.display_name, 20)})`; + } + return null; + }} + shouldFilterItem={shouldFilterProcessModel} + placeholder="Choose a process model" + titleText="Process model" + selectedItem={selectedItem} + /> + ); +} diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index 763200df..c51398c4 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/spiffworkflow-frontend/src/index.css @@ -20,8 +20,8 @@ span.bjs-crumb { } .app-logo { - height: 90%; - width: 90%; + height: 85%; + width: 85%; margin-top: 1em; margin-bottom: 1em; } diff --git a/spiffworkflow-frontend/src/interfaces.ts b/spiffworkflow-frontend/src/interfaces.ts index 16e1491b..08c8e4fa 100644 --- a/spiffworkflow-frontend/src/interfaces.ts +++ b/spiffworkflow-frontend/src/interfaces.ts @@ -47,3 +47,7 @@ export interface PaginationObject { total: number; pages: number; } + +export interface CarbonComboBoxSelection { + selectedItem: ProcessModel; +} diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx index 29dc3882..f9881def 100644 --- a/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessGroupList.tsx @@ -9,7 +9,8 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import PaginationForTable from '../components/PaginationForTable'; import HttpService from '../services/HttpService'; import { getPageInfoFromSearchParams } from '../helpers'; -import { ProcessModel } from '../interfaces'; +import { CarbonComboBoxSelection, ProcessModel } from '../interfaces'; +import ProcessModelSearch from '../components/ProcessModelSearch'; // Example process group json // {'process_group_id': 'sure', 'display_name': 'Test Workflows', 'id': 'test_process_group'} @@ -19,8 +20,9 @@ export default function ProcessGroupList() { const [processGroups, setProcessGroups] = useState([]); const [pagination, setPagination] = useState(null); - const [processModeleSelectionOptions, setProcessModelSelectionOptions] = - useState([]); + const [processModelAvailableItems, setProcessModelAvailableItems] = useState( + [] + ); useEffect(() => { const setProcessGroupsFromResult = (result: any) => { @@ -33,7 +35,7 @@ export default function ProcessGroupList() { Object.assign(item, { label }); return item; }); - setProcessModelSelectionOptions(selectionArray); + setProcessModelAvailableItems(selectionArray); }; const { page, perPage } = getPageInfoFromSearchParams(searchParams); @@ -99,35 +101,17 @@ export default function ProcessGroupList() { }; const processModelSearchArea = () => { - const processModelSearchOnChange = (selected: Option[]) => { - const processModel = selected[0] as ProcessModel; + const processModelSearchOnChange = (selection: CarbonComboBoxSelection) => { + const processModel = selection.selectedItem; navigate( `/admin/process-models/${processModel.process_group_id}/${processModel.id}` ); }; return ( -
-

Search

- - - - Process Model:{' '} - - - - -
+ ); }; diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx index 5be2c3c7..10ac2c0b 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx @@ -14,25 +14,17 @@ import { DatePicker, DatePickerInput, Table, - Stack, - Form, - ComboBox, Grid, Column, - FlexGrid, - Row, MultiSelect, // @ts-ignore } from '@carbon/react'; -import { InputGroup } from 'react-bootstrap'; -import { Typeahead } from 'react-bootstrap-typeahead'; import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config'; import { convertDateStringToSeconds, convertSecondsToFormattedDate, getPageInfoFromSearchParams, getProcessModelFullIdentifierFromSearchParams, - truncateString, } from '../helpers'; import PaginationForTable from '../components/PaginationForTable'; @@ -44,6 +36,7 @@ import HttpService from '../services/HttpService'; import 'react-bootstrap-typeahead/css/Typeahead.css'; import 'react-bootstrap-typeahead/css/Typeahead.bs5.css'; import { PaginationObject, ProcessModel } from '../interfaces'; +import ProcessModelSearch from '../components/ProcessModelSearch'; export default function ProcessInstanceList() { const params = useParams(); @@ -294,38 +287,6 @@ export default function ProcessInstanceList() { return queryParamString; }; - const shouldFilterProcessModel = (options: any) => { - const processModel: ProcessModel = options.item; - const { inputValue } = options; - return `${processModel.process_group_id}/${processModel.id} (${processModel.display_name})`.includes( - inputValue - ); - }; - - const processModelSearch = () => { - return ( - - setProcessModelSelection(selection.selectedItem) - } - id="process-model-select" - items={processModelAvailableItems} - itemToString={(processModel: ProcessModel) => { - if (processModel) { - return `${processModel.process_group_id}/${ - processModel.id - } (${truncateString(processModel.display_name, 20)})`; - } - return null; - }} - shouldFilterItem={shouldFilterProcessModel} - placeholder="Choose a process model" - titleText="Process model" - selectedItem={processModelSelection} - /> - ); - }; - const processStatusSearch = () => { return ( - {processModelSearch()} + + + setProcessModelSelection(selection.selectedItem) + } + processModels={processModelAvailableItems} + selectedItem={processModelSelection} + /> + {processStatusSearch()}