@controleonline/ui-default 1.0.263 → 1.0.265

package/src/react/components/map/DefaultNativeMap.styles.js

@@ -1,122 +1,156 @@
-import {StyleSheet} from 'react-native';
-
-export default StyleSheet.create({
-  mapContainer: {
-    width: '100%',
-    height: '100%',
-    position: 'relative',
-    backgroundColor: '#E5EEF5',
-  },
-  mapViewport: {
-    width: '100%',
-    height: '100%',
-  },
-  mapOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 24,
-    backgroundColor: 'rgba(248, 250, 252, 0.9)',
-    gap: 12,
-  },
-  mapOverlayText: {
-    fontSize: 14,
-    lineHeight: 20,
-    color: '#0F172A',
-    textAlign: 'center',
-    fontWeight: '600',
-  },
-  markerWrap: {
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  markerIcon: {
-    width: 42,
-    height: 42,
-  },
-  calloutCard: {
-    minWidth: 228,
-    maxWidth: 288,
-    borderRadius: 18,
-    paddingHorizontal: 14,
-    paddingVertical: 14,
-    backgroundColor: '#FFFFFF',
-    shadowColor: '#0F172A',
-    shadowOpacity: 0.18,
-    shadowRadius: 16,
-    shadowOffset: {
-      width: 0,
-      height: 8,
-    },
-    elevation: 10,
-  },
-  companyName: {
-    fontSize: 11,
-    fontWeight: '700',
-    textTransform: 'uppercase',
-    letterSpacing: 0.6,
-    color: '#0369A1',
-    marginBottom: 6,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: '700',
-    color: '#0F172A',
-    marginBottom: 8,
-  },
-  line: {
-    fontSize: 13,
-    lineHeight: 19,
-    color: '#0F172A',
-    marginBottom: 4,
-  },
-  metaList: {
-    marginTop: 10,
-    gap: 6,
-  },
-  metaRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    gap: 10,
-  },
-  metaLabel: {
-    fontSize: 12,
-    color: '#64748B',
-  },
-  metaValue: {
-    flex: 1,
-    fontSize: 12,
-    color: '#334155',
-    textAlign: 'right',
-  },
-  actionsRow: {
-    flexDirection: 'row',
-    gap: 8,
-    marginTop: 14,
-  },
-  actionButton: {
-    flex: 1,
-    minHeight: 38,
-    borderRadius: 999,
-    borderWidth: 1,
-    borderColor: '#CBD5E1',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 12,
-    backgroundColor: '#FFFFFF',
-  },
-  actionButtonPrimary: {
-    borderColor: 'transparent',
-    backgroundColor: '#0EA5E9',
-  },
-  actionText: {
-    fontSize: 12,
-    fontWeight: '700',
-    color: '#0F172A',
-  },
-  actionTextPrimary: {
-    color: '#FFFFFF',
-  },
-});
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  mapContainer: {
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+    backgroundColor: '#E5EEF5',
+  },
+  mapViewport: {
+    width: '100%',
+    height: '100%',
+  },
+  mapOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+    backgroundColor: 'rgba(248, 250, 252, 0.9)',
+    gap: 12,
+  },
+  mapOverlayText: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#0F172A',
+    textAlign: 'center',
+    fontWeight: '600',
+  },
+  markerWrap: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  markerIcon: {
+    width: 42,
+    height: 42,
+  },
+  calloutCard: {
+    minWidth: 228,
+    maxWidth: 288,
+    borderRadius: 18,
+    paddingHorizontal: 14,
+    paddingVertical: 14,
+    backgroundColor: '#FFFFFF',
+    shadowColor: '#0F172A',
+    shadowOpacity: 0.18,
+    shadowRadius: 16,
+    shadowOffset: {
+      width: 0,
+      height: 8,
+    },
+    elevation: 10,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 12,
+  },
+  logoWrap: {
+    width: 58,
+    height: 58,
+    borderRadius: 16,
+    borderWidth: 1,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  logoImage: {
+    width: '100%',
+    height: '100%',
+  },
+  logoFallback: {
+    fontSize: 18,
+    fontWeight: '800',
+    letterSpacing: 0.8,
+  },
+  headerContent: {
+    flex: 1,
+    minWidth: 0,
+  },
+  companyName: {
+    fontSize: 11,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 0.6,
+    color: '#0369A1',
+    marginBottom: 6,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#0F172A',
+    marginBottom: 8,
+  },
+  line: {
+    fontSize: 13,
+    lineHeight: 19,
+    color: '#0F172A',
+    marginBottom: 4,
+  },
+  summaryText: {
+    marginTop: 10,
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  metaList: {
+    marginTop: 10,
+    gap: 6,
+  },
+  metaRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 10,
+  },
+  metaLabel: {
+    fontSize: 12,
+    color: '#64748B',
+  },
+  metaValue: {
+    flex: 1,
+    fontSize: 12,
+    color: '#334155',
+    textAlign: 'right',
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 14,
+  },
+  actionButton: {
+    flex: 1,
+    minHeight: 38,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    backgroundColor: '#FFFFFF',
+  },
+  actionButtonPrimary: {
+    borderColor: 'transparent',
+    backgroundColor: '#0EA5E9',
+  },
+  actionText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#0F172A',
+  },
+  actionTextPrimary: {
+    color: '#FFFFFF',
+  },
+});

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,233 @@
+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,
+  } = 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={isOpen ? pressedIconColor : iconColor} />
+      </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;