@controleonline/ui-common 1.2.85 → 1.2.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-common",
-  "version": "1.2.85",
+  "version": "1.2.87",
   "author": "ControleOnline",
   "description": "ControleOnline Common Quasar UI Component",
   "license": "MIT",

package/src/react/components/AddImportModal.js

@@ -11,17 +11,29 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import { useStore } from '@store';
 import AnimatedModal from './AnimatedModal';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
-import DefaultUpload from '@controleonline/ui-default/src/react/components/upload/DefaultUpload';
+import { useState } from 'react';
 import { resolveSystemErrorMessage } from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
 import styles from './AddImportModal.styles';
 
+const FORBIDDEN_EXTENSIONS = new Set(['*', '*.*', '', '.', '.*']);
+
+const sanitizeAllowedExtensions = (extensions, importType) => {
+    const fallback =
+        importType === 'invoice_tax' || importType === 'xml' ? ['xml', 'zip'] : ['csv'];
+    const source = Array.isArray(extensions) && extensions.length > 0 ? extensions : fallback;
+    return [...new Set(
+        source
+            .map(item => String(item || '').trim().replace(/^\./, '').toLowerCase())
+            .filter(item => item && !FORBIDDEN_EXTENSIONS.has(item) && !item.includes('*')),
+    )];
+};
+
 const AddImportModal = ({
     visible,
     onClose,
     onSuccess,
     context = {},
-    allowedExtensions = [], // default will be set to ['csv'] if empty
-    // acceptedTypes will be derived from allowedExtensions for security
+    allowedExtensions = [],
     helperLabel,
     modalTitle,
     fileLabel,
@@ -45,12 +57,14 @@ const AddImportModal = ({
     const _importSuccessLabel = importSuccessLabel ?? fallbackSuccessLabel;
     const _importErrorLabel = importErrorLabel ?? fallbackErrorLabel;
     const _helperLabel = helperLabel ?? fallbackInvalidFileLabel;
-    // Resolve allowed extensions securely – default to CSV only
-    const _allowedExtensions = (allowedExtensions && allowedExtensions.length > 0) ? allowedExtensions : ['csv'];
-    // Build acceptedTypes string for file input (e.g., ".csv,.xml,.zip")
+    const resolvedImportType =
+        importType ?? context.context ?? (allowedExtensions.includes('xml') ? 'xml' : 'csv');
+    const _allowedExtensions = sanitizeAllowedExtensions(
+        allowedExtensions.length > 0 ? allowedExtensions : context.allowedExtensions,
+        resolvedImportType,
+    );
     const _acceptedTypes = _allowedExtensions.map(ext => `.${ext}`).join(',');
-    // Determine import type: prioritize prop, then infer from allowed extensions, default to 'csv'
-    const _importType = importType ?? (_allowedExtensions.includes('xml') ? 'xml' : (_allowedExtensions.includes('zip') ? 'zip' : 'csv'));
+    const _importType = resolvedImportType;
     const { showError, showSuccess } = useMessage();
     const peopleStore = useStore('people');
     const importsStore = useStore('imports');
@@ -66,35 +80,66 @@ const AddImportModal = ({
         buttonIcon: themeColors.buttonIcon || themeColors.buttonText,
     };
 
+    const [showImportList, setShowImportList] = useState(false);
+    const [importResult, setImportResult] = useState(null);
+    const [uploading, setUploading] = useState(false);
 
-
-    const handleUploadImportFile = async ({ file }) => {
-        if (_allowedExtensions.length > 0) {
-            const extensionRegex = new RegExp(`\\.(${_allowedExtensions.join('|')})$`, 'i');
-            if (!file?.name?.toLowerCase().match(extensionRegex)) {
+    const handleUploadImportFile = async ({ file } = {}) => {
+        if (!file) {
+            if (typeof document === 'undefined') {
                 throw new Error(_helperLabel);
             }
+
+            file = await new Promise((resolve, reject) => {
+                const input = document.createElement('input');
+                input.type = 'file';
+                input.accept = _acceptedTypes;
+                input.onchange = () => resolve(input.files?.[0] || null);
+                input.onerror = () => reject(new Error(_helperLabel));
+                input.click();
+            });
         }
 
+        if (!file) {
+            return null;
+        }
+
+        if (_allowedExtensions.length === 0) {
+            throw new Error('Importar *.* nao e permitido.');
+        }
+
+        const extensionRegex = new RegExp(`\\.(${_allowedExtensions.join('|')})$`, 'i');
+        if (!file?.name?.toLowerCase().match(extensionRegex)) {
+            throw new Error(_helperLabel);
+        }
+
+        setUploading(true);
         try {
             await importActions.uploadImportFile({
                 file,
                 importType: _importType,
                 peopleId: currentCompany.id,
+                allowedExtensions: _allowedExtensions,
             });
             showSuccess(_importSuccessLabel);
+            setImportResult(true);
+            setShowImportList(true);
             if (onSuccess) onSuccess();
-            handleClose();
             return file;
         } catch (error) {
             const importFeedback =
                 resolveSystemErrorMessage(error) || _importErrorLabel;
             showError(importFeedback);
+            setImportResult(false);
             throw new Error(importFeedback);
+        } finally {
+            setUploading(false);
         }
     };
 
     const handleClose = () => {
+        setShowImportList(false);
+        setImportResult(null);
         onClose();
     };
 
@@ -112,52 +157,19 @@ const AddImportModal = ({
                     </TouchableOpacity>
                 </View>
 
-                <ScrollView style={styles.content}>
-                    <Text style={styles.label}>{_fileLabel}</Text>
-                    <DefaultUpload
-                        relationField="import"
-                        relationResource="imports"
-                        entityId={context.context || 'import'}
-                        companyId={currentCompany.id}
-                        context={`imports-${context.context || 'default'}`}
-                        libraryContexts={[`imports-${context.context || 'default'}`]}
-                        acceptedTypes={_acceptedTypes}
-                        fileType=""
-                        title={_fileLabel}
-                        triggerLabel={_selectFileLabel}
-                        managerTitle={_modalTitle}
-                        searchPlaceholder={_selectFileLabel}
-                        uploadButtonLabel={_selectFileLabel}
-                        emptyAttachmentLabel=""
-                        emptyLibraryLabel={_selectFileLabel}
-                        showInlineContent={false}
-                        uploadResultAlreadyAttached
-                        requireEntity={false}
-                        onUploadFile={handleUploadImportFile}
-                        renderTrigger={({openManager, uploading}) => (
-                            <TouchableOpacity
-                                onPress={openManager}
-                                disabled={uploading}
-                                style={[
-                                    styles.filePicker,
-                                    {
-                                        backgroundColor: buttonPalette.buttonBackground,
-                                        borderColor: buttonPalette.buttonBorder,
-                                    },
-                                ]}
-                            >
-                                <Text numberOfLines={1} style={[styles.fileName, { color: buttonPalette.buttonText }]}>
-                                    {selectFileLabel}
-                                </Text>
-                                {uploading ? (
-                                    <ActivityIndicator color={buttonPalette.buttonIcon} />
-                                ) : (
-                                    <Icon name="upload-file" size={22} color={buttonPalette.buttonIcon} />
-                                )}
-                            </TouchableOpacity>
+                <ScrollView style={styles.content} keyboardShouldPersistTaps="always">
+                    <Text style={styles.fileName}>{_fileLabel} ({_acceptedTypes})</Text>
+                    <TouchableOpacity
+                        onPress={() => handleUploadImportFile()}
+                        style={[styles.filePicker, { backgroundColor: buttonPalette.buttonBackground, borderColor: buttonPalette.buttonBorder }]}
+                    >
+                        <Text numberOfLines={1} style={[styles.fileName, { color: buttonPalette.buttonText }]}>{_selectFileLabel}</Text>
+                        {uploading ? (
+                            <ActivityIndicator color={buttonPalette.buttonIcon} />
+                        ) : (
+                            <Icon name="upload-file" size={22} color={buttonPalette.buttonIcon} />
                         )}
-                    />
-
+                    </TouchableOpacity>
                 </ScrollView>
 
                 <View style={styles.footer}>
@@ -171,4 +183,3 @@ const AddImportModal = ({
 };
 
 export default AddImportModal;
-// TODO(store-first): quando este arquivo for mexido, mover a leitura para stores e evitar chamadas HTTP diretas quando o store ja resolver isso.

package/src/react/pages/Imports.js

@@ -27,7 +27,7 @@ const {
 
 const formatDate = (dateString) => {
     const d = new Date(dateString);
-    return d.toLocaleString(); // Formato local legível
+    return d.toLocaleString();
 };
 
 const Imports = ({ context = {}, onClose }) => {
@@ -57,6 +57,12 @@ const Imports = ({ context = {}, onClose }) => {
     const importType = context.context;
     const title = context.title;
     const searchPlaceholder = context.searchPlaceholder;
+    const allowedExtensions = Array.isArray(context.allowedExtensions)
+        ? context.allowedExtensions
+        : importType === 'invoice_tax' || importType === 'xml'
+            ? ['xml', 'zip']
+            : ['csv'];
+    const showCsvTemplate = allowedExtensions.includes('csv');
     const {
         refreshLabel,
         processingLabel,
@@ -255,11 +261,9 @@ const Imports = ({ context = {}, onClose }) => {
             });
 
             const csvText = typeof response === 'string' ? response : await response.text?.();
-            console.log('CSV recebido:', csvText.slice(0, 200));
 
             if (!csvText) throw new Error('CSV vazio');
 
-            // mobile: verifica se o diretório está disponível
             const dirUri = Directory?.cacheDocumentDirectory || Directory?.documentDirectory;
 
             if (dirUri) {
@@ -272,21 +276,18 @@ const Imports = ({ context = {}, onClose }) => {
                     await Sharing.shareAsync(fileUri);
                 }
 
-                console.log(`Arquivo CSV criado em: ${fileUri}`);
                 return fileUri;
             } else if (typeof window !== 'undefined') {
-                // fallback web
                 const blob = new Blob([csvText], { type: 'text/csv' });
                 const link = document.createElement('a');
                 link.href = URL.createObjectURL(blob);
                 link.download = `modelo_${importType}.csv`;
                 link.click();
                 URL.revokeObjectURL(link.href);
-                console.log('Download CSV disparado no web');
                 return 'web-download';
-            } else {
-                throw new Error('FileSystem não disponível');
             }
+
+            throw new Error('FileSystem não disponível');
         } catch (err) {
             console.error('Erro detalhado ao baixar CSV:', err);
             throw new Error('Falha ao baixar o modelo CSV');
@@ -306,6 +307,7 @@ const Imports = ({ context = {}, onClose }) => {
             <View style={styles.subHeader}>
                 <View style={styles.topRow}>
                     <View style={styles.topRowActions}>
+                        {showCsvTemplate ? (
                         <TouchableOpacity style={styles.downloadButton} onPress={downloadTemplate}>
                             <View
                                 style={{
@@ -323,6 +325,7 @@ const Imports = ({ context = {}, onClose }) => {
                                 <Text style={[styles.downloadText, { color: buttonPalette.buttonText }]}>Baixar Modelo</Text>
                             </View>
                         </TouchableOpacity>
+                        ) : null}
 
                         <TouchableOpacity
                             style={[
@@ -397,6 +400,8 @@ const Imports = ({ context = {}, onClose }) => {
                 visible={showAddImportModal}
                 onClose={() => setShowAddImportModal(false)}
                 context={context}
+                importType={importType}
+                allowedExtensions={allowedExtensions}
                 onSuccess={() => {
                     setCurrentPage(1);
                     fetchImports(searchQuery, 1);
@@ -407,4 +412,3 @@ const Imports = ({ context = {}, onClose }) => {
 };
 
 export default Imports;
-// TODO(store-first): quando este arquivo for mexido, mover a leitura para stores, remover api.fetch e evitar repassar dados em objetos quando o store ja resolver isso.

package/src/store/imports/customActions.js

@@ -1,6 +1,8 @@
 import {Platform} from 'react-native';
 import {api} from '@controleonline/ui-common/src/api';
 
+const FORBIDDEN_EXTENSIONS = new Set(['*', '*.*', '', '.', '.*']);
+
 const extractId = value => {
   if (value === null || value === undefined || value === '') {
     return '';
@@ -15,11 +17,42 @@ const extractId = value => {
   return match ? match[1] : '';
 };
 
+const normalizeExtension = value =>
+  String(value || '')
+    .trim()
+    .replace(/^\./, '')
+    .toLowerCase();
+
+const fileExtension = file => {
+  const name = String(file?.name || file?.uri || '');
+  const match = name.toLowerCase().match(/\.([a-z0-9]+)$/);
+  return match ? match[1] : '';
+};
+
+const sanitizeAllowedExtensions = (extensions, importType) => {
+  const fallback =
+    importType === 'invoice_tax' || importType === 'xml' ? ['xml', 'zip'] : ['csv'];
+  const source = Array.isArray(extensions) && extensions.length > 0 ? extensions : fallback;
+  const cleaned = source
+    .map(normalizeExtension)
+    .filter(item => item && !FORBIDDEN_EXTENSIONS.has(item) && !item.includes('*'));
+
+  if (cleaned.length === 0) {
+    throw new Error('Tipo de importacao sem extensao permitida. Importar *.* nao e permitido.');
+  }
+
+  return [...new Set(cleaned)];
+};
+
 export const uploadImportFile = (_context, payload = {}) => {
   const normalizedPayload = payload && typeof payload === 'object' ? payload : {};
   const file = normalizedPayload.file;
   const importType = String(normalizedPayload.importType || '').trim();
   const peopleId = extractId(normalizedPayload.peopleId || normalizedPayload.people);
+  const allowedExtensions = sanitizeAllowedExtensions(
+    normalizedPayload.allowedExtensions,
+    importType,
+  );
 
   if (!file) {
     throw new Error('Arquivo de importacao nao informado.');
@@ -33,6 +66,13 @@ export const uploadImportFile = (_context, payload = {}) => {
     throw new Error('Empresa nao identificada para a importacao.');
   }
 
+  const extension = fileExtension(file);
+  if (!allowedExtensions.includes(extension)) {
+    throw new Error(
+      `Extensao nao permitida. Aceitas: ${allowedExtensions.map(item => `.${item}`).join(', ')}.`,
+    );
+  }
+
   const formData = new FormData();
   formData.append('importType', importType);
   formData.append('people', peopleId);
@@ -42,8 +82,8 @@ export const uploadImportFile = (_context, payload = {}) => {
   } else {
     formData.append('file', {
       uri: file.uri,
-      name: file.name || 'import.csv',
-      type: file.mimeType || 'text/csv',
+      name: file.name || `import.${extension || allowedExtensions[0]}`,
+      type: file.mimeType || 'application/octet-stream',
     });
   }