From fa77d3e8377733031ffe7089061bae46a375ab7c Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 9 Feb 2025 21:52:48 +0800
Subject: [PATCH] code refactor

---
 src/components/desktop/PaginationButtons.vue  | 88 +++++++++++++++++++
 .../list/dialogs/ImportDialog.vue             | 69 ++-------------
 2 files changed, 93 insertions(+), 64 deletions(-)
 create mode 100644 src/components/desktop/PaginationButtons.vue

diff --git a/src/components/desktop/PaginationButtons.vue b/src/components/desktop/PaginationButtons.vue
new file mode 100644
index 00000000..d0167f40
--- /dev/null
+++ b/src/components/desktop/PaginationButtons.vue
@@ -0,0 +1,88 @@
+<template>
+    <v-pagination :density="density"
+                  :disabled="disabled"
+                  :total-visible="totalVisible ?? 7"
+                  :length="totalPageCount"
+                  v-model="currentPage">
+        <template #item="{ page, isActive }">
+            <v-btn variant="text"
+                   :density="density"
+                   :disabled="disabled"
+                   :icon="true"
+                   :color="isActive ? 'primary' : 'default'"
+                   @click="currentPage = parseInt(page)"
+                   v-if="page !== '...'"
+            >
+                <span>{{ page }}</span>
+            </v-btn>
+            <v-btn variant="text"
+                   color="default"
+                   :density="density"
+                   :disabled="disabled"
+                   :icon="true"
+                   v-if="page === '...'"
+            >
+                <span>{{ page }}</span>
+                <v-menu :disabled="disabled" :close-on-content-click="false" activator="parent">
+                    <v-list>
+                        <v-list-item class="text-sm" :density="density">
+                            <v-list-item-title class="cursor-pointer">
+                                <v-autocomplete width="100"
+                                                item-title="page"
+                                                item-value="page"
+                                                :density="density"
+                                                :items="allPages"
+                                                :no-data-text="tt('No results')"
+                                                v-model="currentPage"
+                                />
+                            </v-list-item-title>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+            </v-btn>
+        </template>
+    </v-pagination>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import type { ComponentDensity } from '@/lib/ui/desktop.ts';
+
+const props = defineProps<{
+    density?: ComponentDensity;
+    disabled?: boolean;
+    totalPageCount: number;
+    totalVisible?: number;
+    modelValue: number;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: number): void;
+}>();
+
+const { tt } = useI18n();
+
+const allPages = computed<{ page: number }[]>(() => {
+    const pages = [];
+
+    for (let i = 1; i <= props.totalPageCount; i++) {
+        pages.push({
+            page: i
+        });
+    }
+
+    return pages;
+});
+
+const currentPage = computed<number>({
+    get: () => props.modelValue,
+    set: (value) => {
+        if (value && value >= 1 && value <= props.totalPageCount) {
+            emit('update:modelValue', value);
+        }
+    }
+});
+</script>
diff --git a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
index 1a487411..eeb6c0b4 100644
--- a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
@@ -490,49 +490,10 @@
                                           :items="importTransactionsTablePageOptions"
                                           v-model="countPerPage"
                                 />
-                                <v-pagination density="compact"
-                                              :disabled="loading || submitting"
-                                              :total-visible="6"
-                                              :length="totalPageCount"
-                                              v-model="currentPage">
-                                    <template #item="{ page, isActive }">
-                                        <v-btn density="compact"
-                                               variant="text"
-                                               :disabled="loading || submitting"
-                                               :icon="true"
-                                               :color="isActive ? 'primary' : 'default'"
-                                               @click="currentPage = parseInt(page)"
-                                               v-if="page !== '...'"
-                                        >
-                                            <span>{{ page }}</span>
-                                        </v-btn>
-                                        <v-btn density="compact"
-                                               variant="text"
-                                               color="default"
-                                               :disabled="loading || submitting"
-                                               :icon="true"
-                                               v-if="page === '...'"
-                                        >
-                                            <span>{{ page }}</span>
-                                            <v-menu :disabled="loading || submitting" :close-on-content-click="false" activator="parent">
-                                                <v-list>
-                                                    <v-list-item class="text-sm" density="compact">
-                                                        <v-list-item-title class="cursor-pointer">
-                                                            <v-autocomplete density="compact"
-                                                                            width="100"
-                                                                            item-title="page"
-                                                                            item-value="page"
-                                                                            :items="allPages"
-                                                                            :no-data-text="tt('No results')"
-                                                                            v-model="inputCurrentPage"
-                                                            />
-                                                        </v-list-item-title>
-                                                    </v-list-item>
-                                                </v-list>
-                                            </v-menu>
-                                        </v-btn>
-                                    </template>
-                                </v-pagination>
+                                <pagination-buttons density="compact"
+                                                    :disabled="loading || submitting"
+                                                    :totalPageCount="totalPageCount"
+                                                    v-model="currentPage"></pagination-buttons>
                             </div>
                         </template>
                     </v-data-table>
@@ -606,6 +567,7 @@
 
 <script setup lang="ts">
 import type { StepBarItem } from '@/components/desktop/StepsBar.vue';
+import PaginationButtons from '@/components/desktop/PaginationButtons.vue';
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 import BatchReplaceDialog from './BatchReplaceDialog.vue';
@@ -884,27 +846,6 @@ const importTransactionsTablePageOptions = computed<ImportTransactionsDialogTabl
     return pageOptions;
 });
 
-const allPages = computed<{ page: number }[]>(() => {
-    const pages = [];
-
-    for (let i = 1; i < totalPageCount.value; i++) {
-        pages.push({
-            page: i
-        });
-    }
-
-    return pages;
-});
-
-const inputCurrentPage = computed<number>({
-    get: () => currentPage.value,
-    set: (value) => {
-        if (value && value >= 1 && value < totalPageCount.value) {
-            currentPage.value = value;
-        }
-    }
-});
-
 const totalPageCount = computed<number>(() => {
     if (!importTransactions.value || importTransactions.value.length < 1) {
         return 1;