fix(kpagination): ensure currentPage is highlighted (#2307)

If your current page is not in the set of page buttons that KPagination defaults to (e.g. [1] [2] [3] [...] [20] with a current page of `7`). This fix ensures that the correct set of page buttons is displayed plus highlights the button that corresponds to the current page. I also added an example to the sandbox which I used to figure this out. FYI: Our use case is that we always pass bookmarkable `?page=7` parameters to our pages, previous to this fix a '7 page button' would not be shown or highlighted, also see kumahq/kuma-gui#2769 --------- Signed-off-by: John Cowen <[email protected]>
Kong · Jul 31, 2024 · 626e435 · 626e435
1 parent 5739232
commit 626e435
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/sandbox/pages/SandboxPagination.vue b/sandbox/pages/SandboxPagination.vue
@@ -15,6 +15,15 @@
           @page-size-change="handlePageSizeChange"
         />
       </SandboxSectionComponent>
+      <SandboxSectionComponent title="currentPage">
+        <KPagination
+          :current-page="currentPage"
+          :items="currentPageItems"
+          :page-sizes="[10, 20, 30, 40]"
+          :total-count="currentPageItems.length"
+          @page-change="handleCurrentPage"
+        />
+      </SandboxSectionComponent>
       <SandboxSectionComponent title="pageSizes">
         <KPagination
           :page-sizes="[10, 20, 30, 40]"
@@ -78,13 +87,22 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue'
+import { inject, ref, computed } from 'vue'
 import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import type { PageChangeData, PageSizeChangeData } from '@/types'
 
-const handlePageSizeChange = (obj: any) => {
+const handlePageSizeChange = (obj: PageSizeChangeData) => {
   console.log(obj)
 }
+
+const currentPage = ref<number>(7)
+const currentPageItems = computed(() => Array.from({ length: 200 }, (_, index) => index + 1))
+const handleCurrentPage = ({ page }: PageChangeData) => {
+  currentPage.value = page
+}
+
+
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/KPagination/KPagination.vue b/src/components/KPagination/KPagination.vue
@@ -288,8 +288,6 @@ const getVisiblePages = (currPage: number, pageCount: number, firstDetached: boo
   if (pages.length <= visiblePages) {
     return pages
   }
-
-
   if (!firstDetached) {
     // First pages
     pages = pages.filter((n) => n <= (fittingNeighbors.value * 2) + sequentialItemsVisible.value)
@@ -304,13 +302,13 @@ const getVisiblePages = (currPage: number, pageCount: number, firstDetached: boo
     // Last pages
     pages = pages.filter((n) => n > pageCount - (fittingNeighbors.value * 2) - sequentialItemsVisible.value)
   }
-
   return pages
 }
 
 const backDisabled = ref<boolean>(currPage.value === 1)
 const forwardDisabled = ref<boolean>(currPage.value === pageCount.value)
 
+
 const startCount = computed((): number => (currPage.value - 1) * currentPageSize.value + 1)
 const endCount = computed((): number => {
   const calculatedEndCount = startCount.value - 1 + currentPageSize.value
@@ -321,12 +319,12 @@ const endCount = computed((): number => {
 const pagesString = computed((): string => `${startCount.value} to ${endCount.value}`)
 const pageCountString = computed((): string => ` of ${props.totalCount}`)
 const currentlySelectedPage = computed((): number => props.currentPage ? props.currentPage : currPage.value)
-const firstDetached = ref<boolean>(false)
+const firstDetached = ref<boolean>(currentlySelectedPage.value >= fittingNeighbors.value + (sequentialItemsVisible.value + 1))
 const lastDetached = ref<boolean>(pageCount.value > (sequentialItemsVisible.value + 2) + (2 * fittingNeighbors.value))
 const pagesVisible = ref<Array<number>>(getVisiblePages(
   currentlySelectedPage.value,
   pageCount.value,
-  false,
+  firstDetached.value,
   lastDetached.value,
 ))