Add default value to track table and cache filters (#1991)

bcgov · Mar 15, 2024 · f0ca71f · f0ca71f
1 parent 8ed4151
commit f0ca71f
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 18 deletions.
diff --git a/epictrack-web/src/App.tsx b/epictrack-web/src/App.tsx
@@ -39,10 +39,10 @@ export function App() {
                 }}
               >
                 <ETNotificationProvider preventDuplicate>
-                  {/* <React.StrictMode> */}
-                  <AuthenticatedRoutes />
-                  <Loader />
-                  {/* </React.StrictMode> */}
+                  <React.StrictMode>
+                    <AuthenticatedRoutes />
+                    <Loader />
+                  </React.StrictMode>
                 </ETNotificationProvider>
               </Box>
             </Box>

diff --git a/epictrack-web/src/components/shared/MasterTrackTable/FiltersCache.tsx b/epictrack-web/src/components/shared/MasterTrackTable/FiltersCache.tsx
@@ -0,0 +1,15 @@
+import React, { useEffect } from "react";
+import { MRT_TableInstance, MRT_RowData } from "material-react-table";
+
+export const FiltersCache = <TData extends MRT_RowData>({
+  cacheFilters,
+  table,
+}: {
+  cacheFilters: (columnFilters: any) => void;
+  table: MRT_TableInstance<TData>;
+}) => {
+  useEffect(() => {
+    cacheFilters(table.getState().columnFilters);
+  }, [table.getState().columnFilters]);
+  return null;
+};
diff --git a/epictrack-web/src/components/shared/MasterTrackTable/index.tsx b/epictrack-web/src/components/shared/MasterTrackTable/index.tsx
@@ -12,6 +12,7 @@ import SearchIcon from "../../../assets/images/search.svg";
 import { Palette } from "../../../styles/theme";
 import { MET_Header_Font_Weight_Bold } from "../../../styles/constants";
 import { ETHeading2 } from "..";
+import { FiltersCache } from "./FiltersCache";
 
 const NoDataComponent = ({ ...props }) => {
   const { table } = props;
@@ -60,12 +61,14 @@ export interface MaterialReactTableProps<TData extends MRT_RowData>
   columns: MRT_ColumnDef<TData>[];
   data: TData[];
   setTableInstance?: (instance: MRT_TableInstance<TData> | undefined) => void;
+  cacheFilters?: (columnFilters: any) => void;
 }
 
 const MasterTrackTable = <TData extends MRT_RowData>({
   columns,
   data,
   setTableInstance,
+  cacheFilters,
   ...rest
 }: MaterialReactTableProps<TData>) => {
   const table = useMaterialReactTable({
@@ -220,9 +223,13 @@ const MasterTrackTable = <TData extends MRT_RowData>({
       setTableInstance(table);
     }
   }, [table]);
+
   return (
     <>
       <MaterialReactTable table={table} />
+      {cacheFilters && (
+        <FiltersCache cacheFilters={cacheFilters} table={table} />
+      )}
     </>
   );
 };

diff --git a/epictrack-web/src/components/shared/filterSelect/TableFilter.tsx b/epictrack-web/src/components/shared/filterSelect/TableFilter.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import FilterSelect from "./FilterSelect";
 import { TableFilterProps } from "./type";
@@ -22,6 +22,12 @@ const makeTableFilter =
       [header]
     );
 
+    const toOptionType = (option: any) => {
+      if (typeof option === "object") {
+        return { label: option.text, value: option.value };
+      }
+      return { label: option, value: option };
+    };
     const options = React.useMemo(() => {
       let filterOptions = column.columnDef.filterSelectOptions;
       filterOptions = filterOptions.map(
@@ -32,22 +38,32 @@ const makeTableFilter =
                 text: string;
                 value: any;
               }
-        ) => {
-          if (typeof option === "object") {
-            return { label: option.text, value: option.value };
-          }
-          return { label: option, value: option };
-        }
+        ) => toOptionType(option)
       );
       return filterOptions;
     }, [column]);
 
