@controleonline/ui-common 1.2.83 → 1.2.84

package/package.json

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

package/src/react/components/AddImportModal.js

@@ -15,7 +15,35 @@ import DefaultUpload from '@controleonline/ui-default/src/react/components/uploa
 import { resolveSystemErrorMessage } from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
 import styles from './AddImportModal.styles';
 
-const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
+const AddImportModal = ({
+    visible,
+    onClose,
+    onSuccess,
+    context = {},
+    allowedExtensions = [],
+    acceptedTypes = '*/*',
+    helperLabel,
+    modalTitle,
+    fileLabel,
+    selectFileLabel,
+    cancelLabel,
+    importSuccessLabel,
+    importErrorLabel,
+}) => {
+    const fallbackModalTitle = global.t?.t('imports', 'title', 'new_import');
+    const fallbackFileLabel = global.t?.t('imports', 'label', 'file');
+    const fallbackSelectFileLabel = global.t?.t('imports', 'button', 'select_file');
+    const fallbackCancelLabel = global.t?.t('imports', 'button', 'cancel');
+    const fallbackSuccessLabel = global.t?.t('imports', 'success', 'import_sent_successfully');
+    const fallbackErrorLabel = global.t?.t('imports', 'error', 'error_sending_import');
+    const fallbackInvalidFileLabel = global.t?.t('imports', 'message', 'invalid_file_extension');
+    const _modalTitle = modalTitle ?? fallbackModalTitle;
+    const _fileLabel = fileLabel ?? fallbackFileLabel;
+    const _selectFileLabel = selectFileLabel ?? fallbackSelectFileLabel;
+    const _cancelLabel = cancelLabel ?? fallbackCancelLabel;
+    const _importSuccessLabel = importSuccessLabel ?? fallbackSuccessLabel;
+    const _importErrorLabel = importErrorLabel ?? fallbackErrorLabel;
+    const _helperLabel = helperLabel ?? fallbackInvalidFileLabel;
     const { showError, showSuccess } = useMessage();
     const peopleStore = useStore('people');
     const importsStore = useStore('imports');
@@ -31,17 +59,14 @@ const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
         buttonIcon: themeColors.buttonIcon || themeColors.buttonText,
     };
 
-    const modalTitle = global.t?.t('imports', 'title', 'new_import');
-    const csvLabel = global.t?.t('imports', 'label', 'csv_file');
-    const selectFileLabel = global.t?.t('imports', 'button', 'select_file');
-    const cancelLabel = global.t?.t('imports', 'button', 'cancel');
-    const csvOnlyLabel = global.t?.t('imports', 'message', 'only_csv_files_are_allowed');
-    const importSuccessLabel = global.t?.t('imports', 'success', 'import_sent_successfully');
-    const importErrorLabel = global.t?.t('imports', 'error', 'error_sending_import');
+
 
     const handleUploadImportFile = async ({ file }) => {
-        if (!file?.name?.toLowerCase().endsWith('.csv')) {
-            throw new Error(csvOnlyLabel);
+        if (allowedExtensions.length > 0) {
+            const extensionRegex = new RegExp(`\\.(${allowedExtensions.join('|')})$`, 'i');
+            if (!file?.name?.toLowerCase().match(extensionRegex)) {
+                throw new Error(_helperLabel);
+            }
         }
 
         try {
@@ -50,13 +75,13 @@ const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
                 importType: context.context,
                 peopleId: currentCompany.id,
             });
-            showSuccess(importSuccessLabel);
+            showSuccess(_importSuccessLabel);
             if (onSuccess) onSuccess();
             handleClose();
             return file;
         } catch (error) {
             const importFeedback =
-                resolveSystemErrorMessage(error) || importErrorLabel;
+                resolveSystemErrorMessage(error) || _importErrorLabel;
             showError(importFeedback);
             throw new Error(importFeedback);
         }
@@ -74,31 +99,30 @@ const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
         >
             <View style={styles.sheet}>
                 <View style={styles.header}>
-                    <Text style={styles.title}>{modalTitle}</Text>
+                    <Text style={styles.title}>{_modalTitle}</Text>
                     <TouchableOpacity onPress={handleClose}>
                         <Icon name="close" size={24} />
                     </TouchableOpacity>
                 </View>
 
                 <ScrollView style={styles.content}>
-                    <Text style={styles.label}>{csvLabel}</Text>
+                    <Text style={styles.label>{_fileLabel}</Text>
                     <DefaultUpload
-                        relationStoreName="imports"
                         relationField="import"
                         relationResource="imports"
                         entityId={context.context || 'import'}
                         companyId={currentCompany.id}
                         context={`imports-${context.context || 'default'}`}
                         libraryContexts={[`imports-${context.context || 'default'}`]}
-                        acceptedTypes="text/csv,.csv"
+                        acceptedTypes={acceptedTypes}
                         fileType=""
-                        title={csvLabel}
-                        triggerLabel={selectFileLabel}
-                        managerTitle={modalTitle}
-                        searchPlaceholder={selectFileLabel}
-                        uploadButtonLabel={selectFileLabel}
+                        title={_fileLabel}
+                        triggerLabel={_selectFileLabel}
+                        managerTitle={_modalTitle}
+                        searchPlaceholder={_selectFileLabel}
+                        uploadButtonLabel={_selectFileLabel}
                         emptyAttachmentLabel=""
-                        emptyLibraryLabel={selectFileLabel}
+                        emptyLibraryLabel={_selectFileLabel}
                         showInlineContent={false}
                         uploadResultAlreadyAttached
                         requireEntity={false}
@@ -126,14 +150,12 @@ const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
                             </TouchableOpacity>
                         )}
                     />
-                    <Text style={styles.helperText}>
-                        {csvOnlyLabel}
-                    </Text>
+
                 </ScrollView>
 
                 <View style={styles.footer}>
                     <TouchableOpacity onPress={handleClose} style={styles.secondaryButton}>
-                        <Text>{cancelLabel}</Text>
+                        <Text>{_cancelLabel}</Text>
                     </TouchableOpacity>
                 </View>
             </View>