data-primals-engine 1.1.1 → 1.1.3

package/.github/workflows/node.js.yml

@@ -14,7 +14,7 @@ jobs:
 
     runs-on: ubuntu-latest
     container:
-      image: node:18  # Specify the Docker version you needx
+      image: node:20  # Specify the Docker version you needx
       env:
         NODE_OPTIONS: "--max_old_space_size=4096"
         NODE_ENV: development
@@ -23,7 +23,7 @@ jobs:
         - 27017
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     services:
       mongodb:
@@ -45,11 +45,6 @@ jobs:
         apt-get update
         apt-get install -y mongodb-org-tools
 
-    - name: Set up Node.js
-      uses: actions/setup-node@v2
-      with:
-        node-version: '18.18.2'
-
     - name: Install dependencies
       run: npm install
 

package/README.md

@@ -407,14 +407,14 @@ await loadFromDump(currentUser, { modelsOnly: false });
 
 ## Pack Management
 
-### installPack(logger, packId, user, lang)
+### installPack(packId, user, lang)
 
 > Installs a predefined data pack.
 
 Example:
 
 ```javascript
-const result = await installPack(logger, "61d1f1a9e3f1a9e3f1a9e3f1", user, "en");
+const result = await installPack("61d1f1a9e3f1a9e3f1a9e3f1", user, "en");
 // Returns installation summary
 ```
 

package/client/src/App.jsx

@@ -46,8 +46,8 @@ import {
     FaInfo,
     FaKey,
     FaLanguage,
-    FaMobile,
-    FaStar
+    FaMobile, FaQuestion, FaSignInAlt, FaSignOutAlt,
+    FaStar, FaUser
 } from "react-icons/fa";
 import {Helmet} from "react-helmet";
 import {useCookies, CookiesProvider} from "react-cookie";
@@ -55,10 +55,13 @@ import {useCookies, CookiesProvider} from "react-cookie";
 import { translations as allTranslations} from "data-primals-engine/i18n";
 import {getRandom} from "data-primals-engine/core";
 import {getUserHash} from "data-primals-engine/data";
-import {promotionalMessages, seoTitle} from "./constants.js";
+import {seoTitle} from "./constants.js";
+import {host} from "../../src/constants.js";
 import i18next from "i18next";
 import {websiteTranslations} from "./translations.js";
 
+import { Tooltip } from 'react-tooltip';
+
 let queryClient = new QueryClient();
 
 export const setQueryClient = (q) => {
@@ -90,6 +93,14 @@ function Layout ({header, translationMutation, routes, body, footer}) {
     // 2. NOUVEAU : État pour stocker la configuration de l'assistant
     const [assistantConfig, setAssistantConfig] = useState(null);
 
+    const promotionalMessages = [
+        { text: t('promo.rotation.6') },
+        { text: t('promo.rotation.1') },
+        { text: t('promo.rotation.2') },
+        { text: t('promo.rotation.1') },
+        { text: t('promo.rotation.4') },
+        { text: t('promo.rotation.5') }
+    ];
     useQuery(
         'assistantConfig', // La clé de la requête reste la même
         () => {
@@ -168,14 +179,6 @@ function Layout ({header, translationMutation, routes, body, footer}) {
         }
     ];
 
-    const promotionalMessages = [
-        { text: t('promo.rotation.6') },
-        { text: t('promo.rotation.1') },
-        { text: t('promo.rotation.2') },
-        { text: t('promo.rotation.1') },
-        { text: t('promo.rotation.4') },
-        { text: t('promo.rotation.5') }
-    ];
     const { setCurrentTourSteps, setAllTourSteps, currentTour, setCurrentTour } = useUI();
     const [translations, setTranslations] = useState([]);
 
@@ -253,7 +256,7 @@ function Layout ({header, translationMutation, routes, body, footer}) {
         setCurrentProfile(null);
         const username = 'demo'+getRandom(1, 99);
         setMe({username});
-        setCookie('username', username, { path : "/", domain: isProd ? 'primals.net' : 'localhost'});
+        setCookie('username', username, { path : "/", domain: isProd ? host : 'localhost'});
         nav('/user/'+username, { state: { startTour: true } });
     }}><Trans i18nKey={"links.demo"}>Demo</Trans></Button>)}</>
 
