Add pagination on admin cp

3 files changed, 54 insertions, 9 deletions

diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 679f82f..e08f819 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -10,12 +10,14 @@
           :fields="users"
           path="/users/"
         )
+        pagination(:page="page" :pages="pages" v-if="count" path="/admin")
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 
 import AdminSidebar from "@/components/AdminSidebar.vue";
+import Pagination from "@/components/Pagination.vue";
 import VTable from "@/components/VTable.vue";
 
 export default {
@@ -23,9 +25,19 @@ export default {
   head: { title: "Admin panel · Verden" },
   computed: {
     ...mapGetters("auth", ["isLogged", "me"]),
-    ...mapGetters("users", ["users"]),
+    ...mapGetters("users", ["users", "count"]),
+  },
+  data() {
+    return {
+      page: 0,
+      pages: 0,
+    };
+  },
+  components: {
+    AdminSidebar,
+    pagination: Pagination,
+    "v-table": VTable,
   },
-  components: { AdminSidebar, "v-table": VTable },
   async mounted() {
     await this.$store.dispatch("auth/findMe");
 
@@ -33,7 +45,10 @@ export default {
       window.location.href = "/";
     }
 
-    this.$store.dispatch("users/getUsers", { page: 0 });
+    this.page = this.$route.query.page ?? 0;
+    this.$store.dispatch("users/getUsers", this.page).then(() => {
+      this.pages = Math.ceil(this.count / 20);
+    });
   },
 };
 </script>
diff --git a/pages/admin/models.vue b/pages/admin/models.vue
index 86b463b..66f20cf 100644
--- a/pages/admin/models.vue
+++ b/pages/admin/models.vue
@@ -10,12 +10,14 @@
           :fields="models"
           path="/models/"
         )
+        pagination(:page="page" :pages="pages" v-if="count" path="/admin/models")
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 
 import AdminSidebar from "@/components/AdminSidebar.vue";
+import Pagination from "@/components/Pagination.vue";
 import VTable from "@/components/VTable.vue";
 
 export default {
@@ -23,9 +25,19 @@ export default {
   head: { title: "Models · Verden" },
   computed: {
     ...mapGetters("auth", ["isLogged", "me"]),
-    ...mapGetters("models", ["models"]),
+    ...mapGetters("models", ["models", "count"]),
+  },
+  data() {
+    return {
+      page: 0,
+      pages: 0,
+    };
+  },
+  components: {
+    AdminSidebar,
+    pagination: Pagination,
+    "v-table": VTable,
   },
-  components: { AdminSidebar, "v-table": VTable },
   async mounted() {
     await this.$store.dispatch("auth/findMe");
 
@@ -33,7 +45,10 @@ export default {
       window.location.href = "/";
     }
 
-    this.$store.dispatch("models/getModels", 0);
+    this.page = this.$route.query.page ?? 0;
+    this.$store.dispatch("models/getModels", this.page).then(() => {
+      this.pages = Math.ceil(this.count / 20);
+    });
   },
 };
 </script>
diff --git a/pages/admin/reports.vue b/pages/admin/reports.vue
index 7d49a40..074360a 100644
--- a/pages/admin/reports.vue
+++ b/pages/admin/reports.vue
@@ -9,12 +9,14 @@
           :keys="['id', 'model_id', 'created', 'updated', 'user', 'resolved', 'note', 'admin_note']"
           :fields="warnings"
         )
+        pagination(:page="page" :pages="pages" v-if="count" path="/admin/reports")
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 
 import AdminSidebar from "@/components/AdminSidebar.vue";
+import Pagination from "@/components/Pagination.vue";
 import VTable from "@/components/VTable.vue";
 
 export default {
@@ -22,9 +24,19 @@ export default {
   head: { title: "Models · Verden" },
   computed: {
     ...mapGetters("auth", ["isLogged", "me"]),
-    ...mapGetters("warnings", ["warnings"]),
+    ...mapGetters("warnings", ["warnings", "count"]),
+  },
+  data() {
+    return {
+      page: 0,
+      pages: 0,
+    };
+  },
+  components: {
+    AdminSidebar,
+    pagination: Pagination,
+    "v-table": VTable,
   },
-  components: { AdminSidebar, "v-table": VTable },
   async mounted() {
     await this.$store.dispatch("auth/findMe");
 
@@ -32,7 +44,10 @@ export default {
       window.location.href = "/";
     }
 
-    this.$store.dispatch("warnings/getWarnings", 0);
+    this.page = this.$route.query.page ?? 0;
+    this.$store.dispatch("warnings/getWarnings", this.page).then(() => {
+      this.pages = Math.ceil(this.count / 20);
+    });
   },
 };
 </script>