Merge pull request #193 from okriuchykhin/ok_global_notifications-SCI-442

Global notifications screen [SCI-442]

app/assets/javascripts/notifications.js

@@ -0,0 +1,19 @@
+$(document.body).ready(function () {
+  $('.btn-more-notifications')
+    .on("ajax:success", function (e, data) {
+      var list = $('.notifications-list');
+      var moreBtn = $('.btn-more-notifications');
+      if (data.html) {
+        // Remove button if all notifications are shown
+        if (data.results_number < data.per_page) {
+          moreBtn.remove();
+        //  Otherwise update reference
+        } else {
+          moreBtn.attr('href', data.more_notifications_url);
+        }
+        $(list).append(data.html);
+      } else if (data.results_number < 1) {
+        moreBtn.remove();
+      }
+    });
+});

app/assets/stylesheets/notifications.scss

@@ -0,0 +1,81 @@
+@import "colors";
+@import "mixins";
+
+.notifications-container {
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+
+.notifications-header {
+  background-color: $color-concrete;
+  border-left: 1px solid $color-alto;
+  border-right: 1px solid $color-alto;
+  border-top: 1px solid $color-alto;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  color: $color-dove-gray;
+  font-weight: bold;
+  padding: 8px;
+}
+
+.notifications-list {
+  background-color: $color-white;
+  border: 1px solid $color-alto;
+  list-style: none;
+  margin-bottom: 0;
+  padding: 0;
+
+  .notification {
+    border-bottom: 1px solid $color-alto;
+    padding-bottom: 10px;
+    padding-top: 10px;
+
+    &:hover {
+      background-color: $color-mystic;
+    }
+  }
+
+  .unseen {
+    border-left: 4px solid $color-theme-primary;
+  }
+
+  .text-center {
+    margin-left: 10px;
+    padding-top: 10px;
+  }
+
+  .assignment {
+    background-color: $color-theme-primary;
+    border-radius: 50%;
+    color: $color-wild-sand;
+    font-size: 15px;
+    padding: 7px;
+  }
+
+  .system-message {
+    background-color: $color-theme-secondary;
+    border-radius: 50%;
+    color: $color-wild-sand;
+    font-size: 13px;
+    padding: 7px 10px;
+  }
+}
+
+
+.notifications-footer {
+
+  background-color: $color-mystic;
+
+  .btn-more-notifications {
+    border-bottom: 1px solid $color-alto;
+    border-left: 1px solid $color-alto;
+    border-right: 1px solid $color-alto;
+    margin: 0;
+    padding: 8px;
+    text-align: center;
+
+    &:hover {
+      background-color: $color-mystic;
+    }
+  }
+}

app/controllers/user_notifications_controller.rb

@@ -1,4 +1,47 @@
 class UserNotificationsController < ApplicationController
+  layout 'main'
+
+  def index
+    @last_notification_id = params[:from].to_i || 0
+    @per_page = 10
+
+    @notifications =
+      UserNotification.last_notifications(@current_user,
+                                          @last_notification_id,
+                                          @per_page + 1)
+
+    @more_notifications_url = ''
+
+    @overflown = @notifications.length > @per_page
+
+    @notifications =
+      UserNotification.last_notifications(@current_user,
+                                          @last_notification_id,
+                                          @per_page)
+
+    if @notifications.count > 0
+      @more_notifications_url = url_for(
+        controller: 'user_notifications',
+        action: 'index',
+        format: :json,
+        from: @notifications.last.id
+      )
+    end
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          per_page: @per_page,
+          results_number: @notifications.length,
+          more_notifications_url: @more_notifications_url,
+          html: render_to_string(partial: 'list.html.erb')
+        }
+      end
+    end
+    UserNotification.seen_by_user(current_user)
+  end
+
   def recent_notifications
     @recent_notifications = UserNotification.recent_notifications(current_user)
 

app/models/user_notification.rb

@@ -2,6 +2,15 @@ class UserNotification < ActiveRecord::Base
   belongs_to :user
   belongs_to :notification
 
+  def self.last_notifications(user, last_notification_id = nil, per_page = 10)
+    last_notification_id = 999999999999999999999999 if last_notification_id < 1
+    Notification.joins(:user_notifications)
+                .where('user_notifications.user_id = ?', user.id)
+                .where('notifications.id < ?', last_notification_id)
+                .order(created_at: :DESC)
+                .limit(per_page)
+  end
+
   def self.recent_notifications(user)
     Notification.joins(:user_notifications)
                 .where('user_notifications.user_id = ?', user.id)

app/views/user_notifications/_list.html.erb

@@ -0,0 +1,27 @@
+<% @notifications.each do |notification| %>
+  <li class="notification <%= 'unseen' unless notification.already_seen(current_user) %>">
+    <div class="row">
+      <div class="col-xs-3 col-md-1">
+        <% if notification.type_of == 'recent_changes' %>
+        <div class="text-center">
+          <%= image_tag avatar_path(notification.generator_user, :icon_small), class: 'avatar' %>
+        </div>
+        <% end %>
+        <% if notification.type_of == 'assignment' %>
+        <div class="text-center">
+          <span class="assignment"><%= fa_icon 'newspaper-o' %></span>
+        </div>
+        <% end %>
+        <% if notification.type_of == 'system_message' %>
+        <div class="text-center">
+          <span class="system-message"><i class="glyphicon glyphicon-tower" aria-hidden="true"></i></span>
+        </div>
+        <% end %>
+      </div>
+      <div class="col-xs-9 col-md-11">
+        <strong><%= notification.title.html_safe %></strong> <br>
+        <%= l(notification.created_at, format: :full) %> | <%= notification.message %>
+      </div>
+    </div>
+  </li>
+<% end %>

app/views/user_notifications/index.html.erb

@@ -0,0 +1,20 @@
+<% provide(:head_title, raw(t("notifications.title"))) %>
+<div class="notifications-container">
+  <div class="notifications-header">
+    <span><%= t('notifications.title') %></span><span class="pull-right"><%= t('nav.user.settings') %></span>
+  </div>
+  <div class="notifications-body">
+    <ul class="notifications-list">
+      <%= render 'list', notifications: @notifications %>
+    </ul>
+  </div>
+  <div class="notifications-footer">
+    <% if @overflown %>
+      <a class="btn-more-notifications col-xs-12" href="<%= @more_notifications_url %>" data-remote="true">
+        <span><%= t('notifications.show_more') %></span>
+      </a>
+    <% end %>
+  </div>
+</div>
+
+<%= javascript_include_tag("notifications") %>

config/initializers/assets.rb

@@ -59,6 +59,7 @@ Rails.application.config.assets.precompile += %w(assets.js)
 Rails.application.config.assets.precompile += %w(comments.js)
 Rails.application.config.assets.precompile += %w(projects/show.js)
 Rails.application.config.assets.precompile += %w(projects/introdutory_popup.js)
+Rails.application.config.assets.precompile += %w(notifications.js)
 
 # Libraries needed for Handsontable formulas
 Rails.application.config.assets.precompile += %w(lodash.js)

config/locales/en.yml

@@ -1514,6 +1514,9 @@ en:
     form:
       assignments: "Assignments notifications"
       recent_notification: "Change notifications"
+    filter: "Filter"
+    show_all: "Show all notifications"
+    show_more: "Show more notifications"
   # This section contains general words that can be used in any parts of
   # application.
 

config/routes.rb

@@ -47,6 +47,10 @@ Rails.application.routes.draw do
       as: 'unseen_notification',
       defaults: { format: 'json' }
 
+  get 'users/notifications',
+      to: 'user_notifications#index',
+      as: 'notifications'
+
   resources :organizations, only: [] do
     resources :samples, only: [:new, :create]
     resources :sample_types, only: [:new, :create]