fix: ORV2-1371 Enable Search bar in Permit list (#916)

bcgov · Dec 19, 2023 · 3738abd · 3738abd
1 parent ca83008
commit 3738abd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/frontend/src/features/permits/components/permit-list/BasePermitList.tsx b/frontend/src/features/permits/components/permit-list/BasePermitList.tsx
@@ -3,8 +3,10 @@ import { useQuery } from "@tanstack/react-query";
 import { useCallback, useContext, useEffect, useState } from "react";
 
 import {
+  MRT_GlobalFilterTextField,
   MRT_PaginationState,
   MRT_Row,
+  MRT_TableInstance,
   MaterialReactTable,
   useMaterialReactTable,
 } from "material-react-table";
@@ -55,7 +57,6 @@ export const BasePermitList = ({
     ...defaultTableOptions,
     columns: PermitsColumnDefinition,
     data: data?.items ?? [],
-    enableTopToolbar: false,
     enableRowSelection: false,
     initialState: {
       ...defaultTableInitialStateOptions,
@@ -69,6 +70,20 @@ export const BasePermitList = ({
       isLoading: isInitialLoading || isLoading,
       pagination,
     },
+    renderTopToolbar: useCallback(
+      ({ table }: { table: MRT_TableInstance<Permit> }) => (
+        <Box
+          sx={{
+            display: "flex",
+            padding: "1.25em 0em",
+            backgroundColor: "white",
+          }}
+        >
+          <MRT_GlobalFilterTextField table={table} />
+        </Box>
+      ),
+      [],
+    ),
     autoResetPageIndex: false,
     manualPagination: true,
     rowCount: data?.meta?.totalItems ?? 0,

diff --git a/frontend/src/features/permits/components/permit-list/Columns.tsx b/frontend/src/features/permits/components/permit-list/Columns.tsx
@@ -3,7 +3,10 @@ import { MRT_ColumnDef } from "material-react-table";
 import { viewPermitPdf } from "../../helpers/permitPDFHelper";
 import { Permit } from "../../types/permit";
 import { PermitChip } from "./PermitChip";
-import { dateTimeStringSortingFn, formatCellValuetoDatetime } from "../../../../common/constants/defaultTableOptions";
+import {
+  dateTimeStringSortingFn,
+  formatCellValuetoDatetime,
+} from "../../../../common/constants/defaultTableOptions";
 
 /**
  * The column definition for Permits.
@@ -16,15 +19,15 @@ export const PermitsColumnDefinition: MRT_ColumnDef<Permit>[] = [
     sortingFn: "alphanumeric",
     size: 500,
     accessorFn: (row) => row.permitNumber,
-    Cell: (props: { cell: any; row: any }) => {
+    Cell: (props: { row: any; renderedCellValue: any }) => {
       return (
         <>
           <Link
             component="button"
             variant="body2"
             onClick={() => viewPermitPdf(props.row.original.permitId)}
           >
-            {props.cell.getValue()}
+            {props.renderedCellValue}
           </Link>
           <PermitChip permitStatus={props.row.original.permitStatus} />
         </>