data-primals-engine 1.1.4 → 1.1.6

package/client/package.json

@@ -51,8 +51,7 @@
     "date-fns": "^4.1.0",
     "express-rate-limit": "^7.5.1",
     "lowlight": "^3.3.0",
-    "uniqid": "^5.4.0",
-    "data-primals-engine": "^1.0.11"
+    "uniqid": "^5.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

package/client/src/App.jsx

@@ -53,10 +53,10 @@ import {Helmet} from "react-helmet";
 import {useCookies, CookiesProvider} from "react-cookie";
 
 import { translations as allTranslations} from "../../src/i18n.js";
-import {getRandom} from "../../src/core.js";
+import {getBrowserRandom, getRandom} from "../../src/core.js";
 import {getUserHash} from "../../src/data.js";
 import {seoTitle} from "./constants.js";
-import {host} from "../../src/constants.js";
+import {host, useAI} from "../../src/constants.js";
 import i18next from "i18next";
 import {websiteTranslations} from "./translations.js";
 
@@ -138,8 +138,8 @@ function Layout ({header, translationMutation, routes, body, footer}) {
                 const availableKeys = response.data;
 
                 const newConfig = {
-                    openai: availableKeys.find(key => key.name === 'OPENAI_API_KEY')?.value,
-                    google: availableKeys.find(key => key.name === 'GOOGLE_API_KEY')?.value
+                    openai: availableKeys.find(key => key.name === 'OPENAI_API_KEY')?.value || (useAI ? process.env.OPENAI_API_KEY : undefined),
+                    google: availableKeys.find(key => key.name === 'GOOGLE_API_KEY')?.value || (useAI ? process.env.GOOGLE_API_KEY : undefined),
                 };
 
 
@@ -254,7 +254,7 @@ function Layout ({header, translationMutation, routes, body, footer}) {
     const menu=<>{(!me) && !loc.pathname.startsWith("/user/demo") && (<Button className={"btn btn-nav btn-ellipsis btn-primary btn-big"} onClick={() => {
         gtag("event", "nav to demo");
         setCurrentProfile(null);
-        const username = 'demo'+getRandom(1, 99);
+        const username = 'demo'+getBrowserRandom(1, 99);
         setMe({username});
         setCookie('username', username, { path : "/", domain: isProd ? host : 'localhost'});
         nav('/user/'+username, { state: { startTour: true } });
@@ -276,7 +276,7 @@ function Layout ({header, translationMutation, routes, body, footer}) {
 
     useEffect(() => {
         if( !cookies.username) {
-            const username ='demo' + getRandom(1, 99);
+            const username ='demo' + getBrowserRandom(1, 99);
             setCookie("username", username, { path : "/", domain: isProd ? host : 'localhost'});
             onAuthenticated({username}, true);
         }
@@ -360,7 +360,7 @@ function Layout ({header, translationMutation, routes, body, footer}) {
     const handleGenerateClick = (p) => {
         gtag('event', 'homepage model generation');
         setCurrentTour(null);
-        const username = 'demo'+getRandom(0, 99);
+        const username = 'demo'+getBrowserRandom(0, 99);
         setMe({username});
 
         setPromptResult(null);
@@ -495,7 +495,12 @@ function UserPage({notifs,triggerSignin, onAuthenticated}) {
                 position: 'bottom',
             },
         ],
-        datapacks: [
+        guides: [
+            {
+                selector: '.tourStep-tutorials',
+                content: t('tourpoint.tutorials'),
+                position: 'bottom'
+            },
             {
                 selector: '.tourStep-import-datapack',
                 content: t('tourpoint.importDatapack'),

package/client/src/ConditionBuilder.scss

@@ -563,6 +563,8 @@
   padding: 8px;
   border: 1px solid #ddd;
   border-radius: 4px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .switch-to-expr {
@@ -669,4 +671,26 @@
   margin-left: 20px;
   border-left: 2px solid #eee;
   padding-left: 10px;
+}
+
+.special-structure-block {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 10px;
+  margin: 5px 0;
+}
+
+.special-structure-args {
+  margin-top: 10px;
+}
+
+.special-arg {
+  margin-bottom: 8px;
+}
+
+.special-arg label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 4px;
+  color: #555;
 }

package/client/src/ConditionBuilder2.jsx

@@ -86,6 +86,14 @@ const ExpressionField = ({ value, onChange, path = [], fieldNames, isRoot = fals
         }else if (operator === '$find') {
             // Cas spécial pour $find qui prend une expression de recherche
             newValue = { [operator]: { $eq: ["", ""] } };
+        }else if (operator === '$regexMatch') {
+            // Structure spéciale pour $regexMatch
+            newValue = {
+                [operator]: {
+                    input: "",
+                    regex: ""
+                }
+            };
         }else if (opConfig.converter || (!opConfig.multi && !opConfig.args)) {
             newValue = { [operator]: "" };
         } else {
@@ -418,6 +426,54 @@ const ExpressionField = ({ value, onChange, path = [], fieldNames, isRoot = fals
                 </div>
             );
         }
+
+        if (opConfig.specialStructure) {
+            // Cas spécial pour les opérateurs comme $regexMatch
+            return (
+                <div className="expression-block special-structure-block">
+                    <div className="expression-header">
+                        <span className="operator">{operator}</span>
+                        {editing && (
+                            <div className="operator-selector-overlay">
+                                <OperatorSelector onSelect={handleOperatorSelect}/>
+                                <button type="button" onClick={() => setEditing(false)}>Annuler</button>
+                            </div>
+                        )}
+                        <div className="expression-actions">
+                            <button type="button" onClick={() => setEditing(!editing)}><FaRepeat/></button>
+                            <button type="button" onClick={() => openDoc(operator.substring(1))}><FaInfoCircle/></button>
+                            <button
+                                type="button"
+                                onClick={() => onChange(null, path)}
+                                className="remove-expr"
+                                title={i18n.t("cb.deleteBlock")}
+                            >
+                                <FaTrash/>
+                            </button>
+                        </div>
+                    </div>
+                    <div className="special-structure-args">
+                        {Object.entries(args).map(([key, val]) => (
+                            <div key={key} className="special-arg">
+                                <label>{key}</label>
+                                <ExpressionField
+                                    value={val}
+                                    onChange={(newVal) => {
+                                        const newArgs = {...args, [key]: newVal};
+                                        onChange({[operator]: newArgs}, path);
+                                    }}
+                                    fieldNames={fieldNames}
+                                    path={[...path, operator, key]}
+                                    models={models}
+                                    currentModelFields={currentModelFields}
+                                    isInFindContext={isInFindContext}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            );
+        }
         // Rendu pour les opérateurs avec nombre d'arguments fixe
         if (isFixedArgs) {
             return (

package/client/src/DataEditor.jsx

@@ -8,7 +8,7 @@ import RelationField from "./RelationField.jsx";
 import {
     CheckboxField,
     CodeField,
-    ColorField,
+    ColorField, EmailField,
     EnumField,
     FileField, ModelField, NumberField,
     PhoneField,
@@ -470,6 +470,8 @@ export const DataEditor = forwardRef(function MyDataEditor({
                 return <FileField help={t('field_'+model.name+'_'+field.name+'_hint', field.hint || '')} key={field.name} name={field.name} maxSize={field.maxSize} mimeTypes={field.mimeTypes} value={value} onChange={(file) => handleChange({ name: name, value: file ? file.name : null })} />
             case 'color':
                 return <ColorField help={t('field_'+model.name+'_'+field.name+'_hint', field.hint || '')} key={field.name} name={field.name} value={value} onChange={handleChange} />
+            case 'email':
+                return <EmailField onFocus={() => setFocusedField(field)} onBlur={() => setFocusedField(null)} help={focusedField?.name === field.name ? t('field_'+model.name+'_'+field.name+'_hint', field.hint || '') : ''} key={field.name} type={getInputType(field.type)} {...inputProps} onChange={(e) => handleChange({name: field.name, value: e.target.value})} />
             default:
                 return <TextField onFocus={() => setFocusedField(field)} onBlur={() => setFocusedField(null)} help={focusedField?.name === field.name ? t('field_'+model.name+'_'+field.name+'_hint', field.hint || '') : ''} key={field.name} type={getInputType(field.type)} {...inputProps} onChange={(e) => handleChange({name: field.name, value: e.target.value})} />
         }
@@ -508,7 +510,7 @@ export const DataEditor = forwardRef(function MyDataEditor({
         return <p>Sélectionnez un modèle pour afficher le formulaire.</p>;
     }
 
-    const title = record ? t('btns.editModel', `Edit ${model.name}`) : `${t('add_in_model')} ${t(`model_${model.name}`, model.name)}`;
+    const title = record ? t('editData', 'Edit {{0}}', [model.name]) : `${t('add_in_model')} ${t(`model_${model.name}`, model.name)}`;
 
     const hint = (model, field) => <div className="hint-icon"><FaCircleInfo data-field={t(`field_${model.name}_${field.name}`, field.name)} data-tooltip-id={`tooltipHint`} data-tooltip-content={i18n.t(`field_${model.name}_${field.name}_hint`, field.hint || '')} /></div>
 

package/client/src/DataLayout.jsx

@@ -211,6 +211,10 @@ function DataLayout() {
                         mainPartRef.current.scrollIntoView({behavior: "smooth"});
                         handleAddData(model);
                     }}
+                    onDuplicateData={(data) => {
+                        mainPartRef.current.scrollIntoView({behavior: "smooth"});
+                        handleAddData(selectedModel, data);
+                    }}
                     onShowAPI={() => {
                         setAPIInfoVisible(true);
                         setDataEditorVisible(false);
@@ -476,18 +480,23 @@ function DataLayout() {
         }
     };
 
-    const handleAddData = (model)=>{
+    const handleAddData = (model, data)=>{
 
         handleModelSelect(model);
-        const t = model ? [...model.fields].reduce((acc, field) => {
-            if( field.type === "relation"){
-                acc[field.name] = field.multiple ? [] : null;
-            }else {
-                acc[field.name] = getDefaultForType(field);
-            }
-            return acc;
-        }, {}) : [];
-        setFormData(t)
+
+        if( data ){
+            setFormData(data);
+        }else {
+            const t = model ? [...model.fields].reduce((acc, field) => {
+                if (field.type === "relation") {
+                    acc[field.name] = field.multiple ? [] : null;
+                } else {
+                    acc[field.name] = getDefaultForType(field);
+                }
+                return acc;
+            }, {}) : [];
+            setFormData(t)
+        }
         setEditionMode(false);
         setDataEditorVisible(true);
         setAPIInfoVisible(false);
@@ -539,7 +548,7 @@ function DataLayout() {
         // Si un modèle est sélectionné...
         if (selectedModel) {
             // Récupérer les étapes du tour "datapacks"
-            const datapacksSteps = allTourSteps.datapacks;
+            const datapacksSteps = allTourSteps.guides;
             // S'assurer que ce tour existe et a des étapes
             if (datapacksSteps && datapacksSteps.length > 0) {
                 // 1. Définir les étapes du tour qui doit être affiché

package/client/src/DataTable.jsx

@@ -9,13 +9,13 @@ 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 {
@@ -38,7 +38,7 @@ 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 "../../src/core.js";
 import {isConditionMet} from "./DataEditor.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/Field.jsx

@@ -35,6 +35,7 @@ import { PhoneInput } from 'react-international-phone';
 import 'react-international-phone/style.css';
 import CodeMirror, {basicSetup} from "@uiw/react-codemirror";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {maxStringLength} from "data-primals-engine/constants";
 
 export const Form = ({
   name,
@@ -259,10 +260,8 @@ const EmailField = forwardRef(
       if (maxlength !== undefined && maxlength > 0 && value && value.trim().length > maxlength) {
         errs.push("Value length must be <= to " + maxlength);
       }
-      if (
-        value &&
-        !value.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)
-      ) {
+
+    if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
         errs.push("Invalid email");
       }
       setErrors(errs);

package/client/src/FlexBuilder.jsx

@@ -19,6 +19,7 @@ import {
     clearMappingsRecursive
 } from './FlexTreeUtils.js';
 import {Dialog, DialogProvider} from "./Dialog.jsx";
+import {safeAssignObject} from "data-primals-engine/core";
 
 const FlexBuilder = ({ initialConfig = null, models = [], onChange, data = [], lang = 'fr' }) => {
     const { me: user } = useAuthContext();
@@ -104,7 +105,8 @@ const FlexBuilder = ({ initialConfig = null, models = [], onChange, data = [], l
                     current[pathArray[i]] = current[pathArray[i]] || {};
                     current = current[pathArray[i]];
                 }
-                current[pathArray[pathArray.length - 1]] = value;
+                const key = pathArray[pathArray.length - 1];
+                safeAssignObject(current, key, value);
                 return newNode;
             };
 

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/constants.js

@@ -53,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

@@ -6,13 +6,14 @@ import {useAuthContext} from "./AuthContext.jsx";
 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({});
@@ -188,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);
+    });
+}