@trackunit/filters-filter-bar 1.3.66 → 1.3.68

package/index.cjs.js

@@ -1422,35 +1422,50 @@ const getPersistenceKey = (name, clientSideUserId) => `filter-${name}-${clientSi
 const useFilterBarPersistence = ({ name, setValue, }) => {
     const { clientSideUserId } = reactCoreHooks.useCurrentUser();
     const [initialStoredFilters] = react.useState(() => localStorage.getItem(getPersistenceKey(name, clientSideUserId)) || "{}");
-    const saveData = react.useCallback((filterBarConfig) => {
-        const toPersist = {
-            values: filterBarConfig.values ?? {},
-            starredFilterKeys: filterBarConfig.starredFilterKeys ?? [],
-        };
-        localStorage.setItem(getPersistenceKey(name, clientSideUserId), JSON.stringify(toPersist));
-    }, [name, clientSideUserId]);
+    const [lastSavedState, setLastSavedState] = react.useState(undefined);
+    const saveData = react.useCallback((filterBarConfig, filterBarDefinitions) => {
+        if (lastSavedState) {
+            const newValues = lastSavedState;
+            if (filterBarConfig.values) {
+                // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-entries
+                Object.entries(filterBarConfig.values).forEach(([key, value]) => {
+                    const typedKey = key;
+                    const definition = Object.values(filterBarDefinitions).find(def => def.filterKey === typedKey);
+                    if (definition?.persistValue !== false) {
+                        newValues[typedKey] = value;
+                    }
+                });
+            }
+            const toPersist = {
+                values: newValues,
+                starredFilterKeys: filterBarConfig.starredFilterKeys ?? [],
+            };
+            setLastSavedState(newValues);
+            localStorage.setItem(getPersistenceKey(name, clientSideUserId), JSON.stringify(toPersist));
+        }
+    }, [name, clientSideUserId, lastSavedState]);
     const loadData = react.useCallback((updatedFilterDefinitionsValues) => {
         let initialFilterBarConfig;
         const storedFilters = initialStoredFilters;
-        const hasNonVisibleDefaultValues = updatedFilterDefinitionsValues.some(value => value.showInStarredMenu &&
-            !value.showInStarredMenu() &&
-            value.showInFilterBar &&
-            !value.showInFilterBar() &&
-            value.defaultValue?.toString &&
-            value.defaultValue.toString().length > 0);
         const initialStateValues = createInitialState({
             name,
             mainFilters: updatedFilterDefinitionsValues,
             setValue,
         });
+        let loadedFilterBarConfigValues = {
+            values: {},
+            starredFilterKeys: [],
+        };
         if (storedFilters && storedFilters !== "undefined") {
-            const loadedFilterBarConfigValues = JSON.parse(storedFilters);
+            loadedFilterBarConfigValues = JSON.parse(storedFilters);
             if (!loadedFilterBarConfigValues.values) {
                 loadedFilterBarConfigValues.values = {};
             }
             if (!loadedFilterBarConfigValues.starredFilterKeys) {
                 loadedFilterBarConfigValues.starredFilterKeys = [];
             }
+            // make sure the last saved state is the same as the loaded values no manipulation of values!
+            setLastSavedState(Object.assign({}, loadedFilterBarConfigValues.values));
             if (validateFilter({
                 values: loadedFilterBarConfigValues.values,
                 starredFilterKeys: loadedFilterBarConfigValues.starredFilterKeys,
@@ -1465,16 +1480,24 @@ const useFilterBarPersistence = ({ name, setValue, }) => {
                 };
             }
         }
-        if (initialFilterBarConfig === undefined || hasNonVisibleDefaultValues) {
+        if (initialFilterBarConfig === undefined) {
             initialFilterBarConfig = initialStateValues;
         }
-        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-        Object.keys(initialFilterBarConfig.values).forEach(key => {
+        updatedFilterDefinitionsValues.forEach(value => {
+            if (value.persistValue === false) {
+                // eslint-disable-next-line local-rules/no-typescript-assertion
+                const typedKey = value.filterKey;
+                // eslint-disable-next-line local-rules/no-typescript-assertion
+                initialFilterBarConfig.values[typedKey] = value.defaultValue;
+            }
+        });
+        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-entries
+        Object.entries(initialFilterBarConfig.values).forEach(([key, value]) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             initialFilterBarConfig.setters[`set${stringTs.capitalize(key)}`] = (callback) => setValue(key, callback);
         });
         return initialFilterBarConfig;
-    }, [name, setValue, initialStoredFilters]);
+    }, [name, initialStoredFilters, setValue]);
     return react.useMemo(() => ({ loadData, saveData }), [loadData, saveData]);
 };
 
@@ -1524,8 +1547,8 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, }) => {
     });
     react.useEffect(() => {
         onValuesChange?.(filterBarConfig.values);
-        saveData(filterBarConfig);
-    }, [filterBarConfig.values, filterBarConfig, onValuesChange, saveData]);
+        saveData(filterBarConfig, filterBarDefinition);
+    }, [filterBarConfig, filterBarDefinition, onValuesChange, saveData]);
     return react.useMemo(() => {
         return {
             filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
@@ -1552,7 +1575,14 @@ const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, }) => {
         setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
     });
     const [filterBarConfig, setFilterBarConfig] = react.useState(() => {
-        return loadData(sharedUtils.objectValues(internalFilterBarDefinitions));
+        const initialConfig = {
+            values: Object.create({}),
+            setters: Object.create({}),
+            name,
+            initialState: Object.create({}),
+            starredFilterKeys: [],
+        };
+        return initialConfig;
     });
     const { filterMapActions, filterMapGetter } = useFilterBarActions({
         name,
@@ -1563,24 +1593,34 @@ const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, }) => {
         setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
     });
     const dataLoaded = react.useCallback((loadedFilterDefinitionsValues) => {
-        setIsDataLoaded(true);
-        setAsyncLoadedFilterBarDefinitions(loadedFilterDefinitionsValues);
+        setAsyncLoadedFilterBarDefinitions(() => loadedFilterDefinitionsValues);
         setFilterBarConfig(_ => loadData(sharedUtils.objectValues(loadedFilterDefinitionsValues)));
+        setIsDataLoaded(true);
     }, [loadData]);
+    const filterBarConfigMemoed = react.useMemo(() => {
+        return { ...filterBarConfig, ...filterMapActions, ...filterMapGetter };
+    }, [filterBarConfig, filterMapActions, filterMapGetter]);
     react.useEffect(() => {
         if (isDataLoaded) {
-            onValuesChange?.(filterBarConfig.values);
-            saveData(filterBarConfig);
+            onValuesChange?.(filterBarConfigMemoed.values);
+            saveData(filterBarConfigMemoed, internalFilterBarDefinitions);
         }
-    }, [filterBarConfig.values, filterBarConfig, onValuesChange, saveData, isDataLoaded]);
+    }, [
+        filterBarConfigMemoed.values,
+        internalFilterBarDefinitions,
+        filterBarConfigMemoed,
+        onValuesChange,
+        saveData,
+        isDataLoaded,
+    ]);
     return react.useMemo(() => {
         return {
-            filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
+            filterBarConfig: filterBarConfigMemoed,
             filterBarDefinition: internalFilterBarDefinitions,
             dataLoaded,
             name,
         };
-    }, [filterBarConfig, filterMapActions, filterMapGetter, internalFilterBarDefinitions, dataLoaded, name]);
+    }, [filterBarConfigMemoed, internalFilterBarDefinitions, dataLoaded, name]);
 };
 
 /**

package/index.esm.js

@@ -1420,35 +1420,50 @@ const getPersistenceKey = (name, clientSideUserId) => `filter-${name}-${clientSi
 const useFilterBarPersistence = ({ name, setValue, }) => {
     const { clientSideUserId } = useCurrentUser();
     const [initialStoredFilters] = useState(() => localStorage.getItem(getPersistenceKey(name, clientSideUserId)) || "{}");
-    const saveData = useCallback((filterBarConfig) => {
-        const toPersist = {
-            values: filterBarConfig.values ?? {},
-            starredFilterKeys: filterBarConfig.starredFilterKeys ?? [],
-        };
-        localStorage.setItem(getPersistenceKey(name, clientSideUserId), JSON.stringify(toPersist));
-    }, [name, clientSideUserId]);
+    const [lastSavedState, setLastSavedState] = useState(undefined);
+    const saveData = useCallback((filterBarConfig, filterBarDefinitions) => {
+        if (lastSavedState) {
+            const newValues = lastSavedState;
+            if (filterBarConfig.values) {
+                // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-entries
+                Object.entries(filterBarConfig.values).forEach(([key, value]) => {
+                    const typedKey = key;
+                    const definition = Object.values(filterBarDefinitions).find(def => def.filterKey === typedKey);
+                    if (definition?.persistValue !== false) {
+                        newValues[typedKey] = value;
+                    }
+                });
+            }
+            const toPersist = {
+                values: newValues,
+                starredFilterKeys: filterBarConfig.starredFilterKeys ?? [],
+            };
+            setLastSavedState(newValues);
+            localStorage.setItem(getPersistenceKey(name, clientSideUserId), JSON.stringify(toPersist));
+        }
+    }, [name, clientSideUserId, lastSavedState]);
     const loadData = useCallback((updatedFilterDefinitionsValues) => {
         let initialFilterBarConfig;
         const storedFilters = initialStoredFilters;
-        const hasNonVisibleDefaultValues = updatedFilterDefinitionsValues.some(value => value.showInStarredMenu &&
-            !value.showInStarredMenu() &&
-            value.showInFilterBar &&
-            !value.showInFilterBar() &&
-            value.defaultValue?.toString &&
-            value.defaultValue.toString().length > 0);
         const initialStateValues = createInitialState({
             name,
             mainFilters: updatedFilterDefinitionsValues,
             setValue,
         });
+        let loadedFilterBarConfigValues = {
+            values: {},
+            starredFilterKeys: [],
+        };
         if (storedFilters && storedFilters !== "undefined") {
-            const loadedFilterBarConfigValues = JSON.parse(storedFilters);
+            loadedFilterBarConfigValues = JSON.parse(storedFilters);
             if (!loadedFilterBarConfigValues.values) {
                 loadedFilterBarConfigValues.values = {};
             }
             if (!loadedFilterBarConfigValues.starredFilterKeys) {
                 loadedFilterBarConfigValues.starredFilterKeys = [];
             }
+            // make sure the last saved state is the same as the loaded values no manipulation of values!
+            setLastSavedState(Object.assign({}, loadedFilterBarConfigValues.values));
             if (validateFilter({
                 values: loadedFilterBarConfigValues.values,
                 starredFilterKeys: loadedFilterBarConfigValues.starredFilterKeys,
@@ -1463,16 +1478,24 @@ const useFilterBarPersistence = ({ name, setValue, }) => {
                 };
             }
         }
-        if (initialFilterBarConfig === undefined || hasNonVisibleDefaultValues) {
+        if (initialFilterBarConfig === undefined) {
             initialFilterBarConfig = initialStateValues;
         }
-        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
-        Object.keys(initialFilterBarConfig.values).forEach(key => {
+        updatedFilterDefinitionsValues.forEach(value => {
+            if (value.persistValue === false) {
+                // eslint-disable-next-line local-rules/no-typescript-assertion
+                const typedKey = value.filterKey;
+                // eslint-disable-next-line local-rules/no-typescript-assertion
+                initialFilterBarConfig.values[typedKey] = value.defaultValue;
+            }
+        });
+        // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-entries
+        Object.entries(initialFilterBarConfig.values).forEach(([key, value]) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             initialFilterBarConfig.setters[`set${capitalize(key)}`] = (callback) => setValue(key, callback);
         });
         return initialFilterBarConfig;
-    }, [name, setValue, initialStoredFilters]);
+    }, [name, initialStoredFilters, setValue]);
     return useMemo(() => ({ loadData, saveData }), [loadData, saveData]);
 };
 
@@ -1522,8 +1545,8 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, }) => {
     });
     useEffect(() => {
         onValuesChange?.(filterBarConfig.values);
-        saveData(filterBarConfig);
-    }, [filterBarConfig.values, filterBarConfig, onValuesChange, saveData]);
+        saveData(filterBarConfig, filterBarDefinition);
+    }, [filterBarConfig, filterBarDefinition, onValuesChange, saveData]);
     return useMemo(() => {
         return {
             filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
@@ -1550,7 +1573,14 @@ const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, }) => {
         setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
     });
     const [filterBarConfig, setFilterBarConfig] = useState(() => {
-        return loadData(objectValues(internalFilterBarDefinitions));
+        const initialConfig = {
+            values: Object.create({}),
+            setters: Object.create({}),
+            name,
+            initialState: Object.create({}),
+            starredFilterKeys: [],
+        };
+        return initialConfig;
     });
     const { filterMapActions, filterMapGetter } = useFilterBarActions({
         name,
@@ -1561,24 +1591,34 @@ const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, }) => {
         setValue: (key, callback) => setValue(setFilterBarConfig, key, callback),
     });
     const dataLoaded = useCallback((loadedFilterDefinitionsValues) => {
-        setIsDataLoaded(true);
-        setAsyncLoadedFilterBarDefinitions(loadedFilterDefinitionsValues);
+        setAsyncLoadedFilterBarDefinitions(() => loadedFilterDefinitionsValues);
         setFilterBarConfig(_ => loadData(objectValues(loadedFilterDefinitionsValues)));
+        setIsDataLoaded(true);
     }, [loadData]);
