fix event filtering

routes/main.py

@@ -491,6 +491,24 @@ def init_routes(main_bp):
         # Get paginated notifications
         notifications = query.order_by(Notif.timestamp.desc()).paginate(page=page, per_page=per_page)
         
+        # Check if this is an AJAX request
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            return jsonify({
+                'notifications': [{
+                    'id': notif.id,
+                    'notif_type': notif.notif_type,
+                    'timestamp': notif.timestamp.strftime('%Y-%m-%d %H:%M:%S'),
+                    'read': notif.read,
+                    'details': notif.details,
+                    'sender': {
+                        'username': notif.sender.username,
+                        'last_name': notif.sender.last_name
+                    } if notif.sender else None
+                } for notif in notifications.items],
+                'total_pages': total_pages,
+                'current_page': page
+            })
+        
         return render_template('notifications/notifications.html',
                              notifications=notifications.items,
                              total_pages=total_pages,

static/js/notifications.js

@@ -66,14 +66,68 @@ 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
+            // Update the table with the notifications
+            if (data.notifications && data.notifications.length > 0) {
+                notifsTableBody.innerHTML = data.notifications.map(notif => `
+                    <tr class="${notif.read ? '' : 'table-warning'}" data-notif-id="${notif.id}">
+                        <td>${notif.timestamp}</td>
+                        <td>${getNotifTypeBadge(notif.notif_type)}</td>
+                        <td>${notif.sender ? `${notif.sender.username} ${notif.sender.last_name}` : 'System'}</td>
+                        <td>
+                            ${notif.read ? 
+                                '<span class="badge bg-success">Read</span>' : 
+                                '<span class="badge bg-warning">Unread</span>'}
+                        </td>
+                        <td>
+                            <div class="btn-group">
+                                ${getActionButtons(notif)}
+                                <button class="btn btn-sm btn-secondary" 
+                                        data-bs-toggle="modal" 
+                                        data-bs-target="#notifDetailsModal"
+                                        data-notif-id="${notif.id}"
+                                        data-bs-toggle="tooltip"
+                                        title="View Details">
+                                    <i class="fas fa-info-circle"></i>
+                                </button>
+                                ${!notif.read ? `
+                                    <button class="btn btn-sm btn-success mark-read" 
+                                            data-notif-id="${notif.id}"
+                                            data-bs-toggle="tooltip"
+                                            title="Mark as Read">
+                                        <i class="fas fa-check"></i>
+                                    </button>
+                                ` : ''}
+                                <button class="btn btn-sm btn-danger delete-notif" 
+                                        data-notif-id="${notif.id}"
+                                        data-bs-toggle="tooltip"
+                                        title="Delete">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                `).join('');
+            } else {
+                notifsTableBody.innerHTML = '<tr><td colspan="5" class="text-center">No notifications found</td></tr>';
+            }
+            
+            // Update pagination
+            totalPages = data.total_pages;
+            currentPage = data.current_page;
+            currentPageSpan.textContent = currentPage;
+            totalPagesSpan.textContent = totalPages;
+            prevPageBtn.disabled = currentPage <= 1;
+            nextPageBtn.disabled = currentPage >= totalPages;
+            
+            // Reinitialize tooltips
             const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
             tooltipTriggerList.map(function (tooltipTriggerEl) {
                 return new bootstrap.Tooltip(tooltipTriggerEl);
             });
+            
+            // Reattach event listeners
+            attachEventListeners();
         } catch (error) {
             console.error('Error fetching notifications:', error);
             notifsTableBody.innerHTML = '<tr><td colspan="6" class="text-center">Error loading notifications</td></tr>';
@@ -331,3 +385,33 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 }); 
+
+// Function to get action buttons based on notification type
+function getActionButtons(notif) {
+    if (notif.notif_type === 'room_invite' || notif.notif_type === 'room_invite_removed') {
+        if (notif.details && notif.details.room_id) {
+            return `
+                <a href="/rooms/${notif.details.room_id}" 
+                   class="btn btn-sm btn-primary"
+                   data-bs-toggle="tooltip"
+                   title="View Room">
+                    <i class="fas fa-door-open"></i>
+                </a>
+            `;
+        }
+    } else if (notif.notif_type === 'conversation_invite' || 
+               notif.notif_type === 'conversation_invite_removed' || 
+               notif.notif_type === 'conversation_message') {
+        if (notif.details && notif.details.conversation_id) {
+            return `
+                <a href="/conversations/${notif.details.conversation_id}" 
+                   class="btn btn-sm btn-primary"
+                   data-bs-toggle="tooltip"
+                   title="View Conversation">
+                    <i class="fas fa-comments"></i>
+                </a>
+            `;
+        }
+    }
+    return '';
+}