From 2325d12395e0a7e7f944165e7de4d9e88915b4d6 Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Thu, 13 Oct 2022 22:35:20 +0200
Subject: Add pagination on admin cp

---
 assets/sass/main.sass     |  3 +++
 components/Pagination.vue |  8 ++++----
 pages/admin/index.vue     | 21 ++++++++++++++++++---
 pages/admin/models.vue    | 21 ++++++++++++++++++---
 pages/admin/reports.vue   | 21 ++++++++++++++++++---
 store/users.js            | 12 ++++++++----
 store/warnings.js         |  1 +
 7 files changed, 70 insertions(+), 17 deletions(-)

diff --git a/assets/sass/main.sass b/assets/sass/main.sass
index 6c74fbe..b9191cb 100644
--- a/assets/sass/main.sass
+++ b/assets/sass/main.sass
@@ -17,3 +17,6 @@ html.dark-mode
 
   .dark\:border-b-1
     border-bottom-width: 1px
+
+.max-w-100
+  max-width: 100px
diff --git a/components/Pagination.vue b/components/Pagination.vue
index e751dd8..7925ab0 100644
--- a/components/Pagination.vue
+++ b/components/Pagination.vue
@@ -4,7 +4,7 @@
       ul.flex.list-style-none.items-center.justify-center
         li.page-item(:class="{'cursor-not-allowed opacity-20 page-item disabled': page < 1}")
           a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
-            :href="(page == 0) ? '#' : '/?page='+incrPage(-1)"
+            :href="(page == 0) ? '#' : (path ?? '/')+'?page='+incrPage(-1)"
             class="hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white"
           )
             span.sr-only Previous
@@ -12,12 +12,12 @@
               path(fill-rule="evenodd", d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z", clip-rule="evenodd")
         li.page-item(v-for="i in pages")
           a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
-            :href="'/?page='+(i-1)" aria-current="page"
+            :href="(path ?? '/')+'?page='+(i-1)" aria-current="page"
             :class="{'hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white': true, 'bg-green-500 text-green-50 hover:text-green-50': page == (i-1)}"
           ) {{ i-1 }}
         li.page-item(:class="{'cursor-not-allowed opacity-20 page-item disabled': page == pages-1}")
           a.page-link.relative.block.py-1.px-3.rounded.border-0.bg-transparent.outline-none.transition-all.duration-300.rounded.text-gray-800(
-            :href="(page == (pages-1)) ? '#' : '/?page='+incrPage(1)"
+            :href="(page == (pages-1)) ? '#' : (path ?? '/')+'?page='+incrPage(1)"
             class="hover:text-gray-800 hover:bg-gray-200 focus:shadow-none dark:text-white"
           )
             span.sr-only Next
@@ -28,7 +28,7 @@
 <script>
 export default {
   name: "Pagination",
-  props: ["page", "pages"],
+  props: ["page", "pages", "path"],
   methods: {
     incrPage(value) {
       return Number(this.page) + value;
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>
diff --git a/store/users.js b/store/users.js
index df2b596..44f041c 100644
--- a/store/users.js
+++ b/store/users.js
@@ -1,16 +1,21 @@
 export const state = () => ({
   users: [],
+  count: 0,
 });
 
 export const getters = {
   users: (state) => {
     return state.users;
   },
+  count: (state) => {
+    return state.count;
+  },
 };
 
 export const mutations = {
   saveUsers: (state, value) => {
-    state.users = value;
+    state.users = value.results;
+    state.count = value.count;
   },
 };
 
@@ -144,11 +149,10 @@ export const actions = {
     return res;
   },
   // Get users
-  async getUsers({ commit, rootGetters }, data) {
+  async getUsers({ commit, rootGetters }, page) {
     commit("loadingStatus", true, { root: true });
     let res = { status: 0, data: null };
     let api = this.$config.api;
-    const page = data.page ? data.page : 0;
 
     await fetch(`${api}/v1/users?page=${page}`, {
       headers: {
@@ -159,7 +163,7 @@ export const actions = {
       .then(async (response) => {
         res.status = response.status;
         res.data = await response.json();
-        commit("saveUsers", res.data.results);
+        commit("saveUsers", res.data);
       })
       .catch((e) => {
         res.status = e.status;
diff --git a/store/warnings.js b/store/warnings.js
index 2d3aa99..1e8fe07 100644
--- a/store/warnings.js
+++ b/store/warnings.js
@@ -1,5 +1,6 @@
 export const state = () => ({
   warnings: [],
+  count: 0,
 });
 
 export const getters = {
-- 
cgit v1.2.3-18-g5258