From 676912e97fed83a97e6a88cf333f4acf80255dd1 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <spamfree@matthieubessat.fr>
Date: Sun, 16 Aug 2020 11:50:27 +0200
Subject: [PATCH] feat(OrganizationList): add pagination support

---
 src/views/Admin/OrganizationList.vue | 63 ++++++++++++++++++++++------
 1 file changed, 51 insertions(+), 12 deletions(-)

diff --git a/src/views/Admin/OrganizationList.vue b/src/views/Admin/OrganizationList.vue
index 030eba8..d60f95b 100644
--- a/src/views/Admin/OrganizationList.vue
+++ b/src/views/Admin/OrganizationList.vue
@@ -4,6 +4,9 @@
       <v-data-table
         :headers="headers"
         :items="organizations"
+        :loading="isLoading"
+        :options.sync="options"
+        :server-items-length="totalCount"
         sort-by="validationState"
         class="elevation-1"
       >
@@ -447,7 +450,8 @@ export default {
         },
         {
           text: 'Actions',
-          value: 'actions'
+          value: 'actions',
+          sortable: false
         }
       ],
       organizations: [],
@@ -468,7 +472,10 @@ export default {
       importFile: null,
       importLoading: false,
       diffModal: false,
-      diffText: ''
+      diffText: '',
+      options: null,
+      totalCount: 0,
+      isLoading: false
     }
   },
 
@@ -484,26 +491,58 @@ export default {
   watch: {
     dialog (val) {
       val || this.close()
+    },
+    options: {
+      handler () {
+        this.fetchData()
+      },
+      deep: true
     }
   },
 
   created () {
     this.$store.commit('SET_TITLE', 'Gestion des associations')
-    this.fetchData()
+
+    if (this.$route.query.approval !== undefined) {
+      this.fetchOne(this.$route.query.approval).then((data) => {
+        if (data != null) {
+          this.$router.push({ query: {} })
+          this.openApproveModal(data)
+        }
+      })
+    }
   },
 
   methods: {
-    fetchData () {
-      this.$apitator.get('/admin/organizations', { withAuth: true }).then(res => {
-        this.organizations = res.data.data
 
-        if (this.$route.query.approval !== undefined) {
-          const organizations = this.organizations.filter(o => o._id === this.$route.query.approval)
-          if (organizations.length > 0) {
-            this.$router.push({ query: {} })
-            this.openApproveModal(organizations[0])
-          }
+    fetchOne (id) {
+      return new Promise(resolve => {
+        this.$apitator.get('/admin/organizations/' + id, {
+          withAuth: true
+        }).then(res => {
+          resolve(res.data.data)
+        })
+      })
+    },
+
+    fetchData () {
+      this.isLoading = true
+      let params = {}
+      if (this.options != null) {
+        params = {
+          page: this.options.page,
+          limit: this.options.itemsPerPage,
+          sortBy: this.options.sortBy[0],
+          sortDesc: this.options.sortDesc[0]
         }
+      }
+      this.$apitator.get('/admin/organizations', {
+        withAuth: true,
+        axiosConfig: { params }
+      }).then(res => {
+        this.organizations = res.data.data.docs
+        this.totalCount = res.data.data.totalDocs
+        this.isLoading = false
       })
     },