@@ -272,8 +275,11 @@ function Layout ({header, translationMutation, routes, body, footer}) {
     };
 
     useEffect(() => {
-        if( !cookies.username)
-            onAuthenticated({username: 'demo'+getRandom(1, 99)}, true);
+        if( !cookies.username) {
+            const username ='demo' + getRandom(1, 99);
+            setCookie("username", username, { path : "/", domain: isProd ? host : 'localhost'});
+            onAuthenticated({username}, true);
+        }
     }, [cookies.username]);
 
 
@@ -358,7 +364,7 @@ function Layout ({header, translationMutation, routes, body, footer}) {
         setMe({username});
 
         setPromptResult(null);
-        setCookie('username', username, { path : "/", domain: isProd ? 'primals.net' : 'localhost'});
+        setCookie('username', username, { path : "/", domain: isProd ? host : 'localhost'});
         nav('/user/'+username, { state: { startTour: false } });
     };
 
@@ -564,6 +570,17 @@ function UserPage({notifs,triggerSignin, onAuthenticated}) {
                 données</p>}</>;
 }
 
+const BaseLayout=()=>{
+    return <Layout header={<header className={"flex"}>
+        <Tooltip id={"header"}/>
+        <h1 className="flex-1">{seoTitle}</h1>
+        <div className="flex">
+            <FaQuestion data-tooltip-id="header" data-tooltip-content="Documentation" onClick={()=> {
+                window.open("https://data.primals.net/en/documentation/", "_blank");
+            }} />
+        </div>
+    </header>} />
+}
 function App() {
 
     return (
@@ -574,7 +591,7 @@ function App() {
                             <BrowserRouter>
                                 <UIProvider>
                                     <NotificationProvider>
-                                        <Layout />
+                                        <BaseLayout></BaseLayout>x
                                     </NotificationProvider>
                                 </UIProvider>
                             </BrowserRouter>

package/client/src/App.scss

@@ -14,6 +14,27 @@ body {
   padding: 0;
 }
 
+header {
+  background-color: #3498db;
+  color: white;
+  align-items: center;
+  h1 {
+    font-size: 100%;
+    line-height: 100%;
+    color: white;
+    padding: 0;
+  }
+  > div.flex {
+    gap: 16px;
+    padding: 8px;
+    font-size: 20px;
+  }
+  svg {
+    cursor: pointer;
+  }
+  height: 50px;
+  overflow: hidden;
+}
 .flex {
   display: flex;
   flex-wrap: wrap;

package/client/src/Dashboard.scss

@@ -369,7 +369,11 @@
 
 .flex-node{
   margin: 0;
-  max-width: 480px;
+  width: 100%;
+  @media only screen and (min-width: 480px) {
+    max-width: fit-content;
+  }
+  display: flex;
   .relation-value{
       padding: 6px 10px;
       border-radius: 20px;

package/client/src/DashboardFlexViewItem.jsx

@@ -83,8 +83,7 @@ const DashboardFlexViewItem = ({ flexViewConfig, allModels }) => {
         return <div className="flex-view-placeholder error" title={error.message}>{t('dashboards.error.displayFlexData', 'Erreur d\'affichage')}</div>;
     }
 
-    console.log(flexStructure)
-    if (!flexStructure || (!selectedModelName && !flexStructure.htmlContent)) {
+    if (!flexStructure) {
         return <div className="flex-view-placeholder">{t('dashboards.flexViewNotConfigured', 'Vue Flex non configurée ou modèle manquant.')}</div>;
     }
 

package/client/src/DisplayFlexNodeRenderer.jsx

@@ -2,15 +2,125 @@
 import {useTranslation} from "react-i18next";
 import {cssProps} from "data-primals-engine/core";
 import FlexDataRenderer from "./FlexDataRenderer.jsx";
-import React from "react";
+import React, {useState} from "react";
 import {getFieldPathValue} from "data-primals-engine/data";
 import {getFieldDefinitionFromPath} from "./core/data.js";
+import {Dialog, DialogProvider} from "./Dialog.jsx";
+import {FaPlay} from "react-icons/fa";
+
+
+/**
+ * Récupère une valeur imbriquée dans un objet (ex: 'user.address.city').
+ */
+const getNestedValue = (obj, path) => {
+    if (!path || !obj) return undefined;
+    return path.split('.').reduce((acc, part) => acc && acc[part] !== undefined ? acc[part] : undefined, obj);
+};
+
+
+/**
+ * Remplace les placeholders {{...}} dans une chane de caractères JSON
+ * par les valeurs de l'objet de données.
+ * C'est une version simplifiée, spécifique au client.
+ */
+const substituteClientVariables = (templateString, dataObject) => {
+    if (typeof templateString !== 'string' || !dataObject) {
+        return templateString;
+    }
+    return templateString.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
+        const value = getNestedValue(dataObject, key.trim());
+        if (value === undefined) {
+            return match; // Garde le placeholder si la valeur n'est pas trouvée
+        }
+        if (value === null) {
+            return 'null';
+        }
+        // Pour les nombres et booléens, on les retourne tels quels.
+        // Pour les chaînes, l'utilisateur doit mettre les guillemets dans le template : "name": "{{name}}"
+        // Pour les objets, on les stringify pour éviter [object Object]
+        if (typeof value === 'object') {
+            return JSON.stringify(value);
+        }
+        return value;
+    });
+};
+
+const CtaNode = ({ node, nodeStyle, dataItem }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [result, setResult] = useState(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleCtaClick = async () => {
+        if (!node.endpointPath) return;
+        setIsLoading(true);
+        setResult(null);
+
+        try {
+            // 1. Construire l'URL finale avec les paramètres de requête
+            let finalUrl = `/api/actions/${node.endpointPath}`;
+            if (node.requestQueryTemplate) {
+                const substitutedQuery = substituteClientVariables(node.requestQueryTemplate, dataItem);
+                try {
+                    const queryParams = JSON.parse(substitutedQuery || '{}');
+                    const searchParams = new URLSearchParams(queryParams);
+                    if (searchParams.toString()) {
+                        finalUrl += `?${searchParams.toString()}`;
+                    }
+                } catch (e) {
+                    console.error("Erreur lors du parsing des paramètres de requête JSON:", e, "Template:", substitutedQuery);
+                }
+            }
+
+            // 2. Préparer les options du fetch (méthode, corps, etc.)
+            const method = node.httpMethod || 'GET';
+            const fetchOptions = {
+                method: method,
+                headers: { 'Content-Type': 'application/json' },
+            };
+
+            if (method !== 'GET' && method !== 'HEAD' && node.requestBodyTemplate) {
+                fetchOptions.body = substituteClientVariables(node.requestBodyTemplate, dataItem);
+            }
+
+            // 3. Exécuter la requête
+            const response = await fetch(finalUrl, fetchOptions);
+            const responseData = await response.json();
+            setResult({ status: response.status, ok: response.ok, data: responseData });
+
+        } catch (error) {
+            setResult({ ok: false, error: error.message });
+        } finally {
+            setIsLoading(false);
+            setIsModalOpen(true);
+        }
+    };
+
+    return (
+        <>
+            <div className="flex-node preview-item" style={nodeStyle}>
+                <button className="btn btn-primary" onClick={handleCtaClick} disabled={isLoading}>
+                    {isLoading ? <span className="loading loading-spinner"></span> : <><FaPlay className="mr-2" />{node.label || 'Execute'}</>}
+                </button>
+            </div>
+            <DialogProvider>
+                {isModalOpen && (
+                    <Dialog isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title={`Résultat de ${node.httpMethod} /api/actions/${node.endpointPath}`}>
+                        <div className="p-4 bg-gray-900 text-white rounded-md mt-4">
+                            <pre><code>{JSON.stringify(result, null, 2)}</code></pre>
+                        </div>
+                    </Dialog>
+                )}
+            </DialogProvider>
+        </>
+    );
+};
+
 
 const DisplayFlexNodeRenderer = ({ node, data, dataIndexRef, allModels, baseModelFields, model }) => {
     const { t } = useTranslation();
+    const dataItem = data && data.length > 0 ? data[dataIndexRef.current % data.length] : null;
 
     const baseStyle = node.type === 'container' ? node.containerStyle : node.itemStyle;
-    // MODIFICATION: Correction pour appliquer le CSS custom sur les items aussi
     const customCssStyle = (node.type === 'container' ? node.containerStyle?.customCss : node.itemStyle?.customCss) || '';
     const customStyle = customCssStyle ? cssProps(customCssStyle) : {};
     const nodeStyle = { ...baseStyle, border: 'none', ...customStyle };
@@ -35,9 +145,15 @@ const DisplayFlexNodeRenderer = ({ node, data, dataIndexRef, allModels, baseMode
                 ))}
             </div>
         );
-    } else if (node.type === 'item') {
-        let contentToRender;
+    }
 
+    if (node.type === 'cta') {
+        // On utilise notre nouveau composant intelligent
+        return <CtaNode node={node} nodeStyle={nodeStyle} dataItem={dataItem} />;
+    }
+
+    if (node.type === 'item') {
+        let contentToRender;
         if (node.content.type === 'dataField' && node.content.mapping) {
             const dataItem = data && data.length > 0 ? data[dataIndexRef.current % data.length] : null;
             let fieldValue;

package/client/src/FlexBuilder.jsx

@@ -18,7 +18,7 @@ import {
     deleteNodeRecursive,
     clearMappingsRecursive
 } from './FlexTreeUtils.js';
-import {DialogProvider} from "./Dialog.jsx";
+import {Dialog, DialogProvider} from "./Dialog.jsx";
 
 const FlexBuilder = ({ initialConfig = null, models = [], onChange, data = [], lang = 'fr' }) => {
     const { me: user } = useAuthContext();
@@ -35,7 +35,6 @@ const FlexBuilder = ({ initialConfig = null, models = [], onChange, data = [], l
         dataLimit: 3, refreshInterval: 60000,
     }), [createNewNode]);
 
-    // --- CORRECTION ---
     // Fonction utilitaire pour construire l'état à partir de la configuration chargée.
     // Elle fusionne correctement les données par défaut, les métadonnées et la structure de la vue.
     const buildStateFromConfig = useCallback((config) => {
@@ -253,6 +252,7 @@ const FlexBuilder = ({ initialConfig = null, models = [], onChange, data = [], l
                     onSave={handleSaveHtmlContent}
                 />
             )}
+
             </DialogProvider>
         </div>
     );

package/client/src/FlexBuilder.scss

@@ -106,6 +106,7 @@
 
     .flex-node { // Common styles for both container and item in preview
       transition: outline 0.2s ease-in-out;
+      display: flex;
       background-color: #f5f5f5;
       &.is-selected {
         outline: 2px solid #007bff !important; // Force outline for selected
@@ -223,4 +224,8 @@
 .flex-builder-controls .control-group .condition-builder {
   border: 1px solid #e0e0e0; padding: 10px; border-radius: 4px;
   background-color: #fdfdfd; margin-top: 5px;
+}
+
+.flex-node-cta {
+  pointer-events: none;
 }