create notification listing page

app/dashboard/views/notification.py

@@ -1,6 +1,7 @@
 from flask import redirect, url_for, flash, render_template, request
 from flask_login import login_required, current_user
 
+from app.config import PAGE_LIMIT
 from app.dashboard.base import dashboard_bp
 from app.db import Session
 from app.models import Notification
@@ -31,3 +32,26 @@ def notification_route(notification_id):
         return redirect(url_for("dashboard.index"))
     else:
         return render_template("dashboard/notification.html", notification=notification)
+
+
+@dashboard_bp.route("/notifications", methods=["GET", "POST"])
+@login_required
+def notifications_route():
+    page = 0
+    if request.args.get("page"):
+        page = int(request.args.get("page"))
+
+    notifications = (
+        Notification.filter_by(user_id=current_user.id)
+        .order_by(Notification.read, Notification.created_at.desc())
+        .limit(PAGE_LIMIT + 1)  # load a record more to know whether there's more
+        .offset(page * PAGE_LIMIT)
+        .all()
+    )
+
+    return render_template(
+        "dashboard/notifications.html",
+        notifications=notifications,
+        page=page,
+        last_page=len(notifications) <= PAGE_LIMIT,
+    )

templates/dashboard/notification.html

@@ -11,7 +11,7 @@
   <div class="card">
     <div class="card-body">
       <h1 class="h3">
-        {{ notification.title }}
+        {{ notification.title or "" }}
       </h1>
 
       <div>

templates/dashboard/notifications.html

@@ -0,0 +1,64 @@
+{% extends 'default.html' %}
+
+{% set active_page = "dashboard" %}
+
+{% block title %}
+  Notifications
+{% endblock %}
+
+{% block default_content %}
+  <div class="row">
+    <div class="col">
+
+      <h1 class="h3"> Notifications </h1>
+
+      {% for notification in notifications %}
+        <div class="card">
+          <div class="card-body">
+            <div class="h4">
+              {{ notification.title or ""}}
+            </div>
+
+            <div
+                style="width: 40em; word-wrap:break-word; white-space: normal; overflow: hidden; max-height: 100px; text-overflow: ellipsis;">
+              {{ notification.message | safe }}
+            </div>
+
+            <a href="{{ url_for('dashboard.notification_route', notification_id=notification.id) }}"
+               class="mt-2 btn btn-outline-primary">More ➡</a>
+
+            <div class="small text-muted mt-2">
+              {{ notification.created_at | dt }}
+            </div>
+          </div>
+        </div>
+
+      {% endfor %}
+
+      <!-- Only show pagination control if there are previous/next page -->
+      {% if page > 0 or not last_page %}
+        <div class="row">
+          <div class="col">
+            <nav aria-label="Notification navigation">
+              <ul class="pagination">
+                <li class="page-item mr-1">
+                  <a class="btn btn-outline-primary {% if page == 0 %}disabled{% endif %}"
+                     href="{{ url_for('dashboard.notifications_route', page=page-1) }}">
+                    Previous</a>
+                </li>
+                <li class="page-item">
+                  <a class="btn btn-outline-primary {% if last_page %}disabled{% endif %}"
+                     href="{{ url_for('dashboard.notifications_route', page=page+1) }}">
+                    Next</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      {% endif %}
+
+    </div>
+  </div>
+
+{% endblock %}
+

templates/header.html

@@ -32,6 +32,10 @@
 
           <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow collapse" id="notifications">
             <div v-if="loading">Loading ...</div>
+            <a href="{{ url_for('dashboard.notifications_route') }}" class="mr-5 mb-2 float-right">
+              See all notifications ➡
+            </a>
+
             <div class="dropdown-item d-flex" v-for="notification in notifications">
               <div class="flex-grow-1">
                 <div v-html="notification.title" class="font-weight-bold" style="width: 40em; word-wrap:break-word; white-space: normal; overflow: hidden;"></div>