@controleonline/ui-default 1.0.270 → 1.0.273

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { TextInput, View } from 'react-native';
 import { getAllStores, useStore } from '@store';
 import {
@@ -13,6 +13,8 @@ import {
 import CompactFilterSelector from './CompactFilterSelector';
 import DateShortcutFilter from './DateShortcutFilter';
 import { resolveNextDateFilterValue } from './dateFilterSelection';
+import { isFilledFilterValue } from './filterValue';
+import useDefaultTableTheme from '@controleonline/ui-default/src/react/components/table/useDefaultTableTheme';
 import {
   normalizeCollectionItems,
   resolveColumnListLoadParams,
@@ -25,9 +27,9 @@ import {
   sanitizeTableFiltersPreference,
 } from '../../utils/tableVisibleColumnsPreferences';
 import styles from './DefaultColumnFilter.styles';
-
-const DefaultColumnFilter = ({
-  accentColor = '#2563EB',
+
+const DefaultColumnFilter = ({
+  accentColor = null,
   column,
   filters = {},
   onBeforeOpen = null,
@@ -35,15 +37,22 @@ const DefaultColumnFilter = ({
   getOptionsForColumn = null,
   onChange = null,
   storeName = '',
-  style = null,
+  style = null,
 }) => {
   const store = useStore(storeName);
   const peopleStore = useStore('people');
   const configs = store?.getters?.configs || {};
+  const { resolvedAccentColor } = useDefaultTableTheme(accentColor);
   const [loadedItems, setLoadedItems] = useState([]);
   const [loadedKey, setLoadedKey] = useState('');
   const fieldName = getColumnKey(column);
   const currentCompanyId = peopleStore?.getters?.currentCompany?.id;
+
+  useEffect(() => {
+    setLoadedItems([]);
+    setLoadedKey('');
+  }, [currentCompanyId]);
+
   const requestChange = useCallback(
     (nextFieldName, value) => {
       if (typeof onChange === 'function') {
@@ -53,19 +62,16 @@ const DefaultColumnFilter = ({
 
       const currentFilters = store?.getters?.filters || {};
       const nextFilters = { ...(currentFilters || {}) };
-      const isEmpty =
-        value === null ||
-        value === undefined ||
-        normalizeText(value) === '' ||
-        (Array.isArray(value) && value.length === 0);
-
-      if (isEmpty) delete nextFilters[nextFieldName];
+      if (!isFilledFilterValue(value)) delete nextFilters[nextFieldName];
       else nextFilters[nextFieldName] = value;
 
       const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
       const tablePreferenceScope =
         configs.tablePreferenceScope ||
-        resolveDefaultTablePreferenceScope({ storeName });
+        resolveDefaultTablePreferenceScope({
+          companyId: currentCompanyId,
+          storeName,
+        });
       const persistedFilters = sanitizeTableFiltersPreference({
         columns,
         filters: nextFilters,
@@ -81,7 +87,7 @@ const DefaultColumnFilter = ({
 
       configs.onFilterChange?.(nextFilters);
     },
-    [configs, onChange, store, storeName],
+    [configs, currentCompanyId, onChange, store, storeName],
   );
   const resolveOptions = useCallback(
     targetColumn => {
@@ -149,11 +155,11 @@ const DefaultColumnFilter = ({
       loadedKey,
     ],
   );
-
-  if (column?.filter === false || column?.filters === false) {
-    return <View style={style} />;
-  }
-
+
+  if (column?.filter === false || column?.filters === false) {
+    return <View style={style} />;
+  }
+
   if (isDateLikeColumn(column)) {
     const filterValue = filters?.[fieldName] || {};
     return (
@@ -164,7 +170,7 @@ const DefaultColumnFilter = ({
           field={fieldName}
           labelCaption={global.t?.t(storeName, 'label', column?.label || fieldName)}
           value={filterValue.shortcut || 'all'}
-          customRange={filterValue.customRange || { from: '', to: '' }}
+          customRange={filterValue.customRange || { from: '', to: '' }}
           onChange={optionKey =>
             requestChange(
               fieldName,
@@ -175,25 +181,31 @@ const DefaultColumnFilter = ({
             ...(filterValue || {}),
             shortcut: 'custom',
             customRange: range,
-          })}
-        />
-      </View>
-    );
-  }
-
+          })}
+        />
+      </View>
+    );
+  }
+
   if (column?.list) {
-    const rawOptions = loadedItems.length > 0
-      ? mapOptions(column, loadedItems, storeName)
-      : buildOptionsFromColumn(column, resolveOptions, storeName);
+    /*
+     * @agents List options for filters must load only when the modal opens
+     * (onBeforeOpen). Falling back to the shared store items would show
+     * another company's payment types / wallets / categories.
+     */
+    const explicitOptions = resolveOptions(column);
+    const rawOptions = Array.isArray(explicitOptions)
+      ? mapOptions(column, explicitOptions, storeName)
+      : mapOptions(column, loadedItems, storeName);
     const options = [
       { key: '', label: global.t?.t(storeName, 'label', 'select') },
       ...rawOptions,
     ];
-    const selectedKey = normalizeOptionKey(filters?.[fieldName]);
-    const selected = options.find(option => option.key === selectedKey);
-
-    return (
-      <View style={[style, styles.filterCell]}>
+    const selectedKey = normalizeOptionKey(filters?.[fieldName]);
+    const selected = options.find(option => option.key === selectedKey);
+
+    return (
+      <View style={[style, styles.filterCell]}>
         <CompactFilterSelector
           dense
           store={storeName}
@@ -201,7 +213,7 @@ const DefaultColumnFilter = ({
           icon="filter"
           onBeforeOpen={onBeforeOpen || (() => loadListOptions())}
           onSearchChange={onSearchChange || (value => loadListOptions(value))}
-          accentColor={accentColor}
+          accentColor={resolvedAccentColor}
           active={Boolean(selectedKey)}
           label={selected?.label || options[0]?.label || ''}
           options={options}
@@ -211,21 +223,21 @@ const DefaultColumnFilter = ({
             requestChange(fieldName, optionKey);
             return true;
           }}
-        />
-      </View>
-    );
-  }
-
-  return (
-    <View style={[style, styles.filterCell]}>
-      <TextInput
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[style, styles.filterCell]}>
+      <TextInput
         style={styles.filterInput}
         value={normalizeText(filters?.[fieldName])}
         placeholder={global.t?.t(storeName, 'input', column?.label || fieldName)}
         onChangeText={value => requestChange(fieldName, value)}
       />
-    </View>
-  );
-};
-
-export default DefaultColumnFilter;
+    </View>
+  );
+};
+
+export default DefaultColumnFilter;