feat: add pagination in search popup

src/components/CustomPagination.vue

@@ -11,11 +11,8 @@
 </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,
@@ -28,14 +25,14 @@
     currentPage: {
       type: Number,
       required: true,
+    },
+    func: {
+      type: Function,
     }
   });
 
   const onClickHandler = (page) => {
-    const classId = route.params.classId;
-    router.push({ name: "exercise", params: { classId }, query: {
-      page,
-    }})
+    props.func(page);
   };
 
   const page = ref(1);

src/components/ListBox.vue

@@ -13,13 +13,18 @@
       :per-page="props.exams.per_page"
       :total-items="props.exams.total"
       :current-page="props.currentPage"
+      :func="changePage"
     />
   </div>
 </template>
 
 <script setup>
   import Box from "@/components/Box.vue";
   import CustomPagination from "@/components/CustomPagination.vue";
+  import router from "@/router";
+  import { useRoute } from 'vue-router';
+
+  const route = useRoute();
 
   const props = defineProps({
     exams: {
@@ -31,4 +36,11 @@
       required: true,
     }
   });
+
+  function changePage(page) {
+    const classId = route.params.classId;
+    router.push({ name: "exercise", params: { classId }, query: {
+      page,
+    }})
+  }
 </script>

src/components/Search/CardSearchResult.vue

@@ -1,9 +1,14 @@
 <template lang="">
   <div>
-    <img
-      v-lazy="{ src: props.data.avatar }"  
-      class="w-full rounded-lg object-cover h-32 mb-2"
-    />
+    <router-link
+      :to="{ name: 'do-exercise', params: { exerciseId: props.data.slug } }"
+      @click.native="onClick"
+    >
+      <img
+        v-lazy="{ src: props.data.avatar }"  
+        class="w-full rounded-lg object-cover h-32 mb-2"
+      />
+    </router-link>
     <router-link 
       v-if="props.data.category"
       @click.native="onClick"
@@ -12,9 +17,13 @@
     >
       {{ props.data.category.name }}
     </router-link>
-    <div class="font-bold leading-5 mt-2 mb-4 md:mb-2">
+    <router-link 
+      :to="{ name: 'do-exercise', params: { exerciseId: props.data.slug } }"
+      @click.native="onClick"
+      class="font-bold leading-5 mt-2 mb-4 md:mb-2 block"
+    >
       {{ props.data.name }}
-    </div>
+    </router-link>
   </div>
 </template>
 

src/components/Search/SearchHandle.vue

@@ -32,7 +32,14 @@
       /> 
     </div>
 
-    <div class="border-t">Pagination here</div>
+    <div class="border-t" v-if="searchData.value?.results">
+      <custom-pagination 
+        :per-page="searchData.value.results.per_page"
+        :total-items="searchData.value.results.total"
+        :current-page="searchData.value.results.current_page"
+        :func="changePage"
+      />
+    </div>
   </div>
 </template>
 
@@ -42,6 +49,8 @@
   import { onMounted, reactive } from "vue";
   import CardSearchResult from "@/components/Search/CardSearchResult.vue";
   import Icon from "@/components/Icon.vue";
+  import CustomPagination from "@/components/CustomPagination.vue";
+
   const isShowSearchPopup = defineModel("isShowSearchPopup", {
     type: Boolean,
     required: true,
@@ -52,13 +61,19 @@
   const ExamRepository = RepositoryFactory.get("exams");
   const searchText = ref("");
   const isLoading = ref(false);
-
+  const currentPage = ref(1);
+  
   async function handleSubmit() {
     isLoading.value = true;
-    const { data } = await ExamRepository.search(searchText.value, 1);
+    const { data } = await ExamRepository.search(searchText.value, currentPage.value);
     searchData.value = data;
     isLoading.value = false;
 
     console.log(searchData.value);
   }
+
+  function changePage(page) {
+    currentPage.value = page;
+    handleSubmit();
+  }
 </script>