From e1f420c3ae77693780caf76a6e146144f5c638ab Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 22 Sep 2024 21:31:48 +0800
Subject: [PATCH] add dropdown page select box in import transaction dialog

---
 .../list/dialogs/ImportDialog.vue             | 59 ++++++++++++++++++-
 1 file changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
index 6c79ef41..1ab5271f 100644
--- a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
@@ -321,7 +321,43 @@
                                 <v-pagination density="compact"
                                               :total-visible="6"
                                               :length="totalPageCount"
-                                              v-model="currentPage"></v-pagination>
+                                              v-model="currentPage">
+                                    <template #item="{ page, isActive }">
+                                        <v-btn density="compact"
+                                               variant="text"
+                                               :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"
+                                               :icon="true"
+                                               v-if="page === '...'"
+                                        >
+                                            <span>{{ page }}</span>
+                                            <v-menu :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="$t('No results')"
+                                                                            v-model="inputCurrentPage"
+                                                            />
+                                                        </v-list-item-title>
+                                                    </v-list-item>
+                                                </v-list>
+                                            </v-menu>
+                                        </v-btn>
+                                    </template>
+                                </v-pagination>
                             </div>
                         </template>
                     </v-data-table>
@@ -584,6 +620,27 @@ export default {
 
             return pageOptions;
         },
+        allPages() {
+            const pages = [];
+
+            for (let i = 1; i < this.totalPageCount; i++) {
+                pages.push({
+                    page: i
+                });
+            }
+
+            return pages;
+        },
+        inputCurrentPage: {
+            get: function () {
+                return this.currentPage;
+            },
+            set: function (value) {
+                if (value && value >= 1 && value < this.totalPageCount) {
+                    this.currentPage = value;
+                }
+            }
+        },
         totalPageCount() {
             if (!this.importTransactions || this.importTransactions.length < 1) {
                 return 1;