@controleonline/ui-default 1.0.264 → 1.0.266

package/src/react/components/inputs/defaultInputUtils.js

@@ -25,7 +25,18 @@ const DEFAULT_TRANSLATABLE_FIELDS = new Set([
   'status',
 ]);
 
-export const getColumnKey = column => column?.key || column?.name || '';
+export const getColumnKey = column => column?.key || column?.name || '';
+
+export const isDateColumn = column =>
+  column?.inputType === 'date' ||
+  column?.type === 'date';
+
+export const isDateRangeColumn = column =>
+  column?.inputType === 'date-range' ||
+  column?.type === 'range-date';
+
+export const isDateLikeColumn = column =>
+  isDateColumn(column) || isDateRangeColumn(column);
 
 const normalizeColumnKey = value =>
   normalizeText(value)
@@ -114,7 +125,8 @@ export const resolveOptionLabel = (column, option, storeName = '') => {
   return translateOptionLabel(rawLabel);
 };
 
-export const resolveStoreNameFromList = list => normalizeText(list).split('/')[0] || '';
+export const resolveStoreNameFromList = list =>
+  typeof list === 'string' ? normalizeText(list).split('/')[0] || '' : '';
 
 const filterItemsByListRequestParams = (items = [], column = null) => {
   const requestParams =
@@ -164,13 +176,17 @@ export const mapOptions = (column, items = [], storeName = '') => {
   return options;
 };
 
-export const buildOptionsFromColumn = (column, getOptionsForColumn = null, storeName = '') => {
-  const explicitOptions = getOptionsForColumn?.(column);
-  if (Array.isArray(explicitOptions) && explicitOptions.length > 0) {
-    return mapOptions(column, explicitOptions, storeName);
-  }
-
-  const listStoreName = resolveStoreNameFromList(column?.list);
+export const buildOptionsFromColumn = (column, getOptionsForColumn = null, storeName = '') => {
+  const explicitOptions = getOptionsForColumn?.(column);
+  if (Array.isArray(explicitOptions) && explicitOptions.length > 0) {
+    return mapOptions(column, explicitOptions, storeName);
+  }
+
+  if (Array.isArray(column?.list)) {
+    return mapOptions(column, column.list, storeName);
+  }
+
+  const listStoreName = resolveStoreNameFromList(column?.list);
   if (!listStoreName) return [];
 
   const listStore = getAllStores()?.[listStoreName];
@@ -209,9 +225,9 @@ export const resolveEditValue = (column, row, value) => {
     return normalizeText(column.editFormat(rawValue, column, row, true));
   }
 
-  if ((column?.inputType === 'date' || column?.inputType === 'date-range') && rawValue) {
-    return normalizeText(Formatter.formatDateYmdTodmY(rawValue));
-  }
+  if (isDateLikeColumn(column) && rawValue) {
+    return normalizeText(Formatter.formatDateYmdTodmY(rawValue));
+  }
 
   return normalizeText(rawValue);
 };
@@ -221,10 +237,15 @@ export const formatSaveValue = (column, value, row) => {
     return column.saveFormat(value, column, row);
   }
 
-  if (value && typeof value === 'object') {
-    if (value.value) return Number.isNaN(Number(value.value)) ? value.value : Number(value.value);
-    if (value['@id']) return value['@id'];
-  }
-
-  return Number.isNaN(Number(value)) || value === '' ? value : Number(value);
-};
+  if (value && typeof value === 'object') {
+    if (value.value) return Number.isNaN(Number(value.value)) ? value.value : Number(value.value);
+    if (value['@id']) return value['@id'];
+  }
+
+  if (isDateLikeColumn(column) && value) {
+    const normalizedDate = Formatter.buildAmericanDate(String(value));
+    return normalizedDate || value;
+  }
+
+  return Number.isNaN(Number(value)) || value === '' ? value : Number(value);
+};

