feat: save wo filters to localStorage

iib0011 · iib0011 · commit b1a47f773310 · 2026-05-20T16:07:32.000+01:00
diff --git a/frontend/src/content/own/WorkOrders/Filters/MoreFilters.tsx b/frontend/src/content/own/WorkOrders/Filters/MoreFilters.tsx
@@ -4,14 +4,21 @@ import Form from '../../components/form';
 import { IField } from '../../type';
 import { useTranslation } from 'react-i18next';
 import { Grid, Typography } from '@mui/material';
-import { useSelector } from '../../../../store';
+import { useDispatch, useSelector } from '../../../../store';
 import { UserMiniDTO } from '../../../../models/user';
 import {
   FilterFieldType,
   filterSingleField,
   getDateValue,
   getLabelAndValue
 } from '../../../../utils/filter';
+import { useEffect } from 'react';
+import { getAssetsMini } from '../../../../slices/asset';
+import { getCustomersMini } from '../../../../slices/customer';
+import { getTeamsMini } from '../../../../slices/team';
+import { getLocationsMini } from '../../../../slices/location';
+import { getCategories } from '../../../../slices/category';
+import { getUsersMini } from '../../../../slices/user';
 
 interface OwnProps {
   onFilterChange: (filterFields: FilterField[]) => void;
@@ -27,6 +34,7 @@ function MoreFilters({ filterFields, onFilterChange, onClose }: OwnProps) {
   const { usersMini } = useSelector((state) => state.users);
   const { assetsMini } = useSelector((state) => state.assets);
   const { teamsMini } = useSelector((state) => state.teams);
+  const dispatch = useDispatch();
 
   const filtersConfig: {
     accessor: string;
@@ -43,7 +51,7 @@ function MoreFilters({ filterFields, onFilterChange, onClose }: OwnProps) {
     { accessor: 'completedBy', fieldName: 'completedBy', type: 'array' },
     {
       accessor: 'customers',
-      fieldName: 'customer',
+      fieldName: 'customers',
       operator: 'inm',
       type: 'array'
     },
@@ -181,12 +189,12 @@ function MoreFilters({ filterFields, onFilterChange, onClose }: OwnProps) {
         break;
     }
   };
-  const getValuesFromfilterFields = (): {
+  const getValuesFromFilterFields = (): {
     [key: string]:
       | { label: string; value: string }
       | { label: string; value: number }[]
       | boolean
-      | [string, string];
+      | [Date | null, Date | null];
   } => {
     const typeValue = filterFields.find(
       (filterField) => filterField.field === 'parentPreventiveMaintenance'
@@ -239,7 +247,7 @@ function MoreFilters({ filterFields, onFilterChange, onClose }: OwnProps) {
       customers: getLabelAndValue(
         filterFields,
         customersMini,
-        'customer',
+        'customers',
         'name'
       ),
       createdBy: getLabelAndValue(
@@ -255,6 +263,27 @@ function MoreFilters({ filterFields, onFilterChange, onClose }: OwnProps) {
     };
   };
   const shape = {};
+
+  const USER_FIELDS = ['primaryUser', 'completedBy', 'createdBy', 'assignedTo'];
+
+  useEffect(() => {
+    const fieldsInUse = new Set(filterFields.map((f) => f.field));
+
+    if (fieldsInUse.has('asset')) dispatch(getAssetsMini());
+    if (fieldsInUse.has('customers') && !customersMini.length)
+      dispatch(getCustomersMini());
+    if (fieldsInUse.has('team') && !teamsMini.length) dispatch(getTeamsMini());
+    if (fieldsInUse.has('location') && !locationsMini.length)
+      dispatch(getLocationsMini());
+    if (
+      fieldsInUse.has('category') &&
+      !categories['work-order-categories']?.length
+    )
+      dispatch(getCategories('work-order-categories'));
+    if (USER_FIELDS.some((f) => fieldsInUse.has(f)) && !usersMini.length)
+      dispatch(getUsersMini());
+  }, [filterFields.length]);
+
   return (
     <Grid
       container
@@ -268,10 +297,12 @@ function MoreFilters({ filterFields, onFilterChange, onClose }: OwnProps) {
       </Grid>
       <Grid item xs={12}>
         <Form
+          key={`${assetsMini.length}-${teamsMini.length}-${customersMini.length}-${locationsMini.length}-${usersMini.length}-${categories['work-order-categories']?.length}`}
           fields={fields}
           validation={Yup.object().shape(shape)}
           submitText={t('save')}
-          values={getValuesFromfilterFields()}
+          values={getValuesFromFilterFields()}
+          enableReinitialize
           onChange={({ field, e }) => {}}
           onSubmit={async (values) => {
             let newFilters = [...filterFields];
diff --git a/frontend/src/content/own/WorkOrders/index.tsx b/frontend/src/content/own/WorkOrders/index.tsx
@@ -107,6 +107,56 @@ const fieldMapping: Record<string, string> = {
   createdAt: 'createdAt',
   dueDate: 'dueDate'
 };
+const normalizeFields = (fields: FilterField[]) =>
+  [...fields]
+    .sort((a, b) => a.field.localeCompare(b.field))
+    .map((f) => ({ ...f, values: f.values ? [...f.values].sort() : f.values }));
+
+const FILTERS_STORAGE_KEY = 'workOrder_filters';
+const DEFAULT_FILTER_FIELDS: FilterField[] = [
+  { field: 'archived', operation: 'eq', value: false },
+  {
+    field: 'priority',
+    operation: 'in',
+    values: ['NONE', 'LOW', 'MEDIUM', 'HIGH'],
+    value: '',
+    enumName: 'PRIORITY'
+  },
+  {
+    field: 'status',
+    operation: 'in',
+    values: ['OPEN', 'IN_PROGRESS', 'ON_HOLD'],
+    value: '',
+    enumName: 'STATUS'
+  }
+];
+
+const QUERY_SEARCH_FIELDS = new Set([
+  'title',
+  'description',
+  'feedback',
+  'customId'
+]);
+
+const getInitialFilterFields = (): FilterField[] => {
+  try {
+    const saved = localStorage.getItem(FILTERS_STORAGE_KEY);
+    if (saved) {
+      const parsed: FilterField[] = JSON.parse(saved);
+      const cleaned = parsed.filter((f) => !QUERY_SEARCH_FIELDS.has(f.field));
+      const fields = new Set(cleaned.map((f) => f.field));
+
+      for (const defaults of DEFAULT_FILTER_FIELDS) {
+        if (!fields.has(defaults.field)) cleaned.push(defaults);
+      }
+
+      return cleaned;
+    }
+  } catch {
+    /* ignore invalid JSON */
+  }
+  return DEFAULT_FILTER_FIELDS;
+};
 function WorkOrders() {
   const { t }: { t: any } = useTranslation();
   const [currentTab, setCurrentTab] = useState<string>('list');
@@ -175,27 +225,7 @@ function WorkOrders() {
 
   // Use the table state hook for TanStack Table
   const initialCriteria: SearchCriteria = {
-    filterFields: [
-      {
-        field: 'priority',
-        operation: 'in',
-        values: ['NONE', 'LOW', 'MEDIUM', 'HIGH'],
-        value: '',
-        enumName: 'PRIORITY'
-      },
-      {
-        field: 'status',
-        operation: 'in',
-        values: ['OPEN', 'IN_PROGRESS', 'ON_HOLD'],
-        value: '',
-        enumName: 'STATUS'
-      },
-      {
-        field: 'archived',
-        operation: 'eq',
-        value: false
-      }
-    ],
+    filterFields: getInitialFilterFields(),
     pageSize: 10,
     pageNum: 0,
     direction: 'DESC'
@@ -205,6 +235,7 @@ function WorkOrders() {
     sortField: 'updatedAt',
     direction: 'DESC'
   });
+
   const {
     sorting,
     setSorting,
@@ -296,6 +327,10 @@ function WorkOrders() {
     const newCriteria = { ...criteria };
     newCriteria.filterFields = newFilters;
     setCriteria(newCriteria);
+    const toSave = newFilters.filter(
+      (f) => !QUERY_SEARCH_FIELDS.includes(f.field)
+    );
+    localStorage.setItem(FILTERS_STORAGE_KEY, JSON.stringify(toSave));
   };
   useEffect(() => {
     if (workOrderId && isNumeric(workOrderId)) {
@@ -393,12 +428,12 @@ function WorkOrders() {
     showSnackBar(t('wo_delete_failure'), 'error');
 
   const onQueryChange = (event) => {
-    onSearchQueryChange<WorkOrder>(event, criteria, setCriteria, [
-      'title',
-      'description',
-      'feedback',
-      'customId'
-    ]);
+    onSearchQueryChange<WorkOrder>(
+      event,
+      criteria,
+      setCriteria,
+      QUERY_SEARCH_FIELDS.values()
+    );
   };
   const debouncedQueryChange = useMemo(() => debounce(onQueryChange, 1300), []);
   useEffect(() => {
@@ -959,7 +994,10 @@ function WorkOrders() {
                   minWidth: 0
                 }}
                 variant={
-                  _.isEqual(criteria.filterFields, initialCriteria.filterFields)
+                  _.isEqual(
+                    normalizeFields(criteria.filterFields),
+                    normalizeFields(DEFAULT_FILTER_FIELDS)
+                  )
                     ? 'outlined'
                     : 'contained'
                 }
diff --git a/frontend/src/content/own/components/form/index.tsx b/frontend/src/content/own/components/form/index.tsx
@@ -35,6 +35,7 @@ interface PropsType {
   validation?: ObjectSchema<any>;
   isLoading?: boolean;
   isButtonEnabled?: (values: IHash<any>, ...props: any[]) => boolean;
+  enableReinitialize?: boolean;
 }
 
 export default (props: PropsType) => {
@@ -106,6 +107,7 @@ export default (props: PropsType) => {
         validateOnChange={false}
         validateOnBlur={false}
         initialValues={props.values || {}}
+        enableReinitialize={props.enableReinitialize}
         onSubmit={(
           values,
           { resetForm, setErrors, setStatus, setSubmitting }
diff --git a/frontend/src/slices/asset.ts b/frontend/src/slices/asset.ts
@@ -178,7 +178,7 @@ export const reducer = slice.reducer;
 export const getAssets =
   (criteria: SearchCriteria): AppThunk =>
   async (dispatch) => {
-    const { signal } = createCancellableRequest();
+    const { signal } = createCancellableRequest('getAssets');
     try {
       dispatch(slice.actions.setLoadingGet({ loading: true }));
       const assets = await api.post<Page<AssetDTO>>(
@@ -197,7 +197,7 @@ export const getAssets =
 export const getAssetsMini =
   (locationId?: number): AppThunk =>
   async (dispatch) => {
-    const { signal } = createCancellableRequest();
+    const { signal } = createCancellableRequest('getAssetsMini');
     try {
       dispatch(slice.actions.setLoadingGet({ loading: true }));
       const assets = await api.get<AssetMiniDTO[]>(
diff --git a/frontend/src/slices/category.ts b/frontend/src/slices/category.ts
@@ -70,7 +70,7 @@ const slice = createSlice({
 export const reducer = slice.reducer;
 
 export const getCategories =
-  (basePath): AppThunk =>
+  (basePath: string): AppThunk =>
   async (dispatch) => {
     try {
       dispatch(slice.actions.loading({ basePath, loading: true }));
diff --git a/frontend/src/slices/location.ts b/frontend/src/slices/location.ts
@@ -142,7 +142,7 @@ export const reducer = slice.reducer;
 export const getLocations =
   (criteria: SearchCriteria): AppThunk =>
   async (dispatch) => {
-    const { signal } = createCancellableRequest();
+    const { signal } = createCancellableRequest('getLocations');
     try {
       dispatch(slice.actions.setLoadingGet({ loading: true }));
       const locations = await api.post<Page<Location>>(
@@ -159,7 +159,7 @@ export const getLocations =
     }
   };
 export const getLocationsMini = (): AppThunk => async (dispatch) => {
-  const { signal } = createCancellableRequest();
+  const { signal } = createCancellableRequest('getLocationsMini');
   try {
     dispatch(slice.actions.setLoadingGet({ loading: true }));
     const locations = await api.get<LocationMiniDTO[]>('locations/mini', {
diff --git a/frontend/src/utils/cancellableRequest.ts b/frontend/src/utils/cancellableRequest.ts
@@ -8,27 +8,23 @@ interface CancellableRequest {
   signal: AbortSignal | null;
 }
 
-let currentController: AbortController | null = null;
-
 /**
  * Creates a new cancellable request, aborting any previous request.
  * @returns CancellableRequest object with abort function and signal
  */
-export function createCancellableRequest(): CancellableRequest {
-  // Abort previous request if it exists
-  if (currentController) {
-    currentController.abort();
-  }
+const controllers = new Map<string, AbortController>();
+
+export function createCancellableRequest(key: string): CancellableRequest {
+  controllers.get(key)?.abort();
 
-  // Create new controller
-  currentController = new AbortController();
+  const controller = new AbortController();
+  controllers.set(key, controller);
 
   return {
-    abort: () => currentController?.abort(),
-    signal: currentController.signal
+    abort: () => controller.abort(),
+    signal: controller.signal
   };
 }
-
 /**
  * Checks if an error is an AbortError (request was cancelled).
  */
diff --git a/frontend/src/utils/filter.ts b/frontend/src/utils/filter.ts
@@ -14,26 +14,24 @@ export const getLabelAndValue = <T extends { id: number }>(
       .find((filterField) => filterField.field === fieldName)
       ?.values?.map((id) => ({
         label: formatter
-          ? formatter(minis.find((mini) => mini.id === id))
-          : minis.find((mini) => mini.id === id)[labelAccessor].toString(),
+          ? formatter(minis?.find((mini) => mini.id === id) || ({} as T))
+          : minis?.find((mini) => mini.id === id)?.[labelAccessor].toString(),
         value: id
       })) ?? null
   );
 };
 export const getDateValue = (
   filterFields: FilterField[],
   fieldName: string
-): [string, string] => {
-  return [
-    filterFields.find(
-      (filterField) =>
-        filterField.field === fieldName && filterField.operation === 'ge'
-    )?.value ?? null,
-    filterFields.find(
-      (filterField) =>
-        filterField.field === fieldName && filterField.operation === 'le'
-    )?.value ?? null
-  ];
+): [Date | null, Date | null] => {
+  const find = (operation: string) => {
+    const value = filterFields.find(
+      (f) => f.field === fieldName && f.operation === operation
+    )?.value;
+    return value ? new Date(value as string) : null;
+  };
+
+  return [find('ge'), find('le')];
 };
 
 export const filterSingleField = (
