data-primals-engine 1.4.3 → 1.5.1

package/client/src/FlexDataRenderer.jsx

@@ -33,8 +33,10 @@ const formatDate = (value, type, t) => {
 
 const FlexDataRenderer = ({ value, fieldDefinition,data }) => {
     const { t, i18n } = useTranslation();
+    const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
     const {models} = useModelContext()
     const {me} = useAuthContext()
+
     // 'translatedLabel' is added by getFieldDefinitionByPath
     const field = fieldDefinition;
     const translatedLabel = t('model_'+field.name, field.name);

package/client/src/FlexTreeUtils.js

@@ -36,7 +36,7 @@ export const createNewNode = (type) => {
         return {
             ...baseNode,
             type: 'item',
-            itemStyle: { width: '100px', height: '50px' },
+            itemStyle: {  },
             content: { type: 'placeholder' }
         };
     }

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,9 @@ 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 elementsPerPage = 10;
     const { t, i18n } = useTranslation();
 
     const fetchHistory = useCallback(async () => {
@@ -125,10 +148,12 @@ 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 });
+            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 +163,7 @@ export const HistoryDialog = ({ modelName, recordId, onClose }) => {
         } finally {
             setLoading(false);
         }
-    }, [modelName, recordId, i18n]);
+    }, [modelName, recordId, i18n, page, elementsPerPage]);
 
     useEffect(() => {
         fetchHistory();
@@ -208,7 +233,7 @@ export const HistoryDialog = ({ modelName, recordId, onClose }) => {
                 <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 && (
+                    {!loading && !error && (<>
                         <div className="history-list">
                             {history.length > 0 ? (
                                 history.map(entry =>
@@ -222,7 +247,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/KPIDialog.jsx

@@ -1,11 +1,16 @@
 import React, { useState } from 'react';
 import { Dialog } from './Dialog.jsx'; // Assure-toi que Dialog est importé
 import { useTranslation } from 'react-i18next';
+import {FaAd, FaPlus} from "react-icons/fa";
+import {getUserHash} from "../../src/data.js";
+import {useNavigate} from "react-router-dom";
+import {useAuthContext} from "./contexts/AuthContext.jsx";
 
 function KPIDialog({ availableKpis = [], onAddKpi, onClose }) {
     const { t } = useTranslation();
     const [searchTerm, setSearchTerm] = useState('');
-
+    const nav = useNavigate()
+    const {me} = useAuthContext()
     const filteredKpis = (availableKpis || []).filter(kpi =>
         kpi.name.value.toLowerCase().includes(searchTerm.toLowerCase())
     );
@@ -32,6 +37,11 @@ function KPIDialog({ availableKpis = [], onAddKpi, onClose }) {
                     <li>{t('dashboards.no_kpi_found', 'Aucun KPI disponible ou correspondant.')}</li>
                 )}
             </ul>
+            <div className={"flex mg-2"}>
+                <button onClick={() => {
+                    nav(`/user/${getUserHash(me)}/?model=kpi`);
+                }} className={"btn"}><FaPlus />{t('dashboards.addKpi', 'Nouvel indicateur KPI')}</button>
+            </div>
         </Dialog>
     );
 }

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;
@@ -660,11 +661,10 @@ const ModelCreator = forwardRef(({ initialPrompt = '', onModelGenerated, autoGen
                 {/* Boutons d'action, visibles si un modèle est affiché ou en mode manuel */}
                 {(showModel || !useAI || initialModel) && (
                     <div className="actions flex">
-                        {initialModel && (
+                        
                             <Button type="button" onClick={handleAddField}>
                                 <FaPlus /> <Trans i18nKey={"btns.addField"}>Ajouter un champ</Trans>
                             </Button>
-                        )}
 
                         <Button type="submit">
                             <FaSave />