From 181a6b72b0f944e1c2c18cc89b838ff7d7f54d65 Mon Sep 17 00:00:00 2001
From: nilsding <nilsding@nilsding.org>
Date: Thu, 8 Jan 2015 18:22:27 +0100
Subject: [PATCH] pagination for notifications

---
 app/controllers/notifications_controller.rb   |  6 +-
 .../notifications/_notification.html.haml     | 57 ++++++++++++++++
 app/views/notifications/index.html.haml       | 66 +++----------------
 app/views/notifications/index.js.erb          |  8 +++
 4 files changed, 78 insertions(+), 59 deletions(-)
 create mode 100644 app/views/notifications/_notification.html.haml
 create mode 100644 app/views/notifications/index.js.erb

diff --git a/app/controllers/notifications_controller.rb b/app/controllers/notifications_controller.rb
index 5ad7c0c3..073427e9 100644
--- a/app/controllers/notifications_controller.rb
+++ b/app/controllers/notifications_controller.rb
@@ -7,6 +7,10 @@ class NotificationsController < ApplicationController
                        Notification.for(current_user)
                      else
                        Notification.for(current_user).where('LOWER(target_type) = ?', @type)
-                     end
+                     end.paginate(page: params[:page])
+    respond_to do |format|
+      format.html
+      format.js
+    end
   end
 end
diff --git a/app/views/notifications/_notification.html.haml b/app/views/notifications/_notification.html.haml
new file mode 100644
index 00000000..00fb1ccb
--- /dev/null
+++ b/app/views/notifications/_notification.html.haml
@@ -0,0 +1,57 @@
+%li.list-group-item{class: (notification.new? ? 'list-group-item-warning' : '')}
+  .media
+    - case notification.target_type
+      - when "Answer"
+        .pull-left
+          %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+        .media-body
+          %h6.media-heading.notification--user
+            = user_screen_name notification.target.user
+          %p.notification--text
+            answered
+            %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id), title: "#{notification.target.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
+              your question
+            = time_ago_in_words notification.target.created_at
+            ago
+          .notification--icon
+            %i.fa.fa-exclamation
+      - when "Relationship"
+        .pull-left
+          %img.img-rounded.notification--img{src: gravatar_url(notification.target.source)}
+        .media-body
+          %h6.media-heading.notification--user
+            = user_screen_name notification.target.source
+          %p.notification--text
+            followed you
+            = time_ago_in_words notification.target.created_at
+            ago
+          .notification--icon
+            %i.fa.fa-users
+      - when "Smile"
+        .pull-left
+          %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+        .media-body
+          %h6.media-heading.notification--user
+            = user_screen_name notification.target.user
+          %p.notification--text
+            smiled at
+            %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id), title: "#{notification.target.answer.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
+              your answer
+            = time_ago_in_words notification.target.created_at
+            ago
+          .notification--icon
+            %i.fa.fa-smile-o
+      - when "Comment"
+        .pull-left
+          %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+        .media-body
+          %h6.media-heading.notification--user
+            = user_screen_name notification.target.user
+          %p.notification--text
+            commented on
+            %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id), title: "#{notification.target.answer.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
+              your answer
+            = time_ago_in_words notification.target.created_at
+            ago
+          .notification--icon
+            %i.fa.fa-comments
\ No newline at end of file
diff --git a/app/views/notifications/index.html.haml b/app/views/notifications/index.html.haml
index 919de1c4..949d6e88 100644
--- a/app/views/notifications/index.html.haml
+++ b/app/views/notifications/index.html.haml
@@ -1,63 +1,13 @@
 .container.j2-page
   = render 'notification_tabs'
   .col-md-9.col-xs-12.col-sm-9
-    %ul.list-group
+    %ul#notifications.list-group
       - @notifications.each do |notification|
-        %li.list-group-item{class: (notification.new? ? 'list-group-item-warning' : '')}
-          .media
-            - case notification.target_type
-              - when "Answer"
-                .pull-left
-                  %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
-                .media-body
-                  %h6.media-heading.notification--user
-                    = user_screen_name notification.target.user
-                  %p.notification--text
-                    answered
-                    %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id), title: "#{notification.target.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
-                      your question
-                    = time_ago_in_words notification.target.created_at
-                    ago
-                  .notification--icon
-                    %i.fa.fa-exclamation
-              - when "Relationship"
-                .pull-left
-                  %img.img-rounded.notification--img{src: gravatar_url(notification.target.source)}
-                .media-body
-                  %h6.media-heading.notification--user
-                    = user_screen_name notification.target.source
-                  %p.notification--text
-                    followed you
-                    = time_ago_in_words notification.target.created_at
-                    ago
-                  .notification--icon
-                    %i.fa.fa-users
-              - when "Smile"
-                .pull-left
-                  %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
-                .media-body
-                  %h6.media-heading.notification--user
-                    = user_screen_name notification.target.user
-                  %p.notification--text
-                    smiled at
-                    %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id), title: "#{notification.target.answer.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
-                      your answer
-                    = time_ago_in_words notification.target.created_at
-                    ago
-                  .notification--icon
-                    %i.fa.fa-smile-o
-              - when "Comment"
-                .pull-left
-                  %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
-                .media-body
-                  %h6.media-heading.notification--user
-                    = user_screen_name notification.target.user
-                  %p.notification--text
-                    commented on
-                    %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id), title: "#{notification.target.answer.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
-                      your answer
-                    = time_ago_in_words notification.target.created_at
-                    ago
-                  .notification--icon
-                    %i.fa.fa-comments
+        = render 'notifications/notification', notification: notification
+
+      #pagination= will_paginate @notifications, renderer: BootstrapPagination::Rails, page_links: false
+
+      - if @notifications.next_page
+        %button#load-more-btn.btn.btn-default{type: :button, data: { current_page: @notifications.current_page }}
+          Load more
 - Notification.for(current_user).update_all(new: false)
\ No newline at end of file
diff --git a/app/views/notifications/index.js.erb b/app/views/notifications/index.js.erb
new file mode 100644
index 00000000..f3f5bd18
--- /dev/null
+++ b/app/views/notifications/index.js.erb
@@ -0,0 +1,8 @@
+$('#notifications').append('<% @notifications.each do |notification|
+  %><%= j render 'notifications/notification', notification: notification
+%><% end %>');
+<% if @notifications.next_page %>
+  $('#pagination').html('<%= j will_paginate @notifications, renderer: BootstrapPagination::Rails, page_links: false %>');
+<% else %>
+  $('#pagination, #load-more-btn').remove();
+<% end %>
\ No newline at end of file