data-primals-engine 1.0.11 → 1.1.0

package/client/src/ModelImporter.jsx

@@ -0,0 +1,120 @@
+import React, {useState, useEffect} from 'react';
+import { useModelContext } from './contexts/ModelContext.jsx';
+import { useAuthContext } from './contexts/AuthContext.jsx';
+import {Trans, useTranslation} from 'react-i18next';
+import {FaArrowDown, FaInfo} from 'react-icons/fa';
+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";
+
+
+const ModelImporter = ({ onImport }) => {
+
+    const { models } = useModelContext();
+    const { me } = useAuthContext();
+    const { t } = useTranslation();
+
+    const [selectedModels, setSelectedModels] = useState([]);
+    return <>
+        <h2>{t('btns.importModels', 'Importer un modèle')}</h2>
+        <div className="models-import">
+            <div className="msg msg-info">
+                <FaInfo/>
+                <Trans i18nKey="modelimporter.info">
+                    Importez des modèles dans votre base de donnée pour générer rapidement votre API
+                    ou étendre ceux-ci.
+                </Trans>
+            </div>
+            {Object.keys(metaModels).map(metaModel => {
+                const mods = metaModels[metaModel]['load'];
+                const found = true;
+                return found ? <>
+                    <h2 className="shadow flex">
+                        <div className="flex-1">{t(`metamodel_${metaModel}`, metaModel)}</div>
+                        <FaArrowDown style={{opacity:0.2}}/>
+                    </h2>
+                    <div className="list">{mods.map(m => {
+                        const model = models.find(f=> f.name === m);
+                        if( !model )
+                            console.warn("model" + m + " not found");
+                        if (model && !models.find(m => m.name === model.name && m._user === me?.username))
+                            return <><ModelImporterItem model={model} onUnselect={(model) => {
+                                setSelectedModels(models => models.filter(f => f.name !== model.name));
+                            }} onSelect={(model) => {
+                                if(!selectedModels.find(f => f.name === model.name)) {
+                                    gtag('event', 'select_content', {
+                                        content_type: 'import_model',
+                                        content_id: model.name
+                                    });
+
+                                    const rec = [];
+
+                                    const addRequiredMods = (model) => {
+                                        let mods = [];
+                                        model.fields.forEach(field =>{
+                                            if( field.type ==='relation'){
+                                                const relMod = models.find(f => f.name === field.relation);
+                                                if( !relMod)
+                                                    return;
+                                                if (models.some(m => m._user === me?.username && m.name === relMod.name))
+                                                    return;
+                                                if( !rec.includes(relMod.name) ) {
+                                                    mods.push(relMod);
+                                                    rec.push(relMod.name);
+                                                    mods = mods.concat(addRequiredMods(relMod));
+                                                }
+                                            }
+                                        })
+                                        return [...new Set(mods)];
+                                    };
+
+                                    const allMods = [model, ...addRequiredMods(model)];
+
+                                    setSelectedModels(models => [...new Set([...models, ...allMods])])
+                                }
+                            }} selected={selectedModels.some(f=>f.name===model.name)} /></>
+                    })}</div></> : <></>;
+            })}
+        </div>
+        <div className="flex actions">
+            <Button onClick={() => {
+                onImport(selectedModels);
+            }}>Importer les modèles ( {selectedModels.length} )</Button>
+        </div>
+    </>
+}
+
+const ModelImporterItem = ({ model, onUnselect, onSelect, selected }) => {
+
+    const { t } = useTranslation();
+    const [, setSelected] = useState(false);
+
+    useEffect(() => {
+        setSelected(selected);
+    }, [selected]);
+    const deps = [...new Set((model.fields || []).filter(f=> f.type === 'relation' && f.relation !== model?.name).map(f=> t(`model_${f.relation}`, f.relation)))];
+    return <div className={`model-importer-item ${selected ? 'active' : ''}`} onClick={() => {
+        setSelected(!selected);
+        if (!selected)
+            onSelect(model);
+        else
+            onUnselect(model);
+    }}>
+        <CheckboxField checked={selected} onChange={e => {
+            setSelected(e.target.checked)
+            if (e.target.checked)
+                onSelect(model);
+            else
+                onUnselect(model);
+        }} label={t(`model_${model.name}`, model.name)} />
+        <ul>
+            <li>{t(`model_description_${model.name}`, model.description)}</li>
+            {deps.length > 0 &&<li> <><Trans i18nKey="modelimporter.requires">Requiert : </Trans> {deps.join(', ')}</></li>}
+        </ul>
+    </div>;
+}
+
+
+export { ModelImporter, ModelImporterItem };

