data-primals-engine 1.5.0 → 1.5.2

package/client/src/FlexViewCard.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useModelContext } from './contexts/ModelContext.jsx';
+import FlexDataRenderer from './FlexDataRenderer.jsx';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Renders a flexible data card, typically generated by the AI assistant.
+ * It displays a set of fields for a single data record.
+ * @param {object} props
+ * @param {object} props.config - The configuration for the view.
+ * @param {string} props.config.title - The title of the card.
+ * @param {string} props.config.model - The name of the data model.
+ * @param {string[]} props.config.fields - An array of field names to display.
+ * @param {object} props.config.data - The data record to display.
+ */
+const FlexViewCard = ({ config }) => {
+    const { t } = useTranslation();
+    const { models } = useModelContext();
+    const { title, model: modelName, fields: fieldNames, data } = config;
+
+    const model = models.find(m => m.name === modelName);
+
+    if (!model || !data) {
+        return <div className="flex-view-card-error">{t('assistant.flexView.loadingError', 'Erreur de chargement de la vue.')}</div>;
+    }
+
+    const fieldsToDisplay = model.fields.filter(field => fieldNames.includes(field.name));
+
+    return (
+        <div className="flex-view-card">
+            {title && <h4>{title}</h4>}
+            <div className="data-card-content">
+                {fieldsToDisplay.map(fieldDef => (
+                    <div key={fieldDef.name} className="data-field-row">
+                        <strong className="field-label" title={fieldDef.name}>{t(`field_${model.name}_${fieldDef.name}`, fieldDef.name)}:</strong>
+                        <div className="field-value"><FlexDataRenderer value={data[fieldDef.name]} fieldDefinition={fieldDef} data={data} /></div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default FlexViewCard;

package/client/src/HistoryDialog.jsx

@@ -6,12 +6,20 @@ import {Trans, useTranslation} from "react-i18next";
 import "./HistoryDialog.scss";
 import {Tooltip} from "react-tooltip";
 import {CodeField} from "./Field.jsx";
+import {Pagination} from "./Pagination.jsx";
+import {useModelContext} from "./contexts/ModelContext.jsx";
 
 // Helper to render values in a friendly way for the summary list
-const renderSummaryValue = (value) => {
+const renderSummaryValue = (value, field, t) => {
     if (value === undefined || value === null) {
         return <i className="value-empty">empty</i>;
     }
+    if (field?.type === 'string_t' && t) {
+        // For string_t, the stored value is the key. We display the translated value.
+        const key = (typeof value === 'object' && value?.key) ? value.key : String(value);
+        const displayValue = t(key, key);
+        return <span className="value-text" title={key}>{displayValue}</span>;
+    }
     if (typeof value === 'boolean') {
         return <code className="value-boolean">{value.toString()}</code>;
     }
@@ -31,16 +39,26 @@ const renderSummaryValue = (value) => {
 // New sub-component for rendering a single field change
 const ChangeDetail = ({ field, from, to }) => {
     const { t } = useTranslation();
+    const { selectedModel } = useModelContext();
+    const fieldObj = selectedModel?.fields?.find(f => f.name === field);
 
-    const tt = typeof(to) === 'object' ? JSON.stringify(to,null,2):to;
-    const f = typeof(from) === 'object' ? JSON.stringify(from,null,2):from;
+    const getTooltipText = (value, field) => {
+        if (field?.type === 'string_t') {
+            const key = (typeof value === 'object' && value?.key) ? value.key : String(value);
+            return t(key, key); // Affiche la valeur traduite dans la tooltip
+        }
+        return (typeof value === 'object' && value !== null) ? JSON.stringify(value, null, 2) : String(value);
+    };
+
+    const tt = getTooltipText(to, fieldObj);
+    const f = getTooltipText(from, fieldObj);
     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="value-from" data-tooltip-id={"changeTooltip"} data-tooltip-content={f}>{renderSummaryValue(from, fieldObj, t)}</div>
                 <div className="change-arrow">→</div>
-                <div className="value-to"  data-tooltip-id={"changeTooltip"} data-tooltip-content={tt}>{renderSummaryValue(to)}</div>
+                <div className="value-to"  data-tooltip-id={"changeTooltip"} data-tooltip-content={tt}>{renderSummaryValue(to, fieldObj, t)}</div>
             </div>
         </div>
     );
@@ -49,6 +67,7 @@ const ChangeDetail = ({ field, from, to }) => {
 // Sub-component for displaying a single history entry
 const HistoryEntry = ({ entry, onPreview, isSelected }) => {
     const { t } = useTranslation();
+    const { selectedModel } = useModelContext();
     // 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
@@ -83,12 +102,13 @@ const HistoryEntry = ({ entry, onPreview, isSelected }) => {
         }
         return (
             <div className="snapshot-list">
-                {snapshotEntries.map(([key, value]) => (
-                    <div className="snapshot-item" key={key}>
+                {snapshotEntries.map(([key, value]) => {
+                    const fieldObj = selectedModel?.fields?.find(f => f.name === key);
+                    return (<div className="snapshot-item" key={key}>
                         <strong className="snapshot-key" title={key}>{key}:</strong>
-                        <span className="snapshot-value">{renderSummaryValue(value)}</span>
-                    </div>
-                ))}
+                        <span className="snapshot-value">{renderSummaryValue(value, fieldObj, t)}</span>
+                    </div>);
+                })}
             </div>
         );
     };
@@ -118,6 +138,11 @@ export const HistoryDialog = ({ modelName, recordId, onClose }) => {
     const [previewData, setPreviewData] = useState(null);
     const [previewLoading, setPreviewLoading] = useState(false);
     const [selectedVersion, setSelectedVersion] = useState(null);
+    const [page, setPage] = useState(1);
+    const [totalCount, setTotalCount] = useState(0);
+    const [startDate, setStartDate] = useState('');
+    const [endDate, setEndDate] = useState('');
+    const elementsPerPage = 10;
     const { t, i18n } = useTranslation();
 
     const fetchHistory = useCallback(async () => {
@@ -125,10 +150,14 @@ export const HistoryDialog = ({ modelName, recordId, onClose }) => {
         setLoading(true);
         setError(null);
         try {
-            const query = await fetch(`/api/data/history/${modelName}/${recordId}`);
+            const params = new URLSearchParams({ page, limit: elementsPerPage, lang: i18n.language });
+            if (startDate) params.append('startDate', startDate);
+            if (endDate) params.append('endDate', endDate);
+            const query = await fetch(`/api/data/history/${modelName}/${recordId}?${params.toString()}`);
             const response = await query.json();
             if (response.success) {
                 setHistory(response.data);
+                setTotalCount(response.count || 0);
             } else {
                 setError(response.error || i18n.t("history.error", "Could not load history."));
             }
@@ -138,7 +167,12 @@ export const HistoryDialog = ({ modelName, recordId, onClose }) => {
         } finally {
             setLoading(false);
         }
-    }, [modelName, recordId, i18n]);
+    }, [modelName, recordId, i18n.language, page, elementsPerPage, startDate, endDate]);
+
+    // Réinitialise la page à 1 lorsque les filtres de date changent
+    useEffect(() => {
+        setPage(1);
+    }, [startDate, endDate]);
 
     useEffect(() => {
         fetchHistory();
@@ -207,8 +241,21 @@ export const HistoryDialog = ({ modelName, recordId, onClose }) => {
             <div className="history-dialog-content-split">
                 <div className="history-list-container">
                     {loading && <div><Trans i18nKey={"history.loading"}>Chargement de l'historique..</Trans></div>}
+                    <div className="history-filters">
+                        <div className="date-filter">
+                            <label htmlFor="startDate"><Trans i18nKey="history.startDate">From</Trans></label>
+                            <input type="date" id="startDate" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+                        </div>
+                        <div className="date-filter">
+                            <label htmlFor="endDate"><Trans i18nKey="history.endDate">To</Trans></label>
+                            <input type="date" id="endDate" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
+                        </div>
+                        <Button className="btn-clear-filters" onClick={() => { setStartDate(''); setEndDate(''); }} title={t('history.clearDates', 'Clear date filters')}>
+                            <Trans i18nKey="history.clear">Clear</Trans>
+                        </Button>
+                    </div>
                     {error && <div className="error-message">{error}</div>}
-                    {!loading && !error && (
+                    {!loading && !error && (<>
                         <div className="history-list">
                             {history.length > 0 ? (
                                 history.map(entry =>
@@ -222,7 +269,15 @@ export const HistoryDialog = ({ modelName, recordId, onClose }) => {
                                 <div><Trans i18nKey={"history.noHistory"}>Aucun historique trouvé pour cet enregistrement.</Trans></div>
                             )}
                         </div>
-                    )}
+                        {totalCount > elementsPerPage && <Pagination
+                            totalCount={totalCount}
+                            page={page}
+                            setPage={setPage}
+                            elementsPerPage={elementsPerPage}
+                            visibleItemsCount={5}
+                            hasPreviousNext={true}
+                        />}
+                    </>)}
                 </div>
                 <div className="history-preview-container">
                     <div className="preview-header">

package/client/src/HtmlViewBuilderModal.jsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from './Dialog.jsx';
+import {TextField, SelectField, NumberField, CodeField, ModelField} from './Field.jsx';
+import Button from './Button.jsx';
+import { FaSave, FaTimes } from 'react-icons/fa';
+import './HtmlViewBuilderModal.scss';
+
+const HtmlViewBuilderModal = ({ isOpen, onClose, onSave, models, initialConfig }) => {
+    const { t } = useTranslation();
+    const [config, setConfig] = useState({});
+    const [jsonError, setJsonError] = useState('');
+
+    useEffect(() => {
+        if (isOpen) {
+            setConfig(initialConfig || {
+                title: '',
+                model: '',
+                limit: 10,
+                filter: {},
+                template: '',
+                css: '',
+                ...initialConfig
+            });
+            setJsonError('');
+        }
+    }, [isOpen, initialConfig]);
+
+    const modelOptions = useMemo(() => {
+        return (models || []).map(m => ({ label: m.name, value: m.name }));
+    }, [models]);
+
+    const handleChange = (e) => {
+        const { name, value } = e.target || e;
+        setConfig(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleCodeChange = (name, value) => {
+        setConfig(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleFilterChange = (codeValue) => {
+        try {
+            const parsed = JSON.parse(codeValue);
+            setConfig(prev => ({ ...prev, filter: parsed }));
+            setJsonError('');
+        } catch (e) {
+            setJsonError(t('dashboards.invalidJson', 'JSON invalide'));
+        }
+    };
+
+    const handleSave = () => {
+        if (!config.model || !config.template) {
+            console.error("Model and template are required.");
+            return;
+        }
+        if (jsonError) return;
+        onSave(config);
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <Dialog
+            isModal={true}
+            isClosable={true}
+            onClose={onClose}
+            title={initialConfig?.id ? t('dashboards.editHtmlViewTitle', 'Modifier la Vue HTML') : t('dashboards.addHtmlViewTitle', 'Ajouter une Vue HTML')}
+            className="html-view-builder-modal"
+        >
+            <div className="form-grid">
+                <TextField name="title" label={t('dashboards.widgetTitle', 'Titre du widget')} value={config.title || ''} onChange={handleChange} />
+                <ModelField name="model" label={t('model', 'Modèle')} value={config.model || ''} onChange={(option) => handleChange({ name: 'model', value: option?.value })} required />
+                <NumberField name="limit" label={t('dashboards.dataLimit', 'Limite de données')} value={config.limit ?? 10} onChange={handleChange} min={1} max={100} />
+                <CodeField name="filter" label={t('filter', 'Filtre (JSON)')} value={typeof config.filter === 'string' ? config.filter : JSON.stringify(config.filter || {}, null, 2)} language="json" onChange={(e) => handleFilterChange(e.value)} error={jsonError} />
+                <CodeField name="template" label={t('dashboards.htmlTemplate', 'Template HTML')} value={config.template || ''} language="html" onChange={(e) => handleCodeChange('template', e.value)} required height="200px" />
+                <CodeField name="css" label={t('dashboards.cssStyles', 'Styles CSS')} value={config.css || ''} language="css" onChange={(e) => handleCodeChange('css', e.value)} height="150px" />
+            </div>
+            <div className="flex actions right">
+                <Button onClick={onClose} className="btn-secondary">
+                    <FaTimes /> {t('btns.cancel', 'Annuler')}
+                </Button>
+                <Button onClick={handleSave} className="btn-primary" disabled={!!jsonError}>
+                    <FaSave /> {t('btns.save', 'Enregistrer')}
+                </Button>
+            </div>
+        </Dialog>
+    );
+};
+
+export default HtmlViewBuilderModal;

package/client/src/HtmlViewBuilderModal.scss

@@ -0,0 +1,18 @@
+.html-view-builder-modal {
+  .form-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    padding-bottom: 1rem;
+
+    .code-editor-container {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .actions {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+  }
+}

package/client/src/HtmlViewCard.jsx

@@ -0,0 +1,44 @@
+import React, {useEffect, useMemo} from 'react';
+import './HtmlViewCard.scss';
+import {renderHtmlTemplate} from "./DashboardHtmlViewItem.jsx";
+
+/**
+ * Affiche une vue HTML personnalisée, généralement générée par l'assistant IA.
+ * @param {object} props
+ * @param {object} props.config - La configuration de la vue.
+ * @param {string} props.config.title - Le titre de la carte.
+ * @param {string} props.config.template - La chaîne de template HTML Handlebars.
+ * @param {Array<object>} props.config.data - Le tableau d'enregistrements de données à afficher.
+ */
+const HtmlViewCard = ({ config }) => {
+    const { title, template, data, css } = config;
+
+    // Génère un ID unique et stable pour ce composant
+    const containerId = useMemo(() => `html-view-${Math.random().toString(36).substring(2, 9)}`, []);
+
+    // Effet pour injecter et nettoyer le CSS
+    useEffect(() => {
+        if (!css) return;
+
+        const styleElement = document.createElement('style');
+        // Remplace le placeholder par notre ID unique pour scoper le CSS
+        styleElement.innerHTML = css.replace(/\{\{containerId\}\}/g, containerId);
+        document.head.appendChild(styleElement);
+
+        // Fonction de nettoyage : retire le style quand le composant est démonté
+        return () => {
+            document.head.removeChild(styleElement);
+        };
+    }, [css, containerId]);
+
+    const renderedHtml = renderHtmlTemplate(template, data);
+
+    return (
+        <div id={containerId} className="html-view-card">
+            {title && <h4>{title}</h4>}
+            <div className="html-view-content" dangerouslySetInnerHTML={{ __html: renderedHtml }} />
+        </div>
+    );
+};
+
+export default HtmlViewCard;

package/client/src/HtmlViewCard.scss

@@ -0,0 +1,35 @@
+.html-view-card {
+  background-color: var(--bg-color-dark);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  margin-top: 12px;
+  font-size: 0.9rem;
+
+  h4 {
+    margin-top: 0;
+    margin-bottom: 12px;
+    color: var(--text-color-light);
+    border-bottom: 1px solid var(--border-color-light);
+    padding-bottom: 8px;
+  }
+
+  .html-view-content {
+    ul, ol {
+      padding-left: 20px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+    li { margin-bottom: 4px; }
+    a {
+      color: var(--primary-color);
+      text-decoration: none;
+      &:hover { text-decoration: underline; }
+    }
+    h1, h2, h3 {
+      margin-top: 1em;
+      margin-bottom: 0.5em;
+      color: var(--text-color);
+    }
+    p { line-height: 1.5; }
+  }
+}

package/client/src/KanbanCard.jsx

@@ -14,7 +14,6 @@ const KanbanCard = ({ card, model, subItemsField }) => {
     // Logique du Drag & Drop natif pour la carte
     const lang = (tr.i18n.resolvedLanguage || tr.i18n.language).split(/[-_]/)?.[0];
 
-    console.log(subItems)
     const getfield = (model, data) => {
         const v = getDataAsString(model, data, tr, models);
         if(!v){
@@ -26,7 +25,7 @@ const KanbanCard = ({ card, model, subItemsField }) => {
                             <strong>guid</strong> : ${it.guid}<br />
                             <strong>type</strong> : ${it.mimeType}<br />
                             <strong>size</strong> : ${it.size} bytes<br />
-                            <strong>timestamp</strong> : ${it.timestamp ? new Date(it.timestamp).toLocaleString(lang) : ''}
+                            <strong>timestamp</strong> : ${it.createdAt ? new Date(it.createdAt).toLocaleString(lang) : ''}
                         `;
                             return <a key={it.guid} href={`/resources/${it.guid}`} target="_blank"
                                       data-tooltip-id={"tooltipFile"} data-tooltip-html={r}

package/client/src/ModelCreator.jsx

@@ -225,7 +225,7 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                 delete field['_isNewField'];
                 let otherFields = [];
                 // Check for specific field types
-                switch (field.type) {
+                switch ((field.type)) {
                     case 'relation':
                         otherFields = ['relation', 'multiple', 'relationFilter'];
                         break;
@@ -245,10 +245,11 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                     case 'phone':
                     case 'password':
                     case 'code':
-                        if (field.type === 'code')
+                        const t = (field.itemsType || field.type);
+                        if (t === 'code')
                             otherFields = ['maxlength', 'language', 'conditionBuilder'];
-                        else if( ['string_t', 'string'].includes(field.type))
-                            otherFields = ['maxlength', 'multiline'];
+                        else if( ['string_t', 'string'].includes(t))
+                            otherFields = ['maxlength', 'multiline', 'mask', 'replacement'];
                         else
                             otherFields = ['maxlength'];
                         break;

package/client/src/ModelCreatorField.jsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {useModelContext} from "./contexts/ModelContext.jsx";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
 import {isLocalUser} from "../../src/data.js";
@@ -43,6 +43,13 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
     const [showMore, setMoreVisible] = useState(false);
     const hint = (description) => t(description, '') && <div className="hint-icon"><FaCircleInfo data-tooltip-id={`tooltipHint`} data-tooltip-content={description} /></div>
 
+    useEffect(() => {
+        // S'assure que replacement est défini si un masque existe, avec une valeur par défaut correcte.
+        // La chaîne "\\d" en JS devient "\d" dans l'objet, ce qui est correct pour new RegExp().
+        if( field.mask && !field.replacement )
+            field.replacement = { "_": "\\d" };
+    }, [field]);
+
     return (
         <div className="field-edit">
 
@@ -288,6 +295,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     />
                                 </div>
                             </div>
+
                         </>
                     )}
 
@@ -577,8 +585,47 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                 </>)}
                             </div>)}
 
+                            {["string_t", "string"].includes(field.itemsType || field.type) && (
+                                <>
+
+                                    <div className={"flex flex-no-wrap field-bg"}>
+                                        {hint('modelcreator.mask.hint')}
+                                        <div className={"flex-1"}>
+                                            <TextField
+                                                disabled={modelLocked || (isLocalUser(me) && field.locked)}
+                                                label={<Trans i18nKey={"modelcreator.mask"}>Masque de saisie</Trans>}
+                                                className={"flex-1"}
+                                                value={field.mask}
+                                                placeholder={t('modelcreator.field.mask.ph', "mask_")}
+                                                onChange={(e) => {
+                                                    const newFields = [...fields];
+                                                    newFields[index].mask = e.target.value;
+                                                    setFields(newFields);
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className={"flex flex-no-wrap field-bg"}>
+                                        {hint('modelcreator.replacement.hint')}
+                                        <div className={"flex-1"}>
+                                            <CodeField
+                                                name="replacement"
+                                                disabled={modelLocked || (isLocalUser(me) && field.locked)}
+                                                label={<Trans i18nKey={"modelcreator.replacement"}>Règles de remplacement (JSON)</Trans>}
+                                                language="json"
+                                                value={field.replacement ? JSON.stringify(field.replacement, null, 2) : ''}
+                                                onChange={(e) => {
+                                                    const newFields = [...fields];
+                                                    newFields[index].replacement = e.value;
+                                                    setFields(newFields);
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                </>
+                            )}
 
-                            {field.type === 'number' && (
+                            {(field.itemsType || field.type) === 'number' && (
                                 <>
                                     <div
                                     className="flex flex-no-wrap mg-item">{hint('modelcreator.min.hint')}
@@ -685,7 +732,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                             </div>
 
 
-                            {field.type=== 'number'&&(
+                            {(field.itemsType || field.type)=== 'number'&&(
                                 <div className="flex flex-no-wrap">
                                     {hint('modelcreator.gauge.hint')}
                                     <div className="checkbox-label flex flex-1">
@@ -736,7 +783,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
 
                                 </div>
                             )}
-                            {field.type === 'code' && (<>
+                            {(field.itemsType || field.type) === 'code' && (<>
                                 <div className="flex">
                                     {hint('modelcreator.language.hint')}
                                     <label className="checkbox-label flex flex-1">