data-primals-engine 1.6.1 → 1.6.2-rc1

package/client/src/DataLayout.jsx

@@ -1,6 +1,6 @@
 import React, {forwardRef, useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react';
 
-import { FaUndo, FaRedo } from 'react-icons/fa';
+import {FaUndo, FaRedo, FaSitemap} from 'react-icons/fa';
 import "./App.scss";
 import {useMutation, useQuery, useQueryClient} from "react-query";
 import ModelCreator from "./ModelCreator.jsx";
@@ -11,7 +11,7 @@ import {Event} from "../../src/events.js";
 
 import {
     FaBook,
-    FaBoxOpen, FaDatabase,
+    FaBoxOpen, FaDatabase, FaProjectDiagram,
     FaEye, FaFileImport,
     FaFilter, FaInfo, FaPlus,
 } from "react-icons/fa";
@@ -46,6 +46,7 @@ import {AssistantChat, NotificationList} from "../index.js";
 import { useCommand } from './contexts/CommandContext.jsx';
 
 import "./DataLayout.scss"
+import WorkflowEditor from "./WorkflowEditor.jsx";
 
 const NotConfiguredPlaceholder = ({ type, onConfigure }) => (
     <div className="p-4 border border-dashed rounded-md mt-4 text-center bg-gray-50">
@@ -57,12 +58,52 @@ const NotConfiguredPlaceholder = ({ type, onConfigure }) => (
     </div>
 );
 
+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',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                model: 'workflow',
+                sort: 'name:asc',limit: 5
+            })
+        }).then(res => res.json()),
+        {
+            select: (data) => data?.data || []
+        }
+    );
+
+    return (
+        <Dialog title={t('workflow.select.title', 'Sélectionner un workflow')} isClosable={true} onClose={onClose}>
+            {isLoading && <p>{t('loading', 'Chargement...')}</p>}
+            {!isLoading && (!activeWorkflows || activeWorkflows.length === 0) && (
+                <p>{t('workflow.select.noActive', 'Aucun workflow actif trouvé.')}</p>
+            )}
+            <ul className="workflow-selector-list">
+                {activeWorkflows?.map(wf => (
+                    <li key={wf._id} onClick={() => onSelectWorkflow(wf._id)}>
+                        <FaSitemap />
+                        <span className="font-bold">{wf.name.value}</span>
+                        <span className="text-sm text-gray-500 ml-2">{wf.description}</span>
+                    </li>
+                ))}
+            </ul>
+        </Dialog>
+    );
+};
+
 function DataLayout({refreshUI}) {
     const [ searchParams, setSearchParams ] = useSearchParams();
     const [viewSettings, setViewSettings] = useLocalStorage('viewSettings', {});
 
     const [isCalendarModalOpen, setCalendarModalOpen] = useState(false);
     const [isKanbanModalOpen, setKanbanModalOpen] = useState(false);
+    const [isWorkflowListModalOpen, setWorkflowListModalOpen] = useState(false);
+
     const [showPackGallery, setShowPackGallery] = useState(false);
     const [checkedItems, setCheckedItems] = useState([])
 
@@ -115,6 +156,11 @@ function DataLayout({refreshUI}) {
     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 ---
+    const workflowToEditId = searchParams.get('edit-workflow');
+
     useEffect(() =>{
         if (selectedModel?.name) {
             nav('/user/' + getUserHash(me) + '/?model=' + selectedModel?.name);
@@ -129,13 +175,6 @@ function DataLayout({refreshUI}) {
         setEditionMode(true);
     }, []);
 
-    useEffect(() =>{
-        const m = models.find(f => f.name === mod);
-        setSelectedModel(m);
-        setEditionMode(!m);
-    }, [mod, models, searchParams])
-
-
     // La vue courante est dérivée du modèle sélectionné et des préférences stockées.
     const currentView = useMemo(() => {
         if (!selectedModel) return 'table';
@@ -247,6 +286,10 @@ function DataLayout({refreshUI}) {
                 return configuredViews.kanban
                     ? <KanbanView settings={currentModelViewSettings.kanban} model={selectedModel} />
                     : <NotConfiguredPlaceholder type="kanban" onConfigure={() => setKanbanModalOpen(true)} />;
+            case 'workflow':
+                return workflowToEditId
+                    ? <WorkflowEditor workflowId={workflowToEditId} />
+                    : <NotConfiguredPlaceholder type="kanban" onConfigure={() => setKanbanModalOpen(true)} />;
             case 'table':
             default:
                 // Le DataTable existant est retourné par défaut
@@ -281,7 +324,7 @@ function DataLayout({refreshUI}) {
         setRelationFilters({});
         setCheckedItems([])
         setFilterValues({});
-        setEditionMode(false);
+
         if (!model) {
             setSelectedModel(null);
             return;
@@ -289,7 +332,9 @@ function DataLayout({refreshUI}) {
 
         // Maintient la vue actuelle si elle est configurée pour le nouveau modèle, sinon revient à la vue "table"
         const modelSettings = viewSettings[model.name] || {};
-        if (currentView === 'calendar' && (!modelSettings.calendar?.titleField || !modelSettings.calendar?.startField || !modelSettings.calendar?.endField)) {
+        if( currentView === 'workflow') {
+            setCurrentView('table')
+        }else if (currentView === 'calendar' && (!modelSettings.calendar?.titleField || !modelSettings.calendar?.startField || !modelSettings.calendar?.endField)) {
             setCurrentView('table');
         } else if (currentView === 'kanban' && !modelSettings.kanban?.groupByField) {
             setCurrentView('table');
@@ -586,7 +631,7 @@ function DataLayout({refreshUI}) {
                     isOpen={isTourOpen}
                     onClose={closeTour}
                 />)}</>
-            <div className="flex actions">
+            <div className="flex mg-1">
 
                 {<ViewSwitcher
                     currentView={currentView}
@@ -594,6 +639,9 @@ function DataLayout({refreshUI}) {
                     configuredViews={configuredViews}
                     onConfigureView={handleConfigureCurrentView}
                 />}
+                <Button onClick={() => setWorkflowListModalOpen(true)} className={currentView === 'workflow' ? 'active' : ''} title={t('views.workflow', 'Workflow')}>
+                    <FaProjectDiagram />
+                </Button>
                 <div className="flex items-center gap-1 p-1 bg-gray-200 rounded-md">
                     <Button onClick={undo} disabled={!canUndo} title={t('btns.undo', 'Annuler')}>
                         <FaUndo />
@@ -604,14 +652,14 @@ function DataLayout({refreshUI}) {
                 </div>
                 <Button onClick={() => {
                     setImportModalVisible(true);
-                }} className="btn tourStep-import-model"><FaFileImport/><Trans
-                    i18nKey="btns.importModels">Modèles</Trans></Button>
+                }} className="btn tourStep-import-model"><FaFileImport/><span className={"no-mobile-text"}> <Trans
+                    i18nKey="btns.importModels">Modèles</Trans></span></Button>
                 <Button onClick={() => {
                     setShowPackGallery(true);
-                }} className="btn tourStep-import-pack"><FaBoxOpen/><Trans
-                    i18nKey="btns.importPacks">Packs</Trans></Button>
-                <Button className={"tourStep-tutorials btn"} onClick={handleShowTutorialMenu} title={t("btns.showTutos")}><FaBookAtlas/><Trans
-                    i18nKey="btns.showTutos">Tutoriels</Trans></Button>
+                }} className="btn tourStep-import-pack"><FaBoxOpen/><span className={"no-mobile-text"}><Trans
+                    i18nKey="btns.importPacks">Packs</Trans></span></Button>
+                <Button className={"tourStep-tutorials btn"} onClick={handleShowTutorialMenu} title={t("btns.showTutos")}><FaBookAtlas/><span className={"no-mobile-text"}><Trans
+                    i18nKey="btns.showTutos">Tutoriels</Trans></span></Button>
 
                 <DialogProvider>
                     {tutorialDialogVisible && (
@@ -619,12 +667,24 @@ function DataLayout({refreshUI}) {
                             <TutorialsMenu />
                         </Dialog>
                     )}
+                    {isWorkflowListModalOpen && (
+                        <WorkflowSelectorModal
+                            onClose={() => setWorkflowListModalOpen(false)}
+                            onSelectWorkflow={(id) => {
+                                nav(`?edit-workflow=${id}`);
+                                setEditionMode(false)
+                                mainPartRef.current.scrollIntoView();
+                                setCurrentView('workflow'); // Ajout pour forcer le changement de vue
+                                setWorkflowListModalOpen(false);
+                            }}
+                        />
+                    )}
                 </DialogProvider>
                 <Button className="btn" onClick={() => {
                     setAPIInfoVisible(true);
                     setDataEditorVisible(false);
                     setEditionMode(false);
-                }}><FaBook/> {t('btns.api', 'API')}</Button>
+                }}><FaBook/><span className={"no-mobile-text"}>{t('btns.api', 'API')}</span></Button>
             </div>
 
             <div className="datalayout flex flex-start">
@@ -655,6 +715,7 @@ function DataLayout({refreshUI}) {
                     setDataEditorVisible(false);
                     setAPIInfoVisible(false);
                     setEditionMode(true);
+
                     mainPartRef.current.scrollIntoView({behavior: 'smooth'});
                     gtag("event", "select_content", {
                         content_type: "edit_model",
@@ -684,6 +745,10 @@ function DataLayout({refreshUI}) {
                         handleModelSelect(model);
                     }}/>)}
 
+                {/* --- AJOUT : Affichage conditionnel de l'éditeur de workflow --- */}
+                {workflowToEditId && (
+                    <WorkflowEditor workflowId={workflowToEditId} />
+                )}
             <div className="hidden-anchor" ref={mainPartRef}></div>
 
                 {showDataEditor && (<DataEditor
@@ -700,7 +765,7 @@ function DataLayout({refreshUI}) {
 
 
                 {selectedModel && showAPIInfo && <APIInfo/>}
-                {selectedModel && !showAPIInfo && !generatedModels.some(g => g.name === selectedModel?.name) && (<div className="datas">
+                {selectedModel && !showAPIInfo && !workflowToEditId && !generatedModels.find(g => g.name === selectedModel?.name) && (<div className="datas">
 
                     <h2 className={"field-bg p-2"}>{t(`model_${selectedModel?.name}`, selectedModel?.name)} <>({countByModel?.[selectedModel?.name]})</></h2>
 

package/client/src/DataLayout.scss

@@ -1,14 +1,40 @@
 
 
 /* website*/
-#content .datalayout {
+.datalayout {
   padding: 0;
 
-  h1 {
-    margin: 24px 8px;
-  }
+}
+
+.workflow-selector-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 
-  h2 {
-    margin: 20px 4px 0 4px;
+  li {
+    padding: 12px 15px;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
   }
+}
+
+.properties-panel {
+  position: relative; /* Nécessaire pour positionner le resizer */
+}
+
+.resizer {
+  width: 5px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: col-resize;
 }

package/client/src/DataTable.jsx

@@ -3,8 +3,8 @@ import {useModelContext} from "./contexts/ModelContext.jsx";
 import {Trans, useTranslation} from "react-i18next";
 import {useMutation, useQuery, useQueryClient} from "react-query";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
-import React, {useEffect, useMemo, useRef, useState} from "react";
-import {getUserId} from "../../src/data.js";
+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";
 
@@ -43,7 +43,7 @@ import RelationValue from "./RelationValue.jsx";
 import {FaGear, FaPencil, FaTriangleExclamation} from "react-icons/fa6";
 import RestoreConfirmationModal from "./RestoreConfirmationModal.jsx";
 import {event_trigger, isLightColor} from "../../src/core.js";
-import {Tooltip} from "react-tooltip";
+import {Tooltip} from "react-tooltip"; 
 import ExportDialog from "./ExportDialog.jsx";
 import Captions from "yet-another-react-lightbox/plugins/captions";
 import {Zoom} from "yet-another-react-lightbox/plugins";
@@ -59,7 +59,9 @@ import {isConditionMet} from "../../src/filter";
 import {DataImporter} from "./DataImporter.jsx";
 import {HistoryDialog} from "./HistoryDialog.jsx";
 import { useCommand } from './contexts/CommandContext.jsx';
-import {Config} from "../../src/config.js";
+import {Config} from "../../src/config.js"; 
+import {useNavigate} from "react-router-dom";
+import {NavLink} from "react-router";
 
 const Header = ({
                     reversed = false,
@@ -261,7 +263,7 @@ export function DataTable({
                               filterValues,
                               setFilterValues = () => {},
                               data: propData,
-                              advanced= true, selectionMode= false, deleteApiCall, queryClient
+                              advanced= true, selectionMode= false, deleteApiCall
                           }) {
     const {
         models,
@@ -279,6 +281,7 @@ export function DataTable({
     const {me} = useAuthContext();
     const { execute, DeleteCommand } = useCommand();
 
+    const queryClient = useQueryClient();
     // Si des données sont passées en props, on les utilise, sinon on prend celles du contexte.
     const data = propData || paginatedDataByModel[model?.name] || [];
 
@@ -438,15 +441,12 @@ export function DataTable({
         onDuplicateData(dataToDuplicate);
     };
 
+    const nav = useNavigate();
+
     const desc = t(`model_description_${selectedModel?.name}`, selectedModel?.description || '');
     return (
         <div className={`datatable${filterActive ? ' filter-active' : ''}`}>
-            {advanced && !selectionMode && <div className="flex actions">
-                {t(`model_${selectedModel?.name}`, selectedModel?.name) !== selectedModel?.name && (
-                    <span className="badge"><strong>model</strong> : {selectedModel?.name}</span>)}
-                {selectedModel.name === 'dashboard' && <Button className={"btn"} onClick={() => {
-                    nav('/user/'+getUserHash(me)+'/dashboards');
-                }}><FaEye /> Tableaux de bord</Button> }
+            {advanced && !selectionMode && <div className="flex">
                 {desc && <p className="model-desc hint">{desc}</p>}
                 <Button onClick={handleImport} title={t("btns.import")}><FaFileImport/><Trans
                     i18nKey="btns.import">Importer</Trans></Button>
@@ -736,6 +736,13 @@ export function DataTable({
                                         >
                                             <FaHistory />
                                         </button>)}
+                                        {/* AJOUT : Bouton pour ouvrir l'éditeur de workflow */}
+                                        {model.name === 'workflow' && (
+                                            <NavLink to={`?edit-workflow=${item._id}`} className="datatable-action-btn workflow-edit"
+                                                     data-tooltip-id="tooltipActions" data-tooltip-content={t('workflow.editor.title', "Éditeur de Workflow")}>
+                                                <FaGear />
+                                            </NavLink>
+                                        )}
 
                                         <button data-tooltip-id="tooltipActions"
                                                 data-tooltip-content={t('btns.delete', 'Supprimer')}