Both index and show have notification on there left pannels

app/assets/javascripts/dossiers.js

@@ -1,5 +1,22 @@
 $(document).on('page:load', the_terms);
 $(document).ready(the_terms);
+$(document).on('page:load', pannel_switch);
+$(document).ready(pannel_switch);
+
+function pannel_switch() {
+  $('#switch-notifications').click(function () {
+    $('#procedure_list').addClass('hidden');
+    $('#notifications_list').removeClass('hidden');
+    $(this).addClass('active');
+    $('#switch-procedures').removeClass('active');
+  })
+  $('#switch-procedures').click(function () {
+    $('#notifications_list').addClass('hidden');
+    $('#procedure_list').removeClass('hidden');
+    $(this).addClass('active');
+    $('#switch-notifications').removeClass('active');
+  })
+}
 
 function the_terms() {
     var the_terms = $("#dossier_autorisation_donnees");

app/assets/javascripts/dossiers_list_link.js

@@ -1,9 +1,8 @@
 $(document).on('page:load', link_init);
 $(document).ready(link_init);
 
-
 function link_init() {
-    $('#dossiers_list tr').on('click', function () {
-        $(location).attr('href', $(this).data('dossier_url'))
-    });
-}
+  $('#dossiers_list tr').on('click', function () {
+    $(location).attr('href', $(this).data('dossier_url'))
+  });
+}

app/assets/stylesheets/dossiers.scss

@@ -42,24 +42,22 @@ h5 span {
   cursor: pointer;
 }
 
-#procedure_list {
+#procedure_list, #notifications_list {
   margin-left: -10px;
   margin-top: 20px;
   a, a:hover {
     color: #FFFFFF;
     text-decoration: none;
   }
-
-  .procedure_list_element.active{
+  .procedure_list_element.active, .notification.active {
     background-color: #668ABD;
   }
-
-  .procedure_list_element {
+  .procedure_list_element, .notification {
     padding: 15px 40px 15px 20px;
     cursor: pointer;
     line-height: 1.8em;
   }
-  .procedure_list_element:hover{
+  .procedure_list_element:hover, .notification:hover {
     background-color: #668ABD;
     cursor: pointer;
   }

app/assets/stylesheets/left_pannel.scss

@@ -52,8 +52,8 @@
   }
   #menu-block {
     #switch-buttons {
-      height: 40px;
-      line-height: 40px;
+      height: 30px;
+      line-height: 30px;
       font-size: 16px;
       margin-top: 20px;
       margin-left: auto;
@@ -62,21 +62,33 @@
       border: 1px solid;
       padding: 0 0 0 10px;
       border-radius: 25px;
+      cursor: pointer;
+      .active {
+        background-color: #668ABD !important;
+        cursor: default;
+      }
+      .separator {
+        height: 26px;
+        width: 1px;
+        display: inline-block;
+        background-color: #FFFFFF;
+      }
+      #switch-procedures:hover, #switch-notifications:hover {
+        background-color: #668AEA;
+      }
       #switch-procedures {
-        height: 38px;
-        margin: 0 -5px 0 -10px;
+        height: 28px;
+        margin: 0 0 0 -10px;
         padding-left: 10px;
         width: 100px;
         display: inline-block;
-        background-color: #CCCCCC;
         border-radius: 25px 0 0 25px;
       }
       #switch-notifications {
-        width: 100px;
-        background-color: #CCCCCC;
+        width: 103px;
         display: inline-block;
         border-radius: 0 25px 25px 0;
-        height: 38px;
+        height: 28px;
         margin: 0 0 0 -5px;
         padding: 0 0 0 5px;
       }
@@ -98,6 +110,20 @@
       font-size: 25px;
       width: 200px;
       margin-top: 20px;
+      width: 200px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    #notifications_list {
+      .notification {
+        padding: 10px 10px 10px 20px;
+        .dossier, .updated-at {
+          display: inline-block;
+          color: #CCCCCC;
+          font-size: 12px;
+          text-align: left;
+        }
+      }
     }
     .notifications {
       margin: 20px 10px 0 5px;
@@ -107,7 +133,7 @@
         margin: 0 0 15px 0;
       }
       .notification {
-        margin: 10px 0 10px 0;
+        margin: 10px 0 10px 10px;
         .type {
           margin-bottom: 20px;
         }

app/decorators/notification_decorator.rb

@@ -0,0 +1,8 @@
+class NotificationDecorator < Draper::Decorator
+  delegate_all
+
+  def index_display
+    ['champs', 'piece_justificative'].include?(type_notif) ? type = liste.join(" ") : type = liste.last
+    { dossier: "Dossier n°#{dossier.id}", date: updated_at.strftime('%d/%m %H:%M'), type: type }
+  end
+end

app/facades/dossier_facades.rb

@@ -10,6 +10,10 @@ class DossierFacades
     @dossier.decorate
   end
 
+  def last_notifications
+    @dossier.notifications.order("updated_at DESC").limit(5)
+  end
+
   def champs
     @dossier.ordered_champs
   end

app/facades/dossiers_list_facades.rb

@@ -138,4 +138,4 @@ class DossiersListFacades
     @procedure.nil? ? backoffice_dossiers_path(liste: liste) : backoffice_dossiers_procedure_path(id: @procedure.id, liste: liste)
   end
 
-end
+end

app/models/gestionnaire.rb

@@ -64,7 +64,7 @@ class Gestionnaire < ActiveRecord::Base
   end
 
   def notifications
-    Notification.where(already_read: false, dossier_id: follows.pluck(:dossier_id) )
+    Notification.where(already_read: false, dossier_id: follows.pluck(:dossier_id) ).order("updated_at DESC")
   end
 
   def notifications_for procedure

app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_index.html.haml

@@ -11,8 +11,7 @@
 %div#menu-block
   %div.split-hr-left
   #switch-buttons
-    #switch-procedures Procédures
-    |
+    #switch-procedures.active Procédures
     #switch-notifications Notifications
 
 %div#infos-block
@@ -29,4 +28,10 @@
           -if procedure[:unread_notifications] > 0
             .badge.progress-bar-warning{title: 'Notifications'}
               = procedure[:unread_notifications]
-
+  #notifications_list.hidden
+    - @facade_data_view.unread_notifications.each do |notification|
+      = link_to backoffice_dossier_path(notification.dossier.id) do
+        .notification
+          .dossier= notification.decorate.index_display[:dossier]
+          .updated-at= notification.decorate.index_display[:date]
+          .type= notification.decorate.index_display[:type]

app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_show.html.haml

@@ -34,7 +34,7 @@
       = "Aucune notification pour le moment."
     - else
       %i.fa.fa-bell-o
-      - @facade.dossier.notifications.limit(5).each do |notification|
+      - @facade.last_notifications.each do |notification|
         .notification
           .updated-at= notification.updated_at.strftime('%d/%m/%Y %H:%M')
           - if ['champs'].include?(notification.type_notif)