package/src/react/components/table/DefaultColumnMenu.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import { getColumnKey } from '../inputs/defaultInputUtils';
+import {
+  persistVisibleColumnsPreference,
+  resolveDefaultTablePreferenceScope,
+  sanitizeVisibleColumnsPreference,
+} from '../../utils/tableVisibleColumnsPreferences';
+import styles from './DefaultTable.styles';
+import { shouldIncludeColumn } from './DefaultTable.utils';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
+  const store = useStore(storeName);
+  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+  const visibleColumns = store?.getters?.visibleColumns || {};
+  const configs = store?.getters?.configs || {};
+  const tablePreferenceScope =
+    configs.tablePreferenceScope ||
+    resolveDefaultTablePreferenceScope({ storeName });
+  const availableColumns = columns.filter(column => shouldIncludeColumn(column));
+  const {
+    checkboxBorderColor: resolvedCheckboxBorderColor,
+    checkboxSelectedMarkColor: resolvedCheckboxSelectedMarkColor,
+    modalColors,
+  } = useDefaultTableTheme();
+  if (!visible) return null;
+
+  const {
+    backgroundColor,
+    borderColor,
+    closeIconColor,
+    headerTextColor,
+    overlayColor,
+    textColor,
+  } = modalColors;
+
+  return (
+    <Modal visible transparent animationType="fade" onRequestClose={onClose}>
+      <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
+        <View style={[styles.modalCard, styles.columnMenuModalCard, { borderColor, backgroundColor }]}>
+          <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
+            <Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
+              {global.t?.t(storeName, 'label', 'columns')}
+            </Text>
+            <TouchableOpacity
+              style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
+              activeOpacity={0.82}
+              onPress={onClose}
+            >
+              <Icon name="x" size={16} color={closeIconColor} />
+            </TouchableOpacity>
+          </View>
+          <ScrollView style={styles.columnMenuModalBody} contentContainerStyle={styles.columnMenuModalList}>
+            {availableColumns.map(column => {
+              const fieldName = getColumnKey(column);
+              const label = formatStoreColumnLabel({
+                columns,
+                fieldName,
+                fallbackLabel: column?.label || fieldName,
+                storeName,
+              });
+              const checked = visibleColumns[fieldName] !== false;
+              const toggleColumn = () => {
+                const nextVisibleColumns = sanitizeVisibleColumnsPreference({
+                  columns,
+                  visibleColumns: {
+                    ...visibleColumns,
+                    [fieldName]: visibleColumns[fieldName] === false,
+                  },
+                });
+
+                persistVisibleColumnsPreference(tablePreferenceScope, nextVisibleColumns);
+
+                if (typeof store?.actions?.setVisibleColumns === 'function') {
+                  store.actions.setVisibleColumns(nextVisibleColumns);
+                } else if (store?.getters) {
+                  store.getters.visibleColumns = nextVisibleColumns;
+                }
+              };
+
+              return (
+                <TouchableOpacity
+                  key={fieldName}
+                  style={styles.columnMenuItem}
+                  activeOpacity={0.82}
+                  onPress={toggleColumn}
+                >
+                  <Icon
+                    name={checked ? 'check-square' : 'square'}
+                    size={16}
+                    color={checked ? resolvedCheckboxSelectedMarkColor : resolvedCheckboxBorderColor}
+                  />
+                  <Text style={[styles.columnMenuText, { color: textColor }]} numberOfLines={1}>{label}</Text>
+                </TouchableOpacity>
+              );
+            })}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default DefaultColumnMenu;

package/src/react/components/table/DefaultDebug.js

@@ -0,0 +1,234 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
+import { normalizeText } from '../inputs/defaultInputUtils';
+import styles from './DefaultTable.styles';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const isObject = value =>
+  value !== null && typeof value === 'object' && !Array.isArray(value);
+
+const formatDebugValue = value => {
+  if (value === undefined) return '';
+  if (typeof value === 'string') return value;
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch (error) {
+    return normalizeText(value);
+  }
+};
+
+const copyTextToClipboard = async text => {
+  const normalizedText = normalizeText(text);
+  if (!normalizedText) return false;
+
+  if (
+    typeof navigator !== 'undefined' &&
+    navigator.clipboard &&
+    typeof navigator.clipboard.writeText === 'function'
+  ) {
+    await navigator.clipboard.writeText(normalizedText);
+    return true;
+  }
+
+  return false;
+};
+
+const DebugCopyButton = ({ borderColor, color, onPress }) => (
+  <TouchableOpacity
+    style={[styles.debugCopyButton, { borderColor }]}
+    activeOpacity={0.82}
+    onPress={onPress}
+  >
+    <Icon name="copy" size={13} color={color} />
+    <Text style={[styles.debugCopyButtonText, { color }]}>Copiar</Text>
+  </TouchableOpacity>
+);
+
+const DebugSection = ({ borderColor, children, copyText, onCopy, textColor, title }) => (
+  <>
+    <View style={styles.debugSectionHeader}>
+      <Text style={[styles.debugSectionTitle, { color: textColor }]}>{title}</Text>
+      <DebugCopyButton
+        borderColor={borderColor}
+        color={textColor}
+        onPress={() => onCopy(copyText)}
+      />
+    </View>
+    <Text selectable style={[styles.debugCodeBlock, { color: textColor, borderColor }]}>
+      {children}
+    </Text>
+  </>
+);
+
+const DefaultDebug = ({
+  storeName,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
+  const { showError, showSuccess } = useMessage();
+  const { modalColors, resolvedAccentColor, tableButtonColors } = useDefaultTableTheme();
+
+  const resolvedDebug = isObject(store?.getters?.debug) ? store.getters.debug : {};
+  const debugQuery = normalizeText(resolvedDebug?.query);
+  const debugFilledQuery = normalizeText(
+    resolvedDebug?.filledQuery || resolvedDebug?.interpolatedQuery,
+  );
+  const hasDebugQuery = debugQuery !== '';
+  const debugParameters = isObject(resolvedDebug?.parameters)
+    ? resolvedDebug.parameters
+    : configs.debugFallbackParameters || null;
+  const debugParametersText = useMemo(
+    () => formatDebugValue(debugParameters),
+    [debugParameters],
+  );
+  const debugCopyText = useMemo(
+    () =>
+      [
+        'Query:',
+        debugQuery,
+        '',
+        'Parameters:',
+        debugParametersText,
+        '',
+        'Filled query:',
+        debugFilledQuery,
+      ].join('\n'),
+    [debugFilledQuery, debugParametersText, debugQuery],
+  );
+
+  const requestCopyText = useCallback(
+    text =>
+      copyTextToClipboard(text)
+        .then(copied => {
+          if (copied) {
+            showSuccess?.('Copiado');
+            return;
+          }
+
+          showError?.('Nao foi possivel copiar automaticamente.');
+        })
+        .catch(() => {
+          showError?.('Nao foi possivel copiar automaticamente.');
+        }),
+    [showError, showSuccess],
+  );
+
+  if (!hasDebugQuery) {
+    return null;
+  }
+
+  const {
+    backgroundColor,
+    borderColor,
+    closeIconColor,
+    headerTextColor,
+    overlayColor,
+    textColor,
+  } = modalColors;
+  const {
+    backgroundColor: buttonBackgroundColor,
+    borderColor: buttonBorderColor,
+    iconColor,
+    pressedBackgroundColor,
+    pressedBorderColor,
+    pressedIconColor,
+    textColor: buttonTextColor,
+  } = tableButtonColors;
+
+  return (
+    <>
+      <TouchableOpacity
+        accessibilityLabel="Debug query"
+        accessibilityRole="button"
+        style={[
+          styles.toolbarButton,
+          { borderColor: buttonBorderColor, backgroundColor: buttonBackgroundColor },
+          isOpen
+            ? { backgroundColor: pressedBackgroundColor, borderColor: pressedBorderColor }
+            : null,
+        ]}
+        activeOpacity={0.82}
+        onPress={() => setIsOpen(true)}
+      >
+        <Icon name="code" size={14} color={buttonTextColor} />
+      </TouchableOpacity>
+
+      {isOpen ? (
+        <Modal visible transparent animationType="fade" onRequestClose={() => setIsOpen(false)}>
+          <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
+            <View style={[styles.modalCard, styles.debugModalCard, { borderColor, backgroundColor }]}>
+              <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
+                <Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
+                  Debug query
+                </Text>
+                <TouchableOpacity
+                  style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
+                  activeOpacity={0.82}
+                  onPress={() => setIsOpen(false)}
+                >
+                  <Icon name="x" size={16} color={closeIconColor} />
+                </TouchableOpacity>
+              </View>
+
+              <ScrollView style={styles.debugModalBody} contentContainerStyle={styles.debugModalContent}>
+                <DebugSection
+                  borderColor={borderColor}
+                  copyText={debugQuery}
+                  onCopy={requestCopyText}
+                  textColor={textColor}
+                  title="Query"
+                >
+                  {debugQuery}
+                </DebugSection>
+
+                <DebugSection
+                  borderColor={borderColor}
+                  copyText={debugParametersText}
+                  onCopy={requestCopyText}
+                  textColor={textColor}
+                  title="Parametros"
+                >
+                  {debugParametersText}
+                </DebugSection>
+
+                <DebugSection
+                  borderColor={borderColor}
+                  copyText={debugFilledQuery}
+                  onCopy={requestCopyText}
+                  textColor={textColor}
+                  title="Query preenchida"
+                >
+                  {debugFilledQuery}
+                </DebugSection>
+              </ScrollView>
+
+              <View style={[styles.modalActions, { borderTopColor: borderColor }]}>
+                <TouchableOpacity
+                  style={[styles.secondaryButton, { borderColor }]}
+                  activeOpacity={0.82}
+                  onPress={() => requestCopyText(debugCopyText)}
+                >
+                  <Text style={[styles.secondaryButtonText, { color: textColor }]}>Copiar tudo</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.primaryButton, { backgroundColor: resolvedAccentColor }]}
+                  activeOpacity={0.82}
+                  onPress={() => setIsOpen(false)}
+                >
+                  <Text style={styles.primaryButtonText}>Fechar</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+        </Modal>
+      ) : null}
+    </>
+  );
+};
+
+export default DefaultDebug;

