@controleonline/ui-common 1.2.84 → 1.2.86

package/package.json

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

package/src/react/components/AddImportModal.js

@@ -11,7 +11,8 @@ 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 ImportsPage from '@controleonline/ui-common/src/react/pages/Imports';
+import { useState } from 'react';
 import { resolveSystemErrorMessage } from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
 import styles from './AddImportModal.styles';
 
@@ -20,8 +21,8 @@ const AddImportModal = ({
     onClose,
     onSuccess,
     context = {},
-    allowedExtensions = [],
-    acceptedTypes = '*/*',
+    allowedExtensions = [], // default will be set to ['csv'] if empty
+    // acceptedTypes will be derived from allowedExtensions for security
     helperLabel,
     modalTitle,
     fileLabel,
@@ -29,6 +30,7 @@ const AddImportModal = ({
     cancelLabel,
     importSuccessLabel,
     importErrorLabel,
+    importType = null,
 }) => {
     const fallbackModalTitle = global.t?.t('imports', 'title', 'new_import');
     const fallbackFileLabel = global.t?.t('imports', 'label', 'file');
@@ -44,6 +46,12 @@ 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 _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 { showError, showSuccess } = useMessage();
     const peopleStore = useStore('people');
     const importsStore = useStore('imports');
@@ -59,35 +67,45 @@ const AddImportModal = ({
         buttonIcon: themeColors.buttonIcon || themeColors.buttonText,
     };
 
-
+    const [showImportList, setShowImportList] = useState(false);
+    const [importResult, setImportResult] = useState(null); // true = success, false = error
+    const [uploading, setUploading] = useState(false);
 
     const handleUploadImportFile = async ({ file }) => {
-        if (allowedExtensions.length > 0) {
-            const extensionRegex = new RegExp(`\\.(${allowedExtensions.join('|')})$`, 'i');
+        if (_allowedExtensions.length > 0) {
+            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: context.context,
+                importType: _importType,
                 peopleId: currentCompany.id,
             });
             showSuccess(_importSuccessLabel);
+            // Indicate successful import and open import list
+            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();
     };
 
@@ -105,53 +123,26 @@ 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">
+    <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>
+    <TouchableOpacity
+        onPress={() => setShowImportList(true)}
+        style={[styles.filePicker, { marginTop: 10, backgroundColor: buttonPalette.buttonBackground, borderColor: buttonPalette.buttonBorder }]}
+    >
+        <Text style={[styles.fileName, { color: buttonPalette.buttonText }]}>{global.t?.t('imports', 'button', 'view_imports') || 'View Imports'}</Text>
+    </TouchableOpacity>
+</ScrollView>
 
-                </ScrollView>
 
                 <View style={styles.footer}>
                     <TouchableOpacity onPress={handleClose} style={styles.secondaryButton}>

package/src/react/pages/Imports.js

@@ -400,7 +400,9 @@ const Imports = ({ context = {}, onClose }) => {
                 onSuccess={() => {
                     setCurrentPage(1);
                     fetchImports(searchQuery, 1);
+                    if (onImportComplete) onImportComplete();
                 }}
+                onImportComplete={onImportComplete}
             />
         </View>
     );