Add button to mark all notifications as read

app/Http/Controllers/Api/NotificationController.php

@@ -28,6 +28,21 @@ public function update(Request $request, $id)
         $notification->markAsRead();
     }
 
+    /**
+     * Mark all notification as read.
+     *
+     * @api {put} notifications/all Mark all notifications as read
+     * @apiGroup Notifications
+     * @apiName UpdateReadNotifications
+     * @apiPermission user
+     *
+     * @param Request $request
+     */
+    public function updateAll(Request $request)
+    {
+        $request->user()->unreadNotifications()->eachById(fn ($n) => $n->markAsRead());
+    }
+
     /**
      * Delete a read notification.
      *

resources/assets/js/core/api/notifications.js

@@ -14,5 +14,9 @@
  * @type {Vue.resource}
  */
 export default Vue.resource('api/v1/notifications{/id}', {}, {
-    markRead: {method: 'PUT'}
+    markRead: {method: 'PUT'},
+    markReadAll: {
+        method: 'PUT',
+        url: 'api/v1/notifications/all'}
 });
+

resources/assets/js/core/notifications/list.vue

@@ -63,6 +63,7 @@ export default {
     data() {
         return {
             notifications: [],
+            isLoading: false,
         };
     },
     computed: {
@@ -73,6 +74,24 @@ export default {
             return Store.countUnread > 0;
         },
     },
+    methods:{
+        markAllAsRead() {
+            this.isLoading = true;
+            return NotificationsApi.markReadAll({}, {})
+                .then(() => {
+                    this.notifications.map(item => {
+                        item.read_at = new Date();
+                        if (this.removeItem) {
+                            Store.remove(this.item.id);
+                        }
+                    })
+                })
+                .catch(Messages.handleErrorResponse)
+                .finally(() => {
+                    this.isLoading = false;
+                });
+        }
+    },
     created() {
         Store.initialize();
         this.notifications = Store.all;

resources/views/notifications/index.blade.php

@@ -19,6 +19,11 @@
             </ul>
         </div>
         <div id="notifications-list" class="col-sm-9 col-md-7 col-md-offset-1" v-cloak>
+            @if (!$all)
+                <p v-cloak v-if="hasUnreadNotifications" class="clearfix">
+                    <button class="btn btn-default btn-s pull-right" v-on:click="markAllAsRead" v-bind:disabled="isLoading">Mark all as read</button>
+                </p>
+            @endif
             <notification v-for="item in notifications" v-bind:key="item.id" v-bind:item="item" v-bind:remove-item="{{$all ? 'false': 'true'}}" inline-template>
                 <div class="panel" v-bind:class="classObject">
                     <div class="panel-heading">

routes/api.php

@@ -143,6 +143,8 @@
     'parameters' => ['media-types' => 'id'],
 ]);
 
+$router->put('notifications/all', 'NotificationController@updateAll');
+
 $router->resource('notifications', 'NotificationController', [
     'only' => ['update', 'destroy'],
 ]);

tests/php/Http/Controllers/Api/NotificationControllerTest.php

@@ -47,4 +47,19 @@ public function testDestroy()
             ->assertStatus(200);
         $this->assertEquals(0, $user->notifications()->count());
     }
+
+    public function testUpdateAll()
+    {
+        $user = UserTest::create();
+        $user->notify(new InAppNotification('test', 'test'));
+        $user->notify(new InAppNotification('test', 'test'));
+        $user->notify(new InAppNotification('test', 'test'));
+
+        $this->doTestApiRoute('PUT', '/api/v1/notifications/all');
+
+        $this->be($user);
+        $this->assertEquals(3, $user->unreadNotifications()->count());
+        $this->put('/api/v1/notifications/all')->assertSuccessful();
+        $this->assertEquals(0, $user->unreadNotifications()->count());
+    }
 }