diff --git a/src/common/hooks/useDataTablePreference.ts b/src/common/hooks/useDataTablePreference.ts index 4f7c5aa496..69ec1ecd64 100644 --- a/src/common/hooks/useDataTablePreference.ts +++ b/src/common/hooks/useDataTablePreference.ts @@ -14,7 +14,7 @@ import { TableFiltersPreference } from './useReactSettings'; import { dataTableFiltersAtom } from './useStoreSessionTableFilters'; interface Params { - tableKey: string; + tableKey: string | undefined; } export function useDataTablePreference(params: Params) { const user = useUserChanges(); @@ -24,6 +24,10 @@ export function useDataTablePreference(params: Params) { const storeSessionTableFilters = useAtomValue(dataTableFiltersAtom); return (filterKey: keyof TableFiltersPreference) => { + if (!tableKey) { + return ''; + } + if (filterKey === 'filter' || filterKey === 'currentPage') { return storeSessionTableFilters?.[tableKey]?.[filterKey] ? storeSessionTableFilters[tableKey][filterKey] diff --git a/src/common/hooks/useDataTablePreferences.ts b/src/common/hooks/useDataTablePreferences.ts index 4e0df73335..269ee49d72 100644 --- a/src/common/hooks/useDataTablePreferences.ts +++ b/src/common/hooks/useDataTablePreferences.ts @@ -27,7 +27,7 @@ import { useStoreSessionTableFilters } from './useStoreSessionTableFilters'; interface Params { apiEndpoint: URL; customFilters?: SelectOption[]; - tableKey: string; + tableKey: string | undefined; isInitialConfiguration: boolean; customFilter: string[] | undefined; setFilter: Dispatch>; @@ -38,6 +38,7 @@ interface Params { setStatus: Dispatch>; setPerPage: Dispatch>; withoutStoringPerPage: boolean; + enableSavingFilterPreference?: boolean; } export function useDataTablePreferences(params: Params) { @@ -58,6 +59,7 @@ export function useDataTablePreferences(params: Params) { setStatus, setPerPage, withoutStoringPerPage, + enableSavingFilterPreference, } = params; const getPreference = useDataTablePreference({ tableKey }); @@ -85,7 +87,7 @@ export function useDataTablePreferences(params: Params) { status: string[], perPage: PerPage ) => { - if (!customFilter) { + if (!customFilter || !tableKey || !enableSavingFilterPreference) { return; } @@ -124,6 +126,16 @@ export function useDataTablePreferences(params: Params) { const updatedUser = cloneDeep(user) as User; if (updatedUser) { + // This is a temporary solution for creating the table_filters object. It can be removed after some time. + const tableFilters = + updatedUser.company_user?.react_settings.table_filters || {}; + + Object.keys(tableFilters).forEach((key) => { + if (key.includes('/')) { + delete tableFilters[key]; + } + }); + set( updatedUser, `company_user.react_settings.table_filters.${tableKey}`, diff --git a/src/common/hooks/useDataTableUtilities.ts b/src/common/hooks/useDataTableUtilities.ts index 782b127441..6c733f46f4 100644 --- a/src/common/hooks/useDataTableUtilities.ts +++ b/src/common/hooks/useDataTableUtilities.ts @@ -16,7 +16,7 @@ import collect from 'collect.js'; interface Params { apiEndpoint: URL; isInitialConfiguration: boolean; - tableKey: string; + tableKey: string | undefined; customFilters?: SelectOption[]; customFilter?: string[] | undefined; } diff --git a/src/common/hooks/useStoreSessionTableFilters.ts b/src/common/hooks/useStoreSessionTableFilters.ts index e93ee72d0d..2338d8bb1a 100644 --- a/src/common/hooks/useStoreSessionTableFilters.ts +++ b/src/common/hooks/useStoreSessionTableFilters.ts @@ -21,7 +21,7 @@ export const dataTableFiltersAtom = atomWithStorage( ); interface Params { - tableKey: string; + tableKey: string | undefined; } export function useStoreSessionTableFilters(params: Params) { const { tableKey } = params; @@ -29,6 +29,10 @@ export function useStoreSessionTableFilters(params: Params) { const setDataTableFilters = useSetAtom(dataTableFiltersAtom); return (filter: string, currentPage: number) => { + if (!tableKey) { + return; + } + setDataTableFilters((current) => ({ ...current, [tableKey]: { diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx index 8e7a1722cc..b943813e53 100644 --- a/src/components/DataTable.tsx +++ b/src/components/DataTable.tsx @@ -52,7 +52,6 @@ import { Guard } from '$app/common/guards/Guard'; import { EntityState } from '$app/common/enums/entity-state'; import { GenericSingleResourceResponse } from '$app/common/interfaces/generic-api-response'; import { refetchByUrl } from '$app/common/hooks/useRefetch'; -import { useLocation } from 'react-router-dom'; import { useDataTableOptions } from '$app/common/hooks/useDataTableOptions'; import { useDataTableUtilities } from '$app/common/hooks/useDataTableUtilities'; import { useDataTablePreferences } from '$app/common/hooks/useDataTablePreferences'; @@ -152,6 +151,7 @@ interface Props extends CommonProps { withoutPerPageAsPreference?: boolean; withoutSortQueryParameter?: boolean; showRestoreBulk?: (selectedResources: T[]) => boolean; + enableSavingFilterPreference?: boolean; } export type ResourceAction = (resource: T) => ReactElement; @@ -160,7 +160,6 @@ export type PerPage = '10' | '50' | '100'; export function DataTable(props: Props) { const [t] = useTranslation(); - const location = useLocation(); const options = useDataTableOptions(); const reactSettings = useReactSettings(); @@ -174,8 +173,6 @@ export function DataTable(props: Props) { new URL(endpoint(props.endpoint)) ); - const tableKey = `${location.pathname}${props.endpoint.replace('.', '')}`; - const setInvalidationQueryAtom = useSetAtom(invalidationQueryAtom); const { @@ -193,6 +190,7 @@ export function DataTable(props: Props) { withoutPerPageAsPreference = false, withoutSortQueryParameter = false, showRestoreBulk, + enableSavingFilterPreference = false, } = props; const companyUpdateTimeOut = useRef(undefined); @@ -232,9 +230,10 @@ export function DataTable(props: Props) { setSort, setSortedBy, setStatus, - tableKey, + tableKey: `${props.resource}s`, customFilters, withoutStoringPerPage: withoutPerPageAsPreference, + enableSavingFilterPreference, }); const { @@ -244,7 +243,7 @@ export function DataTable(props: Props) { } = useDataTableUtilities({ apiEndpoint, isInitialConfiguration, - tableKey, + tableKey: `${props.resource}s`, customFilter, customFilters, }); diff --git a/src/pages/invoices/index/Invoices.tsx b/src/pages/invoices/index/Invoices.tsx index 4a72cfd2b6..40e603fa3f 100644 --- a/src/pages/invoices/index/Invoices.tsx +++ b/src/pages/invoices/index/Invoices.tsx @@ -151,6 +151,7 @@ export default function Invoices() { setInvoiceSliderVisibility(true); }} dateRangeColumns={dateRangeColumns} + enableSavingFilterPreference /> {!disableNavigation('invoice', invoiceSlider) && }