data-primals-engine 1.5.1 → 1.6.0

package/client/src/DashboardHtmlViewItem.jsx

@@ -1,147 +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>
-    );
-};
-
+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;