data-primals-engine 1.3.1 → 1.3.2

package/client/src/DataLayout.jsx

@@ -31,16 +31,9 @@ import ViewSwitcher from "./ViewSwitcher.jsx";
 import KanbanConfigModal from "./KanbanConfigModal.jsx";
 import CalendarConfigModal from "./CalendarConfigModal.jsx";
 import KanbanView from "./KanbanView.jsx";
+import CalendarView from "./CalendarView.jsx";
 
 
-const CalendarView = ({ settings, model }) => (
-    <div className="p-4 border rounded-md mt-4 bg-gray-50">
-        <h3 className="font-bold">Vue Calendrier</h3>
-        <p>Affichage des données pour le modèle <strong>{model?.name}</strong> en utilisant le champ de date : <strong>{settings.dateField}</strong>.</p>
-        {/* L'implémentation réelle du calendrier irait ici */}
-    </div>
-);
-
 const NotConfiguredPlaceholder = ({ type, onConfigure }) => (
     <div className="p-4 border border-dashed rounded-md mt-4 text-center bg-gray-50">
         <h4><Trans i18nKey="dataview.notConfiguredTitle" values={{ type }}>Vue {{type}} non configurée</Trans></h4>
@@ -52,9 +45,6 @@ const NotConfiguredPlaceholder = ({ type, onConfigure }) => (
 );
 
 function DataLayout() {
-    const [currentView, setCurrentView] = useState('table');
-
-    // Nouvelle version (persistante)
     const [viewSettings, setViewSettings] = useLocalStorage('viewSettings', {});
 
     const [isCalendarModalOpen, setCalendarModalOpen] = useState(false);
@@ -64,6 +54,9 @@ function DataLayout() {
     const { t, i18n } = useTranslation();
     const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
 
+    // Stocke la vue sélectionnée pour chaque modèle. Ex: { "contacts": "calendar", "tasks": "kanban" }
+    const [viewsByModel, setViewsByModel] = useLocalStorage('dataLayout_viewsByModel', {});
+
     const [filterValues, setFilterValues] = useState({});
     const { dataByModel,paginatedDataByModel,
         setRelationFilters, setSelectedModel, selectedModel,
@@ -94,6 +87,20 @@ function DataLayout() {
     const [showDataEditor, setDataEditorVisible] = useState(false);
     const [showAPIInfo, setAPIInfoVisible] = useState(false);
 
+    // La vue courante est dérivée du modèle sélectionné et des préférences stockées.
+    const currentView = useMemo(() => {
+        if (!selectedModel) return 'table';
+        return viewsByModel[selectedModel.name] || 'table';
+    }, [selectedModel, viewsByModel]);
+
+    // Met à jour la vue pour le modèle actuellement sélectionné.
+    const setCurrentView = (viewName) => {
+        if (!selectedModel) return;
+        setViewsByModel(prev => ({
+            ...prev,
+            [selectedModel.name]: viewName,
+        }));
+    };
 
     // --- MODIFICATION : Logique de changement de vue mise à jour ---
     const handleSwitchView = (viewName) => {
@@ -110,7 +117,7 @@ function DataLayout() {
         const modelSettings = viewSettings[selectedModel.name] || {};
 
         if (viewName === 'calendar') {
-            if (modelSettings.calendar?.dateField) {
+            if (modelSettings.calendar?.titleField && modelSettings.calendar?.startField && modelSettings.calendar?.endField) {
                 setCurrentView('calendar');
             } else {
                 setCalendarModalOpen(true);
@@ -127,15 +134,26 @@ function DataLayout() {
     // --- MODIFICATION : Sauvegarde dans localStorage ---
     const handleSaveCalendarConfig = (config) => {
         if (!selectedModel) return;
-        setViewSettings(prev => ({
-            ...prev,
-            [selectedModel.name]: {
-                ...(prev[selectedModel.name] || {}),
-                calendar: config,
-            },
-        }));
-        setCalendarModalOpen(false);
-        setCurrentView('calendar');
+        const isConfigValid = config && config.titleField && config.startField && config.endField;
+
+        if (isConfigValid) {
+            setViewSettings(prev => ({
+                ...prev,
+                [selectedModel.name]: {
+                    ...(prev[selectedModel.name] || {}),
+                    calendar: config,
+                },
+            }));
+            setCalendarModalOpen(false);
+            setCurrentView('calendar');
+        } else {
+            // Si la configuration n'est pas valide, afficher une notification et garder la modale ouverte
+            addNotification({
+                title: t('datalayout.invalidConfigTitle', 'Configuration invalide'),
+                message: t('datalayout.invalidConfigMessage', 'Veuillez vous assurer que les champs pour le titre, la date de début et la date de fin sont tous sélectionnés.'),
+                status: 'error'
+            });
+        }
     };
 
     const handleSaveKanbanConfig = (config) => {
@@ -162,7 +180,7 @@ function DataLayout() {
         if (!selectedModel) return { calendar: false, kanban: false };
         const modelSettings = viewSettings[selectedModel.name] || {};
         return {
-            calendar: !!modelSettings.calendar?.dateField,
+            calendar: !!modelSettings.calendar?.titleField && !!modelSettings.calendar?.startField && !!modelSettings.calendar?.endField,
             kanban: !!modelSettings.kanban?.groupByField,
         };
     }, [viewSettings, selectedModel]);
@@ -174,7 +192,7 @@ function DataLayout() {
         switch (currentView) {
             case 'calendar':
                 return configuredViews.calendar
-                    ? <CalendarView settings={currentModelViewSettings.calendar} model={selectedModel} />
+                    ? <CalendarView settings={currentModelViewSettings.calendar} onEditData={(model, data) => handleAddData(model,data)} model={selectedModel} />
                     : <NotConfiguredPlaceholder type="calendar" onConfigure={() => setCalendarModalOpen(true)} />;
             case 'kanban':
                 return configuredViews.kanban
@@ -217,13 +235,20 @@ function DataLayout() {
 
     const handleModelSelect = (model) => {
         setRelationFilters({});
-        setCurrentView('table');
         setCheckedItems([])
         setFilterValues({});
         if (!model) {
+            setSelectedModel(null);
             return;
         }
 
+        // Maintient la vue actuelle si elle est configurée pour le nouveau modèle, sinon revient à la vue "table"
+        const modelSettings = viewSettings[model.name] || {};
+        if (currentView === 'calendar' && (!modelSettings.calendar?.titleField || !modelSettings.calendar?.startField || !modelSettings.calendar?.endField)) {
+            setCurrentView('table');
+        } else if (currentView === 'kanban' && !modelSettings.kanban?.groupByField) {
+            setCurrentView('table');
+        }
         const dt = [];
         const t = [...model.fields].reduce((acc, field, index) => {
             if (field.type === "relation") {
@@ -464,7 +489,9 @@ function DataLayout() {
 
     const handleAddData = (model, data)=>{
 
-        handleModelSelect(model);
+        if (!selectedModel || model.name !== selectedModel.name) {
+            handleModelSelect(model);
+        }
 
         if( data ){
             setFormData(data);

package/client/src/Dialog.scss

@@ -44,7 +44,7 @@
 #content .dialog.dialog-relation {
   max-width: 480px;
 }
-.dialog-header {
+#content .dialog-header {
   display: flex;
   gap: 8px;
   justify-content: flex-start;
@@ -53,8 +53,9 @@
   h2 {
     display: flex;
     flex: 1;
-    padding: 0px;
-    margin: 0 0 0 16px;
+    padding: 0;
+    align-items: center;
+    margin: 8px;
     font-size: 100%;
     line-height: 208%;
   }

package/client/src/HistoryDialog.jsx

@@ -1,96 +1,253 @@
-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>
-    );
+import {useCallback, useEffect, useState} from "react";
+import { Dialog } from "./Dialog.jsx";
+import Button from "./Button.jsx";
+import { FaHistory } from "react-icons/fa";
+import {Trans, useTranslation} from "react-i18next";
+import "./HistoryDialog.scss";
+import {Tooltip} from "react-tooltip";
+import {CodeField} from "./Field.jsx";
+
+// Helper to render values in a friendly way for the summary list
+const renderSummaryValue = (value) => {
+    if (value === undefined || value === null) {
+        return <i className="value-empty">empty</i>;
+    }
+    if (typeof value === 'boolean') {
+        return <code className="value-boolean">{value.toString()}</code>;
+    }
+    if (Array.isArray(value)) {
+        return <code className="value-object" title={JSON.stringify(value, null, 2)}>[...] ({value.length} items)</code>
+    }
+    if (typeof value === 'object' && value !== null) {
+        return <code className="value-object" title={JSON.stringify(value, null, 2)}>{`{...}`}</code>
+    }
+    const strValue = String(value);
+    if (strValue.length > 50) {
+        return <span className="value-text" title={strValue}>{strValue.substring(0, 47) + '...'}</span>;
+    }
+    return <span className="value-text">{strValue}</span>;
+};
+
+// New sub-component for rendering a single field change
+const ChangeDetail = ({ field, from, to }) => {
+    const { t } = useTranslation();
+
+    const tt = typeof(to) === 'object' ? JSON.stringify(to,null,2):to;
+    const f = typeof(from) === 'object' ? JSON.stringify(from,null,2):from;
+    return (
+        <div className="change-detail">
+            <strong className="change-field-name" title={field}>{field}</strong>
+            <div className="change-values">
+                <div className="value-from" data-tooltip-id={"changeTooltip"} data-tooltip-content={f}>{renderSummaryValue(from)}</div>
+                <div className="change-arrow">→</div>
+                <div className="value-to"  data-tooltip-id={"changeTooltip"} data-tooltip-content={tt}>{renderSummaryValue(to)}</div>
+            </div>
+        </div>
+    );
+};
+
+// Sub-component for displaying a single history entry
+const HistoryEntry = ({ entry, onPreview, isSelected }) => {
+    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, ...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: '' };
+
+    const renderData = () => {
+        if (_op === 'u') {
+            const changes = Object.entries(data).filter(([, value]) => value && typeof value === 'object' && 'from' in value && 'to' in value);
+            if (changes.length === 0) {
+                return <div className="no-changes-text">{t('history.noChanges', 'No relevant changes recorded.')}</div>;
+            }
+            return (
+                <div className="changes-list">
+                    {changes.map(([field, change]) => (
+                        <ChangeDetail key={field} field={field} from={change.from} to={change.to} />
+                    ))}
+                </div>
+            );
+        }
+
+        // For 'i' (create) and 'd' (delete), show a human-friendly summary of the snapshot.
+        const snapshotEntries = Object.entries(data);
+        if (snapshotEntries.length === 0) {
+            return <div className="no-changes-text">{t('history.noData', 'No data in snapshot.')}</div>;
+        }
+        return (
+            <div className="snapshot-list">
+                {snapshotEntries.map(([key, value]) => (
+                    <div className="snapshot-item" key={key}>
+                        <strong className="snapshot-key" title={key}>{key}:</strong>
+                        <span className="snapshot-value">{renderSummaryValue(value)}</span>
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    return (
+        <div className={`history-entry ${isSelected ? 'selected' : ''}`}>
+            <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>
+                <Button className="btn-preview" onClick={() => onPreview(_v)}>
+                    <Trans i18nKey={"history.previewAction"}>Preview</Trans>
+                </Button>
+            </div>
+            <div className="history-entry-data">
+                {renderData()}
+            </div>
+        </div>
+    );
+};
+
+export const HistoryDialog = ({ modelName, recordId, onClose }) => {
+    const [history, setHistory] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [previewData, setPreviewData] = useState(null);
+    const [previewLoading, setPreviewLoading] = useState(false);
+    const [selectedVersion, setSelectedVersion] = useState(null);
+    const { t, i18n } = useTranslation();
+
+    const fetchHistory = useCallback(async () => {
+        if (!modelName || !recordId) return;
+        setLoading(true);
+        setError(null);
+        try {
+            const query = await fetch(`/api/data/history/${modelName}/${recordId}`);
+            const response = await query.json();
+            if (response.success) {
+                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);
+        }
+    }, [modelName, recordId, i18n]);
+
+    useEffect(() => {
+        fetchHistory();
+    }, [fetchHistory]);
+
+    const handlePreview = async (version) => {
+        if (selectedVersion === version) return; // Already selected
+
+        setSelectedVersion(version);
+        setPreviewLoading(true);
+        setPreviewData(null);
+        try {
+            const res = await fetch(`/api/data/history/${modelName}/${recordId}/${version}`);
+            const response = await res.json();
+            if (response.success) {
+                setPreviewData(response.data);
+            } else {
+                setPreviewData({ error: response.error || i18n.t("history.previewError", "Could not load revision preview.") });
+            }
+        } catch (err) {
+            setPreviewData({ error: i18n.t("history.previewError", "Could not load revision preview.") });
+            console.error(err);
+        } finally {
+            setPreviewLoading(false);
+        }
+    };
+
+    const handleRevert = async (version) => {
+        if (!window.confirm(t('history.confirmRevert', `Are you sure you want to revert to version ${version}? This will create a new version with the content of this revision.`))) {
+            return;
+        }
+
+        setPreviewLoading(true); // Reuse preview loading state to indicate activity
+        try {
+            const res = await fetch(`/api/data/history/${modelName}/${recordId}/revert/${version}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            });
+            const response = await res.json();
+
+            if (response.success) {
+                alert(t('history.revertSuccess', 'Document successfully reverted. The history will now be updated.'));
+                // Refresh history list and clear preview
+                await fetchHistory();
+                setPreviewData(null);
+                setSelectedVersion(null);
+            } else {
+                alert(t('history.revertError', `Error reverting: ${response.error || 'Unknown error'}`));
+            }
+        } catch (err) {
+            alert(t('history.revertError', 'An error occurred while reverting.'));
+            console.error(err);
+        } finally {
+            setPreviewLoading(false);
+        }
+    };
+
+    return (
+        <Dialog
+            title={<><FaHistory style={{ marginRight: '8px' }} /> <Trans i18nKey={"history.title"}>Historique de l'enregistrement</Trans></>}
+            onClose={onClose}
+            isClosable={true}
+            className="history-dialog"
+        >
+            <Tooltip id={"changeTooltip"} clickable={true} />
+            <div className="history-dialog-content-split">
+                <div className="history-list-container">
+                    {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}
+                                        onPreview={handlePreview}
+                                        isSelected={selectedVersion === entry._v}
+                                    />)
+                            ) : (
+                                <div><Trans i18nKey={"history.noHistory"}>Aucun historique trouvé pour cet enregistrement.</Trans></div>
+                            )}
+                        </div>
+                    )}
+                </div>
+                <div className="history-preview-container">
+                    <div className="preview-header">
+                        <h4><Trans i18nKey={"history.previewTitle"}>Revision Preview</Trans></h4>
+                        {previewData && !previewData.error && (
+                            <Button
+                                className="btn-revert"
+                                onClick={() => handleRevert(selectedVersion)}
+                                disabled={previewLoading}
+                                title={t('history.revertTooltip', 'Revert the document to this state. This creates a new version.')}
+                            >
+                                <Trans i18nKey={"history.revertAction"}>Revert to this version</Trans>
+                            </Button>
+                        )}
+                    </div>
+
+                    <div className="history-preview-area">
+                        {previewLoading && <div><Trans i18nKey={"history.loadingPreview"}>Loading preview...</Trans></div>}
+                        {!previewLoading && previewData && <CodeField value={JSON.stringify(previewData,null, 2)} language={"json"} disabled={true} />}
+                        {!previewLoading && !previewData && (
+                            <div className="placeholder"><Trans i18nKey={"history.selectRevision"}>Select a revision to preview its full state.</Trans></div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </Dialog>
+    );
 };