data-primals-engine 1.5.0 → 1.5.2

package/client/src/RelationSelectorWidget.jsx

@@ -0,0 +1,173 @@
+import React, { useState, useEffect } from 'react';
+import { useMutation, useQueryClient } from 'react-query';
+import { ModelProvider, useModelContext } from './contexts/ModelContext.jsx';
+import { DataTable } from './DataTable.jsx';
+import { DataEditor } from './DataEditor.jsx';
+import Button from './Button.jsx';
+import { useTranslation } from 'react-i18next';
+import { FaCheck, FaTimes, FaPlus, FaSearch } from 'react-icons/fa';
+import { getDefaultForType } from '../../src/data.js';
+import { useAuthContext } from './contexts/AuthContext.jsx';
+
+// These API functions can be moved to a dedicated service file later.
+const insertDataAPI = async (modelName, data) => {
+    const response = await fetch(`/api/data`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({model: modelName,data})
+    });
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to insert data');
+    }
+    return response.json();
+};
+
+const searchDataAPI = async (modelName, filter) => {
+    const params = new URLSearchParams({ model: modelName, depth: '1' });
+    const response = await fetch(`/api/data/search?${params.toString()}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ filter })
+    });
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to search data');
+    }
+    return response.json();
+};
+
+const RelationSelectorWidget = ({ modelName, initialSelection, isMultiple, onValidate, onCancel }) => {
+    const { t } = useTranslation();
+    const { models, setSelectedModel } = useModelContext();
+    const queryClient = useQueryClient();
+    const { me } = useAuthContext();
+    const [isCreating, setIsCreating] = useState(false);
+    const [newRecord, setNewRecord] = useState(null);
+
+    const [filterValues, setFilterValues] = useState({});
+
+    // DataTable's `checkedItems` expects an array of objects with at least an `_id` property.
+    // `initialSelection` is an array of string IDs. We convert it.
+    const [selection, setSelection] = useState(() => initialSelection.map(id => ({ _id: id })));
+
+    const model = models.find(m => m.name === modelName);
+
+    useEffect(() => {
+        if (model) {
+            setSelectedModel(model);
+        }
+    }, [model, setSelectedModel]);
+
+    const mutation = useMutation(
+        (formData) => insertDataAPI(model.name, formData),
+        {
+            onSuccess: async (result) => {
+                if (result.success && result.insertedIds?.length > 0) {
+                    queryClient.invalidateQueries(['api/data', modelName, 'page']);
+                    const newId = result.insertedIds[0];
+                    const searchResult = await searchDataAPI(model.name, { _id: newId });
+                    if (searchResult.data && searchResult.data.length > 0) {
+                        handleCreationSuccess(searchResult.data[0]);
+                    } else {
+                        console.error('Could not fetch the newly created item.');
+                        handleCancelCreation();
+                    }
+                } else {
+                    console.error('Creation failed:', result.error);
+                }
+            },
+            onError: (error) => {
+                console.error('Creation mutation failed:', error.message);
+            }
+        }
+    );
+
+    const handleCreationSuccess = (newItem) => {
+        setIsCreating(false);
+        setNewRecord(null);
+        if (isMultiple) {
+            setSelection(current => [...current, newItem]);
+        } else {
+            setSelection([newItem]);
+        }
+    };
+
+    const handleStartCreation = () => {
+        const defaults = model.fields.reduce((acc, field) => {
+            acc[field.name] = getDefaultForType(field);
+            return acc;
+        }, {});
+        setNewRecord(defaults);
+        setIsCreating(true);
+    };
+
+    const handleCancelCreation = () => {
+        setIsCreating(false);
+        setNewRecord(null);
+    };
+
+    const handleSave = (formData) => {
+        mutation.mutate(formData);
+    };
+
+    if (!model) {
+        return <div>{t('loading', 'Chargement...')}</div>;
+    }
+
+    const handleValidate = () => {
+        // `onValidate` expects an array of full objects to update the display correctly.
+        onValidate(selection);
+    };
+
+    const handleCheckboxChange = (items) => {
+        if (!isMultiple) {
+            // For single selection, we only keep the last selected item.
+            // DataTable's setCheckedItems gives the full list.
+            const lastItem = items.length > 0 ? [items[items.length - 1]] : [];
+            setSelection(lastItem);
+        } else {
+            setSelection(items);
+        }
+    };
+
+    if (isCreating) {
+        return (
+            <div className="relation-selector-widget">
+                    <Button onClick={handleCancelCreation} className="btn-secondary">
+                        <FaSearch /> {t('btns.backToSearch', 'Retour à la recherche')}
+                    </Button>
+                <ModelProvider>
+                    <DataEditor
+                        model={model}
+                        formData={newRecord}
+                        setFormData={setNewRecord}
+                        onSubmit={handleSave}
+                        onCancel={handleCancelCreation}
+                        isLoading={mutation.isLoading}
+                        hideNewButton={true}
+                    />
+                </ModelProvider>
+            </div>
+        );
+    }
+
+    return (
+        <div className="relation-selector-widget">
+            <DataTable model={model} filterValues={filterValues} setFilterValues={setFilterValues} checkedItems={selection} setCheckedItems={handleCheckboxChange} selectionMode={true} />
+            <div className="flex actions right">
+                <Button onClick={handleStartCreation} className="btn-secondary" style={{ marginRight: 'auto' }}>
+                    <FaPlus /> {t('btns.create', 'Créer')}
+                </Button>
+                <Button onClick={onCancel} className="btn-secondary">
+                    <FaTimes /> {t('btns.cancel', 'Annuler')}
+                </Button>
+                <Button onClick={handleValidate} className="btn-primary">
+                    <FaCheck /> {t('btns.validate', 'Valider')}
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default RelationSelectorWidget;

package/client/src/contexts/ModelContext.jsx

@@ -77,6 +77,15 @@ export const ModelProvider = ({ children }) => {
         }
     }, [selectedModel]);
 
+    // This effect synchronizes the selected model with the list of models to load paginated data for.
+    // It's crucial for isolated components like RelationSelectorWidget that use their own ModelProvider.
+    // When a model is selected in such a widget, this ensures the DataTable inside it will fetch and display data.
+    useEffect(() => {
+        if (selectedModel?.name) {
+            setFilteredDatasToLoad([selectedModel.name]);
+        }
+    }, [selectedModel]);
+
     let abortController = new AbortController();
 
     const [relations, setRelations] = useState([]);
@@ -207,7 +216,7 @@ export const ModelProvider = ({ children }) => {
             enabled: !!selectedModel,
             onSettled: (data)=>{
                 try {
-                    Object.keys(onSuccessCallbacks?.['api/data/' + model.name + '/paged']).forEach(cb => {
+                    Object.keys(onSuccessCallbacks?.['api/data/' + model.name + '/paged'] || []).forEach(cb => {
                         onSuccessCallbacks?.['api/data/' + model.name + '/paged'][cb](data)
                     });
                 } catch (e){

package/client/src/contexts/UIContext.jsx

@@ -1,64 +1,73 @@
-// ModelContext.jsx
-import React, {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react';
-import useLocalStorage from "../hooks/useLocalStorage.js";
-
-const UIContext = createContext(null);
-
-export const UIProvider = ({ children }) => {
-
-    const [tourStepIndex, setTourStepIndex] = useState(0);
-    const [currentTourSteps, setCurrentTourSteps] = useState([]);
-    const [isTourOpen, setIsTourOpen] = useState(false);
-    const [allTourSteps, setAllTourSteps] = useState({});
-
-    const [chartToAdd, setChartToAdd] = useState(null);
-
-    const [currentTour, setCurrentTour] = useLocalStorage("spotlight-tour", null);
-// This is the single source of truth for tours that have been launched.
-    // It correctly reads from localStorage on initial load and persists any changes.
-    const [launchedTours, setLaunchedTours] = useLocalStorage('launchedTours', []);
-
-    // A stable helper function to add a tour to the list without overwriting.
-    const addLaunchedTour = useCallback((tourName) => {
-        setLaunchedTours(prevTours => {
-            // Ensure we're working with an array, even if localStorage is empty/corrupted.
-            const currentTours = Array.isArray(prevTours) ? prevTours : [];
-            if (!currentTours.includes(tourName)) {
-                return [...currentTours, tourName];
-            }
-            return currentTours; // Return unchanged if already present
-        });
-    }, [setLaunchedTours]); // setLaunchedTours from useLocalStorage is stable
-
-    const [isLocked, setLocked] = useState(false);
-    const contextValue = useMemo(() => ({
-        isLocked,
-        setLocked,
-        currentTourSteps, setCurrentTourSteps,
-        launchedTours, setLaunchedTours, addLaunchedTour,
-        currentTour, setCurrentTour,
-        isTourOpen, setIsTourOpen, setAllTourSteps, allTourSteps,
-        tourStepIndex, setTourStepIndex, chartToAdd, setChartToAdd
-    }), [isLocked,
-        setLocked,
-        currentTourSteps, setCurrentTourSteps,
-        launchedTours,setLaunchedTours,
-        currentTour, setCurrentTour,
-        isTourOpen, setIsTourOpen, setAllTourSteps, allTourSteps,
-        tourStepIndex, setTourStepIndex, addLaunchedTour,
-        chartToAdd, setChartToAdd]);
-
-    return (
-        <UIContext.Provider value={contextValue}>
-            <div id={"ui"} className={`${isLocked ? 'ui-locked' : ''}`}>{children}</div>
-        </UIContext.Provider>
-    );
-};
-
-export const useUI = () => {
-    const context = useContext(UIContext);
-    if (context === null) {
-        throw new Error('useUI doit être utilisé dans un UIProvider');
-    }
-    return context;
+// ModelContext.jsx
+import React, {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import useLocalStorage from "../hooks/useLocalStorage.js";
+
+const UIContext = createContext(null);
+
+export const UIProvider = ({ children }) => {
+
+    const [tourStepIndex, setTourStepIndex] = useState(0);
+    const [currentTourSteps, setCurrentTourSteps] = useState([]);
+    const [isTourOpen, setIsTourOpen] = useState(false);
+    const [allTourSteps, setAllTourSteps] = useState({});
+
+    const [chartToAdd, setChartToAdd] = useState(null);
+    const [flexViewToAdd, setFlexViewToAdd] = useState(null);
+    const [htmlViewToAdd, setHtmlViewToAdd] = useState(null);
+
+    const [currentTour, setCurrentTour] = useLocalStorage("spotlight-tour", null);
+// This is the single source of truth for tours that have been launched.
+    // It correctly reads from localStorage on initial load and persists any changes.
+    const [launchedTours, setLaunchedTours] = useLocalStorage('launchedTours', []);
+
+    // A stable helper function to add a tour to the list without overwriting.
+    const addLaunchedTour = useCallback((tourName) => {
+        setLaunchedTours(prevTours => {
+            // Ensure we're working with an array, even if localStorage is empty/corrupted.
+            const currentTours = Array.isArray(prevTours) ? prevTours : [];
+            if (!currentTours.includes(tourName)) {
+                return [...currentTours, tourName];
+            }
+            return currentTours; // Return unchanged if already present
+        });
+    }, [setLaunchedTours]); // setLaunchedTours from useLocalStorage is stable
+
+    const [assistantConfig, setAssistantConfig] = useState(null);
+    const [isLocked, setLocked] = useState(false);
+    const contextValue = useMemo(() => ({
+        isLocked,
+        setLocked,
+        currentTourSteps, setCurrentTourSteps,
+        launchedTours, setLaunchedTours, addLaunchedTour,
+        currentTour, setCurrentTour,
+        isTourOpen, setIsTourOpen, setAllTourSteps, allTourSteps,
+        tourStepIndex, setTourStepIndex,
+        chartToAdd, setChartToAdd,
+        flexViewToAdd, setFlexViewToAdd,
+        htmlViewToAdd, setHtmlViewToAdd,
+        assistantConfig, setAssistantConfig
+    }), [isLocked,
+        setLocked,
+        currentTourSteps, setCurrentTourSteps,
+        launchedTours,setLaunchedTours,
+        currentTour, setCurrentTour,
+        isTourOpen, setIsTourOpen, setAllTourSteps, allTourSteps,
+        tourStepIndex, setTourStepIndex, addLaunchedTour, chartToAdd, setChartToAdd,
+        flexViewToAdd, setFlexViewToAdd, htmlViewToAdd, setHtmlViewToAdd,
+        assistantConfig, setAssistantConfig
+    ]);
+
+    return (
+        <UIContext.Provider value={contextValue}>
+            <div id={"ui"} className={`${isLocked ? 'ui-locked' : ''}`}>{children}</div>
+        </UIContext.Provider>
+    );
+};
+
+export const useUI = () => {
+    const context = useContext(UIContext);
+    if (context === null) {
+        throw new Error('useUI doit être utilisé dans un UIProvider');
+    }
+    return context;
 };