unread notifs

static/js/notifications.js

@@ -1,4 +1,10 @@
 document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+
     // Initialize variables
     let currentPage = 1;
     let totalPages = parseInt(document.getElementById('totalPages').textContent) || 1;
@@ -62,6 +68,12 @@ document.addEventListener('DOMContentLoaded', function() {
             const data = await response.json();
             updateNotificationsTable(data.notifications);
             updatePagination(data.total_pages, data.current_page);
+            
+            // Reinitialize tooltips after updating the table
+            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+            tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new bootstrap.Tooltip(tooltipTriggerEl);
+            });
         } catch (error) {
             console.error('Error fetching notifications:', error);
             notifsTableBody.innerHTML = '<tr><td colspan="6" class="text-center">Error loading notifications</td></tr>';
@@ -104,6 +116,11 @@ document.addEventListener('DOMContentLoaded', function() {
             });
     }
     
+    // Function to update notification counter
+    function updateNotificationCounter() {
+        counter.textContent = document.querySelector('.nav-link[href*="notifications"] .badge');
+    }
+    
     // Function to mark notification as read
     async function markAsRead(notifId) {
         try {
@@ -138,6 +155,8 @@ document.addEventListener('DOMContentLoaded', function() {
                         }
                     }
                 }
+                // Update the notification counter
+                updateNotificationCounter();
             }
         } catch (error) {
             console.error('Error marking notification as read:', error);
@@ -165,6 +184,10 @@ document.addEventListener('DOMContentLoaded', function() {
                 // Remove the notification row from the table
                 const notifRow = document.querySelector(`tr[data-notif-id="${notifId}"]`);
                 if (notifRow) {
+                    // Only update counter if the notification was unread
+                    if (notifRow.classList.contains('table-warning')) {
+                        updateNotificationCounter();
+                    }
                     notifRow.remove();
                 }
             }
@@ -206,6 +229,11 @@ document.addEventListener('DOMContentLoaded', function() {
                         }
                     }
                 });
+                // Remove the notification counter
+                const counter = document.querySelector('.nav-link[href*="notifications"] .badge');
+                if (counter) {
+                    counter.remove();
+                }
             }
         } catch (error) {
             console.error('Error marking all notifications as read:', error);
@@ -260,28 +288,30 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
     
-    // Add event listeners for filters with debounce
-    let filterTimeout;
-    function debouncedFetch() {
-        clearTimeout(filterTimeout);
-        filterTimeout = setTimeout(() => {
-            currentPage = 1; // Reset to first page when filters change
-            fetchNotifications();
-        }, 300);
-    }
+    // Initialize event listeners
+    attachEventListeners();
     
-    notifTypeFilter.addEventListener('change', debouncedFetch);
-    dateRangeFilter.addEventListener('change', debouncedFetch);
+    // Add event listeners for filters
+    notifTypeFilter.addEventListener('change', () => {
+        currentPage = 1;
+        fetchNotifications();
+        updateURL();
+    });
+    
+    dateRangeFilter.addEventListener('change', () => {
+        currentPage = 1;
+        fetchNotifications();
+        updateURL();
+    });
     
-    // Add event listener for clear filters
     clearFiltersBtn.addEventListener('click', () => {
         notifTypeFilter.value = '';
         dateRangeFilter.value = '7d';
         currentPage = 1;
         fetchNotifications();
+        updateURL();
     });
     
-    // Add event listener for mark all as read
     markAllReadBtn.addEventListener('click', markAllAsRead);
     
     // Add event listeners for pagination
@@ -289,6 +319,7 @@ document.addEventListener('DOMContentLoaded', function() {
         if (currentPage > 1) {
             currentPage--;
             fetchNotifications();
+            updateURL();
         }
     });
     
@@ -296,20 +327,7 @@ document.addEventListener('DOMContentLoaded', function() {
         if (currentPage < totalPages) {
             currentPage++;
             fetchNotifications();
+            updateURL();
         }
     });
-    
-    // Initialize filters from URL parameters
-    const params = new URLSearchParams(window.location.search);
-    notifTypeFilter.value = params.get('notif_type') || '';
-    dateRangeFilter.value = params.get('date_range') || '7d';
-    currentPage = parseInt(params.get('page')) || 1;
-    
-    // Initial fetch if filters are set
-    if (notifTypeFilter.value || dateRangeFilter.value !== '7d') {
-        fetchNotifications();
-    }
-    
-    // Attach initial event listeners
-    attachEventListeners();
 });