data-primals-engine 1.5.2 → 1.6.0

package/client/src/HtmlViewBuilderModal.jsx

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

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

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