package/src/react/components/table/DefaultFiltersModal.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import DefaultColumnFilter from '../filters/DefaultColumnFilter';
+import { getColumnKey, normalizeText } from '../inputs/defaultInputUtils';
+import styles from './DefaultTable.styles';
+import { shouldIncludeColumn } from './DefaultTable.utils';
+import {
+  persistTableFiltersPreference,
+  resolveDefaultTablePreferenceScope,
+  sanitizeTableFiltersPreference,
+} from '../../utils/tableVisibleColumnsPreferences';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
+  const store = useStore(storeName);
+  const columns = (Array.isArray(store?.getters?.columns) ? store.getters.columns : []).filter(
+    column =>
+      shouldIncludeColumn(column) &&
+      column?.filter !== false &&
+      column?.filters !== false,
+  );
+  const filters = store?.getters?.filters || {};
+  const configs = store?.getters?.configs || {};
+  const tablePreferenceScope =
+    configs.tablePreferenceScope ||
+    resolveDefaultTablePreferenceScope({ storeName });
+  const applyFilters = nextFilters => {
+    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);
+  };
+  const updateFilter = (fieldName, value) => {
+    const nextFilters = { ...(filters || {}) };
+    const isEmpty =
+      value === null ||
+      value === undefined ||
+      normalizeText(value) === '' ||
+      (Array.isArray(value) && value.length === 0);
+
+    if (isEmpty) delete nextFilters[fieldName];
+    else nextFilters[fieldName] = value;
+
+    applyFilters(nextFilters);
+  };
+  const applyLabel = global.t?.t(storeName, 'button', 'apply');
+  const clearLabel = global.t?.t(storeName, 'button', 'clear');
+  const title = global.t?.t(storeName, 'label', 'filters');
+  const { modalColors, resolvedAccentColor } = useDefaultTableTheme();
+  if (!visible) return null;
+
+  const {
+    backgroundColor,
+    borderColor,
+    closeIconColor,
+    headerTextColor,
+    overlayColor,
+    textColor,
+  } = modalColors;
+
+  return (
+    <Modal visible transparent animationType="fade" onRequestClose={onClose}>
+      <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
+        <View style={[styles.modalCard, styles.filtersModalCard, { borderColor, backgroundColor }]}>
+          <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
+            <Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
+              {title}
+            </Text>
+            <TouchableOpacity
+              style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
+              activeOpacity={0.82}
+              onPress={onClose}
+            >
+              <Icon name="x" size={16} color={closeIconColor} />
+            </TouchableOpacity>
+          </View>
+          <ScrollView style={styles.filtersModalBody} contentContainerStyle={styles.filtersModalList}>
+            {columns.map(column => {
+              const fieldName = getColumnKey(column);
+              const label = formatStoreColumnLabel({
+                columns,
+                fieldName,
+                fallbackLabel: column?.label || fieldName,
+                storeName,
+              });
+
+              return (
+                <View key={fieldName} style={styles.filtersModalField}>
+                  <Text style={[styles.formLabel, { color: textColor }]} numberOfLines={1}>
+                    {label}
+                  </Text>
+                  <DefaultColumnFilter
+                    column={column}
+                    filters={filters}
+                    onChange={updateFilter}
+                    storeName={storeName}
+                    style={styles.filtersModalInput}
+                  />
+                </View>
+              );
+            })}
+          </ScrollView>
+          <View style={[styles.modalActions, { borderTopColor: borderColor }]}>
+            <TouchableOpacity
+              style={[styles.secondaryButton, { borderColor }]}
+              activeOpacity={0.82}
+              onPress={() => applyFilters({})}
+            >
+              <Text style={[styles.secondaryButtonText, { color: textColor }]}>
+                {clearLabel}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.primaryButton, { backgroundColor: resolvedAccentColor }]}
+              activeOpacity={0.82}
+              onPress={onClose}
+            >
+              <Text style={styles.primaryButtonText}>
+                {applyLabel}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default DefaultFiltersModal;

