Paginação no SPA

Author: NiltonMorais

app/Http/Controllers/Api/BankAccountsController.php

@@ -34,7 +34,7 @@ public function __construct(BankAccountRepository $repository)
      */
     public function index()
     {
-        return $this->repository->all();
+        return $this->repository->paginate(4);
     }
 
     /**

resources/assets/_default/components/Pagination.vue

@@ -0,0 +1,61 @@
+<template>
+    <ul class="pagination">
+        <li :class="{'disabled': currentPage == 0}">
+            <a @click.prevent="previousPage" href="#">
+                <i class="material-icons">chevron_left</i>
+            </a>
+        </li>
+        <li v-for="o in pages" class="waves-effect" :class="{'active': currentPage == o}">
+            <a @click.prevent="setCurrentPage(o)" href="#">{{o + 1}}</a>
+        </li>
+        <li :class="{'disabled': currentPage == pages - 1}">
+            <a @click.prevent="nextPage" href="#">
+                <i class="material-icons">chevron_right</i>
+            </a>
+        </li>
+    </ul>
+</template>
+<script>
+    export default{
+        props: {
+            currentPage: {
+                type: Number,
+                'default': 0
+            },
+            perPage: {
+                type: Number,
+                required: true
+            },
+            totalRecords: {
+                type: Number,
+                required: true
+            }
+        },
+        computed: {
+            pages(){
+                let pages = Math.ceil(this.totalRecords / this.perPage);
+                return Math.max(pages, 1);
+            }
+        },
+        methods: {
+            setCurrentPage(page){
+                this.currentPage = page;
+            },
+            previousPage(){
+                if(this.currentPage > 0){
+                    this.currentPage--;
+                }
+            },
+            nextPage(){
+                if(this.currentPage < this.pages - 1){
+                    this.currentPage++;
+                }
+            }
+        },
+        watch: {
+            currentPage(newValue){
+                this.$dispatch('pagination::changed',newValue);
+            }
+        }
+    }
+</script>

resources/assets/spa/js/components/Login.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="row">
-            <div class="col s8 offset-s2 z-depth-2">
+            <div class="card-panel col s8 offset-s2 z-depth-2">
                 <h3 class="center">Code Financeiro</h3>
 
                 <div class="row" v-if="error.error">

resources/assets/spa/js/components/Logout.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="row">
-            <div class="col s8 offset-s2 z-depth-2">
+            <div class="card-panel col s8 offset-s2 z-depth-2">
                 <h5 class="center">Efetuando logout...</h5>
                 <div class="progress">
                     <div class="indeterminate"></div>
@@ -16,14 +16,14 @@
         ready(){
             setTimeout(() => {
                 this.logout();
-            },1000);
+            }, 1000);
         },
         methods: {
             logout(){
                 let goToLogin = () => this.$router.go({name: 'auth.login'});
                 Auth.logout()
-                        .then(goToLogin())
-                        .catch(goToLogin());
+                        .then(goToLogin)
+                        .catch(goToLogin);
             }
         }
     }

resources/assets/spa/js/components/bank-account/BankAccountList.vue

@@ -19,7 +19,7 @@
                     </thead>
                     <tbody>
                     <tr v-for="(index,o) in bankAccounts">
-                        <td>{{index + 1}}</td>
+                        <td>{{o.id}}</td>
                         <td>{{o.name}}</td>
                         <td>{{o.agency}}</td>
                         <td>{{o.account}}</td>
@@ -30,6 +30,7 @@
                     </tr>
                     </tbody>
                 </table>
+                <pagination :current-page.sync="pagination.current_page" :per-page="pagination.per_page" :total-records="pagination.total"></pagination>
             </div>
 
             <div class="fixed-action-btn">
@@ -59,23 +60,28 @@
 <script>
     import {BankAccount} from '../../services/resources';
     import ModalComponent from '../../../../_default/components/Modal.vue';
+    import PaginationComponent from '../../../../_default/components/Pagination.vue';
     export default{
         components: {
             'modal': ModalComponent,
+            'pagination': PaginationComponent,
         },
         data(){
             return{
                 bankAccounts: [],
                 bankAccountToDelete: null,
                 modal: {
                     id: "modal-delete"
+                },
+                pagination: {
+                    current_page: 0,
+                    per_page: 0,
+                    total: 0
                 }
             }
         },
         created(){
-            BankAccount.query().then((response) => {
-                this.bankAccounts = response.data.data;
-            });
+            this.getBankAccounts();
         },
         methods: {
             destroy(){
@@ -88,6 +94,21 @@
             openModalDelete(bankAccount){
                 this.bankAccountToDelete = bankAccount;
                 $('#modal-delete').modal('open');
+            },
+            getBankAccounts(){
+                BankAccount.query({
+                    page: this.pagination.current_page + 1
+                }).then((response) => {
+                    this.bankAccounts = response.data.data;
+                    let pagination = response.data.meta.pagination;
+                    pagination.current_page--;
+                    this.pagination = pagination;
+                });
+            }
+        },
+        events: {
+            'pagination::changed'(page){
+                this.getBankAccounts();
             }
         }
     }

resources/assets/spa/js/services/auth.js

@@ -39,13 +39,14 @@ export default {
         });
     },
     logout(){
-        let afterLogout = () => {
+        let afterLogout = (response) => {
             this.clearAuth();
+            return response;
         };
 
         return JwtToken.revokeToken().
-            then(afterLogout())
-            .catch(afterLogout());
+            then(afterLogout)
+            .catch(afterLogout);
     },
     clearAuth(){
         this.user.data = null;

resources/assets/spa/js/services/jwt-token.js

@@ -23,13 +23,14 @@ export default {
         });
     },
     revokeToken(){
-        let afterReveokeToken = () => {
+        let afterReveokeToken = (response) => {
             this.token = null;
+            return response;
         };
 
         return Jwt.logout().
-            then(afterReveokeToken())
-            .catch(afterReveokeToken());
+            then(afterReveokeToken)
+            .catch(afterReveokeToken);
     },
     getAuthorizationHeader(){
         return `Bearer ${LocalStorage.get(TOKEN)}`;