- added sidebar container for notifications;

- styles and interactions for notifications;
2024-12-24 14:50:20 +01:00
parent 1296348b6f
commit bb983feb12
6 changed files with 224 additions and 20 deletions
--- a/src/components/NotificationsSidebar/index.js
+++ b/src/components/NotificationsSidebar/index.js
@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { head, isEmpty } from 'ramda';
+
+// components
+import { Badge } from 'primereact/badge';
+import { Sidebar } from 'primereact/sidebar';
+import { TabPanel, TabView } from 'primereact/tabview';
+import NotificationItem from './components/NotificationItem';
+import NotificationItemChosen from './components/NotificationItemChosen';
+
+const NotificationsSidebar = () => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [notificationsVisible, setNotificationsVisible] = useState(false);
+    const [notifications, setNotifications] = useState([]);
+    const [notificationsRead, setNotificationsRead] = useState([]);
+    const [chosenMsg, setChosenMsg] = useState({});
+
+    // Handle tab change
+    const handleTabChange = (e) => {
+        setActiveIndex(e.index);
+        fetchTabData(e.index);
+    };
+
+    const fetchTabData = (index) => {
+        setChosenMsg({});
+        console.log('fetchTabData', index);
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+        }, 7000)
+    }
+
+    const chooseNotification = (id) => {
+        const properItems = activeIndex === 0 ? notifications : notificationsRead;
+        const chosen = head(properItems.filter(o => o.id === id));
+        if (chosen) {
+            setChosenMsg(chosen);
+        }
+    }
+
+    const closeChosenMsg = () => {
+        setChosenMsg({});
+    }
+
+    useEffect(() => {
+        setNotifications(() => {
+            const msg = {
+                'id':               35,
+                'createdDate':      '2024-12-23T14:55:27.278103',
+                'updatedDate':      '2024-12-23T14:55:27.278103',
+                'userId':           30,
+                'title':            'Il Risultato della Valutazione per la Richiesta È Disponibile',
+                'message':          'Il risultato della valutazione per la richiesta ai sensi del protocollo n. 10000015 è ora disponibile.',
+                'status':           'UNREAD',
+                'companyId':        103,
+                'redirectUrl':      'EVALUATION_RESULT',
+                'notificationType': 'EVALUATION_RESULT'
+            };
+            return Array.from({ length: 33 }, (_, index) => ({
+                ...msg,
+                id: msg.id + index
+            }));
+        })
+    }, []);
+
+    return (
+        <>
+            <i className="pi pi-bell p-overlay-badge topBar__icon notificationsIcon"
+               onClick={() => setNotificationsVisible(true)}>
+                <Badge value={notifications.length}></Badge>
+            </i>
+            <Sidebar
+                className="notificationsSidebar"
+                position="left"
+                visible={notificationsVisible}
+                onHide={() => setNotificationsVisible(false)}>
+                <TabView activeIndex={activeIndex} onTabChange={handleTabChange}>
+                    <TabPanel header={__('Da leggere', 'gepafin')}>
+                        {loading
+                            ? <div className="notificationsSidebar__loading">
+                                <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
+                            </div>
+                            : !isEmpty(chosenMsg)
+                                ? <NotificationItemChosen item={chosenMsg} closeFn={closeChosenMsg}/>
+                                : (notifications.length > 0
+                                    ? <ul className="notificationsSidebar__list">
+                                        {notifications.map(o => <NotificationItem key={o.id} item={o}
+                                                                                  clickFn={chooseNotification}/>)}
+                                    </ul>
+                                    : <div className="notificationsSidebar__loading">
+                                        <i className="pi pi-megaphone" style={{ fontSize: '2rem' }}></i>
+                                        {__('Vuoto', 'gepafin')}
+                                    </div>)}
+                    </TabPanel>
+                    <TabPanel header={__('Letti', 'gepafin')}>
+                        {loading
+                            ? <div className="notificationsSidebar__loading">
+                                <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
+                            </div>
+                            : !isEmpty(chosenMsg)
+                                ? <NotificationItemChosen item={chosenMsg} closeFn={closeChosenMsg}/>
+                                : (notificationsRead.length > 0
+                                ? <ul className="notificationsSidebar__list">
+                                    {notificationsRead.map(o => <NotificationItem key={o.id} item={o}
+                                                                                  clickFn={chooseNotification}/>)}
+                                </ul>
+                                :
+                                <div className="notificationsSidebar__loading">
+                                    <i className="pi pi-megaphone" style={{ fontSize: '2rem' }}></i>
+                                    {__('Vuoto', 'gepafin')}
+                                </div>)}
+                    </TabPanel>
+                </TabView>
+            </Sidebar>
+        </>
+    )
+}
+
+export default NotificationsSidebar;