data-primals-engine 1.5.0 → 1.5.2

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;