@controleonline/ui-default 1.0.272 → 1.0.274

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

@@ -2,31 +2,31 @@ import { getAllStores } from '@store';
 import Formatter from '@controleonline/ui-common/src/utils/formatter.js';
 import { formatStoreColumnValue } from '@controleonline/ui-common/src/react/utils/storeColumns';
 import FeatherGlyphMap from 'react-native-vector-icons/glyphmaps/Feather.json';
-
+
 export const normalizeText = value => String(value ?? '').trim();
 export const isValidFeatherIcon = icon => Boolean(FeatherGlyphMap[normalizeText(icon)]);
 const formatHumanLabel = value =>
-  normalizeText(value)
-    .replace(/([a-z])([A-Z])/g, '$1 $2')
-    .replace(/[_-]+/g, ' ')
-    .replace(/^\w/, letter => letter.toUpperCase());
-const DEFAULT_TRANSLATABLE_FIELDS = new Set([
-  'active',
-  'app',
-  'channel',
-  'displaytype',
-  'featured',
-  'frequency',
-  'invoicetype',
-  'installments',
-  'ordertype',
-  'peopletype',
-  'pricecalculation',
-  'productcondition',
-  'realstatus',
-  'status',
-]);
-
+  normalizeText(value)
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .replace(/^\w/, letter => letter.toUpperCase());
+const DEFAULT_TRANSLATABLE_FIELDS = new Set([
+  'active',
+  'app',
+  'channel',
+  'displaytype',
+  'featured',
+  'frequency',
+  'invoicetype',
+  'installments',
+  'ordertype',
+  'peopletype',
+  'pricecalculation',
+  'productcondition',
+  'realstatus',
+  'status',
+]);
+
 export const getColumnKey = column => column?.key || column?.name || '';
 
 export const isDateColumn = column =>
@@ -54,6 +54,13 @@ export const isColorColumn = column => {
   );
 };
 
+export const isIconColumn = column => {
+  const fieldName = normalizeColumnKey(getColumnKey(column));
+  const inputType = normalizeColumnKey(column?.inputType || column?.type);
+
+  return inputType === 'icon' || fieldName === 'icon';
+};
+
 export const isFileColumn = column => {
   const inputType = normalizeColumnKey(column?.inputType || column?.type);
 
@@ -73,114 +80,130 @@ export const isExtraDataColumn = column =>
 
 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));
-};
-
-export const normalizeId = value => {
-  if (!value) return '';
-  if (typeof value === 'number') return String(value);
-  if (typeof value === 'string') {
-    const match = value.match(/\d+/g);
-    return match ? match[match.length - 1] : value;
-  }
-  return normalizeId(value?.id || value?.['@id'] || '');
-};
-
+    .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));
+};
+
+export const normalizeId = value => {
+  if (!value) return '';
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') {
+    const match = value.match(/\d+/g);
+    return match ? match[match.length - 1] : value;
+  }
+  return normalizeId(value?.id || value?.['@id'] || '');
+};
+
 export const isEditableColumn = column =>
   column?.editable !== false &&
   !column?.isIdentity &&
   column?.inputType !== 'increase' &&
   !isFileColumn(column) &&
   !String(getColumnKey(column)).includes('.');
