data-primals-engine 1.4.3 → 1.5.1

package/client/src/Dashboard.scss

@@ -173,7 +173,7 @@
             display: flex;
             align-items: center;
             gap: 0.5rem;
-            margin-bottom: 1rem;
+            margin-bottom: 0;
             border-bottom: 1px solid #eee;
             padding-bottom: 0.5rem;
       

package/client/src/DashboardHtmlViewItem.jsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { useTranslation } from 'react-i18next';
+import { FaSpinner } from 'react-icons/fa';
+import Handlebars from 'handlebars';
+import './HtmlViewCard.scss';
+import { useModelContext } from "./contexts/ModelContext.jsx";
+
+/**
+ * Pre-processes data to make it compatible with templates generated by the AI.
+ * - Adds a `.value` property to translated fields (string_t, richtext_t).
+ * - Recursively processes relations.
+ * @param {object|Array} data - The data to process.
+ * @param {object} model - The model definition for the data.
+ * @param {Array} allModels - All available models.
+ * @param {object} tr - The translation object { t, i18n }.
+ * @returns {object|Array} The processed data.
+ */
+const preprocessDataForHandlebars = (data, model, allModels, tr) => {
+    if (!data || !model) return data;
+
+    if (Array.isArray(data)) {
+        return data.map(item => preprocessDataForHandlebars(item, model, allModels, tr));
+    }
+
+    // Create a shallow copy to avoid mutating the original data from react-query cache
+    const processedData = { ...data };
+
+    for (const key in processedData) {
+        if (!Object.prototype.hasOwnProperty.call(processedData, key)) continue;
+
+        const fieldDef = model.fields.find(f => f.name === key);
+        if (!fieldDef) continue;
+
+        const value = processedData[key];
+
+        if ((fieldDef.type === 'string_t' || fieldDef.type === 'richtext_t') && typeof value === 'object' && value !== null) {
+            const lang = (tr.i18n.resolvedLanguage || tr.i18n.language).split(/[-_]/)?.[0];
+            // Add the `.value` property the AI expects, making it non-enumerable to avoid issues
+            Object.defineProperty(value, 'value', {
+                value: value[lang] || value.en || value.fr || Object.values(value)[0] || '',
+                writable: true,
+                configurable: true,
+                enumerable: false // Important!
+            });
+        } else if (fieldDef.type === 'relation' && value) {
+            const relatedModel = allModels.find(m => m.name === fieldDef.relation);
+            if (relatedModel) {
+                // Recursively process the related data
+                processedData[key] = preprocessDataForHandlebars(value, relatedModel, allModels, tr);
+            }
+        }
+    }
+    return processedData;
+};
+
+/**
+ * Renders a simple HTML template by substituting placeholders.
+ * Uses Handlebars.js for robust templating.
+ *
+ * @param {string} templateString The template with placeholders.
+ * @param {Array<object>} data The array of data objects to inject.
+ * @param {object} options - Additional options including model, allModels, and tr.
+ * @returns {string} The rendered HTML string.
+ */
+export const renderHtmlTemplate = (templateString, data, options = {}) => {
+    const { model, allModels, tr } = options;
+    if (!templateString) return '';
+
+    try {
+        const processedData = preprocessDataForHandlebars(data, model, allModels, tr);
+        const template = Handlebars.compile(templateString);
+        return template({ data: processedData });
+    } catch (e) {
+        console.error("Handlebars rendering error:", e);
+        return `<div class="error-state">Template Error: ${e.message}</div>`;
+    }
+};
+
+/**
+ * Récupère les données et affiche une vue HTML personnalisée sur le tableau de bord.
+ * @param {object} props
+ * @param {object} props.config - La configuration de la vue depuis la disposition du tableau de bord.
+ */
+const DashboardHtmlViewItem = ({ config }) => {
+    const { t, i18n } = useTranslation();
+    const { models } = useModelContext();
+    const { title, model: modelName, filter, sort, limit, template, css } = config;
+
+    // Génère un ID unique et stable pour ce composant
+    const containerId = useMemo(() => `html-view-dashboard-${Math.random().toString(36).substring(2, 9)}`, []);
+    const model = useMemo(() => models.find(m => m.name === modelName), [models, modelName]);
+
+    const { data: queryResult, isLoading, error } = useQuery(
+        ['dashboardHtmlView', modelName, filter, sort, limit],
+        async () => {
+            const response = await fetch(`/api/data/search?model=${modelName}&depth=2&limit=${limit || 10}&sort=${JSON.stringify(sort || {})}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ filter: filter || {}}),
+            });
+            if (!response.ok) throw new Error('Échec de la récupération des données pour la vue HTML');
+            return response.json();
+        },
+        {
+            enabled: !!modelName && !!template,
+            refetchOnWindowFocus: false,
+        }
+    );
+
+    // 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 renderContent = () => {
+        if (isLoading) return <div className="loading-state"><FaSpinner className="spin-icon" /> {t('loading', 'Chargement...')}</div>;
+        if (error) return <div className="error-state">{t('error.generic', 'Erreur: {{message}}', { message: error.message })}</div>;
+        if (!queryResult || !queryResult.data) return <div className="empty-state">{t('dashboards.noDataForView', 'Aucune donnée à afficher.')}</div>;
+
+        const renderedHtml = renderHtmlTemplate(template, queryResult.data, {
+            model: model,
+            allModels: models,
+            tr: { t, i18n }
+        });
+        return <div className="html-view-content" dangerouslySetInnerHTML={{ __html: renderedHtml }} />;
+    };
+
+    return (
+        <div id={containerId} className="html-view-card dashboard-widget">
+            {title && <h4>{title}</h4>}
+            {renderContent()}
+        </div>
+    );
+};
+
+export default DashboardHtmlViewItem;

package/client/src/DashboardView.jsx

@@ -14,6 +14,8 @@ import { useAuthContext } from "./contexts/AuthContext.jsx";
 import { DialogProvider } from "./Dialog.jsx";
 import {useModelContext} from "./contexts/ModelContext.jsx";
 import {DashboardFlexViewItem} from "./DashboardFlexViewItem.jsx";
+import DashboardHtmlViewItem from "./DashboardHtmlViewItem.jsx";
+import HtmlViewBuilderModal from "./HtmlViewBuilderModal.jsx";
 
 // --- updateDashboardLayout (fonction utilitaire, peut rester ici ou être externalisée) ---
 async function updateDashboardLayout(dashboard, newLayoutData, username, t) {
@@ -65,6 +67,8 @@ export function DashboardView({ dashboard }) {
     const queryClient = useQueryClient();
     const { models } = useModelContext();
 
+    const [editingHtmlViewConfig, setEditingHtmlViewConfig] = useState(null);
+    const [isHtmlViewBuilderModalOpen, setIsHtmlViewBuilderModalOpen] = useState(false);
     const [layoutState, setLayoutState] = useState([]);
     const [editingSectionIndex, setEditingSectionIndex] = useState(null);
     const [originalSectionName, setOriginalSectionName] = useState('');
@@ -101,41 +105,52 @@ export function DashboardView({ dashboard }) {
         }
     );
     const processedDashboardId = useRef(null);
+    const processedLayoutRef = useRef(null); // Pour comparer le contenu du layout
 
     useEffect(() => {
         if (!dashboard) return;
-        if (dashboard._id === processedDashboardId.current) return;
+
+        const layoutString = JSON.stringify(dashboard.layout);
+        // On ne met à jour que si l'ID du dashboard ou le contenu de son layout a changé.
+        if (dashboard._id === processedDashboardId.current && layoutString === processedLayoutRef.current) return;
 
         let parsedLayout = [];
 
-        if (dashboard?.layout) {
-            try {
-                parsedLayout = dashboard.layout.map(section => ({
-                    ...section,
-                    kpis: section.kpis || section.kpiIds || [], // Normalisation cohérente
-                    chartConfigs: section.chartConfigs || [],
-                    flexViews: section.flexViews || []
-                }));
-            } catch (e) {
-                console.error("Failed to parse layout", e);
-                parsedLayout = [{
-                    name: t('dashboards.defaultSectionName'),
-                    kpis: [],
-                    chartConfigs: [],
-                    flexViews: []
-                }];
-            }
+        // The layout from the DB can be an object (old default) or an array of sections (new format).
+        // We need to handle both cases to avoid crashes.
+        if (dashboard?.layout && Array.isArray(dashboard.layout)) {
+             try {
+                 parsedLayout = dashboard.layout.map(section => ({
+                     ...section,
+                     kpis: section.kpis || section.kpiIds || [], // Normalisation cohérente
+                     chartConfigs: section.chartConfigs || [],
+                     flexViews: section.flexViews || [],
+                     htmlViews: section.htmlViews || []
+                 }));
+             } catch (e) {
+                 console.error("Failed to parse layout array", e);
+                 // Fallback to a default section if mapping fails for some reason
+                 parsedLayout = [{
+                     name: t('dashboards.defaultSectionName'),
+                     kpis: [],
+                     chartConfigs: [],
+                     flexViews: [],
+                     htmlViews: []
+                 }];
+             }
         } else {
             parsedLayout = [{
                 name: t('dashboards.defaultSectionName'),
                 kpis: [],
                 chartConfigs: [],
-                flexViews: []
+                flexViews: [],
+                htmlViews: []
             }];
         }
 
         setLayoutState(parsedLayout);
         processedDashboardId.current = dashboard._id;
+        processedLayoutRef.current = layoutString;
     }, [dashboard, t]);
 
     // Gère le rafraîchissement automatique des données du dashboard.
@@ -197,9 +212,45 @@ export function DashboardView({ dashboard }) {
             setIsChartModalOpen(true);
         } else if (type === 'FlexView') { // Gérer le type FlexView
             setIsFlexBuilderModalOpen(true);
+        } else if (type === 'HtmlView') {
+            setIsHtmlViewBuilderModalOpen(true); // On peut réutiliser le même modal pour l'instant
         }
     };
 
+    const handleOpenEditHtmlViewModal = (htmlViewToEdit, sectionIndex) => {
+        setEditingHtmlViewConfig(htmlViewToEdit);
+        setAddingToSectionIndex(sectionIndex);
+        setIsHtmlViewBuilderModalOpen(true);
+    };
+
+    const handleSaveHtmlViewConfig = (config) => {
+        if (addingToSectionIndex === null) return;
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        const targetSection = newLayoutState[addingToSectionIndex];
+        if (!targetSection) return;
+        if (!Array.isArray(targetSection.htmlViews)) targetSection.htmlViews = [];
+
+        if (config.id) { // Edition
+            const index = targetSection.htmlViews.findIndex(v => v.id === config.id);
+            if (index !== -1) targetSection.htmlViews[index] = config;
+        } else { // Ajout
+            targetSection.htmlViews.push({ ...config, id: `html-${Date.now()}` });
+        }
+        mutation.mutate(newLayoutState);
+        handleCloseFlexBuilderModal();
+        setIsHtmlViewBuilderModalOpen(false);
+        setEditingHtmlViewConfig(null);
+    };
+
+    const handleRemoveHtmlView = (htmlViewId, sectionIndex) => {
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        if (newLayoutState[sectionIndex]?.htmlViews) {
+            newLayoutState[sectionIndex].htmlViews = newLayoutState[sectionIndex].htmlViews.filter(hv => hv.id !== htmlViewId);
+            mutation.mutate(newLayoutState);
+        }
+    };
+
+
 
     const handleAddKpi = (kpiDefinition) => {
         if (addingToSectionIndex === null || !layoutState[addingToSectionIndex]) return;
@@ -396,6 +447,8 @@ export function DashboardView({ dashboard }) {
 
                 chartConfigs: section.chartConfigs || [],
 
+                htmlViews: section.htmlViews || [],
+
                 flexViews: section.flexViews || [],
             };
         });
@@ -437,6 +490,18 @@ export function DashboardView({ dashboard }) {
                         models={models} // Passer les modèles pour la configuration du graphique
                     />
                 )}
+                {isHtmlViewBuilderModalOpen && (
+                    <HtmlViewBuilderModal
+                        isOpen={isHtmlViewBuilderModalOpen}
+                        onClose={() => {
+                            setIsHtmlViewBuilderModalOpen(false);
+                            setEditingHtmlViewConfig(null);
+                        }}
+                        onSave={handleSaveHtmlViewConfig}
+                        models={models}
+                        initialConfig={editingHtmlViewConfig}
+                    />
+                )}
             </DialogProvider>
 
             {isFlexBuilderModalOpen && (
@@ -450,6 +515,7 @@ export function DashboardView({ dashboard }) {
                     // not for the data displayed on the dashboard itself.
                 />
             )}
+
             {dashboard && (
                 <>
                     <h2>{dashboard.name.value}</h2>
@@ -500,6 +566,25 @@ export function DashboardView({ dashboard }) {
                                             </div>
                                         </div>
                                     ))}
+
+                                    {/* NOUVEAU: Affichage des vues HTML */}
+                                    {sectionData.htmlViews?.map(htmlConfig => (
+                                        <div key={htmlConfig.id} className="dashboard-item-wrapper html-view-wrapper">
+                                            <DashboardHtmlViewItem config={htmlConfig} />
+                                            <div className="item-actions">
+                                                {/* TODO: Add edit button for HTML views */}
+                                                {/* <button ...><FaPencilAlt /></button> */}
+                                                <button className="edit-item-button"
+                                                        onClick={() => handleOpenEditHtmlViewModal(htmlConfig, sectionIndex)}
+                                                        title={t('dashboards.editHtmlViewTitle', 'Modifier cette vue HTML')}
+                                                        disabled={mutation.isLoading}><FaPencilAlt/></button>
+                                                <button className="remove-item-button"
+                                                        onClick={() => handleRemoveHtmlView(htmlConfig.id, sectionIndex)}
+                                                        title={t('dashboards.removeHtmlViewTitle', 'Supprimer cette vue HTML')}
+                                                        disabled={mutation.isLoading}><FaTrash/></button>
+                                            </div>
+                                        </div>
+                                    ))}
                                     {/* Affichage des FlexViews */}
                                     {sectionData.flexViews?.map(flexViewConfig => (
 

package/client/src/DataEditor.jsx

@@ -60,6 +60,8 @@ export const DataEditor = forwardRef(function MyDataEditor({
    model,
    onSubmit,
    refreshTime,
+   onCancel,
+   hideNewButton,
    formData,
    setFormData, record, setRecord}, ref){
 
@@ -88,9 +90,9 @@ export const DataEditor = forwardRef(function MyDataEditor({
         // --- Le reste de la fonction renderInputField reste identique ---
         switch (field.type) {
             case 'model':
-                return <ModelField value={value} onChange={handleChange} model={model} field={field} />;
+                return <ModelField value={value} onChange={handleChange} model={model} field={field} formData={formData} />;
             case 'modelField':
-                return <ModelField fields={true} value={value} onChange={handleChange} model={model} field={field} />;
+                return <ModelField fields={true} value={value} onChange={handleChange} model={model} field={field} formData={formData} />;
             case 'datetime':
             case 'date':
                 if( field.min )
@@ -182,6 +184,8 @@ export const DataEditor = forwardRef(function MyDataEditor({
                             />)}</>
                         )}</div>
                 }
+
+                {console.log(formData[field.name])}
                 return <CodeField key={field.name} language={field.language} name={inputProps.name}
                                                         value={typeof (value) === 'string' ? value : JSON.stringify(value)}
                                                         onChange={handleChange}/>
@@ -189,7 +193,7 @@ export const DataEditor = forwardRef(function MyDataEditor({
             case 'array':
                 if (field.itemsType === 'file') {
                     return <div key={field.name}><FileField name={field.name} maxSize={field.maxSize}
-                                                            mimeTypes={field.mimeTypes} value={value} onChange={(files) => {
+                                                            mimeTypes={field.mimeTypes} multiple value={value} onChange={(files) => {
                         handleChange({name: field.name, value: files});
                     }} /></div>;
                 } else {
@@ -276,6 +280,8 @@ export const DataEditor = forwardRef(function MyDataEditor({
                          key={field.name}
                         type={getInputType(field.type)} {...inputProps}
                         value={displayValue}
+                        mask={field.mask}
+                        replacement={field.replacement}
                         onChange={(e) => handleChange({name: field.name, value: e.target.value})}  />
                 }
             case 'file':
@@ -368,8 +374,9 @@ export const DataEditor = forwardRef(function MyDataEditor({
                     ) : null; // Ne rien afficher si la condition n'est pas remplie
                 })}
                 <div className="flex flex-centered">
-                    <Button type="submit" disabled={isLoading}><Trans i18nKey="btns.save">Enregistrer</Trans></Button>
-                    <Button type="submit" onClick={handleNew}><Trans i18nKey="btns.new">Nouveau</Trans></Button>
+                    <Button type="button" onClick={handleSubmit} disabled={isLoading}><Trans i18nKey="btns.save">Enregistrer</Trans></Button>
+                    {onCancel && <Button type="button" className="btn-secondary" onClick={onCancel}><Trans i18nKey="btns.cancel">Annuler</Trans></Button>}
+                    {!hideNewButton && <Button type="button" onClick={handleNew}><Trans i18nKey="btns.new">Nouveau</Trans></Button>}
                 </div>
             </form>
         </div>