@controleonline/ui-default 1.0.270 → 1.0.272

package/src/react/components/filters/DefaultExternalFilters.js

@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Modal,
-  ScrollView,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
-  useWindowDimensions,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+  useWindowDimensions,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import { getAllStores, useStore } from '@store';
@@ -19,11 +19,16 @@ import {
   isDateLikeColumn,
   resolveStoreNameFromList,
 } from '../inputs/defaultInputUtils';
-import CompactFilterSelector from './CompactFilterSelector';
-import DateShortcutFilter from './DateShortcutFilter';
-import { resolveNextDateFilterValue } from './dateFilterSelection';
-import styles from './DefaultExternalFilters.styles';
-
+import CompactFilterSelector from './CompactFilterSelector';
+import DateShortcutFilter from './DateShortcutFilter';
+import { resolveNextDateFilterValue } from './dateFilterSelection';
+import {
+  persistTableFiltersPreference,
+  resolveDefaultTablePreferenceScope,
+  sanitizeTableFiltersPreference,
+} from '../../utils/tableVisibleColumnsPreferences';
+import styles from './DefaultExternalFilters.styles';
+
 const DEFAULT_COMPACT_BREAKPOINT = 768;
 const noop = () => {};
 
@@ -94,7 +99,7 @@ const shouldIncludeColumn = column =>
   column?.externalFilter === true &&
   column?.filter !== false &&
   column?.filters !== false;