-
+
 export const normalizeOptionKey = option => {
-  if (!option) return '';
-  if (typeof option !== 'object') return normalizeId(option) || normalizeText(option);
-  return normalizeText(
-    option.value ??
-      option.id ??
-      normalizeId(option['@id']) ??
-      option.key ??
-      '',
-  );
-};
-
-export const resolveOptionLabel = (column, option, storeName = '') => {
-  if (!option) return '';
-
-  const translateOptionLabel = rawLabel => {
-    const normalizedLabel = normalizeText(rawLabel);
-    if (!shouldTranslateOptionLabel(column, storeName, normalizedLabel)) {
-      return normalizedLabel;
-    }
-
-    const translated = global.t?.t(storeName, 'label', normalizedLabel) || normalizedLabel;
-    return normalizeText(translated) === formatHumanLabel(normalizedLabel)
-      ? normalizedLabel
-      : translated;
-  };
-
-  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);
-};
-
+  if (!option) return '';
+  if (typeof option !== 'object') return normalizeId(option) || normalizeText(option);
+  return normalizeText(
+    option.value ??
+      option.id ??
+      normalizeId(option['@id']) ??
+      option.key ??
+      '',
+  );
+};
+
+export const resolveOptionLabel = (column, option, storeName = '') => {
+  if (!option) return '';
+
+  const STATUS_DISPLAY_PT = {
+    paid: 'Pago',
+    'waiting payment': 'Aguardando pagamento',
+    waiting_payment: 'Aguardando pagamento',
+  };
+
+  const translateOptionLabel = rawLabel => {
+    const normalizedLabel = normalizeText(rawLabel);
+    const statusFallback = STATUS_DISPLAY_PT[normalizedLabel.toLowerCase()] || '';
+    if (!shouldTranslateOptionLabel(column, storeName, normalizedLabel)) {
+      return statusFallback || normalizedLabel;
+    }
+
+    const translated = global.t?.t(storeName, 'label', normalizedLabel) || normalizedLabel;
+    const translatedText = normalizeText(translated);
+    if (
+      statusFallback &&
+      (!translatedText ||
+        translatedText.toLowerCase() === normalizedLabel.toLowerCase() ||
+        translatedText === formatHumanLabel(normalizedLabel))
+    ) {
+      return statusFallback;
+    }
+    return translatedText === formatHumanLabel(normalizedLabel)
+      ? normalizedLabel
+      : translated;
+  };
+
+  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);
+};
+
 export const resolveStoreNameFromList = list =>
   typeof list === 'string' ? normalizeText(list).split('/')[0] || '' : '';
-
+
 const filterItemsByListRequestParams = (items = [], column = null) => {
-  const requestParams =
-    column?.listRequestParams &&
-    typeof column.listRequestParams === 'object' &&
-    !Array.isArray(column.listRequestParams)
-      ? column.listRequestParams
-      : null;
-
-  if (!requestParams || Object.keys(requestParams).length === 0) {
-    return Array.isArray(items) ? items : [];
-  }
-
-  return (Array.isArray(items) ? items : []).filter(item =>
-    Object.entries(requestParams).every(([key, expectedValue]) => {
-      if (expectedValue === undefined || expectedValue === null || expectedValue === '') {
-        return true;
-      }
-
-      return normalizeText(item?.[key]) === normalizeText(expectedValue);
-    }),
+  const requestParams =
+    column?.listRequestParams &&
+    typeof column.listRequestParams === 'object' &&
+    !Array.isArray(column.listRequestParams)
+      ? column.listRequestParams
+      : null;
+
+  if (!requestParams || Object.keys(requestParams).length === 0) {
+    return Array.isArray(items) ? items : [];
+  }
+
+  return (Array.isArray(items) ? items : []).filter(item =>
+    Object.entries(requestParams).every(([key, expectedValue]) => {
+      if (expectedValue === undefined || expectedValue === null || expectedValue === '') {
+        return true;
+      }
+
+      return normalizeText(item?.[key]) === normalizeText(expectedValue);
+    }),
   );
 };
 
@@ -215,16 +238,16 @@ export const mapOptions = (column, items = [], storeName = '') => {
   const options = [];
 
   (Array.isArray(items) ? items : []).forEach(item => {
-    const formatted =
-      typeof column?.formatList === 'function'
-        ? column.formatList(item, null, column)
-        : item;
-    const key = normalizeOptionKey(formatted) || normalizeOptionKey(item);
-    const dedupeKey = key || normalizeText(resolveOptionLabel(column, item, storeName)).toLowerCase();
-
-    if (dedupeKey && seenKeys.has(dedupeKey)) return;
-    if (dedupeKey) seenKeys.add(dedupeKey);
-
+    const formatted =
+      typeof column?.formatList === 'function'
+        ? column.formatList(item, null, column)
+        : item;
+    const key = normalizeOptionKey(formatted) || normalizeOptionKey(item);
+    const dedupeKey = key || normalizeText(resolveOptionLabel(column, item, storeName)).toLowerCase();
+
+    if (dedupeKey && seenKeys.has(dedupeKey)) return;
+    if (dedupeKey) seenKeys.add(dedupeKey);
+
     const formattedMeta = normalizeObject(formatted);
     const itemMeta = normalizeObject(item);
     const color = formattedMeta.color ?? itemMeta.color;
@@ -240,10 +263,10 @@ export const mapOptions = (column, items = [], storeName = '') => {
       raw: item,
     });
   });
-
-  return options;
-};
-
+
+  return options;
+};
+
 export const buildOptionsFromColumn = (column, getOptionsForColumn = null, storeName = '') => {
   const explicitOptions = getOptionsForColumn?.(column);
   if (Array.isArray(explicitOptions) && explicitOptions.length > 0) {
@@ -255,26 +278,26 @@ export const buildOptionsFromColumn = (column, getOptionsForColumn = null, store
   }
 
   const listStoreName = resolveStoreNameFromList(column?.list);
-  if (!listStoreName) return [];
-
-  const listStore = getAllStores()?.[listStoreName];
-  return mapOptions(
-    column,
-    filterItemsByListRequestParams(listStore?.getters?.items || [], column),
-    storeName,
-  );
-};
-
+  if (!listStoreName) return [];
+
+  const listStore = getAllStores()?.[listStoreName];
+  return mapOptions(
+    column,
+    filterItemsByListRequestParams(listStore?.getters?.items || [], column),
+    storeName,
+  );
+};
+
 export const resolveCellText = ({ column, columns = [], row, storeName, value }) => {
   const fieldName = getColumnKey(column);
   const rawValue = value ?? row?.[fieldName];
   const formattedValue = formatStoreColumnValue({
-    columns: columns.length ? columns : [column],
-    fieldName,
-    row,
-    storeName,
-    value: rawValue,
-  });
+    columns: columns.length ? columns : [column],
+    fieldName,
+    row,
+    storeName,
+    value: rawValue,
+  });
 
   return normalizeText(formattedValue) || '-';
 };
