Client: Filter state is now saved in local storage

client/src/pages/filaments/list.tsx

@@ -3,6 +3,7 @@ import {
   IResourceComponentsProps,
   BaseRecord,
   CrudSort,
+  CrudFilter,
 } from "@refinedev/core";
 import {
   useTable,
@@ -21,6 +22,7 @@ import {
   filterPopulator,
   genericFilterer,
   genericSorter,
+  getFiltersForField,
   getSortOrderForField,
 } from "../../utils/sorting";
 
@@ -41,6 +43,15 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
     ];
   });
 
+  // Load filter state from local storage
+  const [filters_initial] = React.useState<CrudFilter[]>(() => {
+    const storedFilters = localStorage.getItem("filamentListFilters");
+    if (storedFilters) {
+      return JSON.parse(storedFilters);
+    }
+    return [];
+  });
+
   // Fetch data from the API
   const { tableProps, sorters, filters } = useTable<IFilament>({
     syncWithLocation: false,
@@ -53,6 +64,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
     },
     filters: {
       mode: "off", // Disable server-side filtering
+      initial: filters_initial,
     },
   });
 
@@ -61,6 +73,11 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
     localStorage.setItem("filamentListSorters", JSON.stringify(sorters));
   }, [sorters]);
 
+  // Store filter state in local storage
+  React.useEffect(() => {
+    localStorage.setItem("filamentListFilters", JSON.stringify(filters));
+  }, [filters]);
+
   // Copy dataSource to avoid mutating the original
   const dataSource = [...(tableProps.dataSource || [])];
 
@@ -102,6 +119,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             "vendor_name"
           )}
           filters={filterPopulator(dataSource, "vendor_name")}
+          defaultFilteredValue={getFiltersForField(
+            filters_initial,
+            "vendor_name"
+          )}
         />
         <Table.Column
           dataIndex="name"
@@ -109,6 +130,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           sorter={true}
           defaultSortOrder={getSortOrderForField(sorters_initial, "name")}
           filters={filterPopulator(dataSource, "name")}
+          defaultFilteredValue={getFiltersForField(filters_initial, "name")}
         />
         <Table.Column
           dataIndex="material"
@@ -116,6 +138,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           sorter={true}
           defaultSortOrder={getSortOrderForField(sorters_initial, "material")}
           filters={filterPopulator(dataSource, "material")}
+          defaultFilteredValue={getFiltersForField(filters_initial, "material")}
         />
         <Table.Column
           dataIndex="price"
@@ -205,6 +228,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             "article_number"
           )}
           filters={filterPopulator(dataSource, "article_number")}
+          defaultFilteredValue={getFiltersForField(
+            filters_initial,
+            "article_number"
+          )}
         />
         <Table.Column
           dataIndex={["registered"]}

client/src/utils/sorting.ts

@@ -91,6 +91,9 @@ export function genericFilterer(filters: CrudFilter[]) {
                 console.error("Filter value must be an array of strings.");
                 return false;
             }
+            if (!filter.value.length) {
+                continue;
+            }
             let value = record[filter.field];
             if (value === undefined || value === null) {
                 value = "";
@@ -148,3 +151,19 @@ export function filterPopulator(dataSource: IObj[], field: string): ColumnFilter
     });
     return filters;
 }
+
+/**
+ * Returns an array of filter values for a given field based on the provided filters.
+ * @param filters An array of `CrudFilter` objects that define the filtering criteria.
+ * @param field The field to get the filter values for.
+ * @returns An array of filter values for the given field.
+ */
+export function getFiltersForField(filters: CrudFilter[], field: string): string[] {
+    const filterValues: string[] = [];
+    filters.forEach((filter) => {
+        if ("field" in filter && filter.field === field) {
+            filterValues.push(...filter.value as string[]);
+        }
+    });
+    return filterValues;
+}