package/src/react/components/table/DefaultModalButton.js

@@ -0,0 +1,18 @@
+import React, { useCallback, useState } from 'react';
+
+const DefaultModalButton = ({ children, renderButton }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const close = useCallback(() => setIsOpen(false), []);
+  const open = useCallback(() => setIsOpen(true), []);
+  const toggle = useCallback(() => setIsOpen(prev => !prev), []);
+
+  return (
+    <>
+      {renderButton?.({ close, isOpen, open, toggle })}
+      {children?.({ close, isOpen, open, toggle })}
+    </>
+  );
+};
+
+export default DefaultModalButton;

package/src/react/components/table/DefaultSearchModal.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Modal, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import DefaultSearch from '../filters/DefaultSearch';
+import styles from './DefaultTable.styles';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultSearchModal = ({ storeName, visible = false, onClose }) => {
+  const { modalColors } = useDefaultTableTheme();
+  if (!visible) return null;
+
+  const {
+    backgroundColor,
+    borderColor,
+    closeIconColor,
+    headerTextColor,
+    overlayColor,
+  } = modalColors;
+
+  return (
+    <Modal visible transparent animationType="fade" onRequestClose={onClose}>
+      <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
+        <View style={[styles.modalCard, styles.searchModalCard, { borderColor, backgroundColor }]}>
+          <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
+            <Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
+              {global.t?.t(storeName, 'label', 'search')}
+            </Text>
+            <TouchableOpacity
+              style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
+              activeOpacity={0.82}
+              onPress={onClose}
+            >
+              <Icon name="x" size={16} color={closeIconColor} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.searchModalBody}>
+            <DefaultSearch
+              autoFocus
+              storeName={storeName}
+              onSearch={onClose}
+            />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default DefaultSearchModal;