From 3dbc1b8fd1342ea4904a88ebe51535fbeb15205e Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 4 Sep 2025 11:26:58 +0700
Subject: [PATCH] refactor(pagination): move pagination info display to
 component and improve layout

- Consolidate pagination info display logic in pagination component
- Remove duplicate computed properties from list components
- Improve pagination layout with better spacing and responsiveness
- Add skeleton loading support to data tables
---
 app/components/app/divison/list.vue           | 53 +++----------------
 app/components/app/installation/list.vue      | 39 +++-----------
 .../pub/custom-ui/pagination/pagination.vue   | 47 ++++++++--------
 3 files changed, 40 insertions(+), 99 deletions(-)

diff --git a/app/components/app/divison/list.vue b/app/components/app/divison/list.vue
index 3aecc2e8..cf0d5ea2 100644
--- a/app/components/app/divison/list.vue
+++ b/app/components/app/divison/list.vue
@@ -7,7 +7,7 @@ interface Props {
   paginationMeta?: PaginationMeta
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -16,57 +16,20 @@ const emit = defineEmits<{
 function handlePageChange(page: number) {
   emit('pageChange', page)
 }
-
-// Computed properties for formatted display
-const formattedRecordCount = computed(() => {
-  if (!props.paginationMeta) return '0'
-  const count = props.paginationMeta.recordCount
-  if (count == null || count === undefined) return '0'
-  return Number(count).toLocaleString('id-ID')
-})
-
-const startRecord = computed(() => {
-  if (!props.paginationMeta) return 1
-  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
-})
-
-const endRecord = computed(() => {
-  if (!props.paginationMeta) return 0
-  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
-})
 </script>
 
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-      :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
-        />
+    :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 -->
-    <div v-if="paginationMeta" class="flex align-center justify-between">
-      <!-- Data info - always show -->
-      <div class="flex items-center justify-between px-2 mb-4">
-        <div class="flex-1 text-sm text-muted-foreground">
-          Menampilkan {{ startRecord }}
-          hingga {{ endRecord }}
-          dari {{ formattedRecordCount }} data
-        </div>
-      </div>
-
-      <!-- Pagination controls - only show when multiple pages -->
+    <template v-if="paginationMeta">
       <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination
-          :pagination-meta="paginationMeta"
-          :show-info="false"
-          @page-change="handlePageChange"
-        />
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
       </div>
-    </div>
+    </template>
+
   </div>
 </template>
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
index 8f598ad6..a6b19eb2 100644
--- a/app/components/app/installation/list.vue
+++ b/app/components/app/installation/list.vue
@@ -7,7 +7,7 @@ interface Props {
   paginationMeta?: PaginationMeta
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -16,48 +16,21 @@ const emit = defineEmits<{
 function handlePageChange(page: number) {
   emit('pageChange', page)
 }
-
-// Computed properties for formatted display
-const formattedRecordCount = computed(() => {
-  if (!props.paginationMeta) return '0'
-  const count = props.paginationMeta.recordCount
-  if (count == null || count === undefined) return '0'
-  return Number(count).toLocaleString('id-ID')
-})
-
-const startRecord = computed(() => {
-  if (!props.paginationMeta) return 1
-  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
-})
-
-const endRecord = computed(() => {
-  if (!props.paginationMeta) return 0
-  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
-})
 </script>
 
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
 :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-      :func-html="funcHtml" :func-component="funcComponent"
+      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
 />
 
     <!-- Data info and pagination -->
-    <div v-if="paginationMeta" class="flex align-center justify-between">
-      <!-- Data info - always show -->
-      <div class="flex items-center justify-between px-2 mb-4">
-        <div class="flex-1 text-sm text-muted-foreground">
-          Menampilkan {{ startRecord }}
-          hingga {{ endRecord }}
-          dari {{ formattedRecordCount }} data
-        </div>
-      </div>
-
-      <!-- Pagination controls - only show when multiple pages -->
+    <template v-if="paginationMeta">
       <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" :show-info="false" @page-change="handlePageChange" />
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
       </div>
-    </div>
+    </template>
+
   </div>
 </template>
diff --git a/app/components/pub/custom-ui/pagination/pagination.vue b/app/components/pub/custom-ui/pagination/pagination.vue
index 797922e2..694e3b7b 100644
--- a/app/components/pub/custom-ui/pagination/pagination.vue
+++ b/app/components/pub/custom-ui/pagination/pagination.vue
@@ -87,39 +87,44 @@ function getButtonClass(pageNumber: number) {
 </script>
 
 <template>
-  <div class="flex items-center justify-between px-2">
+  <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
     <!-- Info text -->
-    <div v-if="showInfo" class="flex-1 text-sm text-muted-foreground">
+    <div v-if="showInfo" class="text-sm text-muted-foreground shrink-0">
       Menampilkan {{ startRecord }}
       hingga {{ endRecord }}
       dari {{ formattedRecordCount }} data
     </div>
-    <div v-else class="flex-1"></div>
+    <div v-else class="shrink-0"></div>
+
+    <!-- Spacer untuk memastikan ada ruang di tengah -->
+    <div class="flex-1 min-w-4"></div>
 
     <!-- Pagination controls -->
-    <Pagination
+    <div class="shrink-0">
+      <Pagination
 v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
-      :items-per-page="paginationMeta.pageSize" show-edges
+        :items-per-page="paginationMeta.pageSize" show-edges
 >
-      <PaginationList v-slot="{ items }" class="flex items-center gap-1">
-        <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
-        <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
+        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+          <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
+          <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
 
-        <template v-for="(item, index) in items">
-          <PaginationListItem
+          <template v-for="(item, index) in items">
+            <PaginationListItem
 v-if="item.type === 'page'" :key="index" :value="item.value" as-child
-            @click="handlePageChange(item.value)"
+              @click="handlePageChange(item.value)"
 >
-            <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
-              {{ item.value }}
-            </Button>
-          </PaginationListItem>
-          <PaginationEllipsis v-else :key="item.type" :index="index" />
-        </template>
+              <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
+                {{ item.value }}
+              </Button>
+            </PaginationListItem>
+            <PaginationEllipsis v-else :key="item.type" :index="index" />
+          </template>
 
-        <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
-        <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
-      </PaginationList>
-    </Pagination>
+          <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
+          <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
+        </PaginationList>
+      </Pagination>
+    </div>
   </div>
 </template>