From 3595b46106cd8d80fe0347833c6045a878782c78 Mon Sep 17 00:00:00 2001
From: Jonathan Kolyer <jonathan@jamkazam.com>
Date: Mon, 6 Oct 2014 04:51:19 +0000
Subject: [PATCH] VRFS-1486 paginated scrolling of notifications;  adjusting
 notification layout

---
 .../assets/javascripts/notificationPanel.js   | 45 +++++++++++++++----
 .../stylesheets/client/sidebar.css.scss       |  5 +++
 web/app/controllers/api_users_controller.rb   | 15 ++++---
 web/app/views/clients/_sidebar.html.erb       |  2 +-
 4 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/web/app/assets/javascripts/notificationPanel.js b/web/app/assets/javascripts/notificationPanel.js
index 66dcd2553..fd9081752 100644
--- a/web/app/assets/javascripts/notificationPanel.js
+++ b/web/app/assets/javascripts/notificationPanel.js
@@ -22,6 +22,9 @@
     var queuedNotification = null;
     var queuedNotificationCreatedAt = null;
     var sessionUtils = context.JK.SessionUtils;
+    var notificationBatchSize = 20;
+    var currentNotificationPage = 0;
+    var didLoadAllNotifications = false, isLoading = false;
 
     function isNotificationsPanelVisible() {
       return $contents.is(':visible')
@@ -193,18 +196,26 @@
       registerTextMessage();
     }
 
+    function buildParams() {
+      return { offset: currentNotificationPage * notificationBatchSize, limit: notificationBatchSize};
+    }
+
     function populate() {
+      if (isLoading || didLoadAllNotifications) return;
+      isLoading = true;
       // retrieve pending notifications for this user
-      rest.getNotifications()
-        .done(function(response) {
-          updateNotificationList(response);
-        })
-        .fail(app.ajaxError)
+      rest.getNotifications(buildParams())
+            .done(function(response) {
+                updateNotificationList(response);
+                isLoading = false;
+            })
+            .fail(function() {
+                isLoading = false;
+                app.ajaxError();
+            })
     }
 
     function updateNotificationList(response) {
-      $list.empty();
-
       $.each(response, function(index, val) {
 
         if(val.description == 'TEXT_MESSAGE') {
@@ -228,8 +239,12 @@
         // val.description contains the notification record's description value from the DB (i.e., type)
         initializeActions(val, val.description);
       });
-    }
 
+      if(response.length < notificationBatchSize) {
+        didLoadAllNotifications = true;
+      }
+      currentNotificationPage++;
+    }
 
     function initializeActions(payload, type) {
 
@@ -1198,6 +1213,19 @@
       deleteNotification(notificationId);
     }
 
+    function registerNotificationScroll() {
+        $('.notification-scroller').scroll(function() {
+            var wintop = $('.notification-scroller').scrollTop();
+            var winheight = $('.notification-scroller').height();
+            var docheight = $('#sidebar-notification-list').height();
+            var scrollTrigger = 0.90;
+            // console.log("notification scroll:  wintop="+wintop+" docheight="+docheight+" winheight="+winheight+" ratio="+(wintop / (docheight - winheight)));
+            if ((wintop / (docheight - winheight)) > scrollTrigger) {
+                populate();
+            }
+        });
+    }
+
     function initialize(sidebarInstance, textMessageDialogInstance) {
       sidebar = sidebarInstance;
       textMessageDialog = textMessageDialogInstance;
@@ -1213,6 +1241,7 @@
       if($count.length == 0) throw "notifications count element not found";
       if($list.length == 0) throw "notification list element not found";
       if($notificationTemplate.length == 0) throw "notification template not found";
+      registerNotificationScroll();
 
       events();
 
diff --git a/web/app/assets/stylesheets/client/sidebar.css.scss b/web/app/assets/stylesheets/client/sidebar.css.scss
index 09c4a4585..17c975616 100644
--- a/web/app/assets/stylesheets/client/sidebar.css.scss
+++ b/web/app/assets/stylesheets/client/sidebar.css.scss
@@ -259,6 +259,7 @@
         height:13px;
         top:0px;
         right:3px;
+        margin-right:5px;
     }
 
     .sidebar-search-result {
@@ -311,6 +312,10 @@
 
    #sidebar-notification-list {
 
+    li {
+       margin:0px 5px 0px 5px;
+     }
+
      .text-message {
         word-wrap:break-word;
      }
diff --git a/web/app/controllers/api_users_controller.rb b/web/app/controllers/api_users_controller.rb
index ddfcf4630..955d0677d 100644
--- a/web/app/controllers/api_users_controller.rb
+++ b/web/app/controllers/api_users_controller.rb
@@ -320,14 +320,17 @@ class ApiUsersController < ApiController
       raise JamArgumentError.new('can\'t be blank', 'offset')      if params[:offset].blank?
 
       receiver_id = params[:receiver]
-      limit = params[:limit]
-      limit = limit.to_i
-      offset = params[:offset]
-      offset = offset.to_i
+      limit = params[:limit].to_i
+      limit = 20 if limit <= 0
+      offset = params[:offset].to_i
+      offset = 0 if offset < 0
       @notifications = Notification.where(description: 'TEXT_MESSAGE').where('(source_user_id = (?) AND target_user_id = (?)) OR (source_user_id = (?) AND target_user_id = (?))', @user.id, receiver_id, receiver_id, @user.id).offset(offset).limit(limit).order('created_at DESC')
     else
-      # you can ask for all notifications
-      @notifications = @user.notifications
+      limit = params[:limit].to_i
+      limit = 20 if limit <= 0
+      offset = params[:offset].to_i
+      offset = 0 if offset < 0
+      @notifications = @user.notifications.offset(offset).limit(limit)
     end
 
     respond_with @notifications, responder: ApiResponder, :status => 200
diff --git a/web/app/views/clients/_sidebar.html.erb b/web/app/views/clients/_sidebar.html.erb
index 5ee9b6f2d..dbb92c66a 100644
--- a/web/app/views/clients/_sidebar.html.erb
+++ b/web/app/views/clients/_sidebar.html.erb
@@ -131,7 +131,7 @@
       <div layout-panel="header" class="panel-header">
         <h2>notifications<div id="sidebar-notification-count" class="badge">0</div></h2>
       </div>
-      <div layout-panel="contents" class="panelcontents">
+      <div layout-panel="contents" class="panelcontents notification-scroller">
         <ul id="sidebar-notification-list">
         </ul>
       </div>