update notification

resources/assets/js/bootstrap.js

@@ -2,18 +2,6 @@
 window._ = require('lodash');
 window.Popper = require('popper.js').default;
 
-/**
- * We'll load jQuery and the Bootstrap jQuery plugin which provides support
- * for JavaScript based Bootstrap features such as modals and tabs. This
- * code may be modified to fit the specific needs of your application.
- */
-
-try {
-    window.$ = window.jQuery = require('jquery');
-
-    require('bootstrap');
-} catch (e) {}
-
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
@@ -44,13 +32,17 @@ if (token) {
  * allows your team to easily build robust real-time web applications.
  */
 
-// import Echo from 'laravel-echo'
+import Echo from 'laravel-echo'
 
-// window.Pusher = require('pusher-js');
+window.Pusher = require('pusher-js');
 
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     encrypted: true
-// });
+window.Echo = new Echo({
+     broadcaster: 'pusher',
+     key: process.env.MIX_PUSHER_APP_KEY,
+     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+     encrypted: true
+});
+
+window.Echo.private('App.User.2').notification((notification) => {
+    addNotification(notification);
+});

resources/custom.css

@@ -53,6 +53,26 @@
   }
 }
 
+.dropdown-notification {
+  min-width: 300px !important;
+}
+.dropdown-notification .card-header {
+  padding: 0.4rem !important;
+}
+
+.notification-success {
+  border-left: solid #4caf50 3px !important;
+}
+
+.notification-success svg {
+  color: #4caf50;
+}
+
+.notification-table td {
+  padding: 10px !important;
+  margin: 5px !important;
+}
+
 .cursor {
   cursor: pointer;
 }

resources/views/admin/user/profil/notifications.blade.php

@@ -0,0 +1,43 @@
+@extends('layouts.admin.main')
+
+@section('content')
+    <div class="row">
+        <div class="card">
+            <div class="card-header card-header-primary">
+                <h4 class="card-title">Mes notifications</h4>
+            </div>
+            <div class="card-body">
+                <div class="material-datatables">
+                    <table id="notification-table" class="table table-striped w-100 notification-table">
+                        <thead>
+                            <td>Notifications</td>
+                        </thead>
+                        <tbody>
+                        @foreach($notifications as $n)
+                            <tr>
+                                <td id="notification-{{$n->id}}" @if($n->read_at == null) class="notification-success cursor" onclick="markNotificationAsRead('{{$n->id}}')" @endif>
+                                    @if(isset($n->data['title']))
+                                        {{$n->data['title']}}
+                                    @else
+                                        <b>{{$n->data['name']}}</b><br>
+                                        {{$n->data['msg']}}
+                                    @endif
+                                </td>
+                            </tr>
+                        @endforeach
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    </div>
+@endsection
+
+@section('custom_scripts')
+    <script>
+        $(document).ready(function() {
+            $('#notification-table').DataTable();
+        } );
+    </script>
+@endsection

resources/views/layouts/admin/head.blade.php

@@ -11,6 +11,7 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <!-- CSRF Token -->
 <meta name="csrf-token" content="{{ csrf_token() }}">
+<meta name="user-id" content="{{ Auth::user()->id }}">
 
 <!-- Favicon, Icon and Font -->
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />

resources/views/layouts/admin/header.blade.php

@@ -1,9 +1,3 @@
-<?php
-$nbOfNotification = 0;
-foreach (Auth::user()->unreadNotifications as $notification) {
-    $nbOfNotification = $nbOfNotification + 1;
-} 
-?>
 <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
     <div class="container-fluid">
       <div class="navbar-wrapper">
@@ -43,20 +37,50 @@ foreach (Auth::user()->unreadNotifications as $notification) {
           <li class="nav-item dropdown">
             <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <i class="material-icons">notifications</i>
-              @if ($nbOfNotification != 0)
-                <span class="notification">{{ $nbOfNotification }}</span>
-              @endif
+                <span id="notification-number" number="{{count(Auth::user()->unreadNotifications)}}" class="notification @if (count(Auth::user()->unreadNotifications) == 0) d-none @endif">{{ count(Auth::user()->unreadNotifications) }}</span>
               <p class="d-lg-none d-md-block">
                 Notifications
               </p>
             </a>
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
-                @foreach (Auth::user()->unreadNotifications as $notification)
-                    <a class="dropdown-item" href="#">{{$notification->data['msg']}}</a>
+            <div class="dropdown-menu dropdown-menu-right dropdown-notification" aria-labelledby="navbarDropdownMenuLink">
+              <div class="card-header">
+                <h6 class="text-center m-0">Notification</h6>
+              </div>
+              <div class="card-body pt-2" style="max-height: 450px;overflow: auto">
+                <div class="row">
+                  <div class="col-6">
+
+                  </div>
+                  <div class="col-6 text-right">
+                    <a class="btn btn-sm btn-outline-info text-info" onclick="markAllNotificationAsRead()">Tous lu</a>
+                  </div>
+                </div>
+                @foreach(Auth::user()->getNotificationForUI() as $key => $notificationGroup)
+                  <small class="text">{{$key}}</small>
+                  <div class="card mb-3 mt-1" style="width: 18rem;">
+                    <ul id="notification-container" class="list-group list-group-flush">
+                      @foreach($notificationGroup as $notification)
+                        <li id="{{$notification->id}}" class="list-group-item @if($notification->read_at == null)cursor notification-success @endif" style="border-bottom: solid 1px lightgrey" @if($notification->read_at == null) onclick="markNotificationAsRead('{{$notification->id}}')" @endif>
+                          <div class="d-flex">
+                            <div style="min-width: 2rem">
+                              @if(isset($notification->data['icon']))
+                              {!! $notification->data['icon'] !!}
+                                @endif
+                            </div>
+                            <div>
+                              <b class="mb-1">{{$notification->data['name']}}</b>
+                              <p class="text-muted m-0">{{$notification->data['msg']}}</p>
+                            </div>
+                          </div>
+                        </li>
+                      @endforeach
+                    </ul>
+                  </div>
                 @endforeach
-                @if ($nbOfNotification == 0)
-                    <a class="dropdown-item">Aucune notification</a>
-                @endif
+              </div>
+              <div class="card-footer">
+                <a href="/admin/profil/notifications" class="btn btn-outline-info text-info">Afficher toutes mes notifications</a>
+              </div>
             </div>
           </li>
           <li class="nav-item dropdown">

resources/views/layouts/admin/scripts.blade.php

@@ -6,7 +6,9 @@
 
 <script src="/js/core/bootstrap-material-design.min.js"></script>
 <script src="/js/material-dashboard.js"></script>
+<script type="module" src="/js/bootstrap.js"></script>
 <script src="/js/app.js"></script>
+
 <!-- Plugin for the momentJs  -->
 <script src="/js/plugins/moment.min.js"></script>
 <!--  Plugin for Sweet Alert -->