feat: add pagination

package.json

@@ -17,6 +17,7 @@
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
     "vue": "^3.4.21",
+    "vue-awesome-paginate": "^1.1.46",
     "vue-router": "4",
     "vue3-lazyload": "^0.3.8"
   },

src/api/examsRepository.ts

@@ -3,8 +3,8 @@ import AxiosClient from "./axios";
 const resource = "/category";
 
 export default {
-  get(classId: string) {
-    return AxiosClient.get(`${resource}/${classId}/exams`);
+  get(classId: string, currentPage: number) {
+    return AxiosClient.get(`${resource}/${classId}/exams?page=${currentPage}`);
   }
 }
 

src/components/CustomPagination.vue

@@ -0,0 +1,74 @@
+<template lang="">
+  <div class="flex items-center justify-center" v-if="props.totalItems > 0">
+    <vue-awesome-paginate
+      :total-items="props.totalItems"
+      :items-per-page="props.perpage"
+      :max-pages-shown="5"
+      v-model="page"
+      :on-click="onClickHandler"
+    />
+  </div>
+</template>
+
+<script setup>
+  import router from "@/router";
+  import { ref, watch } from "vue";
+  import { useRoute } from 'vue-router';
+
+  const route = useRoute();
+  const props = defineProps({
+    perPage: {
+      type: Number,
+      required: true,
+    },
+    totalItems: {
+      type: Number,
+      required: true,
+    },
+    currentPage: {
+      type: Number,
+      required: true,
+    }
+  });
+
+  const onClickHandler = (page) => {
+    const classId = route.params.classId;
+    router.push({ name: "exercise", params: { classId }, query: {
+      page,
+    }})
+  };
+
+  const page = ref(1);
+
+  watch(() => props.currentPage, () => {
+    page.value = props.currentPage;
+  },{ immediate: true })
+  
+</script>
+
+<style>
+  .pagination-container {
+    display: flex;
+    column-gap: 10px;
+  }
+  .paginate-buttons {
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    cursor: pointer;
+    background-color: rgb(242, 242, 242);
+    border: 1px solid rgb(217, 217, 217);
+    color: black;
+  }
+  .paginate-buttons:hover {
+    background-color: #d8d8d8;
+  }
+  .active-page {
+    background-color: #3498db;
+    border: 1px solid #3498db;
+    color: white;
+  }
+  .active-page:hover {
+    background-color: #2988c8;
+  }
+</style>

src/components/ListBox.vue

@@ -1,22 +1,33 @@
 <template lang="">
   <div>
     <Box 
-      v-for="exam in exams.data" 
+      v-for="exam in props.exams.data" 
       :key="exam.slug"
       :name="exam.name"
       :avatar="exam.avatar"
       :description="exam.description || exam.meta_description"
     />
+
+    <custom-pagination 
+      :per-page="props.exams.per_page"
+      :total-items="props.exams.total"
+      :current-page="props.currentPage"
+    />
   </div>
 </template>
 
 <script setup>
   import Box from "@/components/Box.vue";
+  import CustomPagination from "@/components/CustomPagination.vue";
 
   const props = defineProps({
     exams: {
       type: Object,
       required: true,
+    },
+    currentPage: {
+      type: Number,
+      required: true,
     }
   });
 </script>

src/components/ListCard.vue

@@ -1,6 +1,6 @@
 <template lang="">
   <div v-if="props.exams.length > 0">
-    <router-link :to="props.url" class="mb-5 text-3xl font-bold hover:text-[#67c23a] text-center md:text-left">
+    <router-link :to="props.url+'?page=1'" class="mb-5 text-3xl font-bold hover:text-[#67c23a] text-center md:text-left">
       <h1 class="mb-5 text-3xl font-bold hover:text-[#67c23a] text-center md:text-left">{{ title }}</h1>
     </router-link>
     <div class="grid md:grid-cols-3 gap-x-8 md:gap-y-10 gap-y-5 grid-cols-1 mb-10">

src/main.ts

@@ -5,11 +5,15 @@ import router from './router'
 import VueLazyLoad from 'vue3-lazyload'
 import loading from "@/assets/avatarDefault.webp";
 
+import VueAwesomePaginate from "vue-awesome-paginate";
+
+import "vue-awesome-paginate/dist/style.css";
 import './style.css'
 
 const app = createApp(App)
 
 app.use(createPinia())
+app.use(VueAwesomePaginate)
 app.use(router)
 app.use(VueLazyLoad, {
   loading,

src/views/ExercisePage.vue

@@ -2,29 +2,37 @@
   <div v-if="examsData.value && examsData.value.exams">
     <ListBox 
       :exams = "examsData.value.exams"
+      :current-page ="currentPage"
     />
   </div>
 </template>
 
 <script setup>
   import ListBox from "@/components/ListBox.vue";
   import { useRoute } from 'vue-router';
-  import { computed, watch, reactive } from "vue";
+  import { computed, watch, reactive, ref } from "vue";
   import { RepositoryFactory } from "@/api/RepositoryFactory";
   import { useLoadingStore } from "@/store/loading";
 
   const loadingStore = useLoadingStore();
   const examsData = reactive([]);
+  const currentPage = ref(1);
 
   const route = useRoute();
-  watch(() => route.path, async () => {
+  watch(() => [route.path, route.query], async () => {
     const classId = route.params.classId;
     const ExamRepository = RepositoryFactory.get("exams");
+    try {
+      currentPage.value = parseInt(route.query.page);
+      if (isNaN(currentPage.value)) throw new Error();
+    } catch (error) {
+      currentPage.value = 1;
+    }
 
     loadingStore.changeLoadingState(true);
-    const { data } = await ExamRepository.get(classId);
+    const { data } = await ExamRepository.get(classId, currentPage.value);
     loadingStore.changeLoadingState(false);
-    
+
     examsData.value = data;
   }, { immediate: true });
   

tsconfig.json

@@ -8,7 +8,7 @@
     "paths": {
       "@/*": ["./src/*", "./dist/*"]
     },
-
+    "noImplicitAny": false,
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

yarn.lock

@@ -1966,6 +1966,13 @@ vscode-uri@^3.0.8:
   resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz"
   integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
+vue-awesome-paginate@^1.1.46:
+  version "1.1.46"
+  resolved "https://registry.yarnpkg.com/vue-awesome-paginate/-/vue-awesome-paginate-1.1.46.tgz#93091ca23b98d4be7d21149ae0dfbc2997215743"
+  integrity sha512-hjwAJLd2N54j0uuGgqmlTdhZw8NBFQpFiShjGrvxsA0DnvmOQjM18GEor+Ieigz6nE8VA4hQerIDBQjf4lsacg==
+  dependencies:
+    vue "^3.2.25"
+
 vue-demi@>=0.14.5:
   version "0.14.8"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.8.tgz#00335e9317b45e4a68d3528aaf58e0cec3d5640a"
@@ -2007,7 +2014,7 @@ vue3-lazyload@^0.3.8:
   dependencies:
     vue-demi "^0.12.5"
 
-vue@^3.4.21:
+vue@^3.2.25, vue@^3.4.21:
   version "3.4.29"
   resolved "https://registry.npmjs.org/vue/-/vue-3.4.29.tgz"
   integrity sha512-8QUYfRcYzNlYuzKPfge1UWC6nF9ym0lx7mpGVPJYNhddxEf3DD0+kU07NTL0sXuiT2HuJuKr/iEO8WvXvT0RSQ==