@controleonline/ui-default 1.0.264 → 1.0.266

package/AGENTS.md

@@ -10,8 +10,9 @@
 - A tela deve passar preferencialmente apenas `storeName` e contexto minimo, como `requestParams`, `onRowPress`, `renderCard`, `onAdd`, `onEdit` ou componentes extras realmente especificos.
 - O componente pode receber componentes de composicao para variacoes visuais, como `renderCard`, add personalizado, toolbar customizada, acoes auxiliares e modais de apoio; isso nao muda o contrato de que a listagem continua sendo responsabilidade do `DefaultTable`.
 - Quando `data` nao e informada e existe `storeName`, o `DefaultTable` trabalha em modo automatico e carrega os itens pelas actions do store.
-- O componente e responsavel por busca, ordenacao, filtros, paginação, infinite scroll, loading, erro, resumo, visibilidade de colunas, modo desktop e modo card no mobile.
-- O store nao e fallback: ele e a regra. Se `columns` define um comportamento, o `DefaultTable` deve obedecer sem recriar uma segunda regra na tela.
+- O componente e responsavel por busca, ordenacao, filtros, paginação, infinite scroll, loading, erro, resumo, visibilidade de colunas, modo desktop e modo card no mobile.
+- Preferencias de usuario do `DefaultTable`, incluindo filtros, busca, ordenacao, modo de exibicao e visibilidade de colunas, devem ser salvas em `localStorage` na chave `default-table`, sempre no formato `[store][rota] = valores`. Nunca usar chave apenas por store ou apenas por rota.
+- O store nao e fallback: ele e a regra. Se `columns` define um comportamento, o `DefaultTable` deve obedecer sem recriar uma segunda regra na tela.
 - `columns` e a fonte de verdade para label, visibilidade, ordem, `editable`, `sortable`, `inputType`, `list`, `format`, `formatList`, `formatFilter`, `saveFormat`, `searchParam`, `externalFilter`, `summary` e `defaultSort`. `show:false` e um alias aceito para ocultar coluna, junto com `visible:false` e `table:false`.
 - Se uma coluna vier como `editable: false`, ela continua nao editavel mesmo que seja ordenavel. Se vier como `sortable: true`, a ordenacao precisa continuar funcionando.
 - `inputType: 'date-range'` exige filtro de intervalo. `externalFilter: true` habilita o filtro externo quando a listagem suporta esse contrato.

package/package.json

@@ -1,18 +1,21 @@
-{
-  "name": "@controleonline/ui-default",
-  "version": "1.0.264",
-  "author": "ControleOnline",
-  "description": "ControleOnline Default Quasar UI Component",
-  "license": "MIT",
-  "main": "src/react/index.js",
-  "scripts": {},
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ControleOnline/conline-quasar-ui"
-  },
-  "bugs": "",
-  "homepage": "https://www.controleonline.com/devs/plugins",
-  "browserslist": [
-    "last 1 version, not dead, ie >= 11"
-  ]
-}
+{
+  "name": "@controleonline/ui-default",
+  "version": "1.0.266",
+  "author": "ControleOnline",
+  "description": "ControleOnline Default Quasar UI Component",
+  "license": "MIT",
+  "main": "src/react/index.js",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ControleOnline/conline-quasar-ui"
+  },
+  "bugs": "",
+  "homepage": "https://www.controleonline.com/devs/plugins",
+  "browserslist": [
+    "last 1 version, not dead, ie >= 11"
+  ],
+  "dependencies": {
+    "@controleonline/ui-common": "*"
+  }
+}

package/src/react/components/errors/DefaultErrors.js

@@ -7,28 +7,16 @@ const AUTO_CLOSE_MS = 5000;
 
 const resolveText = value => String(value ?? '').trim();
 
