From f0ca71f5d9c684679cd0704c8beb8947a2b28e4e Mon Sep 17 00:00:00 2001 From: jadmsaadaot <91914654+jadmsaadaot@users.noreply.github.com> Date: Thu, 14 Mar 2024 21:13:36 -0700 Subject: [PATCH] Add default value to track table and cache filters (#1991) --- epictrack-web/src/App.tsx | 8 ++--- .../shared/MasterTrackTable/FiltersCache.tsx | 15 +++++++++ .../shared/MasterTrackTable/index.tsx | 7 +++++ .../shared/filterSelect/TableFilter.tsx | 30 +++++++++++++----- .../src/components/work/WorkList.tsx | 31 ++++++++++++++----- .../src/components/work/constants.ts | 1 + 6 files changed, 74 insertions(+), 18 deletions(-) create mode 100644 epictrack-web/src/components/shared/MasterTrackTable/FiltersCache.tsx create mode 100644 epictrack-web/src/components/work/constants.ts diff --git a/epictrack-web/src/App.tsx b/epictrack-web/src/App.tsx index ecf94812c..67be0a1eb 100644 --- a/epictrack-web/src/App.tsx +++ b/epictrack-web/src/App.tsx @@ -39,10 +39,10 @@ export function App() { }} > - {/* */} - - - {/* */} + + + + diff --git a/epictrack-web/src/components/shared/MasterTrackTable/FiltersCache.tsx b/epictrack-web/src/components/shared/MasterTrackTable/FiltersCache.tsx new file mode 100644 index 000000000..f62c5efcc --- /dev/null +++ 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 = ({ + cacheFilters, + table, +}: { + cacheFilters: (columnFilters: any) => void; + table: MRT_TableInstance; +}) => { + 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 index a9fce36f6..f729982c0 100644 --- 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 columns: MRT_ColumnDef[]; data: TData[]; setTableInstance?: (instance: MRT_TableInstance | undefined) => void; + cacheFilters?: (columnFilters: any) => void; } const MasterTrackTable = ({ columns, data, setTableInstance, + cacheFilters, ...rest }: MaterialReactTableProps) => { const table = useMaterialReactTable({ @@ -220,9 +223,13 @@ const MasterTrackTable = ({ setTableInstance(table); } }, [table]); + return ( <> + {cacheFilters && ( + + )} ); }; diff --git a/epictrack-web/src/components/shared/filterSelect/TableFilter.tsx b/epictrack-web/src/components/shared/filterSelect/TableFilter.tsx index d525b391a..2de865871 100644 --- 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 ( ); }; diff --git a/epictrack-web/src/components/work/WorkList.tsx b/epictrack-web/src/components/work/WorkList.tsx index 278b587e6..fb4465b92 100644 --- a/epictrack-web/src/components/work/WorkList.tsx +++ b/epictrack-web/src/components/work/WorkList.tsx @@ -4,7 +4,6 @@ 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"; @@ -12,15 +11,26 @@ 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 = 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(); const [showWorkDialogForm, setShowWorkDialogForm] = React.useState(false); @@ -35,9 +45,6 @@ const WorkList = () => { const [loadingWorks, setLoadingWorks] = React.useState(true); const [works, setWorks] = React.useState([]); - 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 ( <> { desc: false, }, ], + columnFilters: getInitialColumnFilters(), }} state={{ isLoading: loadingWorks, @@ -359,6 +375,7 @@ const WorkList = () => { )} + cacheFilters={handleCacheFilters} /> diff --git a/epictrack-web/src/components/work/constants.ts b/epictrack-web/src/components/work/constants.ts new file mode 100644 index 000000000..48dcc6ecf --- /dev/null +++ b/epictrack-web/src/components/work/constants.ts @@ -0,0 +1 @@ +export const All_WORKS_FILTERS_CACHE_KEY = "all-works-filters";