Production

resources/js/vue/views/User/List.vue

@@ -97,6 +97,9 @@
       <v-layout class="px-4 my-3">
         <v-divider></v-divider>
       </v-layout>
+      <div class="text-xs-center" v-if="lastPage > 1">
+        <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+      </div>
       <v-layout row wrap align-center justify-center class="mt-3">
         <router-link :to="{name: 'Dashboard'}">
           <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
@@ -143,16 +146,20 @@ export default {
         align: 'right'
       },
     ],
-    items: []
+    items: [],
+    currentPage: 1,
+    lastPage: 1
   }),
   created() {
     this.load();
   },
   methods: {
-    async load() {
-      const result = await ApiService.get(urls.listOpertor );
+    async load(page = 1) {
+      const result = await ApiService.get(urls.listOpertor(page) );
       if (result && result.status == 200) {
         this.items = result.data.data.data;
+        this.currentPage = result.data.data.current_page;
+        this.lastPage = result.data.data.last_page;
       } else {
         this.$router.push({name:`Dashboard`});
       }
@@ -197,6 +204,9 @@ export default {
           userList.roles = user.roles;
         }
       }
+    },
+    currentPage(page) {
+      this.load(page);
     }
   }
 }