data-primals-engine 1.2.4 → 1.2.5

package/client/src/DataTable.jsx

@@ -58,9 +58,7 @@ import {HiddenableCell} from "./HiddenableCell.jsx";
 import ConditionBuilder from "./ConditionBuilder.jsx";
 import {pagedFilterToMongoConds} from "./filter.js";
 import {isConditionMet} from "../../src/filter";
-
-// Ajoutez cette constante pour la clé de sessionStorage
-const SESSION_STORAGE_IMPORT_JOBS_KEY = 'activeImportJobs';
+import {DataImporter} from "./DataImporter.jsx";
 
 const Header = ({
                     reversed = false,
@@ -699,365 +697,3 @@ export function DataTable({
     );
 }
 
-
-function DataImporter({onClose}) {
-
-    const [file, setFile] = useState(null);
-    const {selectedModel, page} = useModelContext();
-
-    const {me} = useAuthContext();
-    const {t, i18n} = useTranslation();
-
-    const queryClient = useQueryClient();
-    const {addNotification} = useNotificationContext();
-
-    const [hasHeaders, setHasHeaders] = useState(true);
-    const [csvHeaders, setCSVHeaders] = useState(selectedModel.fields.map(field => field.name));
-
-    // --- MODIFIÉ : État pour gérer plusieurs tâches d'importation ---
-    // Cet objet stockera les données de progression de chaque tâche, indexées par leur jobId
-    const [importJobs, setImportJobs] = useState({});
-    // Cette liste stockera les IDs des tâches qui sont actuellement suivies via SSE
-    const [activeJobIds, setActiveJobIds] = useState([]);
-
-    // Référence pour stocker les instances EventSource, indexées par jobId
-    const eventSourceRefs = useRef({});
-
-    const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
-
-    const [storedJobIds, setStoredJobIds] = useLocalStorage(SESSION_STORAGE_IMPORT_JOBS_KEY, []);
-    // --- NOUVEAU : Charger/Sauvegarder les IDs des tâches actives depuis sessionStorage ---
-    useEffect(() => {
-        // Charger les IDs des tâches actives depuis sessionStorage au montage
-        setActiveJobIds(storedJobIds);
-
-        // Pour chaque jobId stockpour obtenir le dernier statut
-        storedJobIds.forEach(jobId => {
-            startProgressTracking(jobId);
-        });
-
-        // Fonction de nettoyage : fermer toutes les connexions EventSource lors du démontage du composant
-        return () => {
-            Object.values(eventSourceRefs.current).forEach(es => es.close());
-            eventSourceRefs.current = {}; // Effacer les références
-        };
-    }, []); // S'exécute une seule fois au montage
-
-    // --- NOUVEAU : Effet pour mettre à jour sessionStorage lorsque activeJobIds change ---
-    useEffect(() => {
-        setStoredJobIds(activeJobIds);
-    }, [activeJobIds]);
-
-
-    // Mutation pour initier l'importation (envoi du fichier au serveur)
-    const {isLoading, mutate: importMutation} = useMutation(async () => {
-        console.log('Initiating data import...');
-        const params = new FormData();
-        params.append('model', selectedModel?.name);
-        params.append("_user", getUserId(me));
-        params.append("hasHeaders", !!hasHeaders);
-        params.append("csvHeaders", csvHeaders.join(','));
-        if (file) {
-            params.append("file", file);
-        } else {
-            addNotification({ title: t('dataimporter.noFileSelected', 'Veuillez sélectionner un fichier à importer.'), status: 'warning' });
-            return Promise.reject(new Error("No file selected"));
-        }
-
-        try {
-            const response = await fetch(`/api/data/import?lang=${lang}`, {
-                method: 'POST',
-                body: params
-            });
-
-            if (response.status === 202) {
-                const { job } = await response.json();
-                const { jobId} = job;
-                
-                // --- MODIFIÉ : Ajouter le nouvel jobId à activeJobIds et à l'état importJobs ---
-                setActiveJobIds(prevIds => [...prevIds, jobId]);
-                setImportJobs(prevJobs => ({
-                    ...prevJobs,
-                    [jobId]: {
-                        jobId,
-                        status: 'pending',
-                        totalRecords: 0,
-                        processedRecords: 0,
-                        errors: [],
-                        // Ajoutez d'autres champs initiaux que vous souhaitez afficher immédiatement
-                    }
-                }));
-                startProgressTracking(jobId); // Commencer le suivi de cette nouvelle tâche
-                addNotification({
-                    title: t('dataimporter.initiated', 'Importation initiée. Suivi de la progression...'),
-                    icon: <FaInfo/>,
-                    status: 'info'
-                });
-            } else {
-                const errorData = await response.json();
-                addNotification({
-                    title: errorData.error || t('dataimporter.error', 'Erreur lors de l\'importation.'),
-                    status: 'error'
-                });
-            }
-        } catch (e) {
-            addNotification({
-                title: e.message || t('dataimporter.networkError', 'Erreur réseau lors de l\'importation.'),
-                status: 'error'
-            });
-        }
-    });
-
-    // Fonction pour démarrer le suivi de la progression via Server-Sent Events (SSE) pour un jobId spécifique
-
-    // Fonction pour démarrer le suivi de la progression via Server-Sent Events (SSE) pour un jobId spécifique
-    const startProgressTracking = (jobId) => {
-        // Fermer toute connexion EventSource existante pour ce jobId pour éviter les doublons
-        if (eventSourceRefs.current[jobId]) {
-            eventSourceRefs.current[jobId].close();
-        }
-
-        const eventSource = new EventSource(`/api/import/progress/${jobId}`);
-        eventSourceRefs.current[jobId] = eventSource; // Stocker l'instance pour le nettoyage
-
-        eventSource.onmessage = (event) => {
-            const data = JSON.parse(event.data);
-            // --- MODIFIÉ : Mettre à jour la progression de la tâche spécifique ---
-            setImportJobs(prevJobs => ({
-                ...prevJobs,
-                [jobId]: data
-            }));
-
-            // Si la tâche est terminée (succès ou échec), fermer la connexion SSE.
-            // NE PAS la retirer de activeJobIds ici, pour qu'elle persiste au rafraîchissement.
-            // Elle sera retirar le bouton "Effacer".
-            if (data.status === 'completed' || data.status === 'failed' || data.status === 'not_found') {
-                eventSource.close();
-                delete eventSourceRefs.current[jobId]; // Supprimer la référence de l'EventSource
-
-                // --- LIGNE MODIFIÉE/SUPPRIMÉE ---
-                // Supprimez ou commentez la ligne suivante :
-                // setActiveJobIds(prevIds => prevIds.filter(id => id !== jobId));
-
-                queryClient.invalidateQueries(['api/data', selectedModel.name, 'page', page]); // Rafraîchir les données du tableau
-
-                if (data.status === 'completed') {
-                    addNotification({
-                        title: t('dataimporter.success', 'Importation des données réussie.'),
-                        icon: <FaInfo/>,
-                        status: 'completed'
-                    });
-                } else if (data.status === 'failed') {
-                    addNotification({
-                        title: t('dataimporter.failed', 'Importation échouée. Voir les détails pour les erreurs.'),
-                        status: 'error'
-                    });
-                } else if (data.status === 'not_found') {
-                    addNotification({
-                        title: t('dataimporter.jobNotFound', 'Tâche d\'importation non trouvée ou déjà terminée.'),
-                        status: 'warning'
-                    });
-                }
-            }
-        };
-
-        eventSource.onerror = (error) => {
-            console.error(`EventSource error for job ${jobId}:`, error);
-            eventSource.close();
-            delete eventSourceRefs.current[jobId];
-            setStoredJobIds(prevIds => prevIds.filter(id => id !== jobId));
-        };
-    };
-
-    const handleImportClick = () => {
-        importMutation();
-    };
-
-    const handleCloseModal = () => {
-        // Fermer toutes les connexions EventSource avant de fermer la modale
-        Object.values(eventSourceRefs.current).forEach(es => es.close());
-        eventSourceRefs.current = {}; // Effacer les références
-        onClose();
-    };
-
-    // Déterminer si une importation est actuellement en cours (pour désactiver les boutons)
-    const isAnyImportInProgress = Object.values(importJobs).some(job => job.status === 'pending' || job.status === 'processing');
-
-    // Filtrer et trier les tâches à afficher (par exemple, les tâches en cours en premier)
-    const jobsToDisplay = Object.values(importJobs).sort((a, b) => {
-        // Trier par statut (en attente/en cours en premier, puis échoué, puis terminé)
-        const statusOrder = { 'pending': 1, 'processing': 2, 'failed': 3, 'completed': 4, 'not_found': 5 };
-        return statusOrder[a.status] - statusOrder[b.status];
-    });
-
-    return (
-        <Dialog isClosable={true} isModal={true} onClose={handleCloseModal}>
-            <>
-                <h2>
-                    <Trans i18nKey="dataimporter.title" values={{model: t('model_' + selectedModel?.name, selectedModel?.name)}}>
-                        Importer des données dans {t('model_' + selectedModel?.name, selectedModel?.name)}
-                    </Trans>
-                </h2>
-                <p>
-                    <Trans i18nKey="dataimporter.info" values={{constante: (maxBytesPerSecondThrottleData / kilobytes) + 'ko/s'}}></Trans>
-                </p>
-
-                {/* Toujours afficher le formulaire de sélection de fichier et le bouton d'importation */}
-                <FileField
-                    name="file"
-                    maxSize={maxFileSize}
-                    mimeTypes={['application/json', 'text/csv']}
-                    type="file"
-                    multiple={false}
-                    onChange={(files) => {
-                        setFile(files && files.length > 0 ? files[files.length - 1].file : null);
-                    }}
-                />
-                {file && (file.name.endsWith('.csv') || file.type === 'text/csv') && (
-                    <div className="checkbox-label flex flex-row">
-                        <label htmlFor="hasHeadersCheckbox">
-                            <input
-                                type="checkbox"
-                                id="hasHeadersCheckbox"
-                                checked={hasHeaders}
-                                onChange={(e) => setHasHeaders(e.target.checked)}
-                            />
-                            <Trans i18nKey="dataimporter.hasCsvHeaders"></Trans>
-                        </label>
-                        {!hasHeaders && (
-                            <table>
-                                <thead>
-                                <tr>
-                                    <th><Trans i18nKey={"dataimporter.csvColumn"}>Num de colonne du CSV</Trans></th>
-                                    <th><Trans i18nKey="dataimporter.field">Champ du modèle</Trans></th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                {csvHeaders.map((mappedFieldName, index) => {
-                                    let fieldObjectForModelField = null;
-                                    let currentFieldValueForModelField = null;
-
-                                    if (mappedFieldName && mappedFieldName.trim() !== '') {
-                                        fieldObjectForModelField = selectedModel?.fields.find(f_model => f_model.name === mappedFieldName);
-                                        if (fieldObjectForModelField) {
-                                            currentFieldValueForModelField = fieldObjectForModelField.name;
-                                        }
-                                    }
-
-                                    return (
-                                        <tr key={`${selectedModel.name}-csvmap-${index}`}>
-                                            <td><Trans i18nKey="dataimporter.column" values={[index + 1]}>colonne {index + 1}</Trans></td>
-                                            <td>
-                                                <div className="flex">
-                                                    <ModelField
-                                                        disableable={true}
-                                                        showModel={false}
-                                                        value={selectedModel.name}
-                                                        fieldValue={currentFieldValueForModelField}
-                                                        onChange={({name: propName, value: selectedValue}) => {
-                                                            const newCsvHeaders = [...csvHeaders];
-                                                            newCsvHeaders[index] = selectedValue?.field ?? '';
-                                                            setCSVHeaders(newCsvHeaders);
-                                                        }}
-                                                        fields={true}
-                                                        model={selectedModel}
-                                                        field={fieldObjectForModelField}
-                                                    />
-                                                    <Button className="flex" onClick={() => {
-                                                        const csvH = [...csvHeaders];
-                                                        setCSVHeaders(csvH.filter((_, i) => i !== index));
-                                                    }}><FaTrash/></Button>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    );
-                                })}
-                                <tr>
-                                    <td colSpan={2}>
-                                        <Button onClick={() => {
-                                            const csvH = [...csvHeaders];
-                                            csvH.push('');
-                                            setCSVHeaders(csvH)
-                                        }}><Trans i18nKey="dataimporter.addColumn">Ajouter une colonne</Trans></Button>
-                                    </td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        )}
-                    </div>
-                )}
-                <div>
-                    <Button onClick={handleImportClick} disabled={isLoading || !file}>
-                        <Trans i18nKey="btns.import">Importer</Trans>
-                    </Button>
-                </div>
-
-                {/* Afficher la progression pour toutes les tâches d'importation actives/suivies */}
-                {jobsToDisplay.length > 0 && (
-                    <div className="import-jobs-list">
-                        <h3><Trans i18nKey="dataimporter.activeImports">Importations en cours / terminées</Trans></h3>
-                        {jobsToDisplay.map(job => {
-                            const progressPercentage = job.totalRecords > 0
-                                ? (job.processedRecords / job.totalRecords) * 100
-                                : 0;
-                            const isJobFinished = job.status === 'completed' || job.status === 'failed' || job.status === 'not_found';
-
-                            return (
-                                <div key={job.jobId} className="import-progress-container">
-                                    <h4><Trans i18nKey="dataimporter.jobId">Tâche ID:</Trans> {job.jobId?.substring(0, 8)}...</h4>
-                                    <p>
-                                        <Trans i18nKey="dataimporter.status">Statut:</Trans>{' '}
-                                        <strong>{t(`dataimporter.status.${job.status}`, job.status)}</strong>
-                                    </p>
-                                    {job.totalRecords > 0 && (
-                                        <p>
-                                            <Trans i18nKey="dataimporter.recordsProcessed">Enregistrements traités:</Trans>{' '}
-                                            {job.processedRecords} / {job.totalRecords}
-                                        </p>
-                                    )}
-                                    <div className="progress-bar-wrapper">
-                                        <div
-                                            className="progress-bar"
-                                            style={{ width: `${progressPercentage}%` }}
-                                        >
-                                            {progressPercentage.toFixed(0)}%
-                                        </div>
-                                    </div>
-
-                                    {job.errors && job.errors.length > 0 && (
-                                        <div className="import-errors">
-                                            <h4><Trans i18nKey="dataimporter.errors">Erreurs:</Trans></h4>
-                                            <ul>
-                                                {job.errors.map((error, index) => (
-                                                    <li key={index}>{error}</li>
-                                                ))}
-                                            </ul>
-                                        </div>
-                                    )}
-                                    {isJobFinished && (
-                                        <div className="flex justify-end mt-2">
-                                            <Button onClick={() => {
-                                                setImportJobs(prevJobs => {
-                                                    const newJobs = { ...prevJobs };
-                                                    delete newJobs[job.jobId];
-                                                    return newJobs;
-                                                });
-                                                setActiveJobIds(prevIds => prevIds.filter(id => id !== job.jobId));
-                                            }}><Trans i18nKey="btns.clear">Effacer</Trans></Button>
-                                        </div>
-                                    )}
-                                </div>
-                            );
-                        })}
-                    </div>
-                )}
-
-                <div className="flex justify-end mt-4">
-                    <Button onClick={handleCloseModal} disabled={isAnyImportInProgress}>
-                        <Trans i18nKey="btns.close">Fermer</Trans>
-                    </Button>
-                </div>
-            </>
-        </Dialog>
-    );
-}

package/client/src/DataTable.scss

@@ -70,4 +70,21 @@
 .flex.justify-end.mt-4 button:disabled {
   background-color: #cccccc;
   cursor: not-allowed;
-}
+}
+.preview-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+
+.preview-table td {
+  border: 1px solid #ddd;
+  padding: 4px;
+}
+
+.preview-table-container {
+  max-height: 300px;
+  overflow: auto;
+  border: 1px solid #eee;
+  margin-bottom: 10px;
+}

package/client/src/Field.jsx

@@ -1411,56 +1411,98 @@ export const ModelField = ({field, disableable=false, showModel=true, value, fie
     const {models} = useModelContext();
     const {me} = useAuthContext();
     const {t} = useTranslation()
-    const [modelValue, setModelValue] = useState(value);
-    const [modelFieldValue, setModelFieldValue] = useState(null);
     const [checked, setChecked] = useState(true);
 
-    const itemsFields = [...models.find(f=>f.name === modelValue && me?.username === f._user)?.fields.map(m => ({label: m.name, value: m.name})) || []];
+    // Trouver le modèle correspondant à la valeur
+    const selectedModel = models.find(m => m.name === value && m._user === me?.username);
 
-    useEffect(() => {
-        setModelValue(value)
-    }, [value]);
+    // Préparer les options pour les champs du modèle
+    const fieldOptions = selectedModel?.fields.map(f => ({
+        label: t(`field_${f.name}`, f.name),
+        value: f.name
+    })) || [];
 
-    useEffect(() => {
-        onChange({name: field.name, value: modelValue});
-    }, [modelValue]);
+    // Gestion du changement de modèle
+    const handleModelChange = (e) => {
+        const newModel = e.value;
+        const firstField = fieldOptions[0]?.value || null;
 
-    useEffect(() => {
-        if( !fieldValue){
-            setModelFieldValue(itemsFields.length > 0 ? itemsFields[0].value : null)
-        }else
-            setModelFieldValue(fieldValue)
-    }, [fieldValue]);
-
-    const dis = disableable ? <><CheckboxField checked={checked} onChange={e => {
-        setChecked(e.target.checked)
-        if (!e.target.checked) {
-            setModelValue(null);
+        if (fields) {
+            onChange({name: field?.name, value: { model: newModel, field: firstField }});
+        } else {
+            onChange({name: field?.name, value: newModel});
         }
-    }} /></> : null;
-
-    if( !fields )
-        return <div className={"flex flex-1"}>
-        {dis}{checked && (<SelectField className="flex-1" value={modelValue} onChange={(e) => {
-            setModelValue(e.value)
-            onChange({name: field.name, value: e.value});
-        }} items={[...models.filter(f=>f._user === me?.username).map(m => ({label: t(`model_${m.name}`, m.name), value: m.name}))]}/>
-            )}
-    </div>;
-    return <div className={"flex flex-1"}>{dis}{checked && (<div className="flex flex-stretch" key={field?.name??'def'}>
-        {showModel && (<SelectField disabled={!!checked} className="flex-1" value={modelValue} onChange={(e) => {
-            setModelValue(e.value)
-            onChange({name: field.name, value: { model: e.value, field: itemsFields[0] }});
-        }} items={[...models.filter(f=>f._user === me?.username).map(m => ({label: t(`model_${m.name}`, m.name), value: m.name}))]}/>
+    };
+
+    // Gestion du changement de champ
+    const handleFieldChange = (e) => {
+        onChange({name: field?.name, value: { model: value, field: e.value }});
+    };
+
+    const dis = disableable ? (
+        <CheckboxField
+            checked={checked}
+            onChange={e => {
+                setChecked(e.target.checked);
+                if (!e.target.checked) {
+                    onChange({name: field?.name, value: null});
+                }
+            }}
+        />
+    ) : null;
+
+    if (!fields) {
+        return (
+            <div className="flex flex-1">
+                {dis}
+                {checked && (
+                    <SelectField
+                        className="flex-1"
+                        value={value}
+                        onChange={handleModelChange}
+                        items={models
+                            .filter(m => m._user === me?.username)
+                            .map(m => ({
+                                label: t(`model_${m.name}`, m.name),
+                                value: m.name
+                            }))
+                        }
+                    />
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-1">
+            {dis}
+            {checked && (
+                <div className="flex flex-stretch" key={field?.name ?? 'def'}>
+                    {showModel && (
+                        <SelectField
+                            className="flex-1"
+                            value={value}
+                            onChange={handleModelChange}
+                            items={models
+                                .filter(m => m._user === me?.username)
+                                .map(m => ({
+                                    label: t(`model_${m.name}`, m.name),
+                                    value: m.name
+                                }))
+                            }
+                        />
+                    )}
+                    <SelectField
+                        className="flex-1"
+                        value={fieldValue || (fieldOptions[0]?.value || null)}
+                        onChange={handleFieldChange}
+                        items={fieldOptions}
+                    />
+                </div>
             )}
-        <SelectField className="flex-1" value={modelFieldValue} onChange={(e) =>{
-            setModelFieldValue(e.value)
-            onChange({name: field.name, value: { model: modelValue, field:e.value}});
-        }} items={itemsFields}/>
-    </div>)}
-    </div>
-}
-export const ColorField = ({name, label, value, disabled, onChange, className, ...rest}) => {
+        </div>
+    );
+};export const ColorField = ({name, label, value, disabled, onChange, className, ...rest}) => {
     // 1. État interne pour une réactivité immédiate de l'interface.
     const [internalValue, setInternalValue] = useState(value);
 

package/client/src/ModelCreator.jsx

@@ -526,33 +526,37 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                                 {/* Colonne de droite: Formulaire du modèle sélectionné */}
                                 <div className="model-form-container">
                                     {/* Le formulaire existant est placé ici */}
-                                    <div className="flex field-bg">
-                                        <label htmlFor="modelName"><Trans i18nKey={"modelcreator.name"}>Nom:</Trans></label>
+                                    <div className="field">
+                                        <div className="flex field-bg">
+                                            <label htmlFor="modelName"><Trans i18nKey={"modelcreator.name"}>Nom:</Trans></label>
+                                        </div>
+                                        <TextField
+                                            type="text"
+                                            id="modelName"
+                                            disabled={modelLocked}
+                                            value={modelName}
+                                            help={t('modelcreator.field.name.hint')}
+                                            onChange={(e) => setModelName(e.target.value)}
+                                            required
+                                        />
                                     </div>
-                                    <TextField
-                                        type="text"
-                                        id="modelName"
-                                        disabled={modelLocked}
-                                        value={modelName}
-                                        help={t('modelcreator.field.name.hint')}
-                                        onChange={(e) => setModelName(e.target.value)}
-                                        required
-                                    />
-
-                                    <div className="flex field-bg">
-                                        <label htmlFor="modelDescription"><Trans i18nKey={"modelcreator.description"}>Description:</Trans></label>
+
+                                    <div className="field">
+                                        <div className="flex field-bg">
+                                            <label htmlFor="modelDescription"><Trans i18nKey={"modelcreator.description"}>Description:</Trans></label>
+                                        </div>
+                                        <TextField
+                                            multiline
+                                            help={t('modelcreator.field.description')}
+                                            id="modelDescription"
+                                            disabled={modelLocked}
+                                            value={modelDescription}
+                                            onChange={(e) => {
+                                                setModelDescription(e.target.value);
+                                                setChanged(true)
+                                            }}
+                                        />
                                     </div>
-                                    <TextField
-                                        multiline
-                                        help={t('modelcreator.field.description')}
-                                        id="modelDescription"
-                                        disabled={modelLocked}
-                                        value={modelDescription}
-                                        onChange={(e) => {
-                                            setModelDescription(e.target.value);
-                                            setChanged(true)
-                                        }}
-                                    />
                                     <h3><Trans i18nKey={"modelcreator.fields"}>Champs du modèle :</Trans></h3>
                                     {fields.map((field, index) => <ModelCreatorField
                                         key={initialModel?.name + '_field_' + index}

package/client/src/ModelCreator.scss

@@ -1,5 +1,6 @@
 .model-creator {
   flex: 1;
+  width: 100%;
   max-width: 720px;
   form {
     padding: 0;
@@ -31,6 +32,9 @@
     border-radius: 8px;
     padding: 16px 8px;
     @media only screen and (min-width: 768px) {
+      padding: 1rem; // Plus d'espace intérieur
+    }
+    @media only screen and (min-width: 1024px) {
       padding: 1.5rem; // Plus d'espace intérieur
     }
     margin-bottom: 1.5rem; // Plus d'espace entre les champs
@@ -129,8 +133,17 @@
 
 .model-form-container {
   flex: 1; // Le formulaire prend le reste de la place
+  > .field {
+    box-sizing: border-box;
+    margin-bottom: 28px;
+  }
 }
 
+.actions.right {
+  margin-right: 0;
+  margin-left: auto;
+  width: fit-content;
+}
 // Styles pour la zone de prompt de l'IA
 .ai-prompt-container {
   background-color: #f8f9fa;