+    const filterBarConfigMemoed = useMemo(() => {
+        return { ...filterBarConfig, ...filterMapActions, ...filterMapGetter };
+    }, [filterBarConfig, filterMapActions, filterMapGetter]);
     useEffect(() => {
         if (isDataLoaded) {
-            onValuesChange?.(filterBarConfig.values);
-            saveData(filterBarConfig);
+            onValuesChange?.(filterBarConfigMemoed.values);
+            saveData(filterBarConfigMemoed, internalFilterBarDefinitions);
         }
-    }, [filterBarConfig.values, filterBarConfig, onValuesChange, saveData, isDataLoaded]);
+    }, [
+        filterBarConfigMemoed.values,
+        internalFilterBarDefinitions,
+        filterBarConfigMemoed,
+        onValuesChange,
+        saveData,
+        isDataLoaded,
+    ]);
     return useMemo(() => {
         return {
-            filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
+            filterBarConfig: filterBarConfigMemoed,
             filterBarDefinition: internalFilterBarDefinitions,
             dataLoaded,
             name,
         };
-    }, [filterBarConfig, filterMapActions, filterMapGetter, internalFilterBarDefinitions, dataLoaded, name]);
+    }, [filterBarConfigMemoed, internalFilterBarDefinitions, dataLoaded, name]);
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.3.66",
+  "version": "1.3.68",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,12 +14,12 @@
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
     "zod": "3.22.4",