-const normalizeStoreNames = (store, stores) => {
-  const resolvedStoreNames = [
-    ...(Array.isArray(store) ? store : store ? [store] : []),
-    ...(Array.isArray(stores) ? stores : []),
-  ];
-
-  return resolvedStoreNames.filter(name => typeof name === 'string' && name.trim()).map(name => name.trim());
-};
-
-const pickThemeColor = (colors, keys, fallback) => {
-  for (const key of keys) {
-    const value = colors?.[key];
-
-    if (typeof value === 'string' && value.trim()) {
-      return value.trim();
-    }
-  }
-
-  return fallback;
-};
-
-const DefaultErrors = ({
+const normalizeStoreNames = (store, stores) => {
+  const resolvedStoreNames = [
+    ...(Array.isArray(store) ? store : store ? [store] : []),
+    ...(Array.isArray(stores) ? stores : []),
+  ];
+
+  return resolvedStoreNames.filter(name => typeof name === 'string' && name.trim()).map(name => name.trim());
+};
+
+const DefaultErrors = ({
   store = null,
   stores = [],
   error = null,
@@ -44,10 +32,25 @@ const DefaultErrors = ({
   messageStyle = null,
   retryButtonStyle = null,
   retryTextStyle = null,
-}) => {
-  const themeStore = useStore('theme');
-  const themeColors = themeStore?.getters?.colors || {};
-  const allStores = typeof useStores === 'function' ? useStores(state => state) : null;
+}) => {
+  const themeStore = useStore('theme');
+  const themeColors = themeStore?.getters?.colors || {};
+  const palette = useMemo(
+    () => ({
+      buttonBackground: themeColors.buttonBackground,
+      buttonBorder: themeColors.buttonBorder,
+      buttonText: themeColors.buttonText,
+      inputErrorBorder: themeColors.inputErrorBorder,
+      inputErrorText: themeColors.inputErrorText,
+      modalBackground: themeColors.modalBackground,
+      modalBorder: themeColors.modalBorder,
+      modalCloseIcon: themeColors.modalCloseIcon,
+      modalOverlay: themeColors.modalOverlay,
+      modalText: themeColors.modalText,
+    }),
+    [themeColors],
+  );
+  const allStores = typeof useStores === 'function' ? useStores(state => state) : null;
   const storeNames = useMemo(() => normalizeStoreNames(store, stores), [store, stores]);
   const watchedStoreEntries = useMemo(() => {
     if (!allStores || storeNames.length === 0) {
@@ -90,40 +93,18 @@ const DefaultErrors = ({
         .join('|')}`
     : '';
   const activeDriverSignature = storeDriverSignature || explicitDriverSignature;
-  const [dismissedSignatures, setDismissedSignatures] = useState(() => new Set());
-  const timerRef = useRef(null);
-  const textAlign = align === 'left' ? 'left' : 'center';
-  const accentColor = pickThemeColor(
-    themeColors,
-    ['inputErrorBorder', 'textDanger', 'modalBorder', 'primary'],
-    '#DC2626',
-  );
-  const backgroundColor = pickThemeColor(
-    themeColors,
-    ['inputErrorBackground', 'modalBackground', 'surface', 'background'],
-    '#FFFFFF',
-  );
-  const overlayColor = pickThemeColor(
-    themeColors,
-    ['modalOverlay', 'overlayBackground'],
-    'rgba(15, 23, 42, 0.55)',
-  );
-  const titleColor = pickThemeColor(
-    themeColors,
-    ['inputErrorText', 'textDanger', 'modalHeaderText', 'text'],
-    '#B91C1C',
-  );
-  const messageColor = pickThemeColor(
-    themeColors,
-    ['modalText', 'textSecondary', 'text'],
-    '#334155',
-  );
-  const closeColor = pickThemeColor(
-    themeColors,
-    ['modalCloseIcon', 'textDanger', 'primary'],
-    accentColor,
-  );
-  const retryAccentColor = pickThemeColor(themeColors, ['primary'], accentColor);
+  const [dismissedSignatures, setDismissedSignatures] = useState(() => new Set());
+  const timerRef = useRef(null);
+  const textAlign = align === 'left' ? 'left' : 'center';
+  const accentColor = palette.inputErrorBorder;
+  const backgroundColor = palette.modalBackground;
+  const overlayColor = palette.modalOverlay;
+  const titleColor = palette.inputErrorText;
+  const messageColor = palette.modalText;
+  const closeColor = palette.modalCloseIcon;
+  const retryBackgroundColor = palette.buttonBackground;
+  const retryBorderColor = palette.buttonBorder;
+  const retryTextColor = palette.buttonText;
 
   const clearStoreErrors = useCallback(() => {
     watchedStoreEntries.forEach(entry => {
@@ -291,27 +272,27 @@ const DefaultErrors = ({
                   activeOpacity={0.85}
                   onPress={onRetry}
                   style={[
-                    {
-                      alignItems: 'center',
-                      alignSelf: textAlign === 'left' ? 'flex-start' : 'center',
-                      borderRadius: 999,
-                      borderWidth: 1,
-                      borderColor: retryAccentColor,
-                      backgroundColor: `${retryAccentColor}14`,
-                      marginTop: 4,
-                      paddingHorizontal: 12,
-                      paddingVertical: 8,
+                    {
+                      alignItems: 'center',
+                      alignSelf: textAlign === 'left' ? 'flex-start' : 'center',
+                      borderRadius: 999,
+                      borderWidth: 1,
+                      borderColor: retryBorderColor,
+                      backgroundColor: retryBackgroundColor,
+                      marginTop: 4,
+                      paddingHorizontal: 12,
+                      paddingVertical: 8,
                     },
                     retryButtonStyle,
                   ]}
                 >
                   <Text
-                    style={[
-                      {
-                        color: retryAccentColor,
-                        fontSize: 12,
-                        fontWeight: '800',
-                      },
+                    style={[
+                      {
+                        color: retryTextColor,
+                        fontSize: 12,
+                        fontWeight: '800',
+                      },
                       retryTextStyle,
                     ]}
                   >
@@ -328,12 +309,13 @@ const DefaultErrors = ({
               onPress={dismissPopup}
               testID="default-errors-close"
               style={[
-                {
-                  alignItems: 'center',
-                  borderColor: accentColor,
-                  borderRadius: 999,
-                  borderWidth: 1,
-                  height: 28,
+                {
+                  alignItems: 'center',
+                  backgroundColor,
+                  borderColor: palette.modalBorder,
+                  borderRadius: 999,
+                  borderWidth: 1,
+                  height: 28,
                   justifyContent: 'center',
                   width: 28,
                 },

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,17 +89,20 @@ const CompactFilterSelector = ({
   icon = 'sliders',
   label = '',
   labelCaption = '',
-  onClose = null,
-  onBeforeOpen = 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 }),
@@ -116,12 +120,13 @@ 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(() => {
+  const openModal = useCallback(() => {
     if (disabled) {
       return;
     }
@@ -143,7 +148,28 @@ const CompactFilterSelector = ({
     }
 
     setVisible(true);
-  }, [disabled, onBeforeOpen]);
+  }, [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, {
@@ -229,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,62 +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 = {},
   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]);
@@ -69,16 +199,18 @@ const DefaultColumnFilter = ({
           store={storeName}
           field={fieldName}
           icon="filter"
-          onBeforeOpen={onBeforeOpen}
+          onBeforeOpen={onBeforeOpen || (() => loadListOptions())}
+          onSearchChange={onSearchChange || (value => loadListOptions(value))}
           accentColor={accentColor}
           active={Boolean(selectedKey)}
           label={selected?.label || options[0]?.label || ''}
-          options={options}
-          selectedKey={selectedKey}
-          onSelect={optionKey => {
-            onChange?.(fieldName, optionKey);
-            return true;
-          }}
+          options={options}
+          searchable
+          selectedKey={selectedKey}
+          onSelect={optionKey => {
+            requestChange(fieldName, optionKey);
+            return true;
+          }}
         />
       </View>
     );
@@ -87,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>
   );
 };