Fix notification frontend

app/Http/Controllers/NotificationController.php

@@ -51,8 +51,10 @@ class NotificationController extends Controller
 		],200);
     }
 
-    public function readNotification(){
-    	$affected = DB::table('notifications')->Where('user_id', Auth::user()->id)->update(array('is_read' => 1));
-    	return response()->json("Read all message", 200);
+    public function readNotification($notification_id){
+    	$affected = DB::table('notifications')
+            ->Where('id', $notification_id)
+            ->update(array('is_read' => 1));
+    	return response()->json("Read message", 200);
     }
 }

resources/assets/js/components/Navbar.vue

@@ -18,21 +18,22 @@
           <!-- Authenticated -->
           <template v-if="user">
             <el-dropdown trigger="click">
-              <el-badge :value="unread_message.length > 0 ? unread_message.length : ''" class="item">
-                <el-button v-if="loadingNotification" icon="el-icon-loading" circle ></el-button>
-                <el-button v-else icon="el-icon-bell" circle v-on:click="refreshNotificatoin"></el-button>
+              <el-badge :value="bellBadge > 0 ? bellBadge : ''" class="item">
+                <el-button icon="el-icon-bell" circle></el-button>
               </el-badge>
               <el-dropdown-menu slot="dropdown" id="notification">
-                <a v-for="(item,index) in notification" :href="item.link">
-                  <el-dropdown-item>
-                    <b v-if="index < unread_message_length">
-                      {{item.detail}}
-                    </b>
-                    <span v-else>
-                      {{item.detail}}
-                    </span>
-                  </el-dropdown-item>
-                </a>
+                <span v-for="(item,index) in notification.message">
+                  <a v-on:click.prevent='readNotification(item.id);navigateTo(item.link)'>
+                    <el-dropdown-item>
+                      <b v-if="item.is_read == 0">
+                        {{item.detail}}
+                      </b>
+                      <span v-else >
+                        {{item.detail}}
+                      </span>
+                    </el-dropdown-item>
+                  </a>
+                </span>
               </el-dropdown-menu>
             </el-dropdown>
 
@@ -90,7 +91,7 @@ export default {
     appName: window.config.appName,
     notification:[],
     loadingNotification:false,
-    unread_message:null,
+    bellBadge : 0,
     unread_message_length:0,
 
   }),
@@ -102,7 +103,7 @@ export default {
     this.getNotification();
   },
   methods: {
-    async logout () {
+    async logout(){
       // Log out the user.
       await this.$store.dispatch('auth/logout');
 
@@ -111,17 +112,13 @@ export default {
     },
     getNotification(){
       this.notification = [];
-      this.unread_message='';
       this.loadingNotification=true;
       axios
         .get('/api/notification/user/')
         .then((response) => {
           this.loadingNotification=false;
-          this.notification = response.data.message;
-          this.unread_message=response.data.unread_message;
-          this.unread_message_length=this.unread_message.length;
-          console.log(this.unread_message_length);
-          console.log(response.data);
+          this.notification = response.data;
+          this.bellBadge = this.notification.unread_message.length;
         }).catch((error) => {
           console.log(error)
           this.$router.push({
@@ -129,21 +126,21 @@ export default {
           })
         })
     },
-    refreshNotificatoin(){
-      this.getNotification();
-      this.readAllNotification();
-    },
-    readAllNotification(){
+    readNotification(notification_id){
       axios
-        .post('/api/notification/read-notification/')
+        .post('/api/notification/read-notification/'+notification_id)
         .then((response) => {
-          // Done
+          console.log(1211);
+          this.getNotification();
         }).catch((error) => {
           console.log(error)
           this.$router.push({
             name: 'notfound'
           })
         })
+    },
+    navigateTo(nav) {
+      window.location.href = nav;
     }
   }
 }
@@ -155,4 +152,13 @@ export default {
   height: 2rem;
   margin: -.375rem 0;
 }
+.el-dropdown-menu{
+  max-height: 50%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+::-webkit-scrollbar {
+    width: 0px;
+    background: transparent; /* make scrollbar transparent */
+}
 </style>

resources/assets/js/pages/home.vue

@@ -441,7 +441,6 @@ export default {
       axios.get(this.url).then(response => {
         this.bookingTable = response.data.data
         $this.makePagination(response.data)
-        console.log(response)
       })
     },
     getRate() {
@@ -490,7 +489,6 @@ export default {
         prev_page_url: data.prev_page_url
       }
       this.pagination = pagination
-      console.log(this.pagination)
     },
     fetchPaginateBooking(url) {
       this.url = url
@@ -530,7 +528,6 @@ export default {
           axios.post('api/booking/calculation', newConfirmation)
             .then((response) => {
               this.loading = false
-              console.log(response)
               this.bookingConfirmTable = response.data;
               this.bookingConfirmTable.payment_for = 'Full Payment';//For future purpose
               this.bookingConfirmTable.remark = '';//For future purpose

routes/api.php

@@ -48,7 +48,7 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::patch('settings/password', 'Settings\PasswordController@update');
 
 	Route::get('notification/user', 'NotificationController@getUserMessage');
-	Route::post('notification/read-notification', 'NotificationController@readNotification');
+	Route::post('notification/read-notification/{notification_id}', 'NotificationController@readNotification');
 
 	// for both user and admin
 	Route::get('active-bank', 'SettingActiveBankController@index');