@controleonline/ui-default 1.0.270 → 1.0.273

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

@@ -5,6 +5,8 @@ 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,
@@ -26,6 +28,7 @@ const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
     checkboxBorderColor: resolvedCheckboxBorderColor,
     checkboxSelectedMarkColor: resolvedCheckboxSelectedMarkColor,
     modalColors,
+    themeColors,
   } = useDefaultTableTheme();
   if (!visible) return null;
 
@@ -51,7 +54,7 @@ const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
               activeOpacity={0.82}
               onPress={onClose}
             >
-              <Icon name="x" size={16} color={closeIconColor} />
+              <Icon name="x" size={16} color={themeColors.iconWarning || closeIconColor} />
             </TouchableOpacity>
           </View>
           <ScrollView style={styles.columnMenuModalBody} contentContainerStyle={styles.columnMenuModalList}>
@@ -64,7 +67,20 @@ const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
                 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: {
@@ -86,7 +102,8 @@ const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
                 <TouchableOpacity
                   key={fieldName}
                   style={styles.columnMenuItem}
-                  activeOpacity={0.82}
+                  activeOpacity={locked ? 1 : 0.82}
+                  disabled={locked && checked}
                   onPress={toggleColumn}
                 >
                   <Icon
@@ -94,7 +111,9 @@ const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
                     size={16}
                     color={checked ? resolvedCheckboxSelectedMarkColor : resolvedCheckboxBorderColor}
                   />
-                  <Text style={[styles.columnMenuText, { color: textColor }]} numberOfLines={1}>{label}</Text>
+                  <Text style={[styles.columnMenuText, { color: textColor }]} numberOfLines={1}>
+                    {required ? `${label} *` : label}
+                  </Text>
                 </TouchableOpacity>
               );
             })}

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

@@ -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;
+};