Small fixes for notificaitions [SCI-8331]

app/assets/javascripts/system_notifications/index.js

@@ -24,11 +24,6 @@ function bindSystemNotificationAjax() {
       $('.dropdown.system-notifications').removeClass('open');
       // Open modal
       SystemNotificationModal.modal('show');
-      if (SystemNotification[0].dataset.unread === '1') {
-        $.each(SystemNotification, (index, e) => { e.dataset.unread = '0'; });
-        SystemNotification.find('.status-icon').addClass('seen');
-        $.post('/system_notifications/' + data.id + '/mark_as_read');
-      }
     });
 }
 

app/assets/stylesheets/navigation/notifications.scss

@@ -9,7 +9,7 @@
     left: 0;
     position: fixed;
     right: 0;
-    top: var(--top-navigation);
+    top: 0;
   }
 
   .has-unseen {
@@ -131,8 +131,17 @@
       }
 
       .sci-navigation--notificaitons-flyout-notification-title {
-        font-weight: bold;
         margin: .25rem 0;
+
+        &:not([data-seen="true"]) {
+          font-weight: bold;
+        }
+      }
+
+      .sci-navigation--notificaitons-flyout-notification-message {
+        &[data-notification="system"] {
+          cursor: pointer;
+        }
       }
     }
   }

app/controllers/system_notifications_controller.rb

@@ -2,6 +2,7 @@
 
 class SystemNotificationsController < ApplicationController
   def show
+    current_user.user_system_notifications.mark_as_read(params[:id])
     render json: current_user.system_notifications.modals
                              .find_by_id(params[:id]) || {}
   end

app/controllers/user_notifications_controller.rb

@@ -66,7 +66,8 @@ class UserNotificationsController < ApplicationController
         message: notification.message,
         created_at: I18n.l(notification.created_at, format: :full),
         today: notification.created_at.today?,
-        checked: notification.checked
+        checked: notification.checked,
+        action_url: (system_notification_path(notification.id) if notification.type_of == 'system_message')
       }
     end
   end

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

@@ -6,11 +6,11 @@
     <div class="sci-navigation--notificaitons-flyout-notification-date">
       {{ notification.created_at }}
     </div>
-    <div class="sci-navigation--notificaitons-flyout-notification-title">
-      {{ notification.title }}
-    </div>
-    <div v-if="notification.type_of !== 'system'" v-html="notification.message" class="sci-navigation--notificaitons-flyout-notification-message"></div>
-    <a v-else :href="notification.url" class="sci-navigation--notificaitons-flyout-notification-message">{{ i18n.t('nav.notifications.read_more') }}</a>
+    <div class="sci-navigation--notificaitons-flyout-notification-title"
+         v-html="notification.title"
+         :data-seen="notification.checked"></div>
+    <div v-if="notification.type_of !== 'system_message'" v-html="notification.message" class="sci-navigation--notificaitons-flyout-notification-message"></div>
+    <a v-else @click="showSystemNotification()" class="sci-navigation--notificaitons-flyout-notification-message" data-notification="system">{{ i18n.t('nav.notifications.read_more') }}</a>
   </div>
 </template>
 
@@ -33,6 +33,18 @@ export default {
           return 'fa-list-alt';
       }
     }
+  },
+  methods: {
+    showSystemNotification() {
+      $.get(this.notification.action_url, (data) => {
+        let systemNotificationModal = $('#manage-module-system-notification-modal');
+        let systemNotificationModalBody = systemNotificationModal.find('.modal-body');
+        let systemNotificationModalTitle = systemNotificationModal.find('#manage-module-system-notification-modal-label');
+        systemNotificationModalBody.html(data.modal_body);
+        systemNotificationModalTitle.text(data.modal_title);
+        systemNotificationModal.modal('show');
+      });
+    }
   }
 }
 </script>

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

@@ -96,6 +96,7 @@ export default {
         this.notifications = this.notifications.concat(result.notifications);
         this.nextPage = result.next_page;
         this.loadingPage = false;
+        this.$emit('update:unseenNotificationsCount');
       });
     }
   }

app/javascript/vue/navigation/top_menu.vue

@@ -61,6 +61,7 @@
         v-if="notificationsOpened"
         :notificationsUrl="notificationsUrl"
         :unseenNotificationsCount="unseenNotificationsCount"
+        @update:unseenNotificationsCount="checkUnseenNotifications()"
         @close="notificationsOpened = false" />
     </div>
     <div v-if="user" class="dropdown">