+    const handleValues = (value: string | string[]) => {
+      if (!value) return value;
+      if (Array.isArray(value)) {
+        return value.map((val) => {
+          return toOptionType(val);
+        });
+      }
+      return toOptionType(value);
+    };
+
+    useEffect(() => {
+      column.setFilterValue(column.getFilterValue());
+    }, [column]);
+
     return (
       <Component
         {...(props as SelectProps)}
         options={options}
         filterAppliedCallback={filterAppliedCallback}
         filterClearedCallback={filterClearedCallback}
+        defaultValue={handleValues(column.getFilterValue())}
       />
     );
   };

diff --git a/epictrack-web/src/components/work/WorkList.tsx b/epictrack-web/src/components/work/WorkList.tsx
@@ -4,23 +4,33 @@ import { Box, Button, Grid } from "@mui/material";
 import { Work } from "../../models/work";
 import MasterTrackTable from "../shared/MasterTrackTable";
 import { ETGridTitle, ETPageContainer } from "../shared";
-import { MasterContext } from "../shared/MasterContext";
 import workService from "../../services/workService/workService";
 import { ActiveChip, InactiveChip } from "../shared/chip/ETChip";
 import { Link } from "react-router-dom";
 import { IconProps } from "../icons/type";
 import Icons from "../icons";
 import TableFilter from "../shared/filterSelect/TableFilter";
 import { getSelectFilterOptions } from "../shared/MasterTrackTable/utils";
-import { Restricted, hasPermission } from "../shared/restricted";
+import { Restricted } from "../shared/restricted";
 import { ROLES } from "../../constants/application-constant";
 import { searchFilter } from "../shared/MasterTrackTable/filters";
-import { useAppSelector } from "../../hooks";
 import { WorkDialog } from "./Dialog";
 import { showNotification } from "components/shared/notificationProvider";
+import { All_WORKS_FILTERS_CACHE_KEY } from "./constants";
 
 const GoToIcon: React.FC<IconProps> = Icons["GoToIcon"];
 
+const getInitialColumnFilters = () => {
+  const columnFilters = sessionStorage.getItem(All_WORKS_FILTERS_CACHE_KEY);
+  if (columnFilters) {
+    const result = JSON.parse(columnFilters);
+    if (Array.isArray(result)) {
+      return result;
+    }
+  }
+  return undefined;
+};
+
 const WorkList = () => {
   const [workId, setWorkId] = React.useState<number>();
   const [showWorkDialogForm, setShowWorkDialogForm] = React.useState(false);
@@ -35,9 +45,6 @@ const WorkList = () => {
   const [loadingWorks, setLoadingWorks] = React.useState<boolean>(true);
   const [works, setWorks] = React.useState<Work[]>([]);
 
-  const { roles } = useAppSelector((state) => state.user.userDetail);
-  const canEdit = hasPermission({ roles, allowed: [ROLES.EDIT] });
-
   // const works = React.useMemo(() => ctx.data as Work[], [ctx.data]);
 
   const loadWorks = async () => {
@@ -133,7 +140,7 @@ const WorkList = () => {
               header={header}
               column={column}
               variant="inline"
-              name="rolesFilter"
+              name="projectFilter"
             />
           );
         },
@@ -311,6 +318,14 @@ const WorkList = () => {
     ],
     [projects, phases, teams, ministries, workTypes, eaActs]
   );
+
+  const handleCacheFilters = (filters: any[]) => {
+    sessionStorage.setItem(
+      All_WORKS_FILTERS_CACHE_KEY,
+      JSON.stringify(filters)
+    );
+  };
+
   return (
     <>
       <ETPageContainer
@@ -330,6 +345,7 @@ const WorkList = () => {
                   desc: false,
                 },
               ],
+              columnFilters: getInitialColumnFilters(),
             }}
             state={{
               isLoading: loadingWorks,
@@ -359,6 +375,7 @@ const WorkList = () => {
                 </Restricted>
               </Box>
             )}
+            cacheFilters={handleCacheFilters}
           />
         </Grid>
       </ETPageContainer>

diff --git a/epictrack-web/src/components/work/constants.ts b/epictrack-web/src/components/work/constants.ts
@@ -0,0 +1 @@
+export const All_WORKS_FILTERS_CACHE_KEY = "all-works-filters";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const All_WORKS_FILTERS_CACHE_KEY = "all-works-filters";