-    "@trackunit/react-components": "1.4.47",
+    "@trackunit/react-components": "1.4.48",
     "@trackunit/react-core-hooks": "1.3.43",
-    "@trackunit/react-filter-components": "1.3.54",
-    "@trackunit/react-date-and-time-components": "1.3.53",
+    "@trackunit/react-filter-components": "1.3.55",
+    "@trackunit/react-date-and-time-components": "1.3.54",
     "@trackunit/shared-utils": "1.5.41",
-    "@trackunit/react-form-components": "1.3.54",
+    "@trackunit/react-form-components": "1.3.55",
     "@trackunit/react-core-contexts-api": "1.4.42",
     "@trackunit/geo-json-utils": "1.3.42",
     "@trackunit/i18n-library-translation": "1.3.44"

package/src/lib/hooks/utils/useFilterBarPersistence.d.ts

@@ -12,6 +12,6 @@ type FilterBarPersistenceProps<TFilterBarDefinition extends FilterBarDefinition>
  */
 export declare const useFilterBarPersistence: <TFilterBarDefinition extends FilterBarDefinition>({ name, setValue, }: FilterBarPersistenceProps<TFilterBarDefinition>) => {
     loadData: <TFilterBarDefinitionExtended extends TFilterBarDefinition>(updatedFilterDefinitionsValues: TFilterBarDefinitionExtended[keyof TFilterBarDefinitionExtended][]) => FilterBarConfig<TFilterBarDefinition>;
-    saveData: (filterBarConfig: Partial<FilterBarConfig<TFilterBarDefinition>>) => void;
+    saveData: (filterBarConfig: Partial<FilterBarConfig<TFilterBarDefinition>>, filterBarDefinitions: TFilterBarDefinition) => void;
 };
 export {};

package/src/lib/types/FilterTypes.d.ts

@@ -16,9 +16,7 @@ export type MinMaxFilterValue = {
 };
 export declare const areaFilterGeoJsonGeometrySchema: z.ZodUnion<[z.ZodObject<{
     type: z.ZodLiteral<"Polygon">;
-    coordinates: z.ZodArray<z.ZodEffects<z.ZodArray<z.ZodTuple<[z.ZodNumber, z.ZodNumber /**
-     * A function that determines if the filter should be displayed in the filter bar.
-     */], null>, "many">, [number, number][], [number, number][]>, "many">;
+    coordinates: z.ZodArray<z.ZodEffects<z.ZodArray<z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>, "many">, [number, number][], [number, number][]>, "many">;
 }, "strict", z.ZodTypeAny, {
     type: "Polygon";
     coordinates: [number, number][][];
@@ -86,6 +84,10 @@ export interface AbstractFilterDefinition {
      * If the filter should be on the provided filter bar as default
      */
     default?: boolean;
+    /**
+     * If the filter should be persisted this key to localstorage, if not it will not override if it is in the localstorage and not load if it is.
+     */
+    persistValue?: boolean;
     /**
      * The Group the filter will be shown under in the ui.
      *