data-primals-engine 1.1.0 → 1.1.2

package/README.md

@@ -43,6 +43,21 @@ Possibly create a `.env` file:
 ```env
 MONGO_DB_URL=mongodb://127.0.0.1:27017
 ```
+| Variable              | 	Description                                                            | 	Example                                 |
+|:----------------------|:------------------------------------------------------------------------|:-----------------------------------------| 
+| MONGO_DB_URL          | Connection URL for your MongoDB database.                               | 	mongodb://user:pass@host:27017/db       |
+| PORT                  | 	Port on which the Express server will listen.	                         | 7633                                     |
+| JWT_SECRET            | 	Secret key for signing JWT authentication tokens.	                     | a_long_random_secret_string              |
+| OPENAI_API_KEY        | 	Your optional OpenAI API key for AI features.	                         | sk-xxxxxxxxxxxxxxxxxxxx                  |
+| GOOGLE_API_KEY        | 	Your optional Google (Gemini) API key for AI features.	                | AIzaSyxxxxxxxxxxxxxxxxxxxx               |
+| AWS_ACCESS_KEY_ID     | 	AWS access key for S3 storage (files, backups). Keep empty to disable	 | AKIAIOSFODNN7EXAMPLE                     |
+| AWS_SECRET_ACCESS_KEY | 	AWS secret access key.	                                                | wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY |                                 |
+| AWS_REGION            | 	Region for your S3 bucket.                                             | 	eu-west-3                               |                                                                 |
+| AWS_S3_BUCKET_NAME    | 	Name of the S3 bucket to use.                                          | 	my-backup-bucket                        |                                                                             |
+| SMTP_HOST             | 	SMTP server host for sending emails.	                                  | smtp.example.com                         |
+| SMTP_PORT             | 	SMTP server port.	                                                     | 587                                      |
+| SMTP_USER             | 	Username for SMTP authentication.                                      | 	user@example.com                        |
+| SMTP_PASS             | 	Password for SMTP authentication.                                      | 	password                                |
 
 Start the server:
 ```bash
@@ -73,6 +88,27 @@ Define schemas using JSON:
   ]
 }
 ```
+| Type        | Description                                                                         | 	Properties/Notes                                                         | 
+|:------------|:------------------------------------------------------------------------------------|:--------------------------------------------------------------------------|
+| string	     | Character string.                                                                   | 	minLength, maxLength                                                     |
+| string_t	   | International character string ID.                                                  | 	same as string, translated in { key, value }                             |
+| number	     | Numeric value (integer or float).                                                   | 	min, max                                                                 |
+| boolean	    | Boolean value (true/false).	                                                        | –                                                                         |
+| date	       | Stores a ISO date.	                                                                 | –                                                                         |
+| datetime	   | Stores an ISO date and time.	                                                       | –                                                                         |
+| richtext	   | Rich text field (HTML) for WYSIWYG editors.	                                        |                                                                           |
+| richtext_t	 | International rich text field (HTML) for WYSIWYG editors.	                          | i18n                                                                      |
+| email	      | String validated as an email address.	                                              | –                                                                         |
+| password	   | String that will be automatically hashed.	                                          | –                                                                         |
+| enum	       | Allows selecting a value from a predefined list.	                                   | items: ["value1", "value2"]                                               |
+| relation	   | Creates a link to a document in another model.                                      | 	relation: "target_model_name", multiple: true/false                      |
+| file	       | For uploading a file (stored on S3 if configured).	                                 | allowedTypes:['image/jpeg', 'image/png', 'image/bmp'], maxSize: 1024*1000 |
+| image	      | Specialized file type for images, with preview.	                                    | –                                                                         |
+| array	      | Stores a list of values.	                                                           | itemsType: 'enum' // any type except relations                            |
+| object	     | Stores a nested JSON object.	–                                                      |                                                                           |
+| code	       | Stores language="*" as string, stores language="json" as arbitrary JSON structure.	 | language="json" conditionBuilder=true                                     |                                            
+| model	      | Stores a model by name                                                              | –                                                                         |                                            
+| modelField	 | Stores a model field path	                                                          | –                                                                         |                                            
 
 ### 2. Modules
 Activatable features:
@@ -371,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/README.md

@@ -1,8 +1,116 @@
-# React + Vite
+This guide explains how to integrate and use the client-side part of the `data-primals-engine` library in an external React application (such as hackersonline).  
+The library provides a set of context Providers, Hooks, and UI components to interact with the `data-primals-engine` backend.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+# Table of Contents
+## Prerequisites
+Your React application must have the following dependencies installed:
+- react & react-dom (version >= 18.0.0)
+- react-query (version >= 3.0.0)
+- react-router-dom
+- react-cookie
 
