From c082668863152ce18cd057b94d318be82403b1fc Mon Sep 17 00:00:00 2001
From: Maxime <57860498+MaximeMRF@users.noreply.github.com>
Date: Sun, 31 Dec 2023 20:35:57 +0700
Subject: [PATCH] feat: scroll to top of list when clicking on next/prev page
 (#49)

* feat: scroll to top of list when clicking on next/prev page

* fix: use vuejs ref instead of querySelector to do the scroll
---
 resources/pages/home/main.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/resources/pages/home/main.vue b/resources/pages/home/main.vue
index f9747d9..4e7af07 100644
--- a/resources/pages/home/main.vue
+++ b/resources/pages/home/main.vue
@@ -20,6 +20,7 @@ const filters = ref<PackagesFilters>({
   search: params.search,
   page: +(props.meta.currentPage || 1),
 })
+const scrollToTopRef = ref<HTMLElement | null>(null)
 
 watchDeep(filters, () => {
   router.visit('/', {
@@ -29,6 +30,19 @@ watchDeep(filters, () => {
     preserveScroll: true,
   })
 })
+
+function changePage(newPage: number) {
+  filters.value.page = newPage
+  scrollToTop()
+}
+
+function scrollToTop() {
+  const el = scrollToTopRef.value
+
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth' })
+  }
+}
 </script>
 
 <template>
@@ -48,7 +62,11 @@ watchDeep(filters, () => {
 
           <!-- Search and sort -->
           <div class="w-full flex flex-col">
-            <div class="w-full flex flex-col justify-between gap-2" md="items-center flex-row">
+            <div
+              ref="scrollToTopRef"
+              class="w-full flex flex-col justify-between gap-2"
+              md="items-center flex-row"
+            >
               <SearchBar v-model="filters.search" />
               <SortBy v-model="filters.sort" />
             </div>
@@ -61,7 +79,7 @@ watchDeep(filters, () => {
                 :pages="meta.pages"
                 :current-page="meta.currentPage"
                 :total="meta.total"
-                @update:current-page="filters.page = $event"
+                @update:current-page="changePage($event)"
               />
             </div>
           </div>