@controleonline/ui-default 1.0.269 → 1.0.272

package/src/react/components/map/DefaultMap.web.js

@@ -1,68 +1,124 @@
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
-
-import DefaultGoogleMap from './DefaultGoogleMap.web';
-
-import styles from './DefaultMap.styles';
-import {
-  buildOpenStreetMapHtml,
-  resolveDefaultMapPayload,
-} from './DefaultMap.shared';
-
-export default function DefaultMap({
-  config = null,
-  addresses = null,
-  markerPayloads = [],
-  paths = [],
-  userCoordinates = null,
-  apiKey = '',
-  popupTheme = null,
-}) {
-  const resolvedPayload = useMemo(
-    () =>
-      resolveDefaultMapPayload({
-        config,
-        addresses,
-        markerPayloads,
-        paths,
-        userCoordinates,
-        apiKey,
-      }),
-    [apiKey, addresses, config, markerPayloads, paths, userCoordinates],
-  );
-
-  if (
-    resolvedPayload.markerPayloads.length === 0 &&
-    !resolvedPayload.userCoordinates &&
-    resolvedPayload.paths.length === 0
-  ) {
-    return null;
-  }
-
-  if (resolvedPayload.apiKey) {
-    return (
-      <DefaultGoogleMap
-        apiKey={resolvedPayload.apiKey}
-        markerPayloads={resolvedPayload.markerPayloads}
-        userCoordinates={resolvedPayload.userCoordinates}
-        paths={resolvedPayload.paths}
-        popupTheme={popupTheme}
-      />
-    );
-  }
-
-  return (
-    <View style={styles.mapContainer}>
-      <iframe
-        title="Mapa"
-        srcDoc={buildOpenStreetMapHtml({
-          markerPayloads: resolvedPayload.markerPayloads,
-          paths: resolvedPayload.paths,
-          userCoordinates: resolvedPayload.userCoordinates,
-          routeColor: '#0EA5E9',
-        })}
-        style={{width: '100%', height: '100%', border: 0}}
-      />
-    </View>
-  );
-}
+import React, {useEffect, useMemo, useRef} from 'react';
+import {View} from 'react-native';
+
+import DefaultGoogleMap from './DefaultGoogleMap.web';
+
+import styles from './DefaultMap.styles';
+import {
+  buildOpenStreetMapHtml,
+  resolveDefaultMapPayload,
+} from './DefaultMap.shared';
+
+export default function DefaultMap({
+  config = null,
+  addresses = null,
+  markerPayloads = [],
+  paths = [],
+  userCoordinates = null,
+  apiKey = '',
+  popupTheme = null,
+}) {
+  const iframeRef = useRef(null);
+  const resolvedPayload = useMemo(
+    () =>
+      resolveDefaultMapPayload({
+        config,
+        addresses,
+        markerPayloads,
+        paths,
+        userCoordinates,
+        apiKey,
+      }),
+    [apiKey, addresses, config, markerPayloads, paths, userCoordinates],
+  );
+
+  const mapKey = useMemo(() => {
+    const markers = resolvedPayload.markerPayloads || [];
+    const first = markers[0] || {};
+    const user = resolvedPayload.userCoordinates || {};
+    return [
+      first.latitude,
+      first.longitude,
+      first.geocodeQuery || first.addressLine || '',
+      user.latitude,
+      user.longitude,
+      markers.length,
+      (resolvedPayload.paths || []).length,
+    ].join('|');
+  }, [resolvedPayload]);
+
+  useEffect(() => {
+    const el = iframeRef.current;
+    if (!el) {
+      return undefined;
+    }
+
+    const bump = () => {
+      try {
+        const win = el.contentWindow;
+        if (win && typeof win.dispatchEvent === 'function') {
+          win.dispatchEvent(new Event('resize'));
+        }
+      } catch (e) {
+        // empty srcDoc during mount
+      }
+    };
+
+    const onLoad = () => {
+      bump();
+      setTimeout(bump, 50);
+      setTimeout(bump, 250);
+      setTimeout(bump, 800);
+    };
+
+    el.addEventListener('load', onLoad);
+    return () => el.removeEventListener('load', onLoad);
+  }, [mapKey]);
+
+  if (
+    resolvedPayload.markerPayloads.length === 0 &&
+    !resolvedPayload.userCoordinates &&
+    resolvedPayload.paths.length === 0
+  ) {
+    return null;
+  }
+
+  if (resolvedPayload.apiKey) {
+    return (
+      <DefaultGoogleMap
+        apiKey={resolvedPayload.apiKey}
+        markerPayloads={resolvedPayload.markerPayloads}
+        userCoordinates={resolvedPayload.userCoordinates}
+        paths={resolvedPayload.paths}
+        popupTheme={popupTheme}
+      />
+    );
+  }
+
+  const html = buildOpenStreetMapHtml({
+    markerPayloads: resolvedPayload.markerPayloads,
+    paths: resolvedPayload.paths,
+    userCoordinates: resolvedPayload.userCoordinates,
+    routeColor: '#0EA5E9',
+  });
+
+  return (
+    <View style={[styles.mapContainer, {height: '100%', minHeight: 220, width: '100%', flex: 1}]}>
+      <iframe
+        ref={iframeRef}
+        key={mapKey}
+        title="Mapa"
+        srcDoc={html}
+        style={{
+          width: '100%',
+          height: '100%',
+          minHeight: 220,
+          border: 0,
+          display: 'block',
+        }}
+        loading="eager"
+        referrerPolicy="no-referrer-when-downgrade"
+      />
+    </View>
+  );
+}

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

