@controleonline/ui-default 1.0.263 → 1.0.265

package/src/react/components/files/DefaultFile.js

@@ -1,46 +1,46 @@
-import React, {memo, useMemo} from 'react';
-import {Image} from 'react-native';
-import {useStore} from '@store';
-import {resolveDefaultFileSource} from '@controleonline/ui-common/src/react/utils/fileUrl';
-
-const resolveCompanyFromStore = peopleGetters => {
-  if (peopleGetters?.defaultCompany?.id) {
-    return peopleGetters.defaultCompany;
-  }
-
-  if (peopleGetters?.currentCompany?.id) {
-    return peopleGetters.currentCompany;
-  }
-
-  return null;
-};
-
-const DefaultFile = ({
-  file,
-  source,
-  company,
-  appDomain = '',
-  headers = {},
-  ...imageProps
-}) => {
-  const peopleStore = useStore('people');
-  const peopleGetters = peopleStore?.getters || {};
-  const resolvedCompany = company || resolveCompanyFromStore(peopleGetters);
-  const resolvedSource = useMemo(
-    () =>
-      resolveDefaultFileSource(source ?? file, {
-        company: resolvedCompany,
-        appDomain,
-        headers,
-      }),
-    [appDomain, company, file, headers, resolvedCompany, source],
-  );
-
-  if (!resolvedSource) {
-    return null;
-  }
-
-  return <Image {...imageProps} source={resolvedSource} />;
-};
-
-export default memo(DefaultFile);
+import React, {memo, useMemo} from 'react';
+import {Image} from 'react-native';
+import {useStore} from '@store';
+import {resolveDefaultFileSource} from '@controleonline/ui-common/src/react/utils/fileUrl';
+
+const resolveCompanyFromStore = peopleGetters => {
+  if (peopleGetters?.defaultCompany?.id) {
+    return peopleGetters.defaultCompany;
+  }
+
+  if (peopleGetters?.currentCompany?.id) {
+    return peopleGetters.currentCompany;
+  }
+
+  return null;
+};
+
+const DefaultFile = ({
+  file,
+  source,
+  company,
+  appDomain = '',
+  headers = {},
+  ...imageProps
+}) => {
+  const peopleStore = useStore('people');
+  const peopleGetters = peopleStore?.getters || {};
+  const resolvedCompany = company || resolveCompanyFromStore(peopleGetters);
+  const resolvedSource = useMemo(
+    () =>
+      resolveDefaultFileSource(source ?? file, {
+        company: resolvedCompany,
+        appDomain,
+        headers,
+      }),
+    [appDomain, company, file, headers, resolvedCompany, source],
+  );
+
+  if (!resolvedSource) {
+    return null;
+  }
+
+  return <Image {...imageProps} source={resolvedSource} />;
+};
+
+export default memo(DefaultFile);

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

@@ -1,10 +1,11 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import {
-  Modal,
-  ScrollView,
-  Text,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
+  Modal,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
   useWindowDimensions,
   View,
 } from 'react-native';
