From 566627239b04f667097fd65fde198fb4d41c70af Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 15 Sep 2025 11:01:18 +0700
Subject: [PATCH] feat(pagination): add reusable pagination component and
 update list views

- Create new PaginationView component to standardize pagination display
- Update multiple list components to use the new PaginationView
- Make paginationMeta prop required in list components
---
 app/components/app/divison/list.vue           | 13 ++++------
 app/components/app/equipment/list.vue         | 10 +++-----
 app/components/app/installation/list.vue      | 15 ++++-------
 app/components/app/specialist/list.vue        | 15 ++++-------
 app/components/app/tools/list.vue             | 25 ++++++++-----------
 app/components/app/unit/list.vue              | 14 ++++-------
 .../custom-ui/pagination/pagination-view.vue  | 24 ++++++++++++++++++
 .../pub/custom-ui/pagination/pagination.vue   |  4 +--
 8 files changed, 60 insertions(+), 60 deletions(-)
 create mode 100644 app/components/pub/custom-ui/pagination/pagination-view.vue

diff --git a/app/components/app/divison/list.vue b/app/components/app/divison/list.vue
index cf0d5ea2..e2540e85 100644
--- a/app/components/app/divison/list.vue
+++ b/app/components/app/divison/list.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -21,15 +22,11 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-    :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
       :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
-/>
+    />
 
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
   </div>
 </template>
diff --git a/app/components/app/equipment/list.vue b/app/components/app/equipment/list.vue
index c912c977..c64c64a2 100644
--- a/app/components/app/equipment/list.vue
+++ b/app/components/app/equipment/list.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -29,10 +30,7 @@ function handlePageChange(page: number) {
       :func-html="funcHtml"
       :func-component="funcComponent"
     />
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
index a6b19eb2..e9489ef1 100644
--- a/app/components/app/installation/list.vue
+++ b/app/components/app/installation/list.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -21,16 +22,10 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
       :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
-/>
-
-    <!-- Data info and pagination -->
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+    />
 
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/specialist/list.vue b/app/components/app/specialist/list.vue
index a6b19eb2..e9489ef1 100644
--- a/app/components/app/specialist/list.vue
+++ b/app/components/app/specialist/list.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -21,16 +22,10 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
       :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
-/>
-
-    <!-- Data info and pagination -->
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+    />
 
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/tools/list.vue b/app/components/app/tools/list.vue
index 5e6d4382..076f0f41 100644
--- a/app/components/app/tools/list.vue
+++ b/app/components/app/tools/list.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -19,18 +20,12 @@ function handlePageChange(page: number) {
 </script>
 
 <template>
-  <PubBaseDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
-  <template v-if="paginationMeta">
-    <div v-if="paginationMeta.totalPage > 1">
-      <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    </div>
-  </template>
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :func-html="funcHtml" :func-component="funcComponent"
+    />
+
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
 </template>
diff --git a/app/components/app/unit/list.vue b/app/components/app/unit/list.vue
index 1baaa6ba..e9489ef1 100644
--- a/app/components/app/unit/list.vue
+++ b/app/components/app/unit/list.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -21,15 +22,10 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
       :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
-/>
-
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+    />
 
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/pub/custom-ui/pagination/pagination-view.vue b/app/components/pub/custom-ui/pagination/pagination-view.vue
new file mode 100644
index 00000000..f3eaab4b
--- /dev/null
+++ b/app/components/pub/custom-ui/pagination/pagination-view.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import Pagination from './pagination.vue'
+
+const props = defineProps<{
+  paginationMeta: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Pagination
+  v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
+  :pagination-meta="paginationMeta"
+  @page-change="handlePageChange"
+  />
+</template>
diff --git a/app/components/pub/custom-ui/pagination/pagination.vue b/app/components/pub/custom-ui/pagination/pagination.vue
index 694e3b7b..06ca17b6 100644
--- a/app/components/pub/custom-ui/pagination/pagination.vue
+++ b/app/components/pub/custom-ui/pagination/pagination.vue
@@ -89,12 +89,12 @@ function getButtonClass(pageNumber: number) {
 <template>
   <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
     <!-- Info text -->
-    <div v-if="showInfo" class="text-sm text-muted-foreground shrink-0">
+    <div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
       Menampilkan {{ startRecord }}
       hingga {{ endRecord }}
       dari {{ formattedRecordCount }} data
     </div>
-    <div v-else class="shrink-0"></div>
+    <div v-else class="shrink-0">-</div>
 
     <!-- Spacer untuk memastikan ada ruang di tengah -->
     <div class="flex-1 min-w-4"></div>