@@ -1,108 +1,109 @@
-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;
+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;

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

@@ -70,7 +70,7 @@ const DefaultDebug = ({
   const [isOpen, setIsOpen] = useState(false);
   const store = useStore(storeName);
   const configs = store?.getters?.configs || {};
-  const { showError, showSuccess } = useMessage();
+  const { showError, showSuccess } = useMessage() || {};
   const { modalColors, resolvedAccentColor, tableButtonColors } = useDefaultTableTheme();
 
   const resolvedDebug = isObject(store?.getters?.debug) ? store.getters.debug : {};
@@ -82,11 +82,12 @@ const DefaultDebug = ({
   const debugParameters = isObject(resolvedDebug?.parameters)
     ? resolvedDebug.parameters
     : configs.debugFallbackParameters || null;
-  const debugParametersText = useMemo(
-    () => formatDebugValue(debugParameters),
-    [debugParameters],
-  );
-  const debugCopyText = useMemo(
+  const debugParametersText = useMemo(
+    () => formatDebugValue(debugParameters),
+    [debugParameters],
+  );
+  const hasDebugParameters = debugParametersText !== '';
+  const debugCopyText = useMemo(
     () =>
       [
         'Query:',
@@ -118,9 +119,9 @@ const DefaultDebug = ({
     [showError, showSuccess],
   );
 
-  if (!hasDebugQuery) {
-    return null;
-  }
+  if (!hasDebugQuery && !hasDebugParameters && !debugFilledQuery) {
+    return null;
+  }
 
   const {
     backgroundColor,
@@ -176,35 +177,41 @@ const DefaultDebug = ({
               </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>
+                {hasDebugQuery ? (
+                  <DebugSection
+                    borderColor={borderColor}
+                    copyText={debugQuery}
+                    onCopy={requestCopyText}
+                    textColor={textColor}
+                    title="Query"
+                  >
+                    {debugQuery}
+                  </DebugSection>
+                ) : null}
+
+                {hasDebugParameters ? (
+                  <DebugSection
+                    borderColor={borderColor}
+                    copyText={debugParametersText}
+                    onCopy={requestCopyText}
+                    textColor={textColor}
+                    title="Parametros"
+                  >
+                    {debugParametersText}
+                  </DebugSection>
+                ) : null}
+
+                {debugFilledQuery ? (
+                  <DebugSection
+                    borderColor={borderColor}
+                    copyText={debugFilledQuery}
+                    onCopy={requestCopyText}
+                    textColor={textColor}
+                    title="Query preenchida"
+                  >
+                    {debugFilledQuery}
+                  </DebugSection>
+                ) : null}
               </ScrollView>
 
               <View style={[styles.modalActions, { borderTopColor: borderColor }]}>

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

@@ -5,7 +5,13 @@ import DefaultSearch from '../filters/DefaultSearch';
 import styles from './DefaultTable.styles';
 import useDefaultTableTheme from './useDefaultTableTheme';
 
-const DefaultSearchModal = ({ storeName, visible = false, onClose }) => {
+const DefaultSearchModal = ({
+  searchKey = 'search',
+  searchPlaceholder = '',
+  storeName,
+  visible = false,
+  onClose,
+}) => {
   const { modalColors } = useDefaultTableTheme();
   if (!visible) return null;
 
@@ -36,6 +42,8 @@ const DefaultSearchModal = ({ storeName, visible = false, onClose }) => {
           <View style={styles.searchModalBody}>
             <DefaultSearch
               autoFocus
+              placeholder={searchPlaceholder}
+              searchKey={searchKey}
               storeName={storeName}
               onSearch={onClose}
             />

package/src/react/components/table/DefaultTable.grouping.js

@@ -0,0 +1,98 @@
+import { getColumnKey } from '../inputs/defaultInputUtils';
+import { getRowKey } from './DefaultTable.utils';
+
+export const isGroupingColumn = column => column?.grouping === true;
+
+export const getGroupingColumns = columns =>
+  (Array.isArray(columns) ? columns : []).filter(isGroupingColumn);
+
+export const getRowFieldValue = (row, column) => {
+  const fieldName = typeof column === 'string' ? column : getColumnKey(column);
+  if (!fieldName) return '';
+  const value = row?.[fieldName];
+  if (value && typeof value === 'object') {
+    return String(value.label ?? value.name ?? value.alias ?? value.id ?? '').trim();
+  }
+  return String(value ?? '').trim();
+};
+
+export const buildGroupKey = (row, groupingColumns) =>
+  getGroupingColumns(groupingColumns)
+    .map(column => getRowFieldValue(row, column) || 'none')
+    .join(':');
+
+export const buildGroupLabel = (row, groupingColumns) =>
+  getGroupingColumns(groupingColumns)
+    .map(column => getRowFieldValue(row, column) || column?.label || getColumnKey(column))
+    .filter(Boolean)
+    .join(' · ');
+
+export const groupTableRows = (rows, columns) => {
+  const groupingColumns = getGroupingColumns(columns);
+  const items = Array.isArray(rows) ? rows : [];
+  if (!groupingColumns.length) {
+    return [{ id: 'all', key: 'all', label: '', rows: items, count: items.length }];
+  }
+  const groups = new Map();
+  items.forEach(row => {
+    const key = buildGroupKey(row, groupingColumns);
+    if (!groups.has(key)) {
+      groups.set(key, { id: key, key, label: buildGroupLabel(row, groupingColumns), rows: [], count: 0 });
+    }
+    const group = groups.get(key);
+    group.rows.push(row);
+    group.count += 1;
+  });
+  return Array.from(groups.values());
+};
+
+export const flattenGroupedTableItems = (rows, columns) => {
+  const groupingColumns = getGroupingColumns(columns);
+  const items = Array.isArray(rows) ? rows : [];
+  if (!groupingColumns.length) {
+    return items.map((row, index) => ({ type: 'row', id: `row:${getRowKey(row, index)}`, row }));
+  }
+  return groupTableRows(items, groupingColumns).flatMap(group => [
+    { type: 'group', id: `group:${group.id}`, group },
+    ...group.rows.map((row, index) => ({ type: 'row', id: `row:${group.id}:${getRowKey(row, index)}`, group, row })),
+  ]);
+};
+
+export const normalizeSelectedIds = selectedIds =>
+  Array.from(new Set((Array.isArray(selectedIds) ? selectedIds : []).map(id => String(id))));
+
+export const resolveStoreSelectedIds = store =>
+  normalizeSelectedIds(store?.getters?.selected);
+
+export const isRowSelected = (row, selectedIds, index = 0) =>
+  normalizeSelectedIds(selectedIds).includes(String(getRowKey(row, index)));
+
+export const toggleSelectedId = (selectedIds, row, index = 0) => {
+  const current = normalizeSelectedIds(selectedIds);
+  const id = String(getRowKey(row, index));
+  return current.includes(id) ? current.filter(item => item !== id) : [...current, id];
+};
+
+export const toggleGroupSelection = (selectedIds, groupRows) => {
+  const current = normalizeSelectedIds(selectedIds);
+  const ids = (Array.isArray(groupRows) ? groupRows : []).map(row => String(getRowKey(row)));
+  const allSelected = ids.length > 0 && ids.every(id => current.includes(id));
+  if (allSelected) return current.filter(id => !ids.includes(id));
+  return normalizeSelectedIds([...current, ...ids]);
+};
+
+export const persistStoreSelection = (store, nextIds, rows, columns) => {
+  const selected = normalizeSelectedIds(nextIds);
+  store?.actions?.setSelected?.(selected);
+  const items = (Array.isArray(rows) ? rows : []).filter(row => selected.includes(String(getRowKey(row))));
+  const groups = groupTableRows(items, columns).filter(group => group.rows.length > 0);
+  const totalValue = items.reduce((sum, row) => {
+    const amount = Number(row?.invoiceTotal ?? row?.total ?? row?.value ?? 0);
+    return sum + (Number.isFinite(amount) ? amount : 0);
+  }, 0);
+  store?.actions?.setSummary?.({
+    count: { invoices: items.length, groups: groups.length },
+    sum: { invoiceTotal: Number(totalValue.toFixed(2)) },
+  });
+  return selected;
+};