@@ -88,16 +89,20 @@ const CompactFilterSelector = ({
   icon = 'sliders',
   label = '',
   labelCaption = '',
-  onClose = null,
-  onSelect = null,
-  options = [],
-  selectedKey = '',
+  onClose = null,
+  onBeforeOpen = null,
+  onSearchChange = null,
+  onSelect = null,
+  options = [],
+  searchable = false,
+  selectedKey = '',
   field = '',
   store = '',
   themeColors = {},
   title = '',
 }) => {
-  const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [searchText, setSearchText] = useState('');
   const { width: windowWidth } = useWindowDimensions();
   const resolvedTheme = useMemo(
     () => buildTheme({ accentColor, themeColors }),
@@ -115,16 +120,56 @@ const CompactFilterSelector = ({
   const resolvedLabelCaption = labelCaption || storeFieldLabel;
   const resolvedTitle = title || storeFieldLabel;
 
-  const closeModal = useCallback(() => {
-    setVisible(false);
-    onClose?.();
-  }, [onClose]);
+  const closeModal = useCallback(() => {
+    setVisible(false);
+    setSearchText('');
+    onClose?.();
+  }, [onClose]);
 
-  const openModal = useCallback(() => {
-    if (!disabled) {
-      setVisible(true);
+  const openModal = useCallback(() => {
+    if (disabled) {
+      return;
     }
-  }, [disabled]);
+
+    try {
+      const maybePromise = onBeforeOpen?.();
+      if (maybePromise && typeof maybePromise.then === 'function') {
+        maybePromise
+          .then(() => {
+            setVisible(true);
+          })
+          .catch(() => {
+            // Keep the modal closed if the lazy load fails.
+          });
+        return;
+      }
+    } catch (error) {
+      return;
+    }
+
+    setVisible(true);
+  }, [disabled, onBeforeOpen]);
+
+  /*
+   * @agents
+   * List filters must keep the column/store contract in the default component:
+   * open loads the initial page, typing delegates autocomplete to the caller
+   * that knows the column list store/action.
+   */
+  const handleSearchChange = useCallback(value => {
+    setSearchText(value);
+    onSearchChange?.(value);
+  }, [onSearchChange]);
+
+  const filteredOptions = useMemo(() => {
+    const normalizedSearch = normalizeText(searchText).toLowerCase();
+    if (!searchable || onSearchChange || !normalizedSearch) return options;
+
+    return options.filter(option =>
+      normalizeText(option?.label).toLowerCase().includes(normalizedSearch) ||
+      normalizeText(option?.key).toLowerCase().includes(normalizedSearch),
+    );
+  }, [onSearchChange, options, searchable, searchText]);
 
   const handleSelect = useCallback(optionKey => {
     const shouldClose = onSelect?.(optionKey, {
@@ -210,12 +255,21 @@ const CompactFilterSelector = ({
                   </TouchableOpacity>
                 </View>
 
-                <ScrollView
-                  style={styles.modalScroll}
-                  contentContainerStyle={styles.modalContent}
-                  keyboardShouldPersistTaps="handled"
-                >
-                  {options.map(option => {
+                <ScrollView
+                  style={styles.modalScroll}
+                  contentContainerStyle={styles.modalContent}
+                  keyboardShouldPersistTaps="handled"
+                >
+                  {searchable ? (
+                    <TextInput
+                      style={styles.searchInput}
+                      value={searchText}
+                      placeholder={global.t?.t(resolveStoreName(store), 'input', 'search')}
+                      onChangeText={handleSearchChange}
+                    />
+                  ) : null}
+
+                  {filteredOptions.map(option => {
                     const isSelected = option.key === selectedKey;
 
                     return (

package/src/react/components/filters/CompactFilterSelector.styles.js

@@ -88,11 +88,23 @@ const createStyles = (theme, dense = false, windowWidth = 0) => {
     modalScroll: {
       flexGrow: 0,
     },
-    modalContent: {
-      paddingBottom: 10,
-      gap: 10,
-    },
-    modalOption: {
+    modalContent: {
+      paddingBottom: 10,
+      gap: 10,
+    },
+    searchInput: {
+      minHeight: 42,
+      borderWidth: 1,
+      borderColor: theme.optionBorderColor,
+      borderRadius: 14,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      backgroundColor: theme.backgroundColor,
+      color: theme.textColor,
+      fontSize: 13,
+      fontWeight: '700',
+    },
+    modalOption: {
       minHeight: 50,
       borderWidth: 1,
       borderColor: theme.optionBorderColor,

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

@@ -1,61 +1,192 @@
-import React from 'react';
-import { TextInput, View } from 'react-native';
-import {
-  buildOptionsFromColumn,
-  getColumnKey,
-  normalizeOptionKey,
-  normalizeText,
-} from '../inputs/defaultInputUtils';
-import CompactFilterSelector from './CompactFilterSelector';
-import DateShortcutFilter from './DateShortcutFilter';
-import { resolveNextDateFilterValue } from './dateFilterSelection';
-import styles from './DefaultColumnFilter.styles';
+import React, { useCallback, useState } from 'react';
+import { TextInput, View } from 'react-native';
+import { getAllStores, useStore } from '@store';
+import {
+  buildOptionsFromColumn,
+  getColumnKey,
+  isDateLikeColumn,
+  mapOptions,
+  normalizeOptionKey,
+  normalizeText,
+  resolveStoreNameFromList,
+} from '../inputs/defaultInputUtils';
+import CompactFilterSelector from './CompactFilterSelector';
+import DateShortcutFilter from './DateShortcutFilter';
+import { resolveNextDateFilterValue } from './dateFilterSelection';
+import {
+  normalizeCollectionItems,
+  resolveColumnListLoadParams,
+  resolveListActionName,
+  stableSerialize,
+} from '../table/DefaultTable.utils';
+import {
+  persistTableFiltersPreference,
+  resolveDefaultTablePreferenceScope,
+  sanitizeTableFiltersPreference,
+} from '../../utils/tableVisibleColumnsPreferences';
+import styles from './DefaultColumnFilter.styles';
 
 const DefaultColumnFilter = ({
   accentColor = '#2563EB',
-  column,
-  filters = {},
-  getOptionsForColumn = null,
-  onChange = null,
-  storeName = '',
+  column,
+  filters = {},
+  onBeforeOpen = null,
+  onSearchChange = null,
+  getOptionsForColumn = null,
+  onChange = null,
+  storeName = '',
   style = null,
-}) => {
-  const fieldName = getColumnKey(column);
+}) => {
+  const store = useStore(storeName);
+  const peopleStore = useStore('people');
+  const configs = store?.getters?.configs || {};
+  const [loadedItems, setLoadedItems] = useState([]);
+  const [loadedKey, setLoadedKey] = useState('');
+  const fieldName = getColumnKey(column);
+  const currentCompanyId = peopleStore?.getters?.currentCompany?.id;
+  const requestChange = useCallback(
+    (nextFieldName, value) => {
+      if (typeof onChange === 'function') {
+        onChange(nextFieldName, value);
+        return;
+      }
+
+      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];
+      else nextFilters[nextFieldName] = value;
+
+      const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+      const tablePreferenceScope =
+        configs.tablePreferenceScope ||
+        resolveDefaultTablePreferenceScope({ storeName });
+      const persistedFilters = sanitizeTableFiltersPreference({
+        columns,
+        filters: nextFilters,
+      });
+
+      persistTableFiltersPreference(tablePreferenceScope, persistedFilters);
+
+      if (typeof store?.actions?.setFilters === 'function') {
+        store.actions.setFilters(nextFilters);
+      } else if (store?.getters) {
+        store.getters.filters = nextFilters;
+      }
+
+      configs.onFilterChange?.(nextFilters);
+    },
+    [configs, onChange, store, storeName],
+  );
+  const resolveOptions = useCallback(
+    targetColumn => {
+      const configOptions = configs.getOptionsForColumn?.(targetColumn);
+      const propOptions = getOptionsForColumn?.(targetColumn);
+
+      if (Array.isArray(configOptions)) return configOptions;
+      if (Array.isArray(propOptions)) return propOptions;
+      if (targetColumn === column && loadedItems.length > 0) return loadedItems;
+
+      return undefined;
+    },
+    [column, configs, getOptionsForColumn, loadedItems],
+  );
+  const loadListOptions = useCallback(
+    (searchValue = '') => {
+      const listStoreName = resolveStoreNameFromList(column?.list);
+      const actionName = resolveListActionName(column?.list);
+      const listStore = getAllStores?.()?.[listStoreName];
+      const listAction = listStore?.actions?.[actionName];
+
+      if (!listStoreName || typeof listAction !== 'function') {
+        return Promise.resolve([]);
+      }
+
+      const listLoadParams = resolveColumnListLoadParams({
+        column,
+        currentCompanyId,
+        requestParams: configs.requestParams || {},
+        searchValue,
+      });
+      const nextLoadedKey = stableSerialize({
+        actionName,
+        listLoadParams,
+        listStoreName,
+      });
+
+      if (!normalizeText(searchValue) && loadedKey === nextLoadedKey && loadedItems.length > 0) {
+        return Promise.resolve(loadedItems);
+      }
+
+      return Promise.resolve(
+        listAction({
+          ...listLoadParams,
+          __storeMeta: {
+            dedupeKey: `default-column-filter-list:${fieldName}:${nextLoadedKey}`,
+            skipSystemError: true,
+          },
+        }),
+      )
+        .then(response => {
+          const items = normalizeCollectionItems(response);
+          setLoadedItems(items);
+          setLoadedKey(nextLoadedKey);
+          return items;
+        })
+        .catch(() => []);
+    },
+    [
+      column,
+      configs.requestParams,
+      currentCompanyId,
+      fieldName,
+      loadedItems,
+      loadedKey,
+    ],
+  );
 
   if (column?.filter === false || column?.filters === false) {
     return <View style={style} />;
   }
 
-  if (column?.inputType === 'date-range' || column?.type === 'range-date') {
+  if (isDateLikeColumn(column)) {
     const filterValue = filters?.[fieldName] || {};
     return (
       <View style={[style, styles.filterCell]}>
-        <DateShortcutFilter
-          dense
-          store={storeName}
-          field={fieldName}
-          value={filterValue.shortcut || 'all'}
+        <DateShortcutFilter
+          dense
+          store={storeName}
+          field={fieldName}
+          labelCaption={global.t?.t(storeName, 'label', column?.label || fieldName)}
+          value={filterValue.shortcut || 'all'}
           customRange={filterValue.customRange || { from: '', to: '' }}
-          onChange={optionKey =>
-            onChange?.(
-              fieldName,
-              resolveNextDateFilterValue(filterValue, optionKey),
-            )
-          }
-          onCustomRangeChange={range => onChange?.(fieldName, {
-            ...(filterValue || {}),
-            shortcut: 'custom',
-            customRange: range,
+          onChange={optionKey =>
+            requestChange(
+              fieldName,
+              resolveNextDateFilterValue(filterValue, optionKey),
+            )
+          }
+          onCustomRangeChange={range => requestChange(fieldName, {
+            ...(filterValue || {}),
+            shortcut: 'custom',
+            customRange: range,
           })}
         />
       </View>
     );
   }
 
-  if (column?.list) {
-    const rawOptions = buildOptionsFromColumn(column, getOptionsForColumn, storeName);
+  if (column?.list) {
+    const rawOptions = loadedItems.length > 0
+      ? mapOptions(column, loadedItems, storeName)
+      : buildOptionsFromColumn(column, resolveOptions, storeName);
     const options = [
-      { key: '', label: global.t?.t(storeName, 'label', 'select') || 'Selecionar' },
+      { key: '', label: global.t?.t(storeName, 'label', 'select') },
       ...rawOptions,
     ];
     const selectedKey = normalizeOptionKey(filters?.[fieldName]);
@@ -63,20 +194,23 @@ const DefaultColumnFilter = ({
 
     return (
       <View style={[style, styles.filterCell]}>
-        <CompactFilterSelector
-          dense
-          store={storeName}
-          field={fieldName}
-          icon="filter"
-          accentColor={accentColor}
-          active={Boolean(selectedKey)}
-          label={selected?.label || options[0]?.label || ''}
-          options={options}
-          selectedKey={selectedKey}
-          onSelect={optionKey => {
-            onChange?.(fieldName, optionKey);
-            return true;
-          }}
+        <CompactFilterSelector
+          dense
+          store={storeName}
+          field={fieldName}
+          icon="filter"
+          onBeforeOpen={onBeforeOpen || (() => loadListOptions())}
+          onSearchChange={onSearchChange || (value => loadListOptions(value))}
+          accentColor={accentColor}
+          active={Boolean(selectedKey)}
+          label={selected?.label || options[0]?.label || ''}
+          options={options}
+          searchable
+          selectedKey={selectedKey}
+          onSelect={optionKey => {
+            requestChange(fieldName, optionKey);
+            return true;
+          }}
         />
       </View>
     );
@@ -85,11 +219,11 @@ const DefaultColumnFilter = ({
   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 => onChange?.(fieldName, value)}
-      />
+        style={styles.filterInput}
+        value={normalizeText(filters?.[fieldName])}
+        placeholder={global.t?.t(storeName, 'input', column?.label || fieldName)}
+        onChangeText={value => requestChange(fieldName, value)}
+      />
     </View>
   );
 };