@applica-software-guru/react-admin 1.5.356 → 1.5.358

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.356"
+  "version": "1.5.358"
 }

package/src/components/ra-lists/ListTabsToolbar.tsx

@@ -5,6 +5,7 @@ import { ReactElement, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useListViewContext } from './ListViewProvider';
 import { useSessionStorage } from '@/hooks';
 import { useSearchParams } from 'react-router-dom';
+import _ from 'lodash';
 
 type ListTabToolbarConfig = {
   label: string;
@@ -18,37 +19,61 @@ interface ListTabsToolbarProps {
   tabs?: ListTabToolbarConfig[];
 }
 
-function ListTabsToolbar(props: ListTabsToolbarProps) {
-  const { tabs = [] } = props;
-  const { setFilters, filterValues } = useListContext();
-  const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
+function ListTabsToolbar({ tabs = [] }: ListTabsToolbarProps) {
+  const { setFilters, filterValues, displayedFilters } = useListContext();
   const { setCurrentTabKey } = useListViewContext();
   const resource = useResourceContext();
   const theme = useTheme();
-
   const [searchParams, setSearchParams] = useSearchParams();
 
   if (tabs.length > 0 && tabs.some((tab) => !tab.key)) {
     throw new Error('ListTabsToolbar: Each tab must have a unique key.');
   }
 
-  const tabGroupKey = useMemo(() => `${resource.replace(/^entities\//, '')}-tab-group`, [resource]);
+  const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
+  const resourceKey = useMemo(() => resource.replace(/^entities\//, ''), [resource]);
+  const tabGroupKey = useMemo(() => `${resourceKey}-tab-group`, [resourceKey]);
+  const tabFiltersKey = useMemo(() => `${resourceKey}-tab-filters`, [resourceKey]);
 
   const [currentTab, setCurrentTab] = useSessionStorage(tabGroupKey, defaultTabIndex);
+  const [tabFilterStates, setTabFilterStates] = useSessionStorage(tabFiltersKey, {});
   const initialized = useRef(false);
 
+  const saveCurrentTabFilters = useMemo(
+    () =>
+      _.debounce((tabKey: string, filters: any, displayed: any) => {
+        setTabFilterStates((prev: any) => ({
+          ...prev,
+          [tabKey]: {
+            filterValues: { ...filters },
+            displayedFilters: { ...displayed }
+          }
+        }));
+      }, 500),
+    [setTabFilterStates]
+  );
+
+  const restoreTabFilters = useCallback(
+    (tabKey: string, tabFilter: Record<string, any>, debounce: boolean) => {
+      const savedState = (tabFilterStates as any)?.[tabKey];
+
+      if (savedState) {
+        setFilters(savedState.filterValues, savedState.displayedFilters || {}, debounce);
+      } else {
+        setFilters(tabFilter, {}, debounce);
+      }
+    },
+    [tabFilterStates, setFilters]
+  );
+
   const buildFilters = useCallback(
     (index: number, debounce: boolean) => {
-      if (setCurrentTabKey) {
-        setCurrentTabKey(tabs[index].key);
-      }
-      const newFilters = {
-        ...filterValues,
-        ...tabs[index].filter
-      };
-      setFilters(newFilters, {}, debounce);
+      const newTabKey = tabs[index].key;
+
+      setCurrentTabKey?.(newTabKey);
+      restoreTabFilters(newTabKey, tabs[index].filter, debounce);
     },
-    [filterValues, setFilters, setCurrentTabKey, tabs]
+    [tabs, setCurrentTabKey, restoreTabFilters]
   );
 
   const updateUrlParam = useCallback(
@@ -60,9 +85,26 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
     [searchParams, setSearchParams, tabGroupKey]
   );
 
+  const handleChange = useCallback(
+    (_: any, newIndex: number) => {
+      setCurrentTab(newIndex);
+      buildFilters(newIndex, true);
+    },
+    [buildFilters, setCurrentTab]
+  );
+
+  useEffect(() => {
+    if (initialized.current && tabs.length > 0) {
+      const currentTabKey = tabs[Number(currentTab)]?.key;
+      if (currentTabKey) {
+        saveCurrentTabFilters(currentTabKey, filterValues, displayedFilters);
+      }
+    }
+  }, [filterValues, displayedFilters, currentTab, tabs, saveCurrentTabFilters]);
+
   useEffect(() => {
     const param = searchParams.get(tabGroupKey);
-    if (String(param) !== String(currentTab)) {
+    if (param !== String(currentTab)) {
       updateUrlParam(Number(currentTab));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -73,7 +115,7 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
       const param = searchParams.get(tabGroupKey);
       const initialIndex = param != null ? Number(param) : Number(currentTab);
 
-      if (param != null && String(initialIndex) !== String(currentTab)) {
+      if (param != null && initialIndex !== Number(currentTab)) {
         setCurrentTab(initialIndex);
       }
 
@@ -81,15 +123,7 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
       initialized.current = true;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams, setSearchParams, tabGroupKey, currentTab, setCurrentTab, buildFilters]);
-
-  const handleChange = useCallback(
-    (_: any, newIndex: number) => {
-      setCurrentTab(newIndex);
-      buildFilters(newIndex, true);
-    },
-    [buildFilters, setCurrentTab]
-  );
+  }, []);
 
   return (
     <Box sx={{ width: '100%' }}>