@@ -408,29 +431,29 @@ export const buildReadPresentationStyles = presentation => {
 export const resolveEditValue = (column, row, value) => {
   const rawValue = value ?? row?.[getColumnKey(column)];
   if (column?.list) {
-    return normalizeOptionKey(
-      typeof column?.formatList === 'function'
-        ? column.formatList(rawValue, row, column)
-        : rawValue,
-    );
-  }
-
-  if (typeof column?.editFormat === 'function') {
-    return normalizeText(column.editFormat(rawValue, column, row, true));
-  }
-
+    return normalizeOptionKey(
+      typeof column?.formatList === 'function'
+        ? column.formatList(rawValue, row, column)
+        : rawValue,
+    );
+  }
+
+  if (typeof column?.editFormat === 'function') {
+    return normalizeText(column.editFormat(rawValue, column, row, true));
+  }
+
   if (isDateLikeColumn(column) && rawValue) {
     return normalizeText(Formatter.formatDateYmdTodmY(rawValue));
   }
-
-  return normalizeText(rawValue);
-};
-
-export const formatSaveValue = (column, value, row) => {
-  if (typeof column?.saveFormat === 'function') {
-    return column.saveFormat(value, column, row);
-  }
-
+
+  return normalizeText(rawValue);
+};
+
+export const formatSaveValue = (column, value, row) => {
+  if (typeof column?.saveFormat === 'function') {
+    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'];

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

@@ -1,109 +1,127 @@
-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,
-    themeColors,
-  } = 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={themeColors.iconWarning || 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;
+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 {
+  canHideVisibleColumn,
+  isRequiredVisibleColumn,
+  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,
+    themeColors,
+  } = 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={themeColors.iconWarning || 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 required = isRequiredVisibleColumn(column);
+              const locked =
+                required ||
+                (checked &&
+                  !canHideVisibleColumn({
+                    columns,
+                    fieldName,
+                    visibleColumns,
+                  }));
+              const toggleColumn = () => {
+                if (locked && checked) {
+                  return;
+                }
+
+                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={locked ? 1 : 0.82}
+                  disabled={locked && checked}
+                  onPress={toggleColumn}
+                >
+                  <Icon
+                    name={checked ? 'check-square' : 'square'}
+                    size={16}
+                    color={checked ? resolvedCheckboxSelectedMarkColor : resolvedCheckboxBorderColor}
+                  />
+                  <Text style={[styles.columnMenuText, { color: textColor }]} numberOfLines={1}>
+                    {required ? `${label} *` : label}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default DefaultColumnMenu;