From 36b5f74414413e7270d47f52df387697698aeeaf Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Tue, 4 Oct 2022 22:31:35 +0200
Subject: Add pagination

---
 pages/index.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

(limited to 'pages/index.vue')

diff --git a/pages/index.vue b/pages/index.vue
index 27c157a..5884e7c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -19,11 +19,13 @@
           :key="model.id"
           :model="model"
         )
+      pagination(:page="page" :pages="pages" v-if="count")
 </template>
 
 <script>
 import ModelLoading from "@/components/ModelLoading.vue";
 import ModelBoxCard from "@/components/ModelBoxCard.vue";
+import Pagination from "@/components/Pagination.vue";
 
 import { mapGetters } from "vuex";
 
@@ -36,14 +38,24 @@ export default {
   components: {
     "model-loading": ModelLoading,
     "model-box-card": ModelBoxCard,
+    pagination: Pagination,
+  },
+  data() {
+    return {
+      page: 0,
+      pages: 0,
+    };
   },
   computed: {
     ...mapGetters(["isLoading"]),
     ...mapGetters("auth", ["isLogged"]),
-    ...mapGetters("models", ["models"]),
+    ...mapGetters("models", ["models", "count"]),
   },
   created() {
-    this.$store.dispatch("models/getModels");
+    this.page = this.$route.query.page ?? 0;
+    this.$store.dispatch("models/getModels", this.page).then(() => {
+      this.pages = Math.ceil(this.count / 20);
+    });
   },
 };
 </script>
-- 
cgit v1.2.3-18-g5258