generated from bcgov/quickstart-openshift
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat: ORV2-1500 Company Search Results (first pass) (#1084)
- Loading branch information
Showing
7 changed files
with
223 additions
and
6 deletions.
There are no files selected for viewing
File renamed without changes.
148 changes: 148 additions & 0 deletions
148
frontend/src/features/idir/search/components/IDIRCompanySearchResults.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| import { useQuery } from "@tanstack/react-query"; | ||
| import { memo, useCallback, useContext, useMemo, useState } from "react"; | ||
|
|
||
| import { | ||
| MRT_ColumnDef, | ||
| MRT_PaginationState, | ||
| MRT_Row, | ||
| MaterialReactTable, | ||
| useMaterialReactTable, | ||
| } from "material-react-table"; | ||
|
|
||
| import OnRouteBCContext from "../../../../common/authentication/OnRouteBCContext"; | ||
| import { Optional } from "../../../../common/types/common"; | ||
| import { USER_AUTH_GROUP } from "../../../../common/authentication/types"; | ||
| import { getDataBySearch } from "../api/idirSearch"; | ||
| import { SearchFields } from "../types/types"; | ||
| import { | ||
| defaultTableInitialStateOptions, | ||
| defaultTableOptions, | ||
| defaultTableStateOptions, | ||
| } from "../../../../common/helpers/tableHelper"; | ||
| import "./IDIRCompanySearchResults.scss"; | ||
| import { CompanyProfile } from "../../../manageProfile/types/manageProfile"; | ||
| import { CompanySearchResultColumnDef } from "../table/CompanySearchResultColumnDef"; | ||
|
|
||
| /** | ||
| * Function to decide whether to show row actions icon or not. | ||
| * @param userAuthGroup The auth group the user belongs to. | ||
| * @returns boolean | ||
| */ | ||
| const shouldShowRowActions = (userAuthGroup: Optional<string>): boolean => { | ||
| if (!userAuthGroup) return false; | ||
| // Check if the user has PPC role to confirm | ||
| const allowableAuthGroups = [ | ||
| USER_AUTH_GROUP.PPC_CLERK, | ||
| USER_AUTH_GROUP.ENFORCEMENT_OFFICER, | ||
| USER_AUTH_GROUP.SYSTEM_ADMINISTRATOR, | ||
| ] as string[]; | ||
| return allowableAuthGroups.includes(userAuthGroup); | ||
| }; | ||
|
|
||
| /* | ||
| * | ||
| * The search results component uses Material React Table (MRT) | ||
| * For detailed documentation, see here: | ||
| * https://www.material-react-table.com/docs/getting-started/usage | ||
| * | ||
| * | ||
| */ | ||
| export const IDIRCompanySearchResults = memo( | ||
| ({ | ||
| searchParams, | ||
| }: { | ||
| /** | ||
| * The search parameters entered by the user. | ||
| */ | ||
| searchParams: SearchFields; | ||
| }) => { | ||
| const { searchValue, searchByFilter, searchEntity } = searchParams; | ||
| const { idirUserDetails } = useContext(OnRouteBCContext); | ||
| const [isActiveRecordsOnly, setIsActiveRecordsOnly] = | ||
| useState<boolean>(false); | ||
| const [pagination, setPagination] = useState<MRT_PaginationState>({ | ||
| pageIndex: 0, | ||
| pageSize: 10, | ||
| }); | ||
| // TODO: if data is [] AND current_user is PPC_ADMIN then (eventually) | ||
| // display the UX to allow the creation of a new Company Profile | ||
| const canCreateCompany = false; | ||
| const searchResultsQuery = useQuery( | ||
| [ | ||
| "search-entity", | ||
| searchValue, | ||
| searchByFilter, | ||
| searchEntity, | ||
| pagination.pageIndex, | ||
| pagination.pageSize, | ||
| ], | ||
| () => | ||
| getDataBySearch( | ||
| { | ||
| searchByFilter, | ||
| searchEntity, | ||
| searchValue, | ||
| }, | ||
| { page: pagination.pageIndex, take: pagination.pageSize }, | ||
| ), | ||
| { | ||
| retry: 1, // retry once. | ||
| enabled: true, | ||
| refetchOnWindowFocus: false, | ||
| keepPreviousData: true, | ||
| }, | ||
| ); | ||
|
|
||
| const { data, isLoading, isError } = searchResultsQuery; | ||
|
|
||
| // Column definitions for the table | ||
| const columns = useMemo<MRT_ColumnDef<CompanyProfile>[]>( | ||
| () => CompanySearchResultColumnDef, | ||
| [], | ||
| ); | ||
|
|
||
| const table = useMaterialReactTable({ | ||
| ...defaultTableOptions, | ||
| data: data?.items ?? [], | ||
| columns: columns, | ||
| initialState: { | ||
| ...defaultTableInitialStateOptions, | ||
| sorting: [], | ||
| }, | ||
| state: { | ||
| ...defaultTableStateOptions, | ||
| isLoading, | ||
| showAlertBanner: isError, | ||
| showProgressBars: isLoading, | ||
| pagination, | ||
| }, | ||
| autoResetPageIndex: false, | ||
| manualPagination: true, | ||
| rowCount: data?.meta?.totalItems ?? 0, | ||
| pageCount: data?.meta?.pageCount ?? 0, | ||
| onPaginationChange: setPagination, | ||
| enablePagination: true, | ||
| enableTopToolbar: true, | ||
| enableBottomToolbar: true, | ||
| enableRowSelection: false, | ||
| enableGlobalFilter: false, | ||
| renderToolbarInternalActions: () => ( | ||
| <div className="toolbar-internal"></div> | ||
| ), | ||
| muiToolbarAlertBannerProps: isError | ||
| ? { | ||
| color: "error", | ||
| children: "Error loading data", | ||
| } | ||
| : undefined, | ||
| }); | ||
|
|
||
| return ( | ||
| <div className="table-container idir-search-results"> | ||
| <MaterialReactTable table={table} /> | ||
| </div> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| IDIRCompanySearchResults.displayName = "SearchResults"; |
20 changes: 20 additions & 0 deletions
20
frontend/src/features/idir/search/components/IDIRPermitSearchResults.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| @use "../../../../common/components/table/Table"; | ||
|
|
||
| .idir-search-results { | ||
| &#{&} { | ||
| margin-top: 0; | ||
| padding-bottom: 12.5rem; | ||
| position: relative; | ||
|
|
||
| th:last-of-type, td:last-of-type { | ||
| padding: 0; | ||
| min-width: 0; | ||
| max-width: 3rem; | ||
| } | ||
| } | ||
|
|
||
| & &__row-actions { | ||
| padding: 0; | ||
| max-width: 3rem; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
frontend/src/features/idir/search/table/CompanySearchResultColumnDef.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { MRT_ColumnDef } from "material-react-table"; | ||
| import { | ||
| dateTimeStringSortingFn, | ||
| formatCellValuetoDatetime | ||
| } from "../../../../common/helpers/tableHelper"; | ||
| import { CompanyProfile } from "../../../manageProfile/types/manageProfile"; | ||
|
|
||
| /* | ||
| * | ||
| * The Columns Options are from Material React Table. | ||
| * For a list of options, see here: | ||
| * https://www.material-react-table.com/docs/api/column-options | ||
| * | ||
| */ | ||
| export const CompanySearchResultColumnDef: MRT_ColumnDef<CompanyProfile>[] = [ | ||
| { | ||
| accessorKey: "legalName", | ||
| header: "Company Name", | ||
| enableSorting: true, | ||
| sortingFn: "alphanumeric", | ||
| }, | ||
| { | ||
| accessorKey: "alternateName", | ||
| header: "Doing Business As (DBA)", | ||
| enableSorting: true, | ||
| sortingFn: "alphanumeric", | ||
| }, | ||
| { | ||
| accessorKey: "migratedClientHash", | ||
| header: "Client Number", | ||
| enableSorting: true, | ||
| sortingFn: "alphanumeric", | ||
| }, | ||
| { | ||
| accessorKey: "mailingAddress", | ||
| header: "Company Address", | ||
| enableSorting: true, | ||
| sortingFn: "alphanumeric", | ||
| }, | ||
| { | ||
| accessorKey: "primaryContact", | ||
| header: "Primary Contact", | ||
| enableSorting: true, | ||
| sortingFn: "alphanumeric", | ||
| }, | ||
| ]; |
File renamed without changes.