-
+
 const normalizeFilterValue = value => {
   if (value && typeof value === 'object') {
     return normalizeFilterValue(value.value ?? value.id ?? value['@id'] ?? value.key ?? '');
@@ -102,56 +107,56 @@ const normalizeFilterValue = value => {
 
   return normalizeText(value);
 };
-
-const isFilledFilterValue = value => {
-  if (Array.isArray(value)) return value.length > 0;
-  if (value && typeof value === 'object') {
-    return Object.values(value).some(isFilledFilterValue);
-  }
-
-  return normalizeText(value) !== '';
-};
-
-const resolveDateState = filterValue => {
-  if (!filterValue || typeof filterValue !== 'object') {
-    return {
-      customRange: { from: '', to: '' },
-      value: 'all',
-    };
-  }
-
-  if (filterValue.shortcut) {
-    return {
-      customRange: filterValue.customRange || { from: '', to: '' },
-      value: filterValue.shortcut,
-    };
-  }
-
-  if (filterValue.start || filterValue.end || filterValue.after || filterValue.before) {
-    return {
-      customRange: {
-        from: filterValue.start || filterValue.after || '',
-        to: filterValue.end || filterValue.before || '',
-      },
-      value: 'custom',
-    };
-  }
-
-  return {
-    customRange: { from: '', to: '' },
-    value: 'all',
-  };
-};
-
-const resolveIcon = column => {
-  const key = getColumnKey(column);
-  if (key === 'status') return 'check-circle';
-  if (key === 'category') return 'tag';
+
+const isFilledFilterValue = value => {
+  if (Array.isArray(value)) return value.length > 0;
+  if (value && typeof value === 'object') {
+    return Object.values(value).some(isFilledFilterValue);
+  }
+
+  return normalizeText(value) !== '';
+};
+
+const resolveDateState = filterValue => {
+  if (!filterValue || typeof filterValue !== 'object') {
+    return {
+      customRange: { from: '', to: '' },
+      value: 'all',
+    };
+  }
+
+  if (filterValue.shortcut) {
+    return {
+      customRange: filterValue.customRange || { from: '', to: '' },
+      value: filterValue.shortcut,
+    };
+  }
+
+  if (filterValue.start || filterValue.end || filterValue.after || filterValue.before) {
+    return {
+      customRange: {
+        from: filterValue.start || filterValue.after || '',
+        to: filterValue.end || filterValue.before || '',
+      },
+      value: 'custom',
+    };
+  }
+
+  return {
+    customRange: { from: '', to: '' },
+    value: 'all',
+  };
+};
+
+const resolveIcon = column => {
+  const key = getColumnKey(column);
+  if (key === 'status') return 'check-circle';
+  if (key === 'category') return 'tag';
   if (isDateLikeColumn(column)) return 'calendar';
   return 'sliders';
 };
-
-const DefaultExternalFilters = ({
+
+const DefaultExternalFilters = ({
   accentColor = null,
   compactBreakpoint = DEFAULT_COMPACT_BREAKPOINT,
   dateOptionKeys = ['all', 'today', 'yesterday', '7d', '30d', 'custom'],
@@ -165,22 +170,30 @@ const DefaultExternalFilters = ({
   const { width } = useWindowDimensions();
   const externalFilterStore = useStore(storeName);
   const peopleStore = useStore('people');
+  const storeConfigs = externalFilterStore?.getters?.configs || {};
+  const tablePreferenceScope =
+    storeConfigs.tablePreferenceScope ||
+    resolveDefaultTablePreferenceScope({
+      companyId: peopleStore?.getters?.currentCompany?.id,
+      storeName,
+    });
   const themeStore = useStore('theme');
   const [isFiltersModalOpen, setIsFiltersModalOpen] = useState(false);
+  const [loadedListItemsByColumn, setLoadedListItemsByColumn] = useState({});
   const loadedListStoresRef = useRef(new Set());
   const { currentCompany } = peopleStore.getters || {};
   const { colors: themeColors } = themeStore.getters;
-  const themeTokens = useMemo(
-    () => ({...themeColors, ...(currentCompany?.theme?.colors || {})}),
-    [currentCompany?.theme?.colors, themeColors],
-  );
-  const palette = useMemo(
-    () => resolveThemePalette(themeTokens, colors),
-    [themeTokens],
-  );
-  const resolvedAccentColor = accentColor || palette.primary;
-  const surfaceColor = themeTokens['bg-odd-light'] || palette.background;
-  const panelColor = themeTokens['bg-headers-light'] || palette.background;
+  const themeTokens = useMemo(
+    () => ({...themeColors, ...(currentCompany?.theme?.colors || {})}),
+    [currentCompany?.theme?.colors, themeColors],
+  );
+  const palette = useMemo(
+    () => resolveThemePalette(themeTokens, colors),
+    [themeTokens],
+  );
+  const resolvedAccentColor = accentColor || palette.primary;
+  const surfaceColor = themeTokens['bg-odd-light'] || palette.background;
+  const panelColor = themeTokens['bg-headers-light'] || palette.background;
   const borderColor = palette.border;
   const textColor = palette.text;
   const textSecondaryColor = palette.textSecondary;
@@ -199,35 +212,60 @@ const DefaultExternalFilters = ({
     () => resolvedColumns.filter(shouldIncludeColumn),
     [resolvedColumns],
   );
-  const activeCount = useMemo(
-    () => filterColumns.filter(column => isFilledFilterValue(filters[getColumnKey(column)])).length,
-    [filterColumns, filters],
-  );
-
-  useEffect(() => {
-    onActiveCountChange?.(activeCount);
-  }, [activeCount, onActiveCountChange]);
-
-  const updateFilter = useCallback((key, value) => {
-    const nextFilters = { ...(filters || {}) };
-    if (!isFilledFilterValue(value)) {
-      delete nextFilters[key];
-    } else {
-      nextFilters[key] = value;
-    }
-    onChangeFilters?.(nextFilters);
-  }, [filters, onChangeFilters]);
-
-  const clearFilters = useCallback(() => {
-    onChangeFilters?.({});
-  }, [onChangeFilters]);
-
+  const activeCount = useMemo(
+    () => filterColumns.filter(column => isFilledFilterValue(filters[getColumnKey(column)])).length,
+    [filterColumns, filters],
+  );
+
+  useEffect(() => {
+    onActiveCountChange?.(activeCount);
+  }, [activeCount, onActiveCountChange]);
+
+  const applyFilters = useCallback(nextFilters => {
+    const resolvedFilters =
+      nextFilters && typeof nextFilters === 'object' && !Array.isArray(nextFilters)
+        ? nextFilters
+        : {};
+    const columns = Array.isArray(externalFilterStore?.getters?.columns)
+      ? externalFilterStore.getters.columns
+      : [];
+    const persistedFilters = sanitizeTableFiltersPreference({
+      columns,
+      filters: resolvedFilters,
+    });
+
+    persistTableFiltersPreference(tablePreferenceScope, persistedFilters);
+
+    if (typeof externalFilterStore?.actions?.setFilters === 'function') {
+      externalFilterStore.actions.setFilters(resolvedFilters);
+    } else if (externalFilterStore?.getters) {
+      externalFilterStore.getters.filters = resolvedFilters;
+    }
+
+    onChangeFilters?.(resolvedFilters);
+  }, [externalFilterStore, onChangeFilters, tablePreferenceScope]);
+
+  const updateFilter = useCallback((key, value) => {
+    const nextFilters = { ...(filters || {}) };
+    if (!isFilledFilterValue(value)) {
+      delete nextFilters[key];
+    } else {
+      nextFilters[key] = value;
+    }
+    applyFilters(nextFilters);
+  }, [applyFilters, filters]);
+
+  const clearFilters = useCallback(() => {
+    applyFilters({});
+  }, [applyFilters]);
+
   useEffect(() => {
     if (!isCompactView) setIsFiltersModalOpen(false);
   }, [isCompactView]);
 
   useEffect(() => {
     loadedListStoresRef.current.clear();
+    setLoadedListItemsByColumn({});
   }, [currentCompany?.id]);
 
   const loadListOptionsForColumn = useCallback((column, searchValue = '') => {
@@ -254,18 +292,14 @@ const DefaultExternalFilters = ({
     });
     const hasScopedParams = Object.keys(listLoadParams).length > 0;
 
+    const loadKey = `${getColumnKey(column)}:${listStoreName}:${actionName}:${stableSerialize(listLoadParams)}`;
+    const columnKey = getColumnKey(column);
     if (
-      !normalizeText(searchValue) &&
-      !hasScopedParams &&
-      Array.isArray(listStore?.getters?.items) &&
-      listStore.getters.items.length > 0
+      loadedListStoresRef.current.has(loadKey) &&
+      columnKey &&
+      Array.isArray(loadedListItemsByColumn[columnKey])
     ) {
-      return Promise.resolve(listStore.getters.items);
-    }
-
-    const loadKey = `${getColumnKey(column)}:${listStoreName}:${actionName}:${stableSerialize(listLoadParams)}`;
-    if (loadedListStoresRef.current.has(loadKey)) {
-      return Promise.resolve(listStore?.getters?.items || []);
+      return Promise.resolve(loadedListItemsByColumn[columnKey]);
     }
 
     loadedListStoresRef.current.add(loadKey);
@@ -277,65 +311,93 @@ const DefaultExternalFilters = ({
           skipSystemError: true,
         },
       }),
-    ).catch(error => {
-      loadedListStoresRef.current.delete(loadKey);
-      throw error;
-    });
-  }, [currentCompany?.id, getOptionsForColumn, requestParams]);
+    )
+      .then(response => {
+        const items = Array.isArray(response)
+          ? response
+          : Array.isArray(response?.member)
+            ? response.member
+            : Array.isArray(response?.['hydra:member'])
+              ? response['hydra:member']
+              : listStore?.getters?.items || [];
+        const resolvedColumnKey = getColumnKey(column);
+        if (resolvedColumnKey) {
+          setLoadedListItemsByColumn(current => ({
+            ...current,
+            [resolvedColumnKey]: items,
+          }));
+        }
+        return items;
+      })
+      .catch(error => {
+        loadedListStoresRef.current.delete(loadKey);
+        throw error;
+      });
+  }, [currentCompany?.id, getOptionsForColumn, loadedListItemsByColumn, requestParams]);
 
   if (filterColumns.length === 0) return null;
-
-  const renderFilterField = (column, compact = false) => {
-    const key = getColumnKey(column);
-    const fieldStyle = compact ? styles.modalField : styles.field;
-
+
+  const renderFilterField = (column, compact = false) => {
+    const key = getColumnKey(column);
+    const fieldStyle = compact ? styles.modalField : styles.field;
+
     if (isDateLikeColumn(column)) {
       const dateState = resolveDateState(filters[key]);
-
-      return (
-        <View key={key} style={fieldStyle}>
+
+      return (
+        <View key={key} style={fieldStyle}>
           <DateShortcutFilter
             value={dateState.value}
-            onChange={optionKey => {
-              updateFilter(
-                key,
-                resolveNextDateFilterValue(filters[key], optionKey),
-              );
-            }}
-            customRange={dateState.customRange}
-            onCustomRangeChange={range => {
-              updateFilter(key, {
-                ...(filters[key] || {}),
-                shortcut: 'custom',
-                customRange: range,
-              });
-            }}
-            dense
+            onChange={optionKey => {
+              updateFilter(
+                key,
+                resolveNextDateFilterValue(filters[key], optionKey),
+              );
+            }}
+            customRange={dateState.customRange}
+            onCustomRangeChange={range => {
+              updateFilter(key, {
+                ...(filters[key] || {}),
+                shortcut: 'custom',
+                customRange: range,
+              });
+            }}
+            dense
             store={storeName}
             field={key}
             labelCaption={global.t?.t(storeName, 'label', column.label || key)}
             optionKeys={dateOptionKeys}
-            colors={{
-              accent: resolvedAccentColor,
-              appBg: 'transparent',
-              border: borderColor,
-              borderSoft: withOpacity(borderColor, 0.72),
-              cardBg: palette.background,
-              cardBgSoft: surfaceColor,
-              danger: palette.error,
-              isLight: true,
-              panelBg: panelColor,
-              pillTextDark: onAccentColor,
-              textPrimary: textColor,
-              textSecondary: textSecondaryColor,
-            }}
-          />
-        </View>
-      );
+            colors={{
+              accent: resolvedAccentColor,
+              appBg: 'transparent',
+              border: borderColor,
+              borderSoft: withOpacity(borderColor, 0.72),
+              cardBg: palette.background,
+              cardBgSoft: surfaceColor,
+              danger: palette.error,
+              isLight: true,
+              panelBg: panelColor,
+              pillTextDark: onAccentColor,
+              textPrimary: textColor,
+              textSecondary: textSecondaryColor,
+            }}
+          />
+        </View>
+      );
     }
 
     if (column.list) {
       const listStoreName = resolveStoreNameFromList(column?.list);
+      const columnKey = getColumnKey(column);
+      const explicitOptions = getOptionsForColumn?.(column);
+      const loadedItems = loadedListItemsByColumn[columnKey] || [];
+      /*
+       * @agents Do not read shared store items here — only options loaded on
+       * modal open (or explicitly provided) so company-scoped lists stay correct.
+       */
+      const listSource = Array.isArray(explicitOptions) && explicitOptions.length > 0
+        ? explicitOptions
+        : loadedItems;
       const options = [
         {
           key: '',
@@ -345,21 +407,25 @@ const DefaultExternalFilters = ({
               : null) ||
             global.t?.t(storeName || 'invoice', 'label', 'select'),
         },
-        ...buildOptionsFromColumn(column, getOptionsForColumn, storeName),
+        ...buildOptionsFromColumn(
+          column,
+          () => listSource,
+          storeName,
+        ),
       ];
       const selectedKey = normalizeFilterValue(filters[key]);
-      const selectedLabel =
-        options.find(option => option.key === selectedKey)?.label ||
-        options[0]?.label ||
-        '';
-
-      return (
-        <View key={key} style={fieldStyle}>
-          <CompactFilterSelector
-            icon={resolveIcon(column)}
-            label={selectedLabel}
-            accentColor={resolvedAccentColor}
-            active={Boolean(selectedKey)}
+      const selectedLabel =
+        options.find(option => option.key === selectedKey)?.label ||
+        options[0]?.label ||
+        '';
+
+      return (
+        <View key={key} style={fieldStyle}>
+          <CompactFilterSelector
+            icon={resolveIcon(column)}
+            label={selectedLabel}
+            accentColor={resolvedAccentColor}
+            active={Boolean(selectedKey)}
             dense
             store={storeName}
             field={key}
@@ -368,36 +434,36 @@ const DefaultExternalFilters = ({
             options={options}
             searchable
             selectedKey={selectedKey}
-            onSelect={optionKey => {
-              updateFilter(key, optionKey);
-              return true;
-            }}
-          />
-        </View>
-      );
-    }
-
-    return (
-      <View key={key} style={[fieldStyle, styles.inputWrap, { borderColor, backgroundColor: surfaceColor }]}>
-        <Text style={[styles.inputLabel, { color: textSecondaryColor }]}>
-          {global.t?.t(storeName, 'input', column.label || key)}
-        </Text>
-        <TextInput
-          style={[styles.input, { color: textColor }]}
-          value={normalizeText(filters[key])}
-          onChangeText={value => updateFilter(key, value)}
-          onSubmitEditing={() => onChangeFilters?.(filters)}
-        />
-      </View>
-    );
-  };
-
-  const filterTitle = global.t?.t(storeName, 'label', 'filters');
-  const filterFields = compact => filterColumns.map(column => renderFilterField(column, compact));
-
+            onSelect={optionKey => {
+              updateFilter(key, optionKey);
+              return true;
+            }}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <View key={key} style={[fieldStyle, styles.inputWrap, { borderColor, backgroundColor: surfaceColor }]}>
+        <Text style={[styles.inputLabel, { color: textSecondaryColor }]}>
+          {global.t?.t(storeName, 'input', column.label || key)}
+        </Text>
+        <TextInput
+          style={[styles.input, { color: textColor }]}
+          value={normalizeText(filters[key])}
+          onChangeText={value => updateFilter(key, value)}
+          onSubmitEditing={() => applyFilters(filters)}
+        />
+      </View>
+    );
+  };
+
+  const filterTitle = global.t?.t(storeName, 'label', 'filters');
+  const filterFields = compact => filterColumns.map(column => renderFilterField(column, compact));
+
   if (isCompactView) {
-    return (
-      <View style={styles.mobileWrap}>
+    return (
+      <View style={styles.mobileWrap}>
         <TouchableOpacity
           style={[
             styles.mobileButton,
@@ -422,83 +488,83 @@ const DefaultExternalFilters = ({
               <Text style={styles.mobileCountBadgeText}>{activeCount}</Text>
             </View>
           ) : null}
-        </TouchableOpacity>
-
-        <Modal
-          transparent
-          visible={isFiltersModalOpen}
-          animationType="fade"
-          onRequestClose={() => setIsFiltersModalOpen(false)}
-        >
-          <TouchableWithoutFeedback onPress={() => setIsFiltersModalOpen(false)}>
-            <View style={[styles.modalOverlay, { backgroundColor: withOpacity(textColor, 0.42) }]}>
-              <TouchableWithoutFeedback onPress={noop}>
-                <View style={[styles.modalCard, { borderColor, backgroundColor: surfaceColor }]}>
-                  <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
-                    <Text style={[styles.modalTitle, { color: textColor }]}>{filterTitle}</Text>
-                    <TouchableOpacity
-                      style={[styles.modalCloseButton, { borderColor: borderColor, backgroundColor: surfaceColor }]}
-                      activeOpacity={0.82}
-                      onPress={() => setIsFiltersModalOpen(false)}
-                    >
-                      <Icon name="x" size={18} color={textSecondaryColor} />
-                    </TouchableOpacity>
-                  </View>
-
-                  <ScrollView
-                    style={styles.modalScroll}
-                    contentContainerStyle={styles.modalContent}
-                    keyboardShouldPersistTaps="handled"
-                  >
-                    {filterFields(true)}
-                  </ScrollView>
-
-                  <View style={[styles.modalActions, { borderTopColor: borderColor }]}>
-                    {activeCount > 0 ? (
-                      <TouchableOpacity
-                        style={[styles.modalSecondaryButton, { borderColor: borderColor, backgroundColor: surfaceColor }]}
-                        activeOpacity={0.84}
-                        onPress={clearFilters}
-                      >
-                        <Text style={[styles.modalSecondaryButtonText, { color: textColor }]}>
-                          {global.t?.t(storeName, 'button', 'clear')}
-                        </Text>
-                      </TouchableOpacity>
-                    ) : null}
+        </TouchableOpacity>
+
+        <Modal
+          transparent
+          visible={isFiltersModalOpen}
+          animationType="fade"
+          onRequestClose={() => setIsFiltersModalOpen(false)}
+        >
+          <TouchableWithoutFeedback onPress={() => setIsFiltersModalOpen(false)}>
+            <View style={[styles.modalOverlay, { backgroundColor: withOpacity(textColor, 0.42) }]}>
+              <TouchableWithoutFeedback onPress={noop}>
+                <View style={[styles.modalCard, { borderColor, backgroundColor: surfaceColor }]}>
+                  <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
+                    <Text style={[styles.modalTitle, { color: textColor }]}>{filterTitle}</Text>
+                    <TouchableOpacity
+                      style={[styles.modalCloseButton, { borderColor: borderColor, backgroundColor: surfaceColor }]}
+                      activeOpacity={0.82}
+                      onPress={() => setIsFiltersModalOpen(false)}
+                    >
+                      <Icon name="x" size={18} color={textSecondaryColor} />
+                    </TouchableOpacity>
+                  </View>
+
+                  <ScrollView
+                    style={styles.modalScroll}
+                    contentContainerStyle={styles.modalContent}
+                    keyboardShouldPersistTaps="handled"
+                  >
+                    {filterFields(true)}
+                  </ScrollView>
+
+                  <View style={[styles.modalActions, { borderTopColor: borderColor }]}>
+                    {activeCount > 0 ? (
+                      <TouchableOpacity
+                        style={[styles.modalSecondaryButton, { borderColor: borderColor, backgroundColor: surfaceColor }]}
+                        activeOpacity={0.84}
+                        onPress={clearFilters}
+                      >
+                        <Text style={[styles.modalSecondaryButtonText, { color: textColor }]}>
+                          {global.t?.t(storeName, 'button', 'clear')}
+                        </Text>
+                      </TouchableOpacity>
+                    ) : null}
                     <TouchableOpacity
                       style={[styles.modalPrimaryButton, { backgroundColor: buttonBackgroundColor }]}
                       activeOpacity={0.84}
                       onPress={() => setIsFiltersModalOpen(false)}
                     >
                       <Text style={[styles.modalPrimaryButtonText, { color: buttonTextColor }]}>
-                        {global.t?.t(storeName, 'button', 'apply')}
-                      </Text>
-                    </TouchableOpacity>
-                  </View>
-                </View>
-              </TouchableWithoutFeedback>
-            </View>
-          </TouchableWithoutFeedback>
-        </Modal>
-      </View>
-    );
-  }
-
-    return (
-    <View style={styles.wrap}>
-      {filterFields(false)}
-
-      {activeCount > 0 ? (
-        <TouchableOpacity
-          style={[styles.clearButton, { borderColor: borderColor, backgroundColor: surfaceColor }]}
-          activeOpacity={0.82}
-          onPress={clearFilters}
-        >
-          <Icon name="x" size={14} color={textSecondaryColor} />
-        </TouchableOpacity>
-      ) : null}
-    </View>
-  );
-};
-
-export default DefaultExternalFilters;
+                        {global.t?.t(storeName, 'button', 'apply')}
+                      </Text>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </TouchableWithoutFeedback>
+            </View>
+          </TouchableWithoutFeedback>
+        </Modal>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.wrap}>
+      {filterFields(false)}
+
+      {activeCount > 0 ? (
+        <TouchableOpacity
+          style={[styles.clearButton, { borderColor: borderColor, backgroundColor: surfaceColor }]}
+          activeOpacity={0.82}
+          onPress={clearFilters}
+        >
+          <Icon name="x" size={14} color={textSecondaryColor} />
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+};
+
+export default DefaultExternalFilters;