-Currently, two official plugins are available:
+## Installation
+Install the library:
+```shell
+npm install ../../data-primals-engine
+```
+Install peer dependencies:
+```shell
+npm install react-query react-router-dom react-cookie
+```
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Basic Setup
+
+The setup mainly occurs in your application's root file (typically App.jsx or main.jsx).
+
+It consists of initializing a single QueryClient instance and wrapping your app with the required Providers.
+
+### Set the QueryClient (Singleton)
+For react-query caching to work correctly across your app (including inside the library), it is crucial to instantiate QueryClient only once.
+
+The data-primals-engine library needs to know which QueryClient instance you're using. It exports a setQueryClient function for that purpose.
+
+### Set up the Providers
+Your app must be wrapped by several Providers in the correct order so the contexts are available to all child components.
+
+## Full example (App.jsx)
+Here's what your main application file should look like:
+```jsx
+// In your main App.jsx file (e.g., hackersonline/client/src/App.jsx)
+
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
+
+// 1. Import QueryClient and its Provider from react-query
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+// 2. Import Providers and the config function from data-primals-engine
+import {
+   ModelProvider,
+   AuthProvider,
+   UIProvider,
+   NotificationProvider,
+   setQueryClient // <-- Important config function
+} from 'data-primals-engine/client';
+
+// 3. Import the i18n config (see dedicated section)
+import 'data-primals-engine/i18n';
+
+// 4. (CRUCIAL) Create a unique instance of QueryClient
+const queryClient = new QueryClient();
+
+// 5. (CRUCIAL) Pass the instance to the shared library
+setQueryClient(queryClient);
+
+// Your page components
+import HomePage from './pages/HomePage';
+import UserDashboard from './pages/UserDashboard';
+
+function App() {
+   return (
+           // 6. Wrap the app with all required providers
+           <QueryClientProvider client={queryClient}>
+              <AuthProvider>
+                 <CookiesProvider>
+                    <ModelProvider>
+                       <BrowserRouter>
+                          <UIProvider>
+                             <NotificationProvider>
+
+                                {/* Your app content */}
+                                <Routes>
+                                   <Route path="/" element={<HomePage />} />
+                                   <Route path="/dashboard" element={<UserDashboard />} />
+                                   {/* ... other routes */}
+                                </Routes>
+
+                             </NotificationProvider>
+                          </UIProvider>
+                       </BrowserRouter>
+                    </ModelProvider>
+                 </CookiesProvider>
+              </AuthProvider>
+           </QueryClientProvider>
+   );
+}
+
+export default App;
+```
+
+## Internationalization (i18n)
+The library comes with its own i18next configuration and translation files.
+To enable it in your app, you just need to import the config module once in your main file (App.jsx or main.jsx):
+
+```jsx
+// In App.jsx or main.jsx
+import 'data-primals-engine/i18n';
+```
+
+This simple import will:
+
+- Initialize i18next.
+- Load default translations (French, English, etc.).
+- Enable automatic browser language detection.
+
+You can then use react-i18next components and hooks (useTranslation, Trans) as usual in your application.

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";
@@ -56,6 +56,11 @@ import { translations as allTranslations} from "data-primals-engine/i18n";
 import {getRandom} from "data-primals-engine/core";
 import {getUserHash} from "data-primals-engine/data";
 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();
 
@@ -69,6 +74,7 @@ function TopBar({header}) {
     const { i18n, t } = useTranslation();
     const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
 
+
     useEffect(() => {
         if( location.pathname ){
             gtag('config', 'G-NDHNSVB4YB', { page_path: location.pathname });
@@ -87,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
         () => {
@@ -175,13 +189,13 @@ function Layout ({header, translationMutation, routes, body, footer}) {
     const changeLanguage = (newLang) => {
         if (typeof(newLang) === 'string' && newLang) {
 
-            i18n.removeResourceBundle(lang, "translations");
-            i18n.addResourceBundle(newLang, "translations", translations);
             i18n.changeLanguage(newLang, (err)=>{
 
+                i18next.removeResourceBundle(lang, "translation");
+                i18next.addResourceBundle(newLang, 'translation', {...websiteTranslations[newLang]['translation'], ...translations[newLang]?.['translation']});
+
                 gtag("event", "change_language "+newLang);
             });
-
         }
     };
 
@@ -242,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>)}</>
 
@@ -261,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]);
 
 
@@ -277,15 +294,6 @@ function Layout ({header, translationMutation, routes, body, footer}) {
     const [lightboxOpened, setLightboxOpened] = React.useState(false);
     const [lightboxIndex, setLightboxIndex] = React.useState(0);
 
-    const myMessages = [
-        { 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 slides = [{src: "/prez1.jpg", title: t('prez1')},{src: "/prez6.jpg", title: i18n.t('prez3')},{src: "/prez2.jpg", title: t('prez2')},{src: "/prez4.jpg", title: i18n.t('prez4')},{src: "/prez5.jpg", title: i18n.t('prez5')}];
 
     const { addNotification } = useNotificationContext();
@@ -356,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 } });
     };
 
@@ -389,8 +397,8 @@ function Layout ({header, translationMutation, routes, body, footer}) {
                                     width={250}
                                 />
                                 <div className="bubble flex-1">
-                                    <h1><Trans i18nKey={"prez.title"}>F</Trans></h1>
-                                    <div className="inner"><MessageRotator messages={myMessages} fadeDuration={200} defaultDelay={7500}/></div>
+                                    <h1><Trans i18nKey={"prez.title"}>{seoTitle}</Trans></h1>
+                                    <div className="inner"><MessageRotator messages={promotionalMessages} fadeDuration={200} defaultDelay={7500}/></div>
                                 </div>
                             </div>
                             <div className="flex flex-row">
@@ -562,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 (
@@ -572,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";
+import {substituteVariables} from "data-primals-engine/modules/workflow";
+
+/**
+ * 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;
 }