dashboard: paginate notifications

circle/dashboard/static/dashboard/dashboard.less

@@ -1151,3 +1151,25 @@ textarea[name="new_members"] {
     background-position: 0 0px;
   }
 }
+
+#notifications-upper-pagination {
+  margin-top: 4px;
+}
+
+#notifications-bottom-pagination {
+  * {
+    display: inline-block;
+  }
+
+  a {
+    font-size: 20px;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .page-numbers {
+    padding: 25px;
+  }
+}

circle/dashboard/templates/dashboard/_notifications-timeline.html

 {% load i18n %}
 {% load hro %}
-{% for n in notifications %}
+{% for n in page %}
   <li class="notification-message" id="msg-{{n.id}}">
     <span class="notification-message-subject">
       {% if n.status == "new" %}<i class="fa fa-envelope-o"></i> {% endif %}

circle/dashboard/templates/dashboard/notifications.html

@@ -6,6 +6,18 @@
   <div class="col-md-12">
     <div class="panel panel-default">
       <div class="panel-heading">
+        <div id="notifications-upper-pagination" class="pull-right">
+          {% if page.has_previous %}
+            <a href="?page={{ page.previous_page_number }}">
+              <i class="fa fa-chevron-left"></i></a>
+            </a>
+          {% endif %}
+          {{ page.number }} / {{ paginator.num_pages }}
+          {% if page.has_next %}
+          <a href="?page={{ page.next_page_number }}"><i class="fa fa-chevron-right"></i></a>
+          {% endif %}
+        </div>
+
         <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Notifications" %}</h3>
       </div>
       <div class="panel-body">
@@ -13,6 +25,29 @@
           {% include "dashboard/_notifications-timeline.html" %}
         </ul>
       </div>
+      <div class="panel-body text-center" id="notifications-bottom-pagination">
+        {% if page.has_previous %}
+        <a href="?page=1">
+          <i class="fa fa-angle-double-left"></i>
+        </a>
+        <a href="{% if page.has_previous %}?page={{ page.previous_page_number}}{% else %}#{% endif %}">
+          <i class="fa fa-angle-left"></i>
+        </a>
+        {% endif %}
+
+        <div class="page-numbers">
+          {{ page.number }} / {{ paginator.num_pages }}
+        </div>
+
+        {% if page.has_next %}
+        <a href="{% if page.has_next %}?page={{ page.next_page_number}}{% else %}#{% endif %}">
+          <i class="fa fa-angle-right"></i>
+        </a>
+        <a href="?page={{ paginator.num_pages }}">
+          <i class="fa fa-angle-double-right"></i>
+        </a>
+        {% endif %}
+      </div>
     </div>
   </div>
 </div>

circle/dashboard/views/user.py

@@ -30,6 +30,7 @@ from django.core.exceptions import (
     PermissionDenied, SuspiciousOperation,
 )
 from django.core.urlresolvers import reverse, reverse_lazy
+from django.core.paginator import Paginator, InvalidPage
 from django.http import HttpResponse, HttpResponseRedirect, Http404
 from django.shortcuts import redirect, get_object_or_404
 from django.utils.translation import ugettext as _
@@ -67,9 +68,18 @@ class NotificationView(LoginRequiredMixin, TemplateView):
     def get_context_data(self, *args, **kwargs):
         context = super(NotificationView, self).get_context_data(
             *args, **kwargs)
-        n = 10 if self.request.is_ajax() else 1000
-        context['notifications'] = list(
-            self.request.user.notification_set.all()[:n])
+        paginate_by = 10 if self.request.is_ajax() else 25
+        page = self.request.GET.get("page", 1)
+
+        notifications = self.request.user.notification_set.all()
+        paginator = Paginator(notifications, paginate_by)
+        try:
+            current_page = paginator.page(page)
+        except InvalidPage:
+            current_page = paginator.page(1)
+
+        context['page'] = current_page
+        context['paginator'] = paginator
         return context
 
     def get(self, *args, **kwargs):