pagination for withdraw

pages/admin/gps/withdraw/index.vue

@@ -91,7 +91,7 @@
     </CRow>
 
     <CCard>
-      <CCardHeader>
+      <CCardHeader >
         <slot  name="header">
           <CIcon name="cil-grid" />
           درخواست های برداشت
@@ -99,7 +99,7 @@
       </CCardHeader>
 
       <CCardBody>
-        <el-table :data="filteredItems" :row-class-name="hasUnread" style="width: 100%">
+        <el-table :data="paginatedItems" :row-class-name="hasUnread" style="width: 100%">
           <el-table-column type="index" label="#"> </el-table-column>
 
           <el-table-column label="مبلغ تومانی " width="150px">
@@ -156,6 +156,17 @@
             </template>
           </el-table-column>
         </el-table>
+        <div style="direction:ltr; textAlign:center; marginTop:20px;">
+          <el-pagination
+          v-if="paginate"
+          background
+          layout="prev, pager, next"
+          :current-page="currentPage"
+          :page-count="totalPages"
+          @current-change="handlePageChange"
+          >
+        </el-pagination>
+        </div>
       </CCardBody>
     </CCard>
   </div>
@@ -167,11 +178,19 @@ export default {
   layout: 'admin',
   async asyncData({ $axios, error, query }) {
     try {
-      const { data } = await $axios.get('/api/admin/gps/withdraw')
+      const page = parseInt(query.page) || 1
-      // console.log('data bardasht hahahahhahahah', data)
+      const rows = parseInt(query.rows) || 10
+      const { data } = await $axios.get('/api/admin/gps/withdraw', {
+        params: {
+          page,
+          rows
+        }
+      })
 
       return {
-        requestsData: data.data
+        requestsData: data.data,
+        totalDocuments: data.totalDocuments || 0,
+        totalPages: data.totalPages || 1
       }
     } catch (error) {
       console.log(error)
@@ -180,10 +199,13 @@ export default {
   data() {
     return {
       requestsData: [],
+      totalDocuments: 0,
+      totalPages: 1,
       centerDialogVisible: false,
       requestData: {},
       filterText: '',
-      trackingNumber: null
+      trackingNumber: null,
+      pageSize: 10
     }
   },
 
@@ -207,7 +229,7 @@ export default {
       const filterText = this.filterText
       if (!this.filterText.length) return filterUsersByType
       else {
-        return this.requestsData.filter(item => {
+        return filterUsersByType.filter(item => {
           return (
             item.userId.mobile_number.includes(filterText) ||
             item.userId.national_code.includes(filterText) ||
@@ -217,6 +239,18 @@ export default {
         })
       }
     },
+    totalFilteredItems() {
+      return this.filteredItems.length
+    },
+    paginatedItems() {
+      return this.filteredItems
+    },
+    currentPage() {
+      return parseInt(this.$route.query?.page) || 1
+    },
+    paginate() {
+      return this.totalPages > 1
+    },
     filterType: {
       get() {
         return this.$route.query?.filter
@@ -226,7 +260,47 @@ export default {
       }
     }
   },
+  watch: {
+    filterText() {
+      this.fetchData(1)
+    },
+    filterType() {
+      this.fetchData(1)
+    },
+    '$route.query.page'() {
+      this.fetchData()
+    }
+  },
   methods: {
+    async fetchData(page = null) {
+      const currentPage = page || this.currentPage
+      try {
+        const { data } = await this.$axios.get('/api/admin/gps/withdraw', {
+          params: {
+            page: currentPage,
+            rows: this.pageSize
+          }
+        })
+        this.requestsData = data.data
+        this.totalDocuments = data.totalDocuments || 0
+        this.totalPages = data.totalPages || 1
+      } catch (error) {
+        console.log(error)
+        this.$message({
+          type: 'error',
+          message: 'خطا در دریافت اطلاعات'
+        })
+      }
+    },
+    handlePageChange(page) {
+      this.$router.push({
+        name: 'admin-gps-withdraw',
+        query: {
+          ...this.$route.query,
+          page
+        }
+      })
+    },
     showDialog(data) {
       this.requestData = data
       this.centerDialogVisible = true