data-primals-engine 1.1.3 → 1.1.5

package/client/src/DataTable.jsx

@@ -4,18 +4,18 @@ 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 "data-primals-engine/data";
+import {getUserId} from "../../src/data.js";
 import cronstrue from 'cronstrue/i18n';
 import {
     FaBook,
     FaCopy,
-    FaDatabase,
+    FaDatabase, FaEraser,
     FaFileExport,
     FaFileImport,
     FaFilter,
     FaInfo,
     FaPlus,
-    FaTrash
+    FaTrash, FaWrench
 } from "react-icons/fa";
 import {useNotificationContext} from "./NotificationProvider.jsx";
 import {
@@ -24,7 +24,7 @@ import {
     maxBytesPerSecondThrottleData,
     maxFileSize,
     maxRequestData
-} from "data-primals-engine/constants";
+} from "../../src/constants.js";
 import Button from "./Button.jsx";
 import {Dialog, DialogProvider} from "./Dialog.jsx";
 import {
@@ -38,9 +38,9 @@ import {
     TextField
 } from "./Field.jsx";
 import RelationValue from "./RelationValue.jsx";
-import {FaPencil, FaTriangleExclamation} from "react-icons/fa6";
+import {FaGear, FaPencil, FaTriangleExclamation} from "react-icons/fa6";
 import RestoreConfirmationModal from "./RestoreConfirmationModal.jsx";
-import {event_trigger, isLightColor} from "data-primals-engine/core";
+import {event_trigger, isLightColor} from "../../src/core.js";
 import {isConditionMet} from "./DataEditor.jsx";
 import {Tooltip} from "react-tooltip";
 import ExportDialog from "./ExportDialog.jsx";
@@ -54,6 +54,8 @@ import TutorialsMenu from "../src/TutorialsMenu.jsx";
 import {useTutorials} from "./hooks/useTutorials.jsx";
 import PackGallery from "./PackGallery.jsx";
 import {HiddenableCell} from "./HiddenableCell.jsx";
+import ConditionBuilder from "./ConditionBuilder.jsx";
+import {pagedFilterToMongoConds} from "./filter.js";
 
 // Ajoutez cette constante pour la clé de sessionStorage
 const SESSION_STORAGE_IMPORT_JOBS_KEY = 'activeImportJobs';
@@ -71,19 +73,29 @@ const Header = ({
                     filterValues
                 }) => {
 
+    const {t} = useTranslation()
     const { me } = useAuthContext()
     const {
         models,
         countByModel,
         selectedModel,
         setPagedFilters,
+        pagedFilters,
         page
     } = useModelContext();
     let totalCol = 0;
+
+    const [advancedFilterVisible, setAdvancedFilterVisible] = useState(false);
+
+    const handleAdvancedFilter = () => {
+        setAdvancedFilterVisible(true);
+    }
     return <><tr className={reversed ? ' reversed' : ''}>
         <th className={"mini"}>
             <div className="flex flex-row">
+
                 <Button onClick={handleFilter} className={filterActive ? ' active' : ''}><FaFilter/></Button>
+                {filterActive && <Button onClick={() => handleAdvancedFilter()}><FaWrench /></Button>}
                 <CheckboxField checked={checkedItems.length === data.length} onChange={e => {
                     if (checkedItems.length === data.length) {
                         setCheckedItems([]);
@@ -91,6 +103,27 @@ const Header = ({
                         setCheckedItems(data);
                     }
                 }}/>
+
+                <DialogProvider>
+                    {advancedFilterVisible && (
+                        <Dialog title={t("datatable.advancedFilter.title")} isClosable={true} onClose={() => setAdvancedFilterVisible(false)}>
+                            <h3>Edit filter</h3>
+                            <div className="msg">
+                                <Trans i18nKey={"datatable.advancedFilter.desc"}>{t("datatable.advancedFilter.desc")}</Trans>
+                            </div>
+                            <ConditionBuilder onChange={(c) => {
+                                setPagedFilters(pagedFilters => ({
+                                    ...pagedFilters,
+                                    [model.name]: c || pagedFilters[model.name] || {} }));
+                            }} initialValue={{ $and: pagedFilterToMongoConds(pagedFilters, model)}} models={models} model={model.name} checkedItems={checkedItems} setCheckedItems={setCheckedItems} data={data} filterActive={filterActive} onChangeFilterValue={onChangeFilterValue} setFilterValues={setFilterValues}/>
+                            <Button onClick={() =>{
+                                setPagedFilters(pagedFilters => ({
+                                    ...pagedFilters,
+                                    [model.name]: {}}));
+                            }}><Trans i18nKey={"btns.reset"}>Reset</Trans></Button>
+                        </Dialog>
+                    )}
+                </DialogProvider>
             </div>
         </th>
         {model.fields.map(field => {
@@ -114,11 +147,12 @@ const Header = ({
                                 onChangeFilterValue={onChangeFilterValue}/>;
         })}
         <th><Trans i18nKey="actions">Actions</Trans>
-            {filterActive && <div>
+            {Object.keys(pagedFilters[model.name] || {})
+                .filter(f=> Object.keys(pagedFilters[model.name]?.[f] || {}).length > 0).length > 0  && <div>
                 <button onClick={() => {
                     setFilterValues({});
                     setPagedFilters(pagedFilters => ({...pagedFilters, [model.name]: {}}));
-                }}>x
+                }}><FaEraser />
                 </button>
             </div>}</th>
     </tr>
@@ -137,6 +171,7 @@ export function DataTable({
                               setCheckedItems,
                               onEdit,
                               onAddData,
+                              onDuplicateData,
                               onDelete,
                               onShowAPI,
                               filterValues,
@@ -229,7 +264,7 @@ export function DataTable({
 
     const onChangeFilterValue = (field, value, tr) => {
         setPagedFilters(pagedFilters => ({
-            [model.name]: {...pagedFilters[model.name] || {}, [field.name]: value || undefined}
+            ...pagedFilters, [model.name]: {...pagedFilters[model.name] || {}, [field.name]: value || pagedFilters[model.name]?.[field.name] || undefined}
         }));
         queryClient.invalidateQueries(['api/data', model.name, 'page', page, elementsPerPage, pagedFilters[model.name], pagedSort[model.name]]);
     }
@@ -344,6 +379,22 @@ export function DataTable({
     if (!model)
         return <></>;
 
+    // NOUVEAU : La fonction qui gère la duplication
+    const handleDuplicate = (originalData) => {
+        // 1. Créer une copie superficielle des données de la ligne
+        const dataToDuplicate = { ...originalData };
+
+        // 2. TRÈS IMPORTANT : Supprimer les champs qui ne doivent pas être copiés.
+        //    - L'_id doit être supprimé pour que le système sache qu'il s'agit d'une NOUVELLE entrée.
+        //    - Le _hash sera recalculé par le backend.
+        //    - Les dates de création/mise à jour seront gérées par le backend.
+        delete dataToDuplicate._id;
+        delete dataToDuplicate._hash;
+        delete dataToDuplicate.createdAt; // si ce champ existe
+        delete dataToDuplicate.updatedAt; // si ce champ existe
+
+        onDuplicateData(dataToDuplicate);
+    };
     return (
         <div className={`datatable${filterActive ? ' filter-active' : ''}`}>
             {<div className="flex actions flex-left">
@@ -356,7 +407,7 @@ export function DataTable({
                 <Button className="tourStep-import-datapack" onClick={handleShowPacks} title={t("btns.addPack")}><FaPlus/><Trans
                     i18nKey="btns.addPack">Packs...</Trans></Button>
 
-                <Button className={/^demo[0-9]{1,2}$/.test(me.username) ? "btn-primary" : "btn"} onClick={handleShowTutorialMenu} title={t("btns.showTutos")}><FaPlus/><Trans
+                <Button className={"tourStep-tutorials " + (/^demo[0-9]{1,2}$/.test(me.username) ? "btn-primary" : "btn")} onClick={handleShowTutorialMenu} title={t("btns.showTutos")}><FaPlus/><Trans
                     i18nKey="btns.showTutos">Tutoriels</Trans></Button>
                 {!/^demo[0-9]{1,2}$/.test(me.username) && (<Button onClick={handleBackup} title={t("btns.backup")}><FaDatabase/><Trans
                     i18nKey="btns.backup">Backup</Trans></Button>)}
@@ -373,6 +424,7 @@ export function DataTable({
             </div>}
             <div className="table-wrapper">
                 <Tooltip id={"tooltipFile"} clickable={true} />
+                <Tooltip id={"tooltipActions"} />
                 <Lightbox
                     inline={{
                         style: { width: "100%", maxWidth: "900px", aspectRatio: "3 / 2" },
@@ -591,8 +643,19 @@ export function DataTable({
                                             {hiddenable(item[field.name])}</td>;
                                     })}
                                     <td>
-                                        <button onClick={() => handleEdit(item)}><FaPencil/></button>
-                                        <button onClick={() => handleDelete(item)}><FaTrash/></button>
+                                        <button data-tooltip-id="tooltipActions"
+                                                data-tooltip-content={t('btns.edit', 'Modifier')}
+                                                onClick={() => handleEdit(item)}><FaPencil/></button>
+                                        <button
+                                            onClick={() => handleDuplicate(item)}
+                                            data-tooltip-id="tooltipActions"
+                                            data-tooltip-content={t('btns.duplicate', 'Dupliquer')}
+                                        >
+                                            <FaCopy/>
+                                        </button>
+                                        <button data-tooltip-id="tooltipActions"
+                                                data-tooltip-content={t('btns.delete', 'Supprimer')}
+                                                onClick={() => handleDelete(item)}><FaTrash/></button>
                                     </td>
                                 </tr>
                             </DialogProvider></>
@@ -600,7 +663,11 @@ export function DataTable({
                         </tbody>
 
                         <tfoot>
-                        {data.length > 10 && (<Header reversed={true} model={model} setCheckedItems={setCheckedItems} filterValues={filterValues} data={data} setFilterValues={setFilterValues} onChangeFilterValue={onChangeFilterValue} checkedItems={checkedItems} filterActive={filterActive} handleFilter={handleFilter}/>)}
+                        {data.length > 10 && (<Header reversed={true} model={model} setCheckedItems={setCheckedItems}
+                                                      filterValues={filterValues} data={data}
+                                                      setFilterValues={setFilterValues}
+                                                      onChangeFilterValue={onChangeFilterValue}
+                                                      checkedItems={checkedItems} filterActive={filterActive} handleFilter={handleFilter}/>)}
                         </tfoot>
 
                     </table>)}

package/client/src/Dialog.scss

@@ -64,6 +64,7 @@
     &.btn-close  {
       position: absolute;
       right: 0px;
+      z-index: 100;
     }
   }
 }

package/client/src/DisplayFlexNodeRenderer.jsx

@@ -1,9 +1,9 @@
 // C:/Dev/hackersonline-engine/client/src/DisplayFlexNodeRenderer.jsx
 import {useTranslation} from "react-i18next";
-import {cssProps} from "data-primals-engine/core";
+import {cssProps} from "../../src/core.js";
 import FlexDataRenderer from "./FlexDataRenderer.jsx";
 import React, {useState} from "react";
-import {getFieldPathValue} from "data-primals-engine/data";
+import {getFieldPathValue} from "../../src/data.js";
 import {getFieldDefinitionFromPath} from "./core/data.js";
 import {Dialog, DialogProvider} from "./Dialog.jsx";
 import {FaPlay} from "react-icons/fa";

package/client/src/Field.jsx

@@ -11,8 +11,8 @@ import { recursiveMap, useRefs } from "./Utils.jsx";
 import {useTranslation} from "react-i18next";
 import { CodeiumEditor } from "@codeium/react-code-editor";
 
-import {debounce, escapeRegExp, isGUID, isLightColor} from "data-primals-engine/core";
-import {mainFieldsTypes, maxFileSize} from "data-primals-engine/constants";
+import {debounce, escapeRegExp, isGUID, isLightColor} from "../../src/core.js";
+import {mainFieldsTypes, maxFileSize} from "../../src/constants.js";
 import {useModelContext} from "./contexts/ModelContext.jsx";
 import {useQueryClient} from "react-query";
 import {

package/client/src/FlexBuilder.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import './FlexBuilder.scss';
 import { useAuthContext } from "./contexts/AuthContext.jsx";
 import { useTranslation } from "react-i18next";
-import { applyFilter } from "data-primals-engine/data";
+import { applyFilter } from "../../src/data.js";
 import { FieldSelectorModal } from "./FlexNode.jsx";
 import { deepInsertNode, deepRemoveNode } from "./FlexBuilderUtils.js";
 import useDragAndDrop from './hooks/useDragAndDrop.js';

package/client/src/KPIWidget.jsx

@@ -3,7 +3,7 @@ import { useQuery } from 'react-query';
 import * as FaIcons from 'react-icons/fa'; // Importer toutes les icônes Fa
 import * as Fa6Icons from 'react-icons/fa6'; // Importer Fa6
 import { FaInfo, FaTimes } from 'react-icons/fa';
-import { isLightColor } from "data-primals-engine/core"; // Pour le bouton supprimer
+import { isLightColor } from "../../src/core.js"; // Pour le bouton supprimer
 import { Tooltip } from 'react-tooltip';
 
 // Fonction pour récupérer la valeur calculée d'un KPI (MODIFIÉE)

package/client/src/KanbanCard.jsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import {useTranslation} from "react-i18next";
 import {useModelContext} from "./contexts/ModelContext.jsx";
-import {getDataAsString} from "data-primals-engine/data";
+import {getDataAsString} from "../../src/data.js";
 
 
 const KanbanCard = ({ card, model, subItemsField }) => {

package/client/src/ModelCreator.jsx

@@ -14,15 +14,15 @@ import {
     mainFieldsTypes, maxFileSize,
     maxModelNameLength,
     maxRequestData
-} from "data-primals-engine/constants";
+} from "../../src/constants.js";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
-import {getUserHash, getUserId, isLocalUser} from "data-primals-engine/data";
+import {getUserHash, getUserId, isLocalUser} from "../../src/data.js";
 import {useNotificationContext} from "./NotificationProvider.jsx";
 import ConditionBuilder from './ConditionBuilder.jsx';
 import './ConditionBuilder.scss';
 import {Tooltip} from "react-tooltip";
 import {FaCircleInfo} from "react-icons/fa6";
-import i18n from "data-primals-engine/i18n";
+import i18n from "../../src/i18n.js";
 import Draggable from "./Draggable.jsx";
 import FlexBuilder from "./FlexBuilder.jsx";
 import {NavLink} from "react-router";

package/client/src/ModelCreatorField.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 import {useModelContext} from "./contexts/ModelContext.jsx";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
-import {isLocalUser} from "data-primals-engine/data";
+import {isLocalUser} from "../../src/data.js";
 import {Trans, useTranslation} from "react-i18next";
 import {FaCircleInfo} from "react-icons/fa6";
 import {CheckboxField, CodeField, ColorField, NumberField, SelectField, TextField} from "./Field.jsx";
@@ -10,7 +10,7 @@ import {FaArrowDown, FaArrowUp, FaEdit, FaMinus, FaPlus, FaTrash} from "react-ic
 import CalculationBuilder from "./CalculationBuilder.jsx";
 import ConditionBuilder from "./ConditionBuilder.jsx";
 import Draggable from "./Draggable.jsx";
-import {mainFieldsTypes} from "data-primals-engine/constants";
+import {mainFieldsTypes} from "../../src/constants.js";
 
 function RelationModelSelector({relation, onChange, ...rest}) {
     const {models} = useModelContext()

package/client/src/ModelImporter.jsx

@@ -7,7 +7,7 @@ import { CheckboxField } from './Field.jsx';
 import Button from './Button.jsx';
 import { useQueryClient } from 'react-query';
 import { useNotificationContext } from './NotificationProvider.jsx';
-import {metaModels} from "data-primals-engine/constants";
+import {metaModels} from "../../src/constants.js";
 
 
 const ModelImporter = ({ onImport }) => {

package/client/src/PackGallery.jsx

@@ -7,7 +7,7 @@ import { useNotificationContext } from './NotificationProvider.jsx';
 import { useModelContext } from './contexts/ModelContext.jsx';
 
 import './PackGallery.scss';
-import {elementsPerPage} from "data-primals-engine/constants";
+import {elementsPerPage} from "../../src/constants.js";
 
 // --- API Fetching Functions ---
 const fetchPacks = async (sortBy, lang) => {

package/client/src/RTETrans.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { RTE } from './RTE.jsx';
 import {useModelContext} from "./contexts/ModelContext.jsx";
 import {useQuery} from "react-query";
-import {getUserId} from "data-primals-engine/data";
+import {getUserId} from "../../src/data.js";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
 
 const RTETrans = ({ value, onChange, field }) => {

package/client/src/RelationField.jsx

@@ -6,7 +6,7 @@ import { useAuthContext } from './contexts/AuthContext.jsx';
 import {conditionToApiSearchFilter, getDataAsString, getUserId} from 'data-primals-engine/data';
 import { FaEdit, FaTrash } from 'react-icons/fa';
 import Button from './Button.jsx';
-import {mainFieldsTypes} from "data-primals-engine/constants";
+import {mainFieldsTypes} from "../../src/constants.js";
 import Draggable from "./Draggable.jsx";
 import {useTranslation} from "react-i18next";
 

package/client/src/RelationValue.jsx

@@ -8,7 +8,7 @@ import {FaMagnifyingGlass} from "react-icons/fa6";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
 import {CodeField, ColorField} from "./Field.jsx";
 import { randomColor } from "randomcolor";
-import {getObjectHash, getRand, isLightColor, setSeed} from "data-primals-engine/core";
+import {getObjectHash, getRand, isLightColor, setSeed} from "../../src/core.js";
 
 const RelationValue = ({ field, data, align }) => {
     const { models, relations, setRelations, dataByModel, relationIds, setRelationIds, setDatasToLoad, datasToLoad } = useModelContext();

package/client/src/TourSpotlight.jsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import './TourSpotlight.scss';
 import { useUI } from "./contexts/UIContext.jsx";
 import useLocalStorage from "./hooks/useLocalStorage.js";
+import {waitForElement} from "./core/dom.js";
 
 function debounce(func, wait) {
     let timeout;
@@ -39,27 +40,30 @@ function TourSpotlight({ name, steps = [], isOpen, onComplete, onClose, initialS
         }
     }, [isOpen, initialStepIndex]);
 
-    const calculateRectAndScroll = useCallback(() => {
+    const calculateRectAndScroll = useCallback( () => {
         if (!isOpen || !currentStep?.selector) {
             setTargetRect(null);
             return;
         }
 
-        const element = document.querySelector(currentStep.selector);
-        if (element) {
-            const rect = element.getBoundingClientRect();
-            if (!targetRect || rect.top !== targetRect.top || rect.left !== targetRect.left || rect.width !== targetRect.width || rect.height !== targetRect.height) {
-                setTargetRect(rect);
+        waitForElement(currentStep.selector).then(element => {
+            if (element) {
+                const rect = element.getBoundingClientRect();
+                if (!targetRect || rect.top !== targetRect.top || rect.left !== targetRect.left || rect.width !== targetRect.width || rect.height !== targetRect.height) {
+                    setTargetRect(rect);
+                }
+            } else {
+                console.warn(`[TourSpotlight] Élément cible non trouvé : ${currentStep.selector}`);
+                setTargetRect(null);
             }
-        } else {
-            console.warn(`[TourSpotlight] Élément cible non trouvé : ${currentStep.selector}`);
-            setTargetRect(null);
-        }
+        });
     }, [isOpen, currentStep?.selector, targetRect]);
 
     useEffect(() => {
         if (!isOpen || !name) return;
 
+
+        console.log({currentStep})
         if (!currentStep?.selector) {
             console.warn(`[TourSpotlight] Élément cible non défini pour le tour ${name}`);
             return;

package/client/src/TutorialsMenu.scss

@@ -35,7 +35,6 @@ $color-completed-accent: #28a745; // Vert plus vif
   .tutorial-item {
     background-color: $color-item-bg;
     border: 1px solid $color-border;
-    z-index: -1;
     border-radius: 12px; // Coins plus arrondis pour un look moderne
     box-shadow: 0 4px 12px $color-shadow;
     padding: 1.5rem;

package/client/src/Webpage.jsx

@@ -5,10 +5,10 @@ import {useQuery} from "react-query";
 import {useLocation} from "react-router-dom";
 import {Helmet} from "react-helmet";
 import {useTranslation} from "react-i18next";
-import {getObjectHash} from "data-primals-engine/core";
+import {getObjectHash} from "../../src/core.js";
 import {useData} from "./hooks/data.js";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
-import {getUserHash, getUserId} from "data-primals-engine/data";
+import {getUserHash, getUserId} from "../../src/data.js";
 
 
 function Webpage({children}) {

package/client/src/constants.js

@@ -1,3 +1,4 @@
+import {host} from "../../src/constants.js";
 
 export const seoTitle = 'Self Data Hosting';
 
@@ -52,7 +53,7 @@ export const MONGO_OPERATORS = {
 export const profiles = {
     'personal': ['contact', 'location', 'imageGallery', 'budget', 'currency', 'taxonomy'], // budget,
     'developer': ['alert','endpoint','request','webpage', 'content', 'taxonomy', 'resource', 'translation', 'contact', 'location', 'channel', 'lang', 'token', 'message', 'ticket', 'user', 'permission', 'role'],
-    'company': ['alert','request','location', 'campaign', 'order', 'currency', 'product', 'cart', 'cartItem', 'invoice', 'messaging', 'user', 'role', 'permission', 'token','translation', 'lang', 'webpage', 'content', 'taxonomy', 'contact', 'resource', 'accountingExercise', 'accountingLineItem', 'accountingEntry', 'employee', 'kpi', 'dashboard'],
+    'company': ['alert','request','location', 'campaign', 'order', 'currency', 'product', 'cart', 'cartItem', 'invoice', 'message', 'user', 'role', 'permission', 'token','translation', 'lang', 'webpage', 'content', 'taxonomy', 'contact', 'resource', 'accountingExercise', 'accountingLineItem', 'accountingEntry', 'employee', 'kpi', 'dashboard'],
     'engineer': ['alert','endpoint','request','dashboard', 'kpi', 'user', 'role', 'token', 'permission', 'workflow', 'workflowRun', 'workflowStep', "channel", "message", 'workflowAction', 'workflowTrigger']
 }
 

package/client/src/contexts/ModelContext.jsx

@@ -1,19 +1,19 @@
 // ModelContext.jsx
 import React, {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import { useQueries, useQuery } from 'react-query';
-import {elementsPerPage} from "data-primals-engine/constants";
-import {getObjectHash} from "data-primals-engine/core";
+import {getObjectHash} from "../../../src/core.js";
 import {useAuthContext} from "./AuthContext.jsx";
-import {getUserHash, getUserId} from "data-primals-engine/data";
+import {getUserHash, getUserId} from "../../../src/data.js";
 import {useTranslation} from "react-i18next";
 import useLocalStorage from "../hooks/useLocalStorage.js";
+import {pagedFilterToMongoConds} from "../filter.js";
 
 const ModelContext = createContext(null);
 
 export const ModelProvider = ({ children }) => {
     const [models, setModels] = useState([]);
     const [datasToLoad, setDatasToLoad] = useState([]);
-    const [pagedFilters,setPagedFilters] = useState({});
+    const [pagedFilters,setPagedFilters] = useLocalStorage('paged_filters', {});
     const [pagedDepth,setPagedDepth] = useState({});
     const [filteredDatasToLoad, setFilteredDatasToLoad] = useState([]);
     const [onSuccessCallbacks, setOnSuccessCallbacks] = useState({});
@@ -189,13 +189,7 @@ export const ModelProvider = ({ children }) => {
                 if( sortParam.length )
                     params.append("sort", sortParam.join(','));
 
-                const c = [];
-                Object.keys(pagedFilters[model.name] || {}).filter(f=>typeof(pagedFilters[model.name][f]) === 'object' && Object.keys(pagedFilters[model.name][f]).length > 0).forEach(obj =>{
-                    const f = model.fields.find(f=>f.name===obj);
-                    if(f !== null && f !== undefined){
-                            c.push(pagedFilters[model.name][obj]);
-                    }
-                });
+                const c = pagedFilterToMongoConds(pagedFilters, model)
                 const filter= JSON.stringify({filter:{$and:c}});
 
                 return fetch(`/api/data/search?${params.toString()}`, { signal, method: 'POST', body: filter, headers: { "Content-Type": "application/json"}})

package/client/src/core/dom.js

@@ -0,0 +1,26 @@
+/**
+ * Waits for an element to appear in the DOM.
+ * @param {string} selector - The CSS selector of the element.
+ * @param {number} timeout - The maximum time to wait in milliseconds.
+ * @returns {Promise<Element>} A promise that resolves with the element or rejects on timeout.
+ */
+export function waitForElement(selector, timeout = 2000) {
+    return new Promise((resolve, reject) => {
+        const intervalTime = 100; // Check every 100ms
+        let elapsedTime = 0;
+
+        const interval = setInterval(() => {
+            const element = document.querySelector(selector);
+            if (element) {
+                clearInterval(interval);
+                resolve(element);
+            } else {
+                elapsedTime += intervalTime;
+                if (elapsedTime >= timeout) {
+                    clearInterval(interval);
+                    reject(new Error(`Element "${selector}" not found after ${timeout}ms`));
+                }
+            }
+        }, intervalTime);
+    });
+}

package/client/src/filter.js

@@ -7,6 +7,12 @@ export const MONGO_CALC_OPERATORS = {
         multi: false,
         isFindOperator: true // Nouvelle propriété pour identifier les opérateurs $find
     },
+    '$regexMatch': {
+        label: 'Find by regex',
+        description: 'Find a string matching a regular expression (Ecmascript)',
+        args: 2, // input et regex
+        specialStructure: true // Indique une structure spéciale
+    },
     $and: { label: 'Et (and)', description: 'Renvoie vrai si toutes les conditions sont vérifiées', args: 1, multi: true },
     $or: { label: 'Ou (or)', description: 'Renvoie vrai si au moins une des conditions est vérifiée.', args: 1, multi: true },
     $not: { label: 'Non (not)', description: 'Inverse la condition (ex: non égal à).', args: 1, multi: true },
@@ -57,7 +63,7 @@ export const MONGO_CALC_OPERATORS = {
     $toBool: { label: 'toBool', multi: false, converter: true },
     $toString: { label: 'toString', multi: false, converter: true },
     $toInt: { label: 'toInt', multi: false, converter: true },
-    $toDouble: { label: 'toDouble', multi: false, converter: true },
+    $toDouble: { label: 'toDouble', multi: false, converter: true }
 };
 
 export const convertInputValue = (value) => {
@@ -219,4 +225,37 @@ export const buildRootFromExpr = (query) => {
     if (parsedRoot.$and || parsedRoot.$or) return parsedRoot;
 
     return { $and: [parsedRoot] };
+};
+
+export const pagedFilterToMongoConds = (pagedFilters, model) => {
+    const modelFilter = pagedFilters?.[model.name] || {};
+    const filterKeys = Object.keys(modelFilter);
+
+    // Si le filtre est vide, on retourne un tableau vide.
+    if (filterKeys.length === 0) {
+        return [];
+    }
+
+    // Détecte si c'est un filtre avancé (contient des opérateurs logiques de haut niveau comme $and, $or, etc.)
+    const isAdvancedFilter = filterKeys.some(key => key.startsWith('$'));
+
+    if (isAdvancedFilter) {
+        // C'est un filtre avancé du ConditionBuilder.
+        // Il est déjà une condition MongoDB complète. On le met dans un tableau pour l'insérer dans le $and global.
+        // Si le filtre avancé est vide (ex: { $and: [] }), on le retourne quand même pour que le ConditionBuilder puisse s'initialiser correctement.
+        return [modelFilter];
+    } else {
+        // C'est un filtre simple (par colonne).
+        // On transforme { champ1: cond1, champ2: cond2 } en [{ champ1: cond1 }, { champ2: cond2 }]
+        const c = [];
+        filterKeys.forEach(fieldName => {
+            if (model.fields.some(f => f.name === fieldName)) {
+                const condition = modelFilter[fieldName];
+                if (condition && typeof condition === 'object' && Object.keys(condition).length > 0) {
+                    c.push(condition);
+                }
+            }
+        });
+        return c;
+    }
 };

package/client/src/hooks/data.js

@@ -1,7 +1,7 @@
 import {useQuery} from "react-query";
 import {getObjectHash} from "data-primals-engine/core";
 import {useAuthContext} from "../contexts/AuthContext.jsx";
-import {getUserHash, getUserId} from "data-primals-engine/data";
+import {getUserHash, getUserId} from "../../../src/data";
 import {useTranslation} from "react-i18next";
 import {useEffect, useState} from "react";
 import {useUI} from "../contexts/UIContext.jsx";

package/client/src/hooks/useTutorials.jsx

@@ -6,7 +6,7 @@ import { tutorialsConfig } from '../tutorials.js';
 import { useTranslation } from 'react-i18next';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import useLocalStorage from "./useLocalStorage.js";
-import { event_off, event_on } from "data-primals-engine/core";
+import { event_off, event_on } from "../../../src/core.js";
 
 /**
  * Hook pour gérer la logique des tutoriels multi-étapes.