@controleonline/ui-default 1.0.264 → 1.0.265

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

@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Modal,
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Modal,
   ScrollView,
   Text,
   TextInput,
@@ -8,59 +8,85 @@ import {
   TouchableWithoutFeedback,
   View,
   useWindowDimensions,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
-import { useStore } from '@store';
-import { resolveThemePalette, withOpacity } from '@controleonline/../../src/styles/branding';
-import { colors } from '@controleonline/../../src/styles/colors';
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { getAllStores, useStore } from '@store';
+import { resolveThemePalette, withOpacity } from '@controleonline/../../src/styles/branding';
+import { colors } from '@controleonline/../../src/styles/colors';
+import {
+  buildOptionsFromColumn,
+  getColumnKey,
+  isDateLikeColumn,
+  resolveStoreNameFromList,
+} from '../inputs/defaultInputUtils';
 import CompactFilterSelector from './CompactFilterSelector';
 import DateShortcutFilter from './DateShortcutFilter';
 import { resolveNextDateFilterValue } from './dateFilterSelection';
 import styles from './DefaultExternalFilters.styles';
 
-const DEFAULT_COMPACT_BREAKPOINT = 768;
-const noop = () => {};
-
-const normalizeText = value => String(value || '').trim();
-const DEFAULT_TRANSLATABLE_FIELDS = new Set([
-  'active',
-  'app',
-  'channel',
-  'displaytype',
-  'featured',
-  'frequency',
-  'invoicetype',
-  'installments',
-  'ordertype',
-  'peopletype',
-  'pricecalculation',
-  'productcondition',
-  'realstatus',
-  'status',
-]);
-
-const getColumnKey = column => column?.key || column?.name || '';
-
-const normalizeColumnKey = value =>
-  normalizeText(value)
-    .replace(/[^a-zA-Z0-9]/g, '')
-    .toLowerCase();
-
-const shouldTranslateOptionLabel = (column, storeName, rawLabel) => {
-  if (column?.translate === false || !normalizeText(rawLabel) || !normalizeText(storeName)) {
-    return false;
-  }
-
-  if (column?.translate === true || Array.isArray(column?.list)) {
-    return true;
-  }
-
-  return [column?.key, column?.name, column?.label]
-    .map(normalizeColumnKey)
-    .filter(Boolean)
-    .some(candidate => DEFAULT_TRANSLATABLE_FIELDS.has(candidate));
-};
-
+const DEFAULT_COMPACT_BREAKPOINT = 768;
+const noop = () => {};
+
+const normalizeText = value => String(value || '').trim();
+const resolveListActionName = list =>
+  normalizeText(list).split('/')[1] || 'getItems';
+
+const COMPANY_SCOPED_LIST_STORES = new Set([
+  'categories',
+  'paymentType',
+  'wallet',
+]);
+
+const resolveListLoadParams = ({currentCompanyId, listStoreName}) => {
+  if (!currentCompanyId || !COMPANY_SCOPED_LIST_STORES.has(listStoreName)) {
+    return {};
+  }
+
+  return listStoreName === 'categories'
+    ? {company: currentCompanyId}
+    : {people: currentCompanyId};
+};
+
+const resolveColumnListLoadParams = ({
+  column,
+  currentCompanyId,
+  requestParams = {},
+  searchValue = '',
+}) => {
+  const listStoreName = resolveStoreNameFromList(column?.list);
+  const resolvedCustomParams = typeof column?.listRequestParams === 'function'
+    ? column.listRequestParams({currentCompanyId, requestParams})
+    : column?.listRequestParams;
+  const customParams =
+    resolvedCustomParams &&
+    typeof resolvedCustomParams === 'object' &&
+    !Array.isArray(resolvedCustomParams)
+      ? resolvedCustomParams
+      : {};
+
+  return {
+    ...resolveListLoadParams({currentCompanyId, listStoreName}),
+    ...customParams,
+    ...(normalizeText(searchValue)
+      ? {[column?.listSearchParam || column?.searchParam || 'search']: normalizeText(searchValue)}
+      : {}),
+  };
+};
+
+const stableSerialize = value => {
+  if (value === null || value === undefined) return 'null';
+  if (Array.isArray(value)) return `[${value.map(item => stableSerialize(item)).join(',')}]`;
+  if (value instanceof Date) return JSON.stringify(value.toISOString());
+  if (typeof value === 'object') {
+    return `{${Object.keys(value)
+      .sort()
+      .map(key => `${JSON.stringify(key)}:${stableSerialize(value[key])}`)
+      .join(',')}}`;
+  }
+
+  return JSON.stringify(value);
+};
+
 const shouldIncludeColumn = column =>
   Boolean(getColumnKey(column)) &&
   column?.show !== false &&
@@ -69,13 +95,13 @@ const shouldIncludeColumn = column =>
   column?.filter !== false &&
   column?.filters !== false;
 
-const normalizeFilterValue = value => {
-  if (value && typeof value === 'object') {
-    return normalizeFilterValue(value.value ?? value.id ?? value['@id'] ?? '');
-  }
-
-  return normalizeText(value);
-};
+const normalizeFilterValue = value => {
+  if (value && typeof value === 'object') {
+    return normalizeFilterValue(value.value ?? value.id ?? value['@id'] ?? value.key ?? '');
+  }
+
+  return normalizeText(value);
+};
 
 const isFilledFilterValue = value => {
   if (Array.isArray(value)) return value.length > 0;
@@ -86,52 +112,6 @@ const isFilledFilterValue = value => {
   return normalizeText(value) !== '';
 };
 
-const resolveOptionLabel = (column, option, storeName = '') => {
-  if (!option) return '';
-
-  const translateOptionLabel = rawLabel => {
-    const normalizedLabel = normalizeText(rawLabel);
-    if (!shouldTranslateOptionLabel(column, storeName, normalizedLabel)) {
-      return normalizedLabel;
-    }
-
-    return global.t?.t(storeName, 'label', normalizedLabel) || normalizedLabel;
-  };
-
-  if (typeof column?.formatList === 'function') {
-    const formatted = column.formatList(option, null, column);
-    if (formatted && typeof formatted === 'object') {
-      return translateOptionLabel(formatted.label ?? formatted.value);
-    }
-    if (formatted) return translateOptionLabel(formatted);
-  }
-
-  const rawLabel = normalizeText(
-    option.label ??
-      option[column?.searchParam] ??
-      option[column?.name] ??
-      option.name ??
-      option.status ??
-      option.wallet ??
-      option.paymentType ??
-      option.alias ??
-      option.id,
-  );
-
-  return translateOptionLabel(rawLabel);
-};
-
-const buildColumnOptions = (column, options = [], storeName = '') => [
-  {
-    key: '',
-    label: global.t?.t(storeName || 'invoice', 'label', 'select'),
-  },
-  ...(Array.isArray(options) ? options : []).map(option => ({
-    key: normalizeFilterValue(option),
-    label: resolveOptionLabel(column, option, storeName) || '-',
-  })),
-];
-
 const resolveDateState = filterValue => {
   if (!filterValue || typeof filterValue !== 'object') {
     return {
@@ -167,25 +147,27 @@ const resolveIcon = column => {
   const key = getColumnKey(column);
   if (key === 'status') return 'check-circle';
   if (key === 'category') return 'tag';
-  if (column?.inputType === 'date-range' || column?.type === 'range-date') return 'calendar';
+  if (isDateLikeColumn(column)) return 'calendar';
   return 'sliders';
 };
 
 const DefaultExternalFilters = ({
-  accentColor = null,
-  compactBreakpoint = DEFAULT_COMPACT_BREAKPOINT,
-  columns = [],
-  dateOptionKeys = ['all', 'today', 'yesterday', '7d', '30d', 'custom'],
-  filters = {},
-  getOptionsForColumn = null,
-  onActiveCountChange = null,
-  onChangeFilters = null,
-  storeName = '',
-}) => {
-  const { width } = useWindowDimensions();
+  accentColor = null,
+  compactBreakpoint = DEFAULT_COMPACT_BREAKPOINT,
+  dateOptionKeys = ['all', 'today', 'yesterday', '7d', '30d', 'custom'],
+  filters = {},
+  getOptionsForColumn = null,
+  onActiveCountChange = null,
+  onChangeFilters = null,
+  requestParams = {},
+  storeName = '',
+}) => {
+  const { width } = useWindowDimensions();
+  const externalFilterStore = useStore(storeName);
   const peopleStore = useStore('people');
   const themeStore = useStore('theme');
   const [isFiltersModalOpen, setIsFiltersModalOpen] = useState(false);
+  const loadedListStoresRef = useRef(new Set());
   const { currentCompany } = peopleStore.getters || {};
   const { colors: themeColors } = themeStore.getters;
   const themeTokens = useMemo(
@@ -208,11 +190,15 @@ const DefaultExternalFilters = ({
   const tableFilterBorderColor = themeColors.tableFilterBorder;
   const tableFilterTextColor = themeColors.tableFilterText;
   const onAccentColor = palette.secondary || palette.text;
-  const isCompactView = width > 0 && width <= compactBreakpoint;
-  const filterColumns = useMemo(
-    () => columns.filter(shouldIncludeColumn),
-    [columns],
-  );
+  const isCompactView = width > 0 && width <= compactBreakpoint;
+  const resolvedColumns = useMemo(() => {
+    const storeColumns = externalFilterStore?.getters?.columns;
+    return Array.isArray(storeColumns) ? storeColumns : [];
+  }, [externalFilterStore?.getters?.columns]);
+  const filterColumns = useMemo(
+    () => resolvedColumns.filter(shouldIncludeColumn),
+    [resolvedColumns],
+  );
   const activeCount = useMemo(
     () => filterColumns.filter(column => isFilledFilterValue(filters[getColumnKey(column)])).length,
     [filterColumns, filters],
@@ -236,23 +222,80 @@ const DefaultExternalFilters = ({
     onChangeFilters?.({});
   }, [onChangeFilters]);
 
-  useEffect(() => {
-    if (!isCompactView) setIsFiltersModalOpen(false);
-  }, [isCompactView]);
-
-  if (filterColumns.length === 0) return null;
+  useEffect(() => {
+    if (!isCompactView) setIsFiltersModalOpen(false);
+  }, [isCompactView]);
+
+  useEffect(() => {
+    loadedListStoresRef.current.clear();
+  }, [currentCompany?.id]);
+
+  const loadListOptionsForColumn = useCallback((column, searchValue = '') => {
+    const explicitOptions = getOptionsForColumn?.(column);
+    if (!normalizeText(searchValue) && Array.isArray(explicitOptions) && explicitOptions.length > 0) {
+      return Promise.resolve([]);
+    }
+
+    const listStoreName = resolveStoreNameFromList(column?.list);
+    const actionName = resolveListActionName(column?.list);
+    const stores = getAllStores?.() || {};
+    const listStore = stores?.[listStoreName];
+    const listAction = listStore?.actions?.[actionName];
+
+    if (!listStoreName || typeof listAction !== 'function') {
+      return Promise.resolve([]);
+    }
+
+    const listLoadParams = resolveColumnListLoadParams({
+      column,
+      currentCompanyId: currentCompany?.id,
+      requestParams,
+      searchValue,
+    });
+    const hasScopedParams = Object.keys(listLoadParams).length > 0;
+
+    if (
+      !normalizeText(searchValue) &&
+      !hasScopedParams &&
+      Array.isArray(listStore?.getters?.items) &&
+      listStore.getters.items.length > 0
+    ) {
+      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 || []);
+    }
+
+    loadedListStoresRef.current.add(loadKey);
+    return Promise.resolve(
+      listAction({
+        ...listLoadParams,
+        __storeMeta: {
+          dedupeKey: `default-external-filter-list-options:${loadKey}`,
+          skipSystemError: true,
+        },
+      }),
+    ).catch(error => {
+      loadedListStoresRef.current.delete(loadKey);
+      throw error;
+    });
+  }, [currentCompany?.id, getOptionsForColumn, requestParams]);
+
+  if (filterColumns.length === 0) return null;
 
   const renderFilterField = (column, compact = false) => {
     const key = getColumnKey(column);
     const fieldStyle = compact ? styles.modalField : styles.field;
 
-    if (column.inputType === 'date-range' || column.type === 'range-date') {
+    if (isDateLikeColumn(column)) {
       const dateState = resolveDateState(filters[key]);
 
       return (
         <View key={key} style={fieldStyle}>
-          <DateShortcutFilter
-            value={dateState.value}
+          <DateShortcutFilter
+            value={dateState.value}
             onChange={optionKey => {
               updateFilter(
                 key,
@@ -268,9 +311,10 @@ const DefaultExternalFilters = ({
               });
             }}
             dense
-            store={storeName}
-            field={key}
-            optionKeys={dateOptionKeys}
+            store={storeName}
+            field={key}
+            labelCaption={global.t?.t(storeName, 'label', column.label || key)}
+            optionKeys={dateOptionKeys}
             colors={{
               accent: resolvedAccentColor,
               appBg: 'transparent',
@@ -288,11 +332,22 @@ const DefaultExternalFilters = ({
           />
         </View>
       );
-    }
-
-    if (column.list) {
-      const options = buildColumnOptions(column, getOptionsForColumn?.(column) || [], storeName);
-      const selectedKey = normalizeFilterValue(filters[key]);
+    }
+
+    if (column.list) {
+      const listStoreName = resolveStoreNameFromList(column?.list);
+      const options = [
+        {
+          key: '',
+          label:
+            (column?.emptyOptionLabel
+              ? global.t?.t(storeName || 'invoice', 'label', column.emptyOptionLabel) || column.emptyOptionLabel
+              : null) ||
+            global.t?.t(storeName || 'invoice', 'label', 'select'),
+        },
+        ...buildOptionsFromColumn(column, getOptionsForColumn, storeName),
+      ];
+      const selectedKey = normalizeFilterValue(filters[key]);
       const selectedLabel =
         options.find(option => option.key === selectedKey)?.label ||
         options[0]?.label ||
@@ -305,11 +360,14 @@ const DefaultExternalFilters = ({
             label={selectedLabel}
             accentColor={resolvedAccentColor}
             active={Boolean(selectedKey)}
-            dense
-            store={storeName}
-            field={key}
-            options={options}
-            selectedKey={selectedKey}
+            dense
+            store={storeName}
+            field={key}
+            onBeforeOpen={listStoreName ? () => loadListOptionsForColumn(column) : null}
+            onSearchChange={listStoreName ? value => loadListOptionsForColumn(column, value) : null}
+            options={options}
+            searchable
+            selectedKey={selectedKey}
             onSelect={optionKey => {
               updateFilter(key, optionKey);
               return true;
@@ -337,7 +395,7 @@ const DefaultExternalFilters = ({
   const filterTitle = global.t?.t(storeName, 'label', 'filters');
   const filterFields = compact => filterColumns.map(column => renderFilterField(column, compact));
 
-  if (isCompactView) {
+  if (isCompactView) {
     return (
       <View style={styles.mobileWrap}>
         <TouchableOpacity

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

@@ -18,10 +18,13 @@ const DefaultSearch = ({
   storeName = '',
   style = null,
   value,
-}) => {
-  const themeStore = useStore('theme');
-  const themeColors = themeStore.getters.colors;
-  const palette = useMemo(
+}) => {
+  const store = useStore(storeName);
+  const themeStore = useStore('theme');
+  const themeColors = themeStore.getters.colors;
+  const resolvedFilters = filters || store?.getters?.filters || {};
+  const resolvedChangeFilters = onChangeFilters || store?.actions?.setFilters || null;
+  const palette = useMemo(
     () => ({
       buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
       buttonBorder: themeColors.buttonBorder,
@@ -34,11 +37,11 @@ const DefaultSearch = ({
       inputText: themeColors.inputText,
     }),
     [themeColors],
-  );
-  const resolvedValue = useMemo(
-    () => normalizeText(value ?? filters?.[searchKey]),
-    [filters, searchKey, value],
-  );
+  );
+  const resolvedValue = useMemo(
+    () => normalizeText(value ?? resolvedFilters?.[searchKey]),
+    [resolvedFilters, searchKey, value],
+  );
   const [draftValue, setDraftValue] = useState(resolvedValue);
 
   useEffect(() => {
@@ -48,12 +51,12 @@ const DefaultSearch = ({
   const commitSearch = nextValue => {
     const searchValue = normalizeText(nextValue ?? draftValue);
 
-    if (typeof onChangeFilters === 'function') {
-      const nextFilters = { ...(filters || {}) };
-      if (searchValue) nextFilters[searchKey] = searchValue;
-      else delete nextFilters[searchKey];
-      onChangeFilters(nextFilters);
-    }
+    if (typeof resolvedChangeFilters === 'function') {
+      const nextFilters = { ...(resolvedFilters || {}) };
+      if (searchValue) nextFilters[searchKey] = searchValue;
+      else delete nextFilters[searchKey];
+      resolvedChangeFilters(nextFilters);
+    }
 
     onSearch?.(searchValue);
   };
@@ -61,21 +64,20 @@ const DefaultSearch = ({
   const clearSearch = () => {
     setDraftValue('');
 
-    if (typeof onChangeFilters === 'function') {
-      const nextFilters = { ...(filters || {}) };
-      delete nextFilters[searchKey];
-      onChangeFilters(nextFilters);
-    }
+    if (typeof resolvedChangeFilters === 'function') {
+      const nextFilters = { ...(resolvedFilters || {}) };
+      delete nextFilters[searchKey];
+      resolvedChangeFilters(nextFilters);
+    }
 
     onClear?.();
     onSearch?.('');
   };
 
-  const resolvedPlaceholder =
-    placeholder ||
-    global.t?.t(storeName, 'input', searchKey) ||
-    global.t?.t(storeName, 'placeholder', searchKey) ||
-    'Buscar...';
+  const resolvedPlaceholder =
+    placeholder ||
+    global.t?.t(storeName, 'input', searchKey) ||
+    global.t?.t(storeName, 'placeholder', searchKey);
 
   return (
     <View

package/src/react/components/form/DefaultForm.js

@@ -1,16 +1,17 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
-import DefaultInput from '../inputs/DefaultInput';
-import {
-  formatSaveValue,
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { useStore } from '@store';
+import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import DefaultInput from '../inputs/DefaultInput';
+import {
+  formatSaveValue,
   getColumnKey,
   isEditableColumn,
   normalizeId,
-  normalizeText,
-  resolveEditValue,
-} from '../inputs/defaultInputUtils';
-import styles from './DefaultForm.styles';
+  normalizeText,
+  resolveEditValue,
+} from '../inputs/defaultInputUtils';
+import { createStyles } from './DefaultForm.styles';
 
 const hasValue = value => {
   if (value === null || value === undefined) return false;
@@ -45,29 +46,47 @@ const shouldIncludeColumn = (column, row, mode) => {
   return column?.visibleForm !== false;
 };
 
-const buildDraft = (columns, row) =>
-  columns.reduce((draft, column) => {
-    const fieldName = getColumnKey(column);
-    const defaultValue = resolveDefaultValue(column, row);
-    draft[fieldName] = resolveEditValue(column, row, defaultValue);
-    return draft;
-  }, {});
-
-const DefaultForm = ({
-  accentColor = '#2563EB',
-  actions = {},
-  columns = [],
-  getOptionsForColumn = null,
+const buildDraft = (columns, row) =>
+  columns.reduce((draft, column) => {
+    const fieldName = getColumnKey(column);
+    const defaultValue = resolveDefaultValue(column, row);
+    draft[fieldName] = resolveEditValue(column, row, defaultValue);
+    return draft;
+  }, {});
+
+const EMPTY_ROW = {};
+
+const DefaultForm = ({
+  actions = {},
+  columns = [],
+  getOptionsForColumn = null,
   mode = 'edit',
   onBeforeOpen = null,
-  onCancel = null,
-  onSaved = null,
-  row = {},
-  storeName = '',
-}) => {
-  const formColumns = useMemo(
-    () => columns.filter(column => shouldIncludeColumn(column, row, mode)),
-    [columns, mode, row],
+  onCancel = null,
+  onSaved = null,
+  row = EMPTY_ROW,
+  storeName = '',
+}) => {
+  const themeStore = useStore('theme');
+  const { colors: themeColors } = themeStore.getters;
+  const palette = useMemo(
+    () => ({
+      buttonBackground: themeColors.buttonBackground,
+      buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
+      buttonBorderSecondary: themeColors.buttonBorderSecondary,
+      buttonDisabledBackground: themeColors.buttonDisabledBackground,
+      buttonDisabledText: themeColors.buttonDisabledText,
+      buttonText: themeColors.buttonText,
+      buttonTextSecondary: themeColors.buttonTextSecondary,
+      dividerBorder: themeColors.dividerBorder,
+      textSecondary: themeColors.textSecondary,
+    }),
+    [themeColors],
+  );
+  const styles = useMemo(() => createStyles(palette), [palette]);
+  const formColumns = useMemo(
+    () => columns.filter(column => shouldIncludeColumn(column, row, mode)),
+    [columns, mode, row],
   );
   const [draft, setDraft] = useState(() => buildDraft(formColumns, row));
   const [isSaving, setIsSaving] = useState(false);
@@ -142,11 +161,11 @@ const DefaultForm = ({
 
               return (
                 <View key={fieldName} style={styles.formField}>
-                  <DefaultInput
-                    accentColor={accentColor}
-                    autoFocus={false}
-                    autoSave={false}
-                    column={column}
+                  <DefaultInput
+                    accentColor={themeColors.buttonBackground}
+                    autoFocus={false}
+                    autoSave={false}
+                    column={column}
                     columns={columns}
                     editing
                     getOptionsForColumn={getOptionsForColumn}
@@ -172,26 +191,26 @@ const DefaultForm = ({
         )}
       </ScrollView>
 
-      <View style={styles.actions}>
-        <TouchableOpacity style={styles.secondaryButton} onPress={onCancel}>
-          <Text style={styles.secondaryButtonText}>
+      <View style={styles.actions}>
+        <TouchableOpacity style={styles.secondaryButton} onPress={onCancel}>
+          <Text style={styles.secondaryButtonText}>
             {global.t?.t(storeName, 'button', 'cancel') || 'Cancelar'}
           </Text>
         </TouchableOpacity>
-        <TouchableOpacity
-          style={[
-            styles.primaryButton,
-            { backgroundColor: accentColor },
-            isSaving ? styles.primaryButtonDisabled : null,
-          ]}
-          activeOpacity={0.86}
-          disabled={isSaving}
-          onPress={save}
-        >
-          <Text style={styles.primaryButtonText}>
-            {isSaving ? 'Salvando' : global.t?.t(storeName, 'button', 'save') || 'Salvar'}
-          </Text>
-        </TouchableOpacity>
+        <TouchableOpacity
+          style={[
+            styles.primaryButton,
+            { backgroundColor: palette.buttonBackground },
+            isSaving ? styles.primaryButtonDisabled : null,
+          ]}
+          activeOpacity={0.86}
+          disabled={isSaving}
+          onPress={save}
+        >
+          <Text style={[styles.primaryButtonText, isSaving ? styles.primaryButtonTextDisabled : null]}>
+            {isSaving ? 'Salvando' : global.t?.t(storeName, 'button', 'save') || 'Salvar'}
+          </Text>
+        </TouchableOpacity>
       </View>
     </>
   );