fix: improved notifications + fixed bug

Signed-off-by: Trey <73353716+TreyWW@users.noreply.github.com>

backend/api/base/notifications.py

@@ -1,3 +1,4 @@
+from django.contrib import messages
 from django.http import HttpResponse
 from django.shortcuts import render
 
@@ -7,25 +8,34 @@
 
 def get_notification_html(request: HtmxHttpRequest):
     user_notifications = Notification.objects.filter(user=request.user).order_by("-date")
-    above_5 = False
+    count = user_notifications.count()
 
-    if user_notifications.count() > 5:
+    if count > 5:
         user_notifications = user_notifications[:5]
-        above_5 = True
 
     return render(
         request,
         "base/topbar/_notification_dropdown_items.html",
-        {"notifications": user_notifications, "notifications_above_max": above_5},
+        {"notifications": user_notifications, "notif_count": count},
     )
 
 
+def get_notification_count_html(request: HtmxHttpRequest):
+    user_notifications = Notification.objects.filter(user=request.user).count()
+    return HttpResponse(f"{user_notifications}")
+
+
 def delete_notification(request: HtmxHttpRequest, id: int):
     notif = Notification.objects.filter(id=id, user=request.user).first()
 
     if notif is None or notif.user != request.user:
+        if request.htmx:
+            messages.error(request, "Notification not found")
+            return render(request, "base/toasts.html")
         return HttpResponse(status=404, content="Notification not found")
 
     notif.delete()
 
-    return HttpResponse(status=200)
+    response = HttpResponse(status=200)
+    response["HX-Trigger"] = "refresh_notification_count"
+    return response

backend/api/base/urls.py

@@ -17,6 +17,7 @@
         notifications.get_notification_html,
         name="notifications get",
     ),
+    path("notifications/get_count", notifications.get_notification_count_html, name="notifications get count"),
     path(
         "notifications/delete/<int:id>",
         notifications.delete_notification,

frontend/templates/base/topbar/_notification_count.html

@@ -0,0 +1,6 @@
+<p hx-trigger="refresh_notification_count from:body"
+   hx-swap-oob='innerHTML:[data-notifications="count"]'
+   data-notifications="count"
+   hx-target="this"
+   hx-get="{% url 'api:base:notifications get count' %}"
+   hx-swap="innerHTML">{{ notif_count | default:request.user.notification_count }}</p>

frontend/templates/base/topbar/_notification_dropdown_items.html

@@ -41,9 +41,21 @@
         </li>
     {% elif notification.action == "redirect" %}
         <li>
-            <a tabindex="-1"
-               class="dropdown-item text-sm {% if not forloop.first %}mt-1{% endif %}"
-               href="{{ notification.action_value }}">{{ notification.message }}</a>
+            <div class="flex flex-col">
+                {{ notification.message }}
+                <a tabindex="-1"
+                   class="dropdown-item btn btn-sm btn-square btn-outline mt-1"
+                   hx-boost="true"
+                   href="{{ notification.action_value }}">
+                    <i class="fa fa-eye"></i>
+                </a>
+                <button class="btn btn-outline btn-square btn-sm btn-error mt-1"
+                        hx-delete="/api/base/notifications/delete/{{ notification.id }}"
+                        hx-target="closest li"
+                        hx-swap="outerHTML">
+                    <i class="fa fa-trash"></i>
+                </button>
+            </div>
         </li>
     {% elif notification.action == "modal" %}
         <li>
@@ -63,7 +75,7 @@
         <div class="dropdown-item text-sm mt-1 hover-none pointer-events-none">No notifications</div>
     </li>
 {% endfor %}
-{% if notifications_above_max %}
+{% if notif_count > 5 %}
     <li>
         <strong>
             You have older notifications.
@@ -72,4 +84,6 @@
         </strong>
     </li>
 {% endif %}
-{% include "base/topbar/_notification_bell.html" %}
+{% if not initial_load %}
+    {% include "base/topbar/_notification_count.html" %}
+{% endif %}

frontend/templates/base/topbar/_topbar.html

@@ -66,17 +66,16 @@
         {# Profile Picture  #}
         <details class="dropdown dropdown-end mr-3">
             <summary class="btn btn-ghost"
-                     data-notifications="bell"
                      hx-get="{% url "api:base:notifications get" %}"
                      hx-target='[data-notifications="container"]'
                      hx-swap="innerHTML"
-                     hx-trigger="click">
+                     hx-trigger="click ">
                 <i class="fa-solid fa-bell"></i>
-                {{ request.user.notification_count }}
+                {% include "base/topbar/_notification_count.html" %}
             </summary>
             <ul class="menu menu-sm dropdown-content border border-primary"
                 data-notifications="container">
-                {% include "base/topbar/_notification_dropdown_items.html" %}
+                {% include "base/topbar/_notification_dropdown_items.html" with initial_load=True %}
             </ul>
         </details>
         <div class="dropdown dropdown-end">