data-primals-engine 1.7.1 → 1.7.3

package/client/src/DataLayout.jsx

@@ -60,12 +60,12 @@ const NotConfiguredPlaceholder = ({ type, onConfigure }) => (
 
 const WorkflowSelectorModal = ({ onClose, onSelectWorkflow }) => {
     const { t } = useTranslation();
-    const { searchData } = useModelContext();
     const { me } = useAuthContext();
     const { data: activeWorkflows, isLoading } = useQuery(
         'activeWorkflowsList',
         () => fetch('/api/data/search?_user='+me.username, {
             method: 'POST',
+            credentials: "include",
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
                 model: 'workflow',
@@ -96,7 +96,7 @@ const WorkflowSelectorModal = ({ onClose, onSelectWorkflow }) => {
     );
 };
 
-function DataLayout({refreshUI}) {
+function DataLayout({refreshUI}, ref) {
     const [ searchParams, setSearchParams ] = useSearchParams();
     const [viewSettings, setViewSettings] = useLocalStorage('viewSettings', {});
 
@@ -147,6 +147,7 @@ function DataLayout({refreshUI}) {
 
     const mainPartRef = useRef();
     const modelCreatorRef = useRef();
+    const dataEditorRef = useRef(null);
 
     const [tutorialDialogVisible, setTutorialDialogVisible] = useState(false);
     const [importModalVisible, setImportModalVisible] = useState(false);
@@ -155,7 +156,6 @@ function DataLayout({refreshUI}) {
     const [showAPIInfo, setAPIInfoVisible] = useState(false);
     const nav = useNavigate();
     const mod = searchParams.get('model');
-    const loc = useLocation();
 
 
     // --- AJOUT : Récupérer le paramètre de l'URL pour l'édition de workflow ---
@@ -300,18 +300,24 @@ function DataLayout({refreshUI}) {
                     setFilterValues={setFilterValues}
                     model={selectedModel}
                     onAddData={(model) => {
-                        mainPartRef.current.scrollIntoView({behavior: "smooth"});
                         handleAddData(model);
+                        setTimeout(() => {
+                            dataEditorRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }, 100);
                     }}
                     onDuplicateData={(data) => {
-                        mainPartRef.current.scrollIntoView({behavior: "smooth"});
                         handleAddData(selectedModel, data);
+                        setTimeout(() => {
+                            dataEditorRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }, 100);
                     }}
                     onEdit={(item) => {
-                        mainPartRef.current.scrollIntoView({behavior: "smooth"});
                         setRecordToEdit(item);
                         setFormData(item);
                         setDataEditorVisible(true);
+                        setTimeout(() => {
+                            dataEditorRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }, 100);
                     }}
                     deleteApiCall={deleteApiCall}
                     queryClient={queryClient}
@@ -428,7 +434,8 @@ function DataLayout({refreshUI}) {
             ///fd.append("files", fd2);
             return fetch(`${url}?lang=${lang}&_user=${encodeURIComponent(getUserId(me))}`, {
                 method,
-                body: fd
+                body: fd,
+                credentials: "include",
             }).then(e => e.json());
         } catch (error) {
             console.error('Erreur lors de l\'enregistrement des données:', error);
@@ -508,7 +515,8 @@ function DataLayout({refreshUI}) {
         return fetch(`/api/data/${ids}?lang=${lang}&_user=${encodeURIComponent(getUserId(me))}`, {
             method: 'DELETE', headers: {
                 'Content-Type': 'application/json'
-            }
+            },
+            credentials: "include"
         }).then(e => e.json());
     }, [lang, me]);
 
@@ -531,7 +539,7 @@ function DataLayout({refreshUI}) {
        return fetch('/api/models/import', { method: 'POST', headers: {
            'Content-Type': 'application/json'
            },
-        body: JSON.stringify({ models: selectedModels.map(m => m.name) })
+           credentials: "include",body: JSON.stringify({ models: selectedModels.map(m => m.name) })
        })
     });
 
@@ -586,13 +594,6 @@ function DataLayout({refreshUI}) {
         setImportModalVisible(false);
     }
 
-    useEffect(() => {
-        if( showDataEditor && mainPartRef.current ){
-
-        }
-    }, [showDataEditor,mainPartRef.current]);
-
-
     const [currentProfile, setCurrentProfile] = useLocalStorage('profile', null);
     const {isTourOpen, setIsTourOpen, currentTourSteps, allTourSteps, setTourStepIndex, setCurrentTourSteps, currentTour,setCurrentTour, addLaunchedTour, assistantConfig, setAssistantConfig} = useUI();
 
@@ -707,7 +708,7 @@ function DataLayout({refreshUI}) {
                             onSelectWorkflow={(id) => {
                                 nav(`?edit-workflow=${id}`);
                                 setEditionMode(false)
-                                mainPartRef.current.scrollIntoView();
+                                mainPartRef.current?.scrollIntoView();
                                 setCurrentView('workflow'); // Ajout pour forcer le changement de vue
                                 setWorkflowListModalOpen(false);
                             }}
@@ -740,7 +741,7 @@ function DataLayout({refreshUI}) {
                     setAPIInfoVisible(false);
                     setDataEditorVisible(false);
                     setEditionMode(true);
-                    mainPartRef.current.scrollIntoView({behavior: 'smooth'});
+                    mainPartRef.current?.scrollIntoView({behavior: 'smooth'});
                     gtag("event", "select_content", {
                         content_type: "create_model",
                     });
@@ -750,7 +751,7 @@ function DataLayout({refreshUI}) {
                     setAPIInfoVisible(false);
                     setEditionMode(true);
 
-                    mainPartRef.current.scrollIntoView({behavior: 'smooth'});
+                    mainPartRef.current?.scrollIntoView({behavior: 'smooth'});
                     gtag("event", "select_content", {
                         content_type: "edit_model",
                         content_id: model.name
@@ -760,7 +761,7 @@ function DataLayout({refreshUI}) {
                     setDataEditorVisible(false);
                     setEditionMode(false);
                     setAPIInfoVisible(false);
-                    mainPartRef.current.scrollIntoView({behavior: 'smooth'});
+                    //mainPartRef.current?.scrollIntoView({behavior: 'smooth'});
                     gtag("event", "select_content", {
                         content_type: "select_model",
                         content_id: model.name
@@ -768,12 +769,12 @@ function DataLayout({refreshUI}) {
                            }} onImportPack={() => {
                                setShowPackGallery(true);
                 }} onNewData={(model) => {
-                    mainPartRef.current.scrollIntoView({behavior: 'smooth'});
+                    mainPartRef.current?.scrollIntoView({behavior: 'smooth'});
                     handleAddData(model);
                 }}/>
                 {(editionMode) && (
                     <ModelCreator ref={modelCreatorRef} onModelGenerated={() =>{
-                        modelCreatorRef.current.scrollIntoView({behavior: 'smooth'});
+                        modelCreatorRef?.current?.scrollIntoView({behavior: 'smooth'});
                     }} initialModel={selectedModel} onModelSaved={(model) => {
                         setRefreshTime(new Date().getTime());
                         handleModelSelect(model);
@@ -785,7 +786,8 @@ function DataLayout({refreshUI}) {
                 )}
             <div className="hidden-anchor" ref={mainPartRef}></div>
 
-                {showDataEditor && (<DataEditor ref={mainPartRef}
+                {showDataEditor && (<DataEditor
+                    ref={dataEditorRef}
                     key={selectedModel?.name}
                     isLoading={isLoading}
                     model={selectedModel}

package/client/src/DataTable.jsx

@@ -6,7 +6,6 @@ import {useAuthContext} from "./contexts/AuthContext.jsx";
 import React, {useEffect, useMemo, useRef, useState} from "react"; 
 import {getUserHash, getUserId} from "../../src/data.js";
 import cronstrue from 'cronstrue/i18n';
-import {Event} from "../../src/events.js";
 
 import {
     FaBook,
@@ -337,6 +336,7 @@ export function DataTable({
         return fetch(`/api/data/export?lang=${lang}&${params.toString()}`, {
             method: 'POST',
             body,
+            credentials: "include",
             headers: {"Content-Type": "application/json"}
         })
             .then(async resp => {
@@ -391,8 +391,9 @@ export function DataTable({
     const handleConfirmRestore = async () => {
         try {
             // Make the API call to request the restore link
-            const response = await fetch('/api/backup/request-restore', {
+            const response = await fetch('/api/backup/request-restore?lang='+lang, {
                 method: 'POST',
+                credentials: "include",
                 // ... other options ...
             });
 
@@ -451,7 +452,7 @@ export function DataTable({
                 <Button onClick={handleImport} title={t("btns.import")}><FaFileImport/><Trans
                     i18nKey="btns.import">Importer</Trans></Button>
                 <Button disabled={isLoading} onClick={handleExport} title={t("btns.export")}><FaFileExport/><Trans i18nKey="btns.export">Exporter</Trans></Button>
-                {!/^demo[0-9]{1,2}$/.test(me.username) && (<Button onClick={handleBackup} title={t("btns.backup")}><FaDatabase/><Trans
+                {(<Button onClick={handleBackup} title={t("btns.backup")}><FaDatabase/><Trans
                     i18nKey="btns.backup">Backup</Trans></Button>)}
 
             </div>}
@@ -738,10 +739,10 @@ export function DataTable({
                                         </button>)}
                                         {/* AJOUT : Bouton pour ouvrir l'éditeur de workflow */}
                                         {model.name === 'workflow' && (
-                                            <NavLink to={`?edit-workflow=${item._id}`} className="datatable-action-btn workflow-edit"
+                                            <button onClick={() => nav(`?edit-workflow=${item._id}`)} className="btn-nav datatable-action-btn workflow-edit"
                                                      data-tooltip-id="tooltipActions" data-tooltip-content={t('workflow.editor.title', "Éditeur de Workflow")}>
                                                 <FaGear />
-                                            </NavLink>
+                                            </button>
                                         )}
 
                                         <button data-tooltip-id="tooltipActions"

package/client/src/Dialog.jsx

@@ -1,90 +1,92 @@
-import Button from "./Button.jsx";
-import { FaWindowClose } from "react-icons/fa";
-
-import "./Dialog.scss";
-import { createContext, useContext, useEffect, useState } from "react";
-import {useUI} from "./contexts/UIContext.jsx";
-
-const DialogContext = createContext({});
-
-export const useDialogContext = () => useContext(DialogContext);
-
-export const DialogProvider = ({ children }) => {
-  const [dialogs, setDialogs] = useState(0);
-  const { locked, setLocked } = useUI()
-  const values = {
-    addDialog: () => setDialogs((dialogs) => dialogs + 1),
-    removeDialog: () =>
-      setDialogs((dialogs) => {
-        return dialogs > 0 ? dialogs - 1 : 0;
-      }),
-  };
-  useEffect(() => {
-    if( dialogs === 0){
-      setLocked(false);
-    }else{
-      setLocked(true);
-    }
-  }, [dialogs]);
-  return (
-    <DialogContext.Provider value={values}>
-      {dialogs > 0 ? (
-        <>
-          <div className="dialog-bg"></div>
-          {children}
-        </>
-      ) : (
-        children
-      )}
-    </DialogContext.Provider>
-  );
-};
-export const Dialog = ({
-  title,
-  children,
-  className,
-  onClose,
-  isClosable,
-  isModal,
-}) => {
-  const [showModal, setModalVisible] = useState(true);
-  const { addDialog, removeDialog } = useDialogContext();
-  const handleClose = () => {
-    setModalVisible(false);
-    onClose?.();
-    removeDialog();
-  };
-  const clickEvent = (e) => {
-
-    if( !e.target.closest('.dialog') && !e.target.closest('.notification') ){
-      onClose?.();
-    }
-  };
-  useEffect(() => {
-    addDialog();
-    document.addEventListener('mousedown', clickEvent);
-    return () => {
-      removeDialog();
-      document.removeEventListener('mousedown', clickEvent);
-    }
-  }, [addDialog, removeDialog]);
-  return showModal ? (
-    <div
-        aria-modal={true}
-        aria-label={title}
-      className={`${className ? className : ""} dialog ${isModal ? "dialog-modal" : ""}`}
-    >
-      <div className="dialog-header">
-        {title && <h2>{title}</h2>}
-        {isClosable && (
-          <Button className={"btn btn-close"} onClick={handleClose}>
-            <FaWindowClose />
-          </Button>
-        )}
-      </div>
-      <div className="dialog-content">{children}</div>
-    </div>
-  ) : (
-    <></>
-  );
-};
+import Button from "./Button.jsx";
+import { FaWindowClose } from "react-icons/fa";
+
+import "./Dialog.scss";
+import { createContext, useContext, useEffect, useState } from "react";
+import {useUI} from "./contexts/UIContext.jsx";
+
+const DialogContext = createContext({});
+
+export const useDialogContext = () => useContext(DialogContext);
+
+export const DialogProvider = ({ children }) => {
+  const [dialogs, setDialogs] = useState(0);
+  const { locked, setLocked } = useUI()
+  const values = {
+    addDialog: () => setDialogs((dialogs) => dialogs + 1),
+    removeDialog: () =>
+      setDialogs((dialogs) => {
+        return dialogs > 0 ? dialogs - 1 : 0;
+      }),
+  };
+  useEffect(() => {
+    if( dialogs === 0){
+      setLocked(false);
+    }else{
+      setLocked(true);
+    }
+  }, [dialogs]);
+  return (
+    <DialogContext.Provider value={values}>
+      {dialogs > 0 ? (
+        <>
+          <div className="dialog-bg"></div>
+          {children}
+        </>
+      ) : (
+        children
+      )}
+    </DialogContext.Provider>
+  );
+};
+export const Dialog = ({
+  title,
+  children,
+  className,
+  onClose,
+  isClosable,
+  isModal,
+}) => {
+  const [showModal, setModalVisible] = useState(true);
+  const { addDialog, removeDialog } = useDialogContext();
+  const handleClose = () => {
+    setModalVisible(false);
+    onClose?.();
+    removeDialog();
+  };
+  const clickEvent = (e) => {
+
+    if( !e.target.closest('.dialog') && !e.target.closest('.notification') ){
+      onClose?.();
+    }
+  };
+  useEffect(() => {
+    addDialog();
+    document.addEventListener('mousedown', clickEvent);
+    return () => {
+      removeDialog();
+      document.removeEventListener('mousedown', clickEvent);
+    }
+  }, [addDialog, removeDialog]);
+  return showModal ? (
+    <div className="dialog-container">
+      <div
+        aria-modal={true}
+        aria-label={title}
+        className={`${className ? className : ""} dialog ${isModal ? "dialog-modal" : ""}`}
+      >
+        <div className="dialog-header">
+          {title && <h2>{title}</h2>}
+          {isClosable && (
+            <Button className={"btn btn-close"} onClick={handleClose}>
+              <FaWindowClose />
+            </Button>
+          )}
+        </div>
+        <div className="dialog-content">{children}</div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+};

package/client/src/Dialog.scss

@@ -1,116 +1,122 @@
-
-.dialog-bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10000;
-  pointer-events: none;
-  background-color: rgba(59, 59, 59, 0.51);
-}
-
-#content .dialog {
-  box-sizing: border-box;
-  filter: opacity(1);
-  pointer-events: all;
-  position: fixed;
-  overflow: visible;
-  z-index: 10000;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #F8F8F8;
-  border: 1px solid #DDDDDD;
-  border-radius: 8px;
-  color: black;
-  width: 90%;
-  max-width: 1024px;
-  min-width: 320px;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
-  text-align: left;
-
-}
-
-.dialog .actions {
-  justify-content: flex-end;
-}
-
-.dark .dialog {
-    background-color: #191919;
-    color: #e3e3e3;
-}
-
-#content .dialog-header {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-start;
-  border: none;
-  border-bottom: 1px solid #E2E2E2;
-  h2 {
-    display: flex;
-    flex: 1;
-    padding: 0;
-    align-items: center;
-    margin: 8px;
-    font-size: 100%;
-    line-height: 208%;
-  }
-  .btn {
-    display: flex;
-    justify-self: flex-end;
-    &.btn-close  {
-      position: absolute;
-      right: 0px;
-      z-index: 100;
-    }
-  }
-}
-
-#ui .dialog-content {
-  padding: 16px;
-  cursor: auto;
-  word-wrap: break-word;
-  max-height: 85vh;
-  overflow-y: auto;
-  .field {
-    margin: 0;
-  }
-}
-table {
-  width: 100%;
-  border: 1px solid #DDDDDD;
-  border-collapse: collapse;
-  td,th {
-    padding: 3px;
-    @media only screen and (min-width: 480px) {
-      padding: 5px;
-    }
-    &.mini {
-      cursor: pointer;
-      min-width: auto;
-      width: 40px;
-    }
-  }
-  thead tr {
-    background-color: #F1F1F1;
-    font-weight: lighter;
-  }
-  tbody tr {
-  }
-  @media only screen and (max-width: 480px){
-    font-size: 80%;
-  }
-}
-.dark table {
-  thead tr {
-    background-color: #191919;
-    color: #e3e3e3;
-  }
-  tbody tr {
-    background-color: #191919;
-  }
-  td,th {
-    border: 1px solid #3f3f3f;
-  }
-}
+
+.dialog-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  pointer-events: none;
+  background-color: rgba(59, 59, 59, 0.51);
+}
+
+.dialog-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none; /* Permet de cliquer "à travers" le conteneur */
+}
+
+#content .dialog {
+  box-sizing: border-box;
+  pointer-events: all;
+  background-color: #F8F8F8;
+  border: 1px solid #DDDDDD;
+  border-radius: 8px;
+  color: black;
+  width: 90%;
+  max-width: 1024px;
+  min-width: 320px;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+  text-align: left;
+
+}
+
+.dialog .actions {
+  justify-content: flex-end;
+}
+
+.dark .dialog {
+    background-color: #191919;
+    color: #e3e3e3;
+}
+
+#content .dialog-header {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-start;
+  border: none;
+  border-bottom: 1px solid #E2E2E2;
+  h2 {
+    display: flex;
+    flex: 1;
+    padding: 0;
+    align-items: center;
+    margin: 8px;
+    font-size: 100%;
+    line-height: 208%;
+  }
+  .btn {
+    display: flex;
+    justify-self: flex-end;
+    &.btn-close  {
+      position: absolute;
+      right: 0px;
+      z-index: 100;
+    }
+  }
+}
+
+#ui .dialog-content {
+  padding: 16px;
+  cursor: auto;
+  word-wrap: break-word;
+  max-height: 85vh;
+  overflow-y: auto;
+  .field {
+    margin: 0;
+  }
+}
+table {
+  width: 100%;
+  border: 1px solid #DDDDDD;
+  border-collapse: collapse;
+  td,th {
+    padding: 3px;
+    @media only screen and (min-width: 480px) {
+      padding: 5px;
+    }
+    &.mini {
+      cursor: pointer;
+      min-width: auto;
+      width: 40px;
+    }
+  }
+  thead tr {
+    background-color: #F1F1F1;
+    font-weight: lighter;
+  }
+  tbody tr {
+  }
+  @media only screen and (max-width: 480px){
+    font-size: 80%;
+  }
+}
+.dark table {
+  thead tr {
+    background-color: #191919;
+    color: #e3e3e3;
+  }
+  tbody tr {
+    background-color: #191919;
+  }
+  td,th {
+    border: 1px solid #3f3f3f;
+  }
+}

package/client/src/DisplayFlexNodeRenderer.jsx

@@ -79,6 +79,7 @@ const CtaNode = ({ node, nodeStyle, dataItem }) => {
 
             if (method !== 'GET' && method !== 'HEAD' && node.requestBodyTemplate) {
                 fetchOptions.body = substituteClientVariables(node.requestBodyTemplate, dataItem);
+                fetchOptions.credentials= "include";
             }
 
             // 3. Exécuter la requête

package/client/src/DocumentationPageLayout.scss

@@ -235,7 +235,7 @@
   }
 }
 
-@media only screen and (min-width: 1024Fpx){
+@media only screen and (min-width: 1024px){
   .documentation-sidebar{
     max-width: 360px; // Largeur fixe pour le menu latéral
   }

package/client/src/FlexBuilderControls.jsx

@@ -30,6 +30,7 @@ const FlexBuilderControls = ({
         ['endpoints', 'GET'], // Clé de requête
         () => fetch('/api/data/search', {
             method: 'POST',
+            credentials: "include",
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
                 model: 'endpoint',