package/client/src/ModelList.jsx

@@ -0,0 +1,205 @@
+import {useModelContext} from "./contexts/ModelContext.jsx";
+import {Trans, useTranslation} from "react-i18next";
+import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {useMutation, useQueryClient} from "react-query";
+import React, {useEffect, useMemo, useState} from "react";
+import {FaBook, FaEdit, FaFileImport, FaPlus} from "react-icons/fa";
+import Button from "./Button.jsx";
+import useLocalStorage from "./hooks/useLocalStorage.js";
+import {Tooltip} from "react-tooltip";
+import {useUI} from "./contexts/UIContext.jsx";
+import {profiles} from "./constants.js";
+
+export function ModelList({ onModelSelect, onCreateModel, onImportModel, onEditModel, onAPIInfo, onNewData }) {
+    const {allTourSteps, setIsTourOpen,setCurrentTourSteps, setTourStepIndex, currentTour, setCurrentTour} = useUI();
+
+    const {models, setSelectedModel, selectedModel, countByModel, generatedModels} = useModelContext();
+    const {t} =  useTranslation();
+    const {me} =  useAuthContext();
+    const queryClient = useQueryClient()
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const [currentProfile, setCurrentProfile] = useLocalStorage('profile', null);
+    useEffect(() =>{
+        if (me) {
+            queryClient.invalidateQueries('api/models');
+        }
+    }, [me])
+
+    const filteredModels = useMemo(() => {
+        if (!models) return [];
+        if (!searchTerm.trim()) return models; // Si la recherche est vide, retourne tous les modèles
+
+        const lowerSearchTerm = searchTerm.toLowerCase();
+        return models.filter(model => {
+            return (model.name && t('model_' + model.name, model.name).toLowerCase().includes(lowerSearchTerm)) ||
+                (model.fields.some(f =>
+                        f.name?.toLowerCase().includes(lowerSearchTerm) ||
+                        f.hint?.toLowerCase().includes(lowerSearchTerm)) ||
+                (model.description && model.description.toLowerCase().includes(lowerSearchTerm)))
+            });
+    }, [models, searchTerm]);
+
+    const handleSelectModel = (model) => {
+        setSelectedModel(model);
+        if (onModelSelect) {
+            onModelSelect(model); // Si vous avez une prop callback supplémentaire
+        }
+    };
+
+    const importModelsMutation = useMutation((profile) => {
+        return fetch('/api/models/import', { method: 'POST', headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ install: true, models: ['request', ...profiles[profile]] })
+        })
+    });
+    const handleProfile = (profile) => {
+       importModelsMutation.mutateAsync(profile).then(e => {
+           setCurrentProfile(profile);
+           gtag('event', 'profile ' + profile);
+           queryClient.invalidateQueries('api/models');
+
+           const profileSteps = allTourSteps[profile];
+           if (profileSteps) {
+               setCurrentTourSteps(profileSteps);
+               setTourStepIndex(0);
+               setIsTourOpen(true); // Start the tour
+           } else {
+               console.warn(`No tour steps defined for profile: ${profile}`);
+           }
+       });
+    };
+
+    const [mods, setMods] = useState([]);
+    useEffect(() => {
+        if( countByModel && selectedModel)
+        {
+            setMods((m) => {
+                const counts = [...m];
+                const mod = counts.find(f => f.mod === selectedModel.name);
+                if( mod ){
+                    mod.count = countByModel[selectedModel.name];
+                    return counts.map((c => {
+                        if( c.mod === mod.mod) {
+                            return {...mod};
+                        }
+                        return c;
+                    }));
+                }else{
+                    return [...m, { mod: selectedModel.name, count: countByModel[selectedModel.name]}];
+                }
+            })
+        }
+    }, [countByModel, selectedModel]);
+
+    //  --- NEW: Effect to update tour steps when a profile is already selected on mount ---
+    useEffect(() => {
+        if (currentProfile && currentTour && /^demo[0-9]{1,2}$/.test(me?.username)) { // Only run on demo user for simplicity
+            const profileSteps = allTourSteps[currentProfile];
+            if (profileSteps) {
+                setCurrentTourSteps(profileSteps);
+                setTourStepIndex(0)
+                setIsTourOpen(true);
+            } else {
+                console.warn(`No tour steps defined for profile: ${currentProfile}`);
+            }
+        }
+    }, [currentProfile, me?.username]);
+
+    if (!models) {
+        return <div className="loading-models">{t('models.loading', 'Chargement des modèles...')}</div>;
+    }
+
+    return <>
+    {!currentProfile && /^demo[0-9]{1,2}$/.test(me.username) && <div className="tourStep-profile profiles flex-stretch flex">
+            <div className=" flex flex-centered flex-big-gap">
+                <a href="#" data-tooltip-id="tooltipProfile" data-tooltip-content={t('profiles.personal.desc')} className="profile-link" onClick={() => handleProfile('personal')}>
+                    <img src="/profilPersonal.jpg" alt={"Personal profile"} width={256} height={256}/>
+                </a>
+                <a href="#" data-tooltip-id="tooltipProfile" data-tooltip-content={t('profiles.developer.desc')} className="profile-link" onClick={() => handleProfile('developer')}>
+                    <img src="/profilDeveloper.jpg" alt={"Developer profile"} width={256} height={256}/>
+                </a>
+                <a href="#" data-tooltip-id="tooltipProfile" data-tooltip-content={t('profiles.company.desc')} className="profile-link" onClick={() => handleProfile('company')}>
+                    <img src="/profilCompany.jpg" alt={"Company profile"} width={256} height={256}/>
+                </a>
+                <a href="#" data-tooltip-id="tooltipProfile" data-tooltip-content={t('profiles.engineer.desc')} className="profile-link" onClick={() => handleProfile('engineer')}>
+                    <img src="/profilEngineer.jpg" alt={"Engineer profile"} width={256} height={256}/>
+                </a>
+                <Tooltip id="tooltipProfile" render={({content, activeAnchor}) => {
+                    const pr = activeAnchor?.querySelector('img').getAttribute('alt');
+                    if (pr)
+                        gtag('event', 'info '+ pr);
+                    else
+                        gtag('event', 'info');
+                    return <span dangerouslySetInnerHTML={{__html:content}} />
+                }} afterShow={() => {
+
+                }} />
+            </div></div>}
+        <div className="models">
+            <h2><Trans i18nKey="models">Modèles</Trans></h2>
+            <div className="model-list-container">
+                <div className="model-list-search-bar-container">
+                    <input
+                        type="search"
+                        placeholder={t('models.searchPlaceholder', 'Rechercher un modèle...')}
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="model-list-search-input"
+                    />
+                </div>
+                {filteredModels.length > 0 ? (
+                    <div className="model-list">
+                        <Tooltip id="tooltipML" />
+                        <ul>
+                            {filteredModels.sort((a, b) => t('model_' + a.name, a.name).localeCompare(t('model_' + b.name, b.name))).map((model) => {
+                                if (model._user !== me.username)
+                                    return <></>
+                                return (
+                                    <li data-testid={'model_'+model.name} className={`${model.name === selectedModel?.name ? 'active' : ''}`}
+                                        key={'modelist' + model.name} onClick={() => generatedModels.some(g => g.name === model.name) ? onEditModel(model) : onModelSelect(model)}>
+                                        <div className="flex flex-center flex-fw">
+                                            <div
+                                                className="flex-1 break-word">{t(`model_${model.name}`, model.name)} {generatedModels.some(f => f.name === model.name) ? '(tmp)' : (mods.some(f => f.mod === model.name) ? `(${mods.find(f => f.mod === model.name).count})` : '')}</div>
+                                            <div className="btns">
+                                                {!generatedModels.some(g => g.name === model.name) && (<button data-tooltip-id="tooltipML" data-tooltip-content={t('btns.addData')} onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    e.preventDefault();
+                                                    onNewData?.(model);
+                                                }}><FaPlus/></button>)}
+                                                {!model.locked && (<button data-tooltip-id="tooltipML" data-tooltip-content={t('btns.editModel')} onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    e.preventDefault();
+                                                    onEditModel(model);
+                                                }}><FaEdit/>
+                                                </button>)}
+                                                {(<button data-tooltip-id="tooltipML" data-tooltip-content={t('doc.api.title')} onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    e.preventDefault();
+                                                    onAPIInfo?.(model);
+                                                }}><FaBook/>
+                                                </button>)}
+                                            </div>
+                                        </div>
+                                    </li>)
+                            })}
+                        </ul>
+
+                    </div>) : (
+                    <p className="no-models-found">
+                        {searchTerm ? t('models.noMatch', 'Aucun modèle ne correspond à votre recherche.') : t('models.noModels', 'Aucun modèle disponible.')}
+                    </p>
+                )}
+                <div className="flex actions">
+                    <Button onClick={onCreateModel} className="btn tourStep-create-model"><FaPlus/><Trans
+                        i18nKey="btns.createModel">Créer un modèle</Trans></Button>
+                    <Button onClick={onImportModel}
+                            className="btn tourStep-import-model btn-primary"><FaFileImport/><Trans
+                        i18nKey="btns.importModels">Importer un modèle</Trans></Button>
+                </div>
+            </div>
+        </div>
+    </>
+}
+

