From a689b2dfa4ef2b17d9a477c59703cc28a5a69cfd Mon Sep 17 00:00:00 2001
From: Tim Joosten <Tjoosten3@gmail.com>
Date: Fri, 23 Jun 2017 01:15:10 +0200
Subject: [PATCH] Fix #31: Create tab menu for the notifications.

---
 .../Controllers/NotificationsController.php   |   2 +-
 app/Http/Controllers/RoleController.php       |   2 +-
 resources/views/notifications/index.blade.php | 110 ++++++++++++------
 3 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/app/Http/Controllers/NotificationsController.php b/app/Http/Controllers/NotificationsController.php
index 880e945..05a65d0 100755
--- a/app/Http/Controllers/NotificationsController.php
+++ b/app/Http/Controllers/NotificationsController.php
@@ -38,7 +38,7 @@ public function __construct()
      */
     public function index()
     {
-        return view('notifications.index');
+        return view('notifications.index', compact('notifications'));
     }
 
     /**
diff --git a/app/Http/Controllers/RoleController.php b/app/Http/Controllers/RoleController.php
index cb99f1d..55498c2 100755
--- a/app/Http/Controllers/RoleController.php
+++ b/app/Http/Controllers/RoleController.php
@@ -97,7 +97,7 @@ public function destroy($roleId)
     {
         try {
             $role = Role::findOrFail($roleId);
-            $role->syncPermissions([]);
+            $role->syncPermissions([]); // Empty relation for clearing the permissions relation.
             $role->delete();
 
             flash('We have deleted the permission group');
diff --git a/resources/views/notifications/index.blade.php b/resources/views/notifications/index.blade.php
index 96bd74b..a32ef4b 100755
--- a/resources/views/notifications/index.blade.php
+++ b/resources/views/notifications/index.blade.php
@@ -6,10 +6,10 @@
     <div  class="row">
         <div class="col-md-3"> {{-- Sidebar --}}
             <div class="list-group">
-                <a href="" class="list-group-item">
+                <a href="#unread" aria-controls="unread" role="tab" data-toggle="tab" class="list-group-item">
                     Unread notifications <span class="badge">{{ auth()->user()->unreadNotifications->count() }}</span>
                 </a>
-                <a href="" class="list-group-item">
+                <a href="#all" aria-controls="all" role="tab" data-toggle="tab" class="list-group-item">
                     All notifications.
                 </a>
             </div>
@@ -22,39 +22,79 @@
         </div> {{-- Sidebar --}}
 
         <div class="col-md-9"> {{-- Content --}}
-            @if (auth()->user()->unreadNotifications->count() > 0)
-                <div class="panel panel-default">
-                    <div class="panel-heading"> Notifications </div>
-
-                    <ul class="list-group">
-                        @foreach (auth()->user()->unreadNotifications as $unread)
-                            <li class="list-group-item" href="test">
-                                <span style="vertical-align: middle; padding-right: 5px; color: #28a745;" class="fa fa-bell"></span>
-                                <span style="vertical-align: middle;">
-                                    <a href="{{ $unread->data['url'] }}" class="text-muted">
-                                        {{ $unread->data['message'] }}
-                                        {{ $unread->markAsRead() }}
-                                    </a>
-                                </span>
-
-                                <div class="pull-right">
-                                    <span style="padding-left: 10px; vertical-align: middle;">{{ $unread->created_at->diffForHumans() }}</span>
-
-                                    <a style="vertical-align: middle; padding-left: 15px;" href="{{ route('notifications.mark', $unread) }}">
-                                        <span class="text-muted fa fa-check"></span>
-                                    </a>
-                                </div>
-                            </li>
-                        @endforeach
-                    </ul>
-                </div>
-            @else
-                <div class="blankslate">
-                    <span class="mega-octicon octicon-bell blankslate-icon"></span>
-                    <h3>No notifications</h3>
-                    <p>You've read all your notifications. Good job!</p>
-                </div>
-            @endif
+            <div class="tab-content">
+                <div role="tabpanel" class="tab-pane fade in active" id="unread"> {{-- Unread notifications tab --}}
+                    @if (auth()->user()->unreadNotifications->count() > 0)
+                        <div class="panel panel-default">
+                            <div class="panel-heading">Unread notifications </div>
+
+                            <ul class="list-group">
+                                @foreach (auth()->user()->unreadNotifications as $unread)
+                                    <li class="list-group-item" href="test">
+                                        <span style="vertical-align: middle; padding-right: 5px; color: #28a745;" class="fa fa-bell"></span>
+                                        <span style="vertical-align: middle;">
+                                            <a href="{{ $unread->data['url'] }}" class="text-muted">
+                                                {{ $unread->data['message'] }}
+                                                {{ $unread->markAsRead() }}
+                                            </a>
+                                        </span>
+
+                                        <div class="pull-right">
+                                            <span style="padding-left: 10px; vertical-align: middle;">{{ $unread->created_at->diffForHumans() }}</span>
+
+                                            <a style="vertical-align: middle; padding-left: 15px;" href="{{ route('notifications.mark', $unread) }}">
+                                                <span class="text-muted fa fa-check"></span>
+                                            </a>
+                                        </div>
+                                    </li>
+                                @endforeach
+                            </ul>
+                        </div>
+                    @else
+                        <div class="blankslate">
+                            <span class="mega-octicon octicon-bell blankslate-icon"></span>
+                            <h3>No notifications</h3>
+                            <p>You've read all your notifications. Good job!</p>
+                        </div>
+                    @endif
+                </div> {{-- End unread notifications tab --}}
+
+                <div role="tabpanel" class="tab-pane fade in" id="all"> {{-- All notifications tab --}}
+                    @if (auth()->user()->notifications->count() > 0) {{-- There are notifications found.  --}}
+                        @php $notifications = auth()->user()->notifications()->simplePaginate(25); @endphp
+
+                    <div class="panel panel-default">
+                        <div class="panel-heading">All notifications </div>
+
+                        <ul class="list-group">
+                            @foreach ($notifications as $all)
+                                <li class="list-group-item" href="test">
+                                    <span style="vertical-align: middle; padding-right: 5px; color: #28a745;" class="fa fa-bell"></span>
+                                    <span style="vertical-align: middle;">
+                                            <a href="{{ $all->data['url'] }}" class="text-muted">
+                                                {{ $all->data['message'] }}
+                                                {{ $all->markAsRead() }}
+                                            </a>
+                                        </span>
+
+                                    <div class="pull-right">
+                                        <span style="padding-left: 10px; vertical-align: middle;">{{ $all->created_at->diffForHumans() }}</span>
+                                    </div>
+                                </li>
+                            @endforeach
+                        </ul>
+                    </div>
+
+                        {!! $notifications->render() !!} {{-- Simple pagination instance --}}
+                    @else {{-- Thuere are no notifications. --}}
+                        <div class="blankslate">
+                            <span class="mega-octicon octicon-bell blankslate-icon"></span>
+                            <h3>Notifications</h3>
+                            <p>You have no notifications in the system.</p>
+                        </div>
+                    @endif
+                </div> {{-- /Notifications tab. --}}
+            </div>
         </div> {{-- /Content --}}
     </div>
 @endsection