refactor: refactor pagination component to support display total items

Signed-off-by: Ryan Wang <i@ryanc.cc>
halo-dev · Jul 26, 2023 · cce57d5 · cce57d5
1 parent cfe77c5
commit cce57d5
Show file tree

Hide file tree

Showing 13 changed files with 167 additions and 117 deletions.
diff --git a/console/packages/components/src/components/pagination/Pagination.vue b/console/packages/components/src/components/pagination/Pagination.vue
@@ -8,16 +8,20 @@ const props = withDefaults(
     size?: number;
     total?: number;
     sizeOptions?: number[];
+    showTotal?: boolean;
     pageLabel?: string;
     sizeLabel?: string;
+    totalLabel?: string;
   }>(),
   {
     page: 1,
     size: 10,
     total: 0,
     sizeOptions: () => [10],
+    showTotal: true,
     pageLabel: "页",
     sizeLabel: "条 / 页",
+    totalLabel: undefined,
   }
 );
 
@@ -33,6 +37,13 @@ const hasNext = computed(() => props.page < totalPages.value);
 
 const hasPrevious = computed(() => props.page > 1);
 
+const totalLabelText = computed(() => {
+  if (props.totalLabel) {
+    return props.totalLabel;
+  }
+  return `共 ${props.total} 项数据`;
+});
+
 const onPageChange = (event: Event) => {
   const target = event.target as HTMLSelectElement;
   const page = Number(target.value);
@@ -67,64 +78,45 @@ const next = () => {
 };
 </script>
 <template>
-  <div class="bg-white flex items-center justify-between">
-    <div class="flex-1 flex justify-between sm:!hidden items-center">
-      <button
-        class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 cursor-pointer"
-        :disabled="!hasPrevious"
-        @click="previous"
-      >
-        <IconArrowLeft />
-      </button>
-      <span class="text-sm text-gray-500"> {{ page }} / {{ totalPages }} </span>
-      <button
-        class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 cursor-pointer"
-        :disabled="!hasNext"
-        @click="next"
-      >
-        <IconArrowRight />
-      </button>
+  <div class="pagination">
+    <div v-if="showTotal" class="pagination__total">
+      {{ totalLabelText }}
     </div>
-    <div class="hidden sm:flex-1 sm:flex sm:items-center items-center gap-2">
-      <nav
-        aria-label="Pagination"
-        class="relative z-0 inline-flex rounded-base shadow-sm -space-x-px"
-      >
+    <div class="pagination__controller">
+      <nav aria-label="Pagination" class="pagination__nav">
         <button
-          class="relative h-8 outline-none inline-flex items-center px-2 py-1.5 rounded-l-base border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer disabled:cursor-not-allowed"
+          class="pagination__btn pagination__btn--prev"
           :disabled="!hasPrevious"
           @click="previous"
         >
           <IconArrowLeft />
         </button>
         <button
-          class="relative h-8 outline-none inline-flex items-center px-2 py-1.5 rounded-r-base border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer disabled:cursor-not-allowed"
+          class="pagination__btn pagination__btn--next"
           :disabled="!hasNext"
           @click="next"
         >
           <IconArrowRight />
         </button>
       </nav>
-      <div class="inline-flex items-center gap-2">
+      <div class="pagination__select-wrap">
         <select
           :value="page"
           :disabled="totalPages === 0"
-          class="h-8 border outline-none rounded-base px-2 text-gray-800 text-sm border-gray-300"
+          class="pagination__select"
           @change="onPageChange"
         >
-          <option v-if="totalPages === 0" :value="0">0 / 0</option>
-          <option v-for="i in totalPages" :key="i" :value="i">
+          <option v-if="totalPages === 0" :value="1">0 / 0</option>
+          <option v-for="i in totalPages || 1" :key="i" :value="i">
             {{ i }} / {{ totalPages }}
           </option>
         </select>
-        <span class="text-sm text-gray-500">{{ pageLabel }}</span>
+        <span class="pagination__select-label">
+          {{ pageLabel }}
+        </span>
       </div>
-      <div class="inline-flex items-center gap-2">
-        <select
-          :value="size"
-          class="h-8 border outline-none rounded-base px-2 text-gray-800 text-sm border-gray-300"
-          @change="onSizeChange"
-        >
+      <div class="pagination__select-wrap">
+        <select :value="size" class="pagination__select" @change="onSizeChange">
           <option
             v-for="(sizeOption, index) in sizeOptions"
             :key="index"
@@ -133,8 +125,52 @@ const next = () => {
             {{ sizeOption }}
           </option>
         </select>
-        <span class="text-sm text-gray-500">{{ sizeLabel }}</span>
+        <span class="pagination__select-label">
+          {{ sizeLabel }}
+        </span>
       </div>
     </div>
   </div>
 </template>
+
+<style lang="scss">
+.pagination {
+  @apply bg-white flex items-center flex-1 gap-2;
+
+  &__total {
+    @apply hidden sm:block text-sm text-gray-500;
+  }
+
+  &__controller {
+    @apply flex items-center gap-2 flex-1 justify-end;
+  }
+
+  &__nav {
+    @apply relative z-0 inline-flex rounded-base shadow-sm -space-x-px;
+  }
+
+  &__btn {
+    @apply relative h-8 outline-none inline-flex items-center px-2 py-1.5 rounded-base border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer disabled:cursor-not-allowed;
+
+    &--prev {
+      @apply rounded-r-none;
+    }
+
+    &--next {
+      @apply rounded-l-none;
+    }
+  }
+
+  &__select-wrap {
+    @apply inline-flex items-center gap-2;
+  }
+
+  &__select {
+    @apply h-8 border outline-none rounded-base px-2 text-gray-800 text-sm border-gray-300;
+  }
+
+  &__select-label {
+    @apply text-sm text-gray-500;
+  }
+}
+</style>
diff --git a/console/src/locales/en.yaml b/console/src/locales/en.yaml
@@ -1139,6 +1139,7 @@ core:
     pagination:
       page_label: page
       size_label: items per page
+      total_label: Total {total} items
     social_auth_providers:
       title: Third-party login
   composables:

diff --git a/console/src/locales/zh-CN.yaml b/console/src/locales/zh-CN.yaml
@@ -1139,6 +1139,7 @@ core:
     pagination:
       page_label: 页
       size_label: 条 / 页
+      total_label: 共 {total} 项数据
     social_auth_providers:
       title: 三方登录
   composables:

diff --git a/console/src/locales/zh-TW.yaml b/console/src/locales/zh-TW.yaml
@@ -1139,6 +1139,7 @@ core:
     pagination:
       page_label: 頁
       size_label: 條 / 頁
+      total_label: 共 {total} 項資料
     social_auth_providers:
       title: 三方登入
   composables:

diff --git a/console/src/modules/contents/attachments/AttachmentList.vue b/console/src/modules/contents/attachments/AttachmentList.vue
@@ -669,16 +669,17 @@ onMounted(() => {
           </div>
 
           <template #footer>
-            <div class="bg-white sm:flex sm:items-center sm:justify-end">
-              <VPagination
-                v-model:page="page"
-                v-model:size="size"
-                :page-label="$t('core.components.pagination.page_label')"
-                :size-label="$t('core.components.pagination.size_label')"
-                :total="total"
-                :size-options="[60, 120, 200]"
-              />
-            </div>
+            <VPagination
+              v-model:page="page"
+              v-model:size="size"
+              :page-label="$t('core.components.pagination.page_label')"
+              :size-label="$t('core.components.pagination.size_label')"
+              :total-label="
+                $t('core.components.pagination.total_label', { total: total })
+              "
+              :total="total"
+              :size-options="[60, 120, 200]"
+            />
           </template>
         </VCard>
       </div>

diff --git a/...e/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue b/...e/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
@@ -196,12 +196,15 @@ const isDisabled = (attachment: Attachment) => {
       </div>
     </VCard>
   </div>
-  <div class="mt-4 bg-white sm:flex sm:items-center sm:justify-end">
+  <div class="mt-4">
     <VPagination
       v-model:page="page"
       v-model:size="size"
       :page-label="$t('core.components.pagination.page_label')"
       :size-label="$t('core.components.pagination.size_label')"
+      :total-label="
+        $t('core.components.pagination.total_label', { total: total })
+      "
       :total="total"
       :size-options="[60, 120, 200]"
     />

diff --git a/console/src/modules/contents/comments/CommentList.vue b/console/src/modules/contents/comments/CommentList.vue
@@ -388,16 +388,17 @@ const handleApproveInBatch = async () => {
       </Transition>
 
       <template #footer>
-        <div class="bg-white sm:flex sm:items-center sm:justify-end">
-          <VPagination
-            v-model:page="page"
-            v-model:size="size"
-            :page-label="$t('core.components.pagination.page_label')"
-            :size-label="$t('core.components.pagination.size_label')"
-            :total="total"
-            :size-options="[20, 30, 50, 100]"
-          />
-        </div>
+        <VPagination
+          v-model:page="page"
+          v-model:size="size"
+          :page-label="$t('core.components.pagination.page_label')"
+          :size-label="$t('core.components.pagination.size_label')"
+          :total-label="
+            $t('core.components.pagination.total_label', { total: total })
+          "
+          :total="total"
+          :size-options="[20, 30, 50, 100]"
+        />
       </template>
     </VCard>
   </div>

diff --git a/console/src/modules/contents/pages/DeletedSinglePageList.vue b/console/src/modules/contents/pages/DeletedSinglePageList.vue
@@ -409,16 +409,17 @@ watch(
       </Transition>
 
       <template #footer>
-        <div class="bg-white sm:flex sm:items-center sm:justify-end">
-          <VPagination
-            v-model:page="page"
-            v-model:size="size"
-            :page-label="$t('core.components.pagination.page_label')"
-            :size-label="$t('core.components.pagination.size_label')"
-            :total="total"
-            :size-options="[20, 30, 50, 100]"
-          />
-        </div>
+        <VPagination
+          v-model:page="page"
+          v-model:size="size"
+          :page-label="$t('core.components.pagination.page_label')"
+          :size-label="$t('core.components.pagination.size_label')"
+          :total-label="
+            $t('core.components.pagination.total_label', { total: total })
+          "
+          :total="total"
+          :size-options="[20, 30, 50, 100]"
+        />
       </template>
     </VCard>
   </div>

diff --git a/console/src/modules/contents/pages/SinglePageList.vue b/console/src/modules/contents/pages/SinglePageList.vue
@@ -472,16 +472,17 @@ watch(selectedPageNames, (newValue) => {
       </Transition>
 
       <template #footer>
-        <div class="bg-white sm:flex sm:items-center sm:justify-end">
-          <VPagination
-            v-model:page="page"
-            v-model:size="size"
-            :page-label="$t('core.components.pagination.page_label')"
-            :size-label="$t('core.components.pagination.size_label')"
-            :total="total"
-            :size-options="[20, 30, 50, 100]"
-          />
-        </div>
+        <VPagination
+          v-model:page="page"
+          v-model:size="size"
+          :page-label="$t('core.components.pagination.page_label')"
+          :size-label="$t('core.components.pagination.size_label')"
+          :total-label="
+            $t('core.components.pagination.total_label', { total: total })
+          "
+          :total="total"
+          :size-options="[20, 30, 50, 100]"
+        />
       </template>
     </VCard>
   </div>

diff --git a/console/src/modules/contents/posts/DeletedPostList.vue b/console/src/modules/contents/posts/DeletedPostList.vue
@@ -422,16 +422,17 @@ watch(
       </Transition>
 
       <template #footer>
-        <div class="bg-white sm:flex sm:items-center sm:justify-end">
-          <VPagination
-            v-model:page="page"
-            v-model:size="size"
-            :page-label="$t('core.components.pagination.page_label')"
-            :size-label="$t('core.components.pagination.size_label')"
-            :total="total"
-            :size-options="[20, 30, 50, 100]"
-          />
-        </div>
+        <VPagination
+          v-model:page="page"
+          v-model:size="size"
+          :page-label="$t('core.components.pagination.page_label')"
+          :size-label="$t('core.components.pagination.size_label')"
+          :total-label="
+            $t('core.components.pagination.total_label', { total: total })
+          "
+          :total="total"
+          :size-options="[20, 30, 50, 100]"
+        />
       </template>
     </VCard>
   </div>

diff --git a/console/src/modules/contents/posts/PostList.vue b/console/src/modules/contents/posts/PostList.vue
@@ -483,16 +483,17 @@ watch(selectedPostNames, (newValue) => {
       </Transition>
 
       <template #footer>
-        <div class="bg-white sm:flex sm:items-center sm:justify-end">
-          <VPagination
-            v-model:page="page"
-            v-model:size="size"
-            :page-label="$t('core.components.pagination.page_label')"
-            :size-label="$t('core.components.pagination.size_label')"
-            :total="total"
-            :size-options="[20, 30, 50, 100]"
-          />
-        </div>
+        <VPagination
+          v-model:page="page"
+          v-model:size="size"
+          :page-label="$t('core.components.pagination.page_label')"
+          :size-label="$t('core.components.pagination.size_label')"
+          :total-label="
+            $t('core.components.pagination.total_label', { total: total })
+          "
+          :total="total"
+          :size-options="[20, 30, 50, 100]"
+        />
       </template>
     </VCard>
   </div>