data-primals-engine 1.3.0 → 1.3.1

package/client/src/App.scss

@@ -1294,6 +1294,10 @@ select[multiple]{
 
 .model-creator {
   .field-checkbox {
+    padding: 8px;
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
     .inline {
       flex-direction: row-reverse;
     }

package/client/src/DataLayout.jsx

@@ -327,11 +327,11 @@ function DataLayout() {
             };
             addNotification(notificationData);
         },
-        onSuccess: (data) => {
+        onSuccess: async (data) => {
 
             console.log('Données enregistrées:', data, selectedModel);
 
-            Event.Trigger(recordToEdit ? 'API_ADD_DATA' : 'API_ADD_DATA', "custom", "data", {
+            await Event.Trigger(recordToEdit ? 'API_ADD_DATA' : 'API_ADD_DATA', "custom", "data", {
                 model: selectedModel.name,
             });
 

package/client/src/DataTable.jsx

@@ -14,7 +14,7 @@ import {
     FaDatabase, FaEraser,
     FaFileExport,
     FaFileImport,
-    FaFilter,
+    FaFilter, FaHistory,
     FaInfo,
     FaPlus,
     FaTrash, FaWrench
@@ -59,6 +59,7 @@ import ConditionBuilder from "./ConditionBuilder.jsx";
 import {pagedFilterToMongoConds} from "./filter.js";
 import {isConditionMet} from "../../src/filter";
 import {DataImporter} from "./DataImporter.jsx";
+import {HistoryDialog} from "./HistoryDialog.jsx";
 
 const Header = ({
                     reversed = false,
@@ -238,6 +239,7 @@ export function DataTable({
     const queryClient = useQueryClient();
     const {me} = useAuthContext()
 
+
     const isDataLoaded = true;
     const [importVisible, setImportVisible] = useState(false);
     const [filterActive, setFilterActive] = useState(false)
@@ -248,6 +250,8 @@ export function DataTable({
     const [showExportDialog, setExportDialogVisible] = useState(false);
 
 
+    const [selectedRow, setSelectedRow] = useState(null);
+
     const [showAddPack, setAddPackVisible] = useState(false);
     const handleAddPack = () => {
         setAddPackVisible(!showAddPack);
@@ -283,7 +287,7 @@ export function DataTable({
                         console.log('Données non trouvées');
                     }
 
-                    Event.Trigger('API_DELETE_DATA', "custom", "data",{ model: item._model, id: item._id });
+                    await Event.Trigger('API_DELETE_DATA', "custom", "data",{ model: item._model, id: item._id });
                     queryClient.invalidateQueries(['api/data', item._model, 'page', page, elementsPerPage, pagedFilters[item._model], pagedSort[item._model]]);
 
                 } else {
@@ -697,6 +701,14 @@ export function DataTable({
                                         >
                                             <FaCopy/>
                                         </button>
+                                        {selectedModel?.history?.enabled && (<button
+                                            onClick={() => setSelectedRow(item._id)}
+                                            data-tooltip-id="tooltipActions"
+                                            data-tooltip-content={t('btns.showHistory', 'Voir l\'historique')}
+                                        >
+                                            <FaHistory />
+                                        </button>)}
+
                                         <button data-tooltip-id="tooltipActions"
                                                 data-tooltip-content={t('btns.delete', 'Supprimer')}
                                                 onClick={() => handleDelete(item)}><FaTrash/></button>
@@ -704,6 +716,7 @@ export function DataTable({
                                 </tr>
                             </DialogProvider></>
                         ))}
+
                         </tbody>
 
                         <tfoot>
@@ -720,6 +733,10 @@ export function DataTable({
                     {importVisible && (<DataImporter onClose={() => {
                         setImportVisible(false);
                     }}/>)}
+
+                    {selectedRow && (
+                        <HistoryDialog onClose={() => setSelectedRow(null)} modelName={selectedModel?.name} recordId={selectedRow} />
+                    )}
                     <RestoreConfirmationModal
                         isOpen={isBackupModalOpen}
                         onClose={() => setIsBackupModalOpen(false)}

package/client/src/Field.jsx

@@ -93,6 +93,7 @@ const TextField = forwardRef(function TextField(
     searchable,
       labelProps,
       showErrors=false,
+      after,
     ...rest
   },
   ref,
@@ -186,7 +187,7 @@ const TextField = forwardRef(function TextField(
                 ></textarea>
             )}
 
-            <div className={"flex flex-row flex-1 flex-start"}>
+            <div className={"flex flex-1 flex-no-gap flex-start"}>
                 {!mult && (
                     <input
                         ref={inputRef}
@@ -207,7 +208,7 @@ const TextField = forwardRef(function TextField(
                         {...rest}
                     />
                 )}
-
+                {after}
             </div>
         </div>
         {errors.length > 0 && (

package/client/src/HistoryDialog.jsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { Dialog } from "./Dialog.jsx";
+import { FaHistory } from "react-icons/fa";
+import {Trans, useTranslation} from "react-i18next";
+import "./HistoryDialog.scss";
+
+// Sub-component for displaying a single history entry
+const HistoryEntry = ({ entry }) => {
+    const { t } = useTranslation();
+    // The backend has transformed the data for us.
+    // _id: history doc id, _v: version, _op: operation type (i,u,d), _rid: original record id
+    const { _id, _v, _op, _updatedAt, _user, _rid, ...data } = entry; // ...data collects the remaining fields
+
+    const operationDetails = {
+        // The keys 'i', 'u', 'd' correspond to what the backend sends now.
+        'i': { label: t('history.op.create', 'Creation'), className: 'op-insert' },
+        'u': { label: t('history.op.update', 'Update'), className: 'op-update' },
+        'd': { label: t('history.op.delete', 'Deletion'), className: 'op-delete' },
+    };
+    const opInfo = operationDetails[_op] || { label: _op, className: '' };
+
+    return (
+        <div className="history-entry">
+            <div className="history-entry-header">
+                <span className={`op-badge ${opInfo.className}`}>{opInfo.label}</span>
+                <span className="history-date">{t('history.datePrefix', 'On')} {new Date(_updatedAt).toLocaleString()}</span>
+                {_user && <span className="history-user">{t('history.byUser', 'by')} <strong>{_user}</strong></span>}
+                <span className="history-version">{t('history.version', 'Version:')} {_v}</span>
+            </div>
+            <div className="history-entry-data">
+                <pre>{JSON.stringify(data, null, 2)}</pre>
+            </div>
+        </div>
+    );
+};
+
+export const HistoryDialog = ({ modelName, recordId, onClose }) => {
+    const [history, setHistory] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const { t, i18n } = useTranslation();
+
+    useEffect(() => {
+        if (!modelName || !recordId) return;
+
+        const fetchHistory = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                // Assuming the API endpoint for history is structured like this
+                const query = await fetch(`/api/data/history/${modelName}/${recordId}`, {
+                    headers: {
+                        "Content-Type": "application/json"
+                    }
+                });
+                const response = await query.json();
+                if (response.success) {
+                    // L'API devrait retourner l'historique trié du plus récent au plus ancien
+                    setHistory(response.data);
+                } else {
+                    setError(response.error || i18n.t("history.error", "Could not load history."));
+                }
+            } catch (err) {
+                setError(i18n.t("history.error", "Could not load history."));
+                console.error(err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchHistory();
+    }, [modelName, recordId]);
+
+    return (
+        <Dialog
+            title={<><FaHistory style={{ marginRight: '8px' }} /> <Trans i18nKey={"history.title"}>Historique de l'enregistrement</Trans></>}
+            onClose={onClose}
+            isClosable={true}
+            className="history-dialog"
+        >
+            <div className="history-dialog-content">
+                {loading && <div><Trans i18nKey={"history.loading"}>Chargement de l'historique..</Trans></div>}
+                {error && <div className="error-message">{error}</div>}
+                {!loading && !error && (
+                    <div className="history-list">
+                        {history.length > 0 ? (
+                            history.map(entry => <HistoryEntry key={entry._id} entry={entry} />)
+                        ) : (
+                            <div><Trans i18nKey={"history.noHistory"}>Aucun historique trouvé pour cet enregistrement.</Trans></div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </Dialog>
+    );
+};

package/client/src/HistoryDialog.scss

@@ -0,0 +1,73 @@
+.history-dialog {
+
+  .dialog-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0; // Le padding sera sur le content wrapper
+  }
+}
+
+.history-dialog-content {
+  overflow-y: auto;
+  padding: 1rem;
+  background-color: #f4f4f4;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.history-entry {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+
+  .history-entry-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 1rem;
+    background-color: #f9f9f9;
+    border-bottom: 1px solid #eee;
+    font-size: 0.9em;
+    color: #333;
+
+    .op-badge {
+      padding: 0.2rem 0.6rem;
+      border-radius: 12px;
+      color: white;
+      font-weight: bold;
+      font-size: 0.8em;
+      text-transform: uppercase;
+    }
+
+    .op-insert { background-color: #28a745; } // green
+    .op-update { background-color: #007bff; } // blue
+    .op-delete { background-color: #dc3545; } // red
+
+    .history-version {
+      margin-left: auto;
+      font-weight: bold;
+    }
+  }
+
+  .history-entry-data {
+    padding: 1rem;
+    
+    pre {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      background-color: #2d2d2d;
+      color: #f8f8f2;
+      padding: 1rem;
+      border-radius: 4px;
+      margin: 0;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 0.85em;
+    }
+  }
+}

package/client/src/ModelCreator.jsx

@@ -41,6 +41,7 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
     const [modelName, setModelName] = useState(initialModel?.name || ''); // Utilisation de initialModel
     const [modelMaxRequestData, setModelMaxRequestData] = useState(initialModel?.maxRequestData || ''); // Utilisation de initialModel
     const [modelDescription, setModelDescription] = useState(initialModel?.name ? t(`model_description_${initialModel?.name}`, initialModel?.description) : '');
+    const [modelHistory, setModelHistory] = useState(!!initialModel?.history || undefined);
     const [fields, setFields] = useState([]);
     const [changed, setChanged] = useState(false);
 
@@ -53,6 +54,7 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
             setModelMaxRequestData(initialModel.maxRequestData || defaultMaxRequestData);
             setModelDescription(initialModel.name ? t(`model_description_${initialModel.name}`, initialModel.description) : '');
             setFields([...(initialModel.fields || []).map(m => ({...m}))]);
+            setModelHistory(initialModel.history);
         } else {
             // Mode création : on réinitialise tout pour une nouvelle génération
             setModelName('');
@@ -60,6 +62,7 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
             setFields([]);
             setUseAI(true); // On active l'IA par défaut
             setModelVisible(false);
+            setModelHistory(false);
         }
     }, [initialModel]);
 
@@ -130,6 +133,7 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                     setModelDescription('');
                     setModelMaxRequestData(defaultMaxRequestData);
                     setFields([{ name: '', type: 'string' }]);
+                    setModelHistory(undefined);
                 }
                 setDatasToLoad(datas=>[...datas, modelName]);
 
@@ -208,6 +212,7 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
             name: modelName,
             description: modelDescription,
             maxRequestData: modelMaxRequestData,
+            history: modelHistory,
             fields: (fields || []).map((field) => {
                 delete field['_isNewField'];
                 let otherFields = [];
@@ -312,8 +317,8 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
     }
 
     const handleRenameField = (fi, oldVal) => {
-        const prompted = prompt(t('core.renameFields', 'Renommer le champ'), oldVal);
-        if (prompted !== oldVal) {
+        const prompted = window.prompt(t('core.renameFields', 'Renommer le champ'), oldVal);
+        if (prompted && prompted !== oldVal) {
             mutationRename.mutateAsync({oldName: oldVal, newName: prompted}).then(e =>{
                 const newFields = [...fields];
                 const field = newFields[fi];
@@ -542,21 +547,22 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                                     </div>
 
                                     <div className="field">
-                                        <div className="flex field-bg">
-                                            <label htmlFor="modelDescription"><Trans i18nKey={"modelcreator.description"}>Description:</Trans></label>
+                                        <div className="checkbox-label flex flex-1">
+                                            <CheckboxField
+                                                label={<Trans i18nKey={"history.title"}>Historique</Trans>}
+                                                disabled={modelLocked || (isLocalUser(me) && field.locked)}
+                                                checked={field.required}
+                                                onChange={(e) => {
+                                                    const newFields = [...fields];
+                                                    newFields[index].history = e ? { enabled: true } : undefined;
+                                                    setFields(newFields);
+                                                }}
+                                                help={field.required && t('modelcreator.history.hint')}
+                                            />
                                         </div>
-                                        <TextField
-                                            multiline
-                                            help={t('modelcreator.field.description')}
-                                            id="modelDescription"
-                                            disabled={modelLocked}
-                                            value={modelDescription}
-                                            onChange={(e) => {
-                                                setModelDescription(e.target.value);
-                                                setChanged(true)
-                                            }}
-                                        />
                                     </div>
+
+
                                     <h3><Trans i18nKey={"modelcreator.fields"}>Champs du modèle :</Trans></h3>
                                     {fields.map((field, index) => <ModelCreatorField
                                         key={initialModel?.name + '_field_' + index}
@@ -601,6 +607,21 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                                 setChanged(true)
                             }}
                         />
+
+                        <div className="flex flex-no-wrap">
+                            <div className="checkbox-label flex flex-1">
+                                <CheckboxField
+                                    label={<Trans i18nKey={"history"}>Historique</Trans>}
+                                    help={t('modelcreator.field.history', '')}
+                                    disabled={modelLocked}
+                                    checked={!!modelHistory}
+                                    onChange={(e) => {
+                                        setModelHistory(e? { enabled: true }: false);
+                                    }}
+                                />
+                            </div>
+                        </div>
+
                         <h3><Trans i18nKey={"modelcreator.fields"}>Champs du modèle :</Trans></h3>
                         {fields.map((field, index) => <ModelCreatorField
                             key={initialModel?.name + '_field_' + index}

package/client/src/ModelCreatorField.jsx

@@ -74,11 +74,10 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                             }}
                             help={t('modelcreator.name.hint')}
                             required
+                            after={!(!modelLocked && isLocalUser(me) && field.locked) && !field._isNewField && (
+                                <Button type={"button"} className={"btn-form btn-last"}
+                            onClick={() => handleRenameField(index, field.name)}><FaEdit/></Button>)}
                         />
-                        {!(!modelLocked && isLocalUser(me) && field.locked) && !field._isNewField && (
-                            <Button type={"button"} className={"btn-form btn-last"}
-                                    onClick={() => handleRenameField(index, field.name)}><FaEdit/></Button>)}
-
                     </div>
 
                 </div>
@@ -449,11 +448,11 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                             </div>
 
                             {!['file', 'relation', 'array', 'calculated'].includes(field.type) && (<div
-                                className="flex flex-no-wrap field-bg mg-item">
+                                className="flex flex-no-wrap mg-item">
 
                                 {['string_t', 'string', 'richtext', 'password', 'url', 'phone', 'email'].includes(field.type) && (<>
                                     {hint('modelcreator.default.hint')}
-                                    <div className="flex flex-1">
+                                    <div className="flex flex-1 field-bg">
                                         <TextField
                                             className="flex-1"
                                             value={field.default}

package/client/src/hooks/useTutorials.jsx

@@ -195,7 +195,7 @@ export const useTutorials = () => {
 
     // Écoute les événements de modification de données pour vérifier la progression en arrière-plan.
     useEffect(() => {
-        const handleDataChange = (payload) => {
+        const handleDataChange = async (payload) => {
             console.log(`[Tutoriels] Événement de données reçu.`, payload);
             if (me?.activeTutorial) {
                 triggerTutorialCheck();