package/client/src/Notification.jsx

@@ -0,0 +1,137 @@
+import React, {useState, useEffect, useRef, useCallback, forwardRef} from 'react';
+import { FaCheck, FaSpinner, FaExclamationTriangle, FaBell, FaTimes, FaTrash } from 'react-icons/fa'; // Example icons
+import { useNotificationContext } from './NotificationProvider.jsx'; // Import the context
+import './Notification.scss';
+
+/*
+    const { addNotification } = useNotificationContext();
+const notificationData = {
+                title: 'New Notification',
+                message: 'This is a new notification message.',
+                icon: <FaBell />,
+                status: ['ongoing','completed','error'][Math.floor(Math.random()*3)]
+            };
+ */
+// Helper function to generate a unique ID
+const generateNotificationId = () => {
+    return Math.random().toString(36).substring(2, 9);
+};
+
+const Notification = ({ notification, onClick }) => {
+    const { markAsRead, removeNotification } = useNotificationContext();
+    const [dismissTimer, setDismissTimer] = useState(null);
+    const notificationRef = useRef(null);
+    const isMounted = useRef(false)
+
+    const handleMarkAsRead = useCallback(() => {
+        markAsRead(notification.id);
+    }, [markAsRead, notification.id]);
+
+    useEffect(() => {
+        const t = setTimeout(()=>{
+            markAsRead(notification.id);
+        }, notification.timeout || 12000);
+        return () => {
+            clearTimeout(t);
+        }
+    }, [notification]);
+
+    useEffect(() => {
+        if (notification.isRead) {
+            const timer = setTimeout(() => {
+                removeNotification(notification.id);
+            }, 30000);
+
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    }, [notification.isRead, notification.id, removeNotification]);
+
+    let statusIcon;
+    switch (notification.status) {
+        case 'ongoing':
+            statusIcon = <FaSpinner className="spinner" />;
+            break;
+        case 'completed':
+            statusIcon = <FaCheck />;
+            break;
+        case 'error':
+            statusIcon = <FaExclamationTriangle />;
+            break;
+        default:
+            statusIcon = null;
+    }
+
+    const removeBtn = notification.isRead ? <button onClick={() => {
+        removeNotification(notification.id);
+    }}><FaTrash /></button> : <></>
+    return (
+        <div ref={notificationRef} onClick={onClick} className={`notification ${notification.isExpanded ? 'expanded' : 'collapsed'} ${notification.status}`}>
+            <div className="notification-header">
+                {notification.icon && <span className="notification-icon">{notification.icon}</span>}
+                <span className="notification-title">{notification.title}</span>
+                {statusIcon && <span className="notification-status">{statusIcon}</span>}
+                {removeBtn}
+            </div>
+            {<div className="notification-content">
+            <p className="notification-message">{notification.message}</p>
+            </div>}
+        </div>
+    );
+};
+
+const NotificationList = forwardRef((props, ref) => {
+    const { notifications, markAsRead, removeNotification, addNotification, unreadCount } = useNotificationContext();
+    const [showBubble, setShowBubble] = useState(false);
+
+
+    const toggleBubble = useCallback(() => {
+        setShowBubble(!showBubble)
+    }, [showBubble]);
+
+    useEffect(() => {
+        if( unreadCount > 0 ){
+            if (!showBubble)
+                setShowBubble(true);
+        }else{
+            if (showBubble)
+                setShowBubble(false);
+        }
+    }, [unreadCount]);
+
+    const readNotifications = notifications.filter(n => n.isRead) || [];
+    const unreadNotifications = notifications.filter(n => !n.isRead) || [];
+    return (
+        <div className="notification-container">
+            <div className="notifications-right">
+                {unreadNotifications.map(notification => (
+                    <Notification
+                        onClick={() => {
+                            markAsRead(notification.id)
+                        }}
+                        key={notification.id}
+                        notification={notification}
+                    />
+                ))}
+                {unreadCount > 0 && <div className={"notification-bubble-count"}>{unreadCount}</div>}
+            </div>
+            <div className={`notification-bubble ${showBubble ? 'visible' : ''}`}>
+                <button onClick={toggleBubble} className="notification-bubble-btn">
+                    <FaBell/>
+                    {unreadCount > 0 && <span className="notification-bubble-count">{unreadCount}</span>}
+                </button>
+                {showBubble && <div className='notifications-bubble-content'>
+                    {readNotifications.map(notification => (
+                        <Notification
+                            key={notification.id}
+                            notification={notification}
+                        />
+                    ))}
+                </div>}
+            </div>
+        </div>
+    );
+});
+NotificationList.displayName = "NotificationList";
+export {NotificationList, generateNotificationId}; // Export for use elsewherex

package/client/src/Notification.scss

@@ -0,0 +1,126 @@
+.notification-container {
+  position: fixed;
+  top: 52px;
+  right: 8px;
+  width: 280px;
+  z-index: 10000000;
+  pointer-events: auto;
+}
+
+.notifications-right, .notifications-bubble-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.notification {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  opacity: 1;
+  transition: opacity 0.3s ease, height 0.3s ease;
+  pointer-events: all;
+}
+
+.notification.ongoing {
+  border-color: #007bff;
+}
+
+.notification.completed {
+  border-color: #28a745;
+}
+
+.notification.error {
+  border-color: #dc3545;
+}
+
+.notification-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.notification-icon {
+  font-size: 1.2em;
+  color: #6c757d;
+}
+
+.notification-status {
+  font-size: 1.2em;
+}
+
+.notification-message {
+  margin: 0;
+}
+
+.notification.expanded {
+  height: auto;
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.notification-bubble {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #007bff;
+  color: #fff;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  transition: all 0.3s ease;
+  pointer-events: all;
+  display: none;
+}
+
+.notification-bubble.visible {
+  display: flex;
+}
+.notifications-bubble-content {
+  display: none;
+}
+.notification-bubble.expanded .notifications-bubble-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.notification-bubble-count {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background-color: red;
+  color: white;
+  border-radius: 50%;
+  padding: 2px 6px;
+  font-size: 0.8em;
+  pointer-events: none;
+}
+
+.notification button {
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+}

package/client/src/NotificationProvider.jsx

@@ -0,0 +1,73 @@
+import React, { createContext, useState, useContext, useCallback, useEffect } from 'react';
+import { generateNotificationId } from './Notification.jsx'; // Adjust path if needed
+
+const NotificationContext = createContext();
+
+export const useNotificationContext = () => useContext(NotificationContext);
+
+export const NotificationProvider = ({ children }) => {
+    const [notifications, setNotifications] = useState([]);
+    const [unreadCount, setUnreadCount] = useState(0);
+
+    useEffect(() => {
+        setUnreadCount(notifications.filter(n => !n.isRead).length);
+    }, [notifications]);
+
+    const getNotification = (notificationId) => {
+        return notifications.find(notification => notification.id === notificationId);
+    }
+
+    const addNotification = useCallback((newNotification) => {
+        setNotifications((prevNotifications) => {
+            if( newNotification.id && prevNotifications.find(m => m.id === newNotification.id)){
+                return prevNotifications.map(m => m.id === newNotification.id ? { ...m, ...newNotification } : m);
+            }
+            const id = newNotification.id ?? generateNotificationId();
+            const timestamp = new Date().getTime();
+            const updatedNotifications = [{ id, ...newNotification, isExpanded: false, isRead: false, timestamp }, ...prevNotifications];
+            return updatedNotifications;
+        });
+    }, []); // Remove notifications from the dependency array
+
+    const markAsRead = useCallback((notificationId) => {
+        setNotifications(prevNotifications =>
+            prevNotifications.map(notification => {
+                if (notification.id === notificationId) {
+                    return { ...notification, isExpanded: false, isRead: true };
+                }
+                return notification;
+            })
+        );
+    }, []);
+
+    const removeNotification = useCallback((notificationId) => {
+        setNotifications((prevNotifications) => prevNotifications.filter((notification) => notification.id !== notificationId));
+    }, []);
+
+    const toggleExpand = useCallback((notificationId) => {
+        setNotifications(prevNotifications =>
+            prevNotifications.map(notification => {
+                if (notification.id === notificationId) {
+                    return { ...notification, isExpanded: !notification.isExpanded };
+                }
+                return notification;
+            })
+        );
+    }, []);
+
+    const contextValue = {
+        notifications,
+        addNotification,
+        getNotification,
+        markAsRead,
+        removeNotification,
+        toggleExpand,
+        unreadCount
+    };
+
+    return (
+        <NotificationContext.Provider value={contextValue}>
+            {children}
+        </NotificationContext.Provider>
+    );
+};