Merge branch 'too/notificationpagination' into 'master'

Too/notificationpagination

See merge request CIEFWorldwideSdnBhd/exchange!86

resources/assets/js/components/Navbar.vue

@@ -21,23 +21,27 @@
               <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">
-                <div 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>
-                      <br/>
-                      <span class="opacity80">
-                        {{item.time_interval}}
-                      </span>
-                    </el-dropdown-item>
-                  </a>
+              <el-dropdown-menu slot="dropdown">
+                <div id="notification">
+                  <div v-for="(item,index) in notification">
+                    <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>
+                        <br/>
+                        <span class="opacity80">
+                          {{item.time_interval}}
+                        </span>
+                      </el-dropdown-item>
+                    </a>
+                  </div>
                 </div>
+                <el-button v-if="pagination.next_page_url != null" id="notification-load-more" v-on:click='fetchPaginateBooking(pagination.next_page_url)'>Load more</el-button>
+                <div v-else id="notification-load-more"></div>
               </el-dropdown-menu>
             </el-dropdown>
 
@@ -96,14 +100,15 @@ export default {
     loadingNotification:false,
     bellBadge : 0,
     unread_message_length:0,
+    url: '/api/notification/user',
+    pagination: [],
 
   }),
-
   computed: mapGetters({
     user: 'auth/user'
   }),
   mounted(){
-    this.getNotification();
+    this.getNotification(this.url);
   },
   methods: {
     async logout(){
@@ -113,15 +118,16 @@ export default {
       // Redirect to login.
       this.$router.push({ name: 'login' });
     },
-    getNotification(){
+    getNotification(url){
       this.notification = [];
       this.loadingNotification=true;
       axios
-        .get('/api/notification/user/')
+        .get(url)
         .then((response) => {
           this.loadingNotification=false;
-          this.notification = response.data;
-          this.bellBadge = this.notification.unread_message.length;
+          this.notification = response.data.message.data;
+          this.bellBadge = response.data.unread_message.length;
+          this.makePagination(response.data.message);
           console.log(response.data);
         }).catch((error) => {
           console.log(error)
@@ -130,11 +136,40 @@ export default {
           })
         })
     },
+    makePagination(data){
+      let pagination ={
+        current_page: data.current_page,
+        last_page: data.last_page,
+        next_page_url: data.next_page_url,
+        prev_page_url: data.prev_page_url
+      };
+      this.pagination = pagination;
+    },
+    fetchPaginateBooking(url) {
+      this.url = url;
+      this.loadingNotification=true;
+      if(this.url !== null){
+        axios
+          .get(url)
+          .then((response) => {
+            this.loadingNotification=false;
+            this.notification = this.notification.concat(response.data.message.data);
+            this.bellBadge = response.data.unread_message.length;
+            this.makePagination(response.data.message);
+            console.log(this.notification);
+          }).catch((error) => {
+            console.log(error)
+            this.$router.push({
+              name: 'notfound'
+            })
+          })
+      }
+    },
     readNotification(notification_id){
       axios
         .post('/api/notification/read-notification/'+notification_id)
         .then((response) => {
-          this.getNotification();
+          this.getNotification(this.url);
         }).catch((error) => {
           console.log(error)
           this.$router.push({
@@ -156,9 +191,19 @@ export default {
   margin: -.375rem 0;
 }
 .el-dropdown-menu{
-  max-height: 50%;
+  height: 50%;
+}
+#notification{
   overflow-y: scroll;
   overflow-x: hidden;
+  max-height: 100%;
+}
+#notification-load-more{
+  position: absolute;
+  width: 100%;
+  min-height: 20px;
+  background: white;
+  border: 1px solid #dcdfe6;
 }
 .el-dropdown-menu__item {
   line-height: 26px;

resources/assets/js/pages/admin/home.vue

@@ -81,7 +81,6 @@ export default {
       axios.get(this.url).then(response => {
         this.bookingTable = response.data.data;
         $this.makePagination(this.bookingTable);
-        console.log(response.data.data);
       })
     },
     RefreshBooking() {
@@ -106,7 +105,6 @@ export default {
         prev_page_url: data.prev_page_url
       }
       this.pagination = pagination
-      console.log(this.pagination)
     },
     fetchPaginateBooking(url) {
       this.url = url

resources/assets/js/pages/home.vue

@@ -609,6 +609,7 @@ export default {
           }
           axios.post('api/booking', newBooking)
             .then((response) => {
+              console.log(response);
               this.loading = false
               // push with return id
               this.$router.push({