Add counters logic for notifications [SCI-8280]

app/assets/stylesheets/navigation/notifications.scss

@@ -12,6 +12,24 @@
     top: var(--top-navigation);
   }
 
+  .has-unseen {
+    &::after {
+      align-items: center;
+      background-color: $brand-focus;
+      border-radius: .5rem;
+      color: $color-white;
+      content: attr(data-unseen);
+      display: flex;
+      font-size: 10px;
+      height: 1rem;
+      justify-content: center;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 1rem;
+    }
+  }
+
   .sci--navigation--notificaitons-flyout {
     background-color: $color-white;
     border-radius: 0 0  $border-radius-default $border-radius-default;
@@ -48,6 +66,8 @@
 
     .sci--navigation--notificaitons-flyout-tab {
       cursor: pointer;
+      padding: .5rem .625rem;
+      position: relative;
 
       &.active {
         color: $brand-focus;

app/controllers/user_notifications_controller.rb

@@ -13,7 +13,20 @@ class UserNotificationsController < ApplicationController
         }
       end
     end
-    UserNotification.seen_by_user(current_user)
+
+    UserNotification.where(
+      notification_id: notifications.where.not(type_of: 2).select(:id)
+    ).seen_by_user(current_user)
+
+    current_user.user_system_notifications.where(
+      system_notification_id: notifications.where(type_of: 2).select(:id)
+    ).mark_as_seen
+  end
+
+  def unseen_counter
+    render json: {
+      unseen: load_notifications.where(checked: false).size
+    }
   end
 
   private

app/javascript/vue/navigation/notifications/notification_item.vue

@@ -25,7 +25,7 @@ export default {
       switch(this.notification.type_of) {
         case 'deliver':
           return 'fa-truck';
-        case 'system':
+        case 'system_message':
           return 'fa-gift';
         case 'assignment':
           return 'fa-list-alt';

app/javascript/vue/navigation/notifications/notifications_flyout.vue

@@ -6,8 +6,9 @@
     </div>
     <div class="sci--navigation--notificaitons-flyout-tabs">
       <div class="sci--navigation--notificaitons-flyout-tab"
+           :data-unseen="unseenNotificationsCount"
            @click="setActiveTab('all')"
-           :class="{'active': activeTab == 'all'}">
+           :class="{'active': activeTab == 'all', 'has-unseen': unseenNotificationsCount > 0}">
         {{ i18n.t('nav.notifications.all') }}
       </div>
       <div class="sci--navigation--notificaitons-flyout-tab"
@@ -48,7 +49,8 @@ export default {
     NotificationItem
   },
   props: {
-    notificationsUrl: String
+    notificationsUrl: String,
+    unseenNotificationsCount: Number
   },
   data() {
     return {
@@ -84,6 +86,8 @@ export default {
   methods: {
     setActiveTab(selection) {
       this.activeTab = selection;
+      this.nextPage = 1;
+      this.notifications = [];
       this.loadNotifications();
     },
     loadNotifications() {

app/javascript/vue/navigation/top_menu.vue

@@ -49,11 +49,19 @@
       </ul>
     </div>
     <div v-if="user" class="sci--navigation--notificaitons-flyout-container">
-      <button class="btn btn-light icon-btn" data-toggle="dropdown" @click="notificationsOpened = !notificationsOpened">
+      <button class="btn btn-light icon-btn"
+              :class="{ 'has-unseen': unseenNotificationsCount > 0 }"
+              :data-unseen="unseenNotificationsCount"
+              data-toggle="dropdown"
+              @click="notificationsOpened = !notificationsOpened">
         <i class="fas fa-bell"></i>
       </button>
       <div v-if="notificationsOpened" class="sci--navigation--notificaitons-flyout-backdrop" @click="notificationsOpened = false"></div>
-      <NotificationsFlyout v-if="notificationsOpened" :notifications-url="notificationsUrl" @close="notificationsOpened = false" />
+      <NotificationsFlyout
+        v-if="notificationsOpened"
+        :notificationsUrl="notificationsUrl"
+        :unseenNotificationsCount="unseenNotificationsCount"
+        @close="notificationsOpened = false" />
     </div>
     <div v-if="user" class="dropdown">
       <div class="sci--navigation--top-menu-user" data-toggle="dropdown">
@@ -88,7 +96,8 @@
     },
     props: {
       url: String,
-      notificationsUrl: String
+      notificationsUrl: String,
+      unseenNotificationsUrl: String
     },
     data() {
       return {
@@ -102,7 +111,8 @@
         settingsMenu: null,
         userMenu: null,
         showAboutModal: false,
-        notificationsOpened: false
+        notificationsOpened: false,
+        unseenNotificationsCount: 0
       }
     },
     created() {
@@ -117,6 +127,13 @@
         this.userMenu = result.user_menu;
         this.user = result.user;
       })
+
+      this.checkUnseenNotifications();
+
+      $(document).on('turbolinks:load', () => {
+        this.notificationsOpened = false;
+        this.checkUnseenNotifications();
+      })
     },
     methods: {
       switchTeam(team) {
@@ -130,8 +147,13 @@
           HelperModule.flashAlertMsg(msg.responseJSON.message, 'danger');
         });
       },
-       searchValue(e) {
+      searchValue(e) {
         window.open(`${this.searchUrl}?q=${e.target.value}`, '_self')
+      },
+      checkUnseenNotifications() {
+        $.get(this.unseenNotificationsUrl, (result) => {
+          this.unseenNotificationsCount = result.unseen;
+        })
       }
     }
   }

app/views/shared/navigation/_top.html.erb

@@ -1,3 +1,6 @@
 <div id="sciNavigationTopMenuContainer" data-turbolinks-permanent data-behaviour="vue">
-  <top-menu-container url="<%= top_menu_navigations_path %>" notifications-url="<%= notifications_path %>" />
+  <top-menu-container
+    url="<%= top_menu_navigations_path %>"
+    notifications-url="<%= user_notifications_path %>"
+    unseen-notifications-url="<%= unseen_counter_user_notifications_path %>" />
 </div>

config/routes.rb

@@ -165,10 +165,11 @@ Rails.application.routes.draw do
           as: 'invitable_teams'
     end
 
-    # Notifications
-    get 'users/notifications',
-        to: 'user_notifications#index',
-        as: 'notifications'
+    resources :user_notifications, only: :index do
+      collection do
+        get :unseen_counter
+      end
+    end
 
     # Get Zip Export
     get 'zip_exports/download/:id',