TEST : First implementation of notification with Action Cable : alert message

app/assets/javascripts/channels/notifications.js

@@ -0,0 +1,23 @@
+App.messages = App.cable.subscriptions.create('NotificationsChannel', {
+    received: function (data) {
+
+        if (window.location.href.indexOf('backoffice') !== -1) {
+            $("#notification_alert").html(data['message']);
+            slideIn_notification_alert();
+        }
+    }
+});
+
+function slideIn_notification_alert (){
+    $("#notification_alert").animate({
+        right: '20px'
+    }, 250);
+
+    setTimeout(slideOut_notification_alert, 3500);
+}
+
+function slideOut_notification_alert (){
+    $("#notification_alert").animate({
+        right: '-250px'
+    }, 200);
+}

app/assets/stylesheets/notification_alert.scss

@@ -0,0 +1,12 @@
+#notification_alert {
+  position: fixed;
+  top: 20px;
+  right: -250px;
+
+  z-index: 1000;
+
+  width: 250px;
+  height: 80px;
+
+  border: solid black 1px;
+}

app/channels/notifications_channel.rb

@@ -0,0 +1,5 @@
+class NotificationsChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from 'notifications'
+  end
+end

app/models/notification.rb

@@ -1,8 +1,14 @@
 class Notification < ActiveRecord::Base
   belongs_to :dossier
 
+  after_save :broadcast_notification
+
   enum type_notif: {
            commentaire: 'commentaire'
        }
 
+  def broadcast_notification
+    ActionCable.server.broadcast 'notifications',
+                                 message: "Nouveau commentaire posté sur le dossier #{self.dossier.id}"
+  end
 end

app/views/layouts/_navbar.html.haml

@@ -5,8 +5,6 @@
         = image_tag('marianne_small.png', class: 'logo')
       %div.col-lg-6.no-padding#tps-title
         TPS
-        .badge.progress-bar-danger
-          = Notification.where(already_read: false).count
 
 %div.col-lg-10.col-md-10.no-padding
   %div#navbar-body

app/views/layouts/_notifications_alert.html.haml

@@ -0,0 +1 @@
+#notification_alert.alert.alert-success

app/views/layouts/application.html.haml

@@ -50,6 +50,7 @@
         %i.fa.fa-times{style:'position: fixed; top: 10; right: 30; color: white;'}
 
     = render partial: 'layouts/switch_devise_profile_module'
+    = render partial: 'layouts/notifications_alert'
 
     = render partial: 'layouts/footer', locals: {main_container_size: main_container_size}
     = render partial: 'layouts/google_analytics'