data-primals-engine 1.5.0 → 1.5.2

package/client/src/Notification.jsx

@@ -1,137 +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";
+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(() => {
+        // Lorsque l'on ouvre la bulle, on marque toutes les notifications comme lues.
+        if (!showBubble) {
+            notifications.forEach(n => {
+                if (!n.isRead) {
+                    markAsRead(n.id);
+                }
+            });
+        }
+        // Ensuite, on bascule la visibilité du contenu de la bulle.
+        setShowBubble(prev => !prev);
+    }, [showBubble, notifications, markAsRead]);
+
+    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>
+
+            {unreadCount > 0 && <button onClick={toggleBubble} className={`notification-bubble fab ${showBubble ? 'visible' : ''}`}>
+                <div>
+                    <FaBell/>
+                    {unreadCount > 0 && <span className="notification-bubble-count">{unreadCount}</span>}
+                </div>
+                {showBubble && <div className='notifications-bubble-content'>
+                    {readNotifications.map(notification => (
+                        <Notification
+                            key={notification.id}
+                            notification={notification}
+                        />
+                    ))}
+                </div>}
+            </button>}
+        </>
+    );
+});
+NotificationList.displayName = "NotificationList";
 export {NotificationList, generateNotificationId}; // Export for use elsewherex

package/client/src/Notification.scss

@@ -74,24 +74,6 @@
   }
 }
 
-.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;

package/client/src/Pagination.jsx

@@ -14,9 +14,11 @@ export const Pagination = ({
   page,
   setPage,
   useParam = false,
-    showElementsPerPage=false
+    showElementsPerPage=false,
+    elementsPerPage: propElementsPerPage
 }) => {
-  const { elementsPerPage, setElementsPerPage } = useModelContext();
+  const { elementsPerPage: contextElementsPerPage, setElementsPerPage } = useModelContext();
+  const elementsPerPage = propElementsPerPage || contextElementsPerPage;
   let pageCount = Math.ceil(totalCount / elementsPerPage);
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -109,7 +111,7 @@ export const Pagination = ({
                   (_, i) => page + i - parseInt(visibleItemsCount / 2, 10),
               ).map((p, i) => {
                 return p >= 1 && p <= pageCount ? (
-                    <Button disabled={p === page} onClick={() => handleChange(p)}>
+                    <Button key={"paginate-"+i} disabled={p === page} onClick={() => handleChange(p)}>
                       {p}
                     </Button>
                 ) : (