support setting items per page in transaction list page

src/lib/settings.js

@@ -15,6 +15,7 @@ const defaultSettings = {
     thousandsSeparator: true,
     currencyDisplayMode: currencyConstants.defaultCurrencyDisplayMode,
     showAmountInHomePage: true,
+    itemsCountInTransactionListPage: 15,
     showTotalAmountInTransactionListPage: true,
     showAccountBalance: true,
     statistics: {
@@ -185,6 +186,14 @@ export function setShowAmountInHomePage(value) {
     setOption('showAmountInHomePage', value);
 }
 
+export function getItemsCountInTransactionListPage() {
+    return getOption('itemsCountInTransactionListPage');
+}
+
+export function setItemsCountInTransactionListPage(value) {
+    setOption('itemsCountInTransactionListPage', value);
+}
+
 export function isShowTotalAmountInTransactionListPage() {
     return getOption('showTotalAmountInTransactionListPage');
 }

src/locales/en.js

@@ -1011,6 +1011,7 @@ export default {
     'Page Settings': 'Page Settings',
     'Overview Page': 'Overview Page',
     'Transaction List Page': 'Transaction List Page',
+    'Transactions Per Page': 'Transactions Per Page',
     'Show Monthly Total Amount': 'Show Monthly Total Amount',
     'Transaction Edit Page': 'Transaction Edit Page',
     'Automatically Add Geolocation': 'Automatically Add Geolocation',

src/locales/zh_Hans.js

@@ -1011,6 +1011,7 @@ export default {
     'Page Settings': '页面设置',
     'Overview Page': '总览页面',
     'Transaction List Page': '交易列表页面',
+    'Transactions Per Page': '每页交易数',
     'Show Monthly Total Amount': '显示月度总金额',
     'Transaction Edit Page': '交易编辑页面',
     'Automatically Add Geolocation': '自动添加地理位置',

src/stores/setting.js

@@ -17,6 +17,7 @@ export const useSettingsStore = defineStore('settings', {
             thousandsSeparator: settings.isEnableThousandsSeparator(),
             currencyDisplayMode: settings.getCurrencyDisplayMode(),
             showAmountInHomePage: settings.isShowAmountInHomePage(),
+            itemsCountInTransactionListPage: settings.getItemsCountInTransactionListPage(),
             showTotalAmountInTransactionListPage: settings.isShowTotalAmountInTransactionListPage(),
             showAccountBalance: settings.isShowAccountBalance(),
             statistics: {
@@ -75,6 +76,10 @@ export const useSettingsStore = defineStore('settings', {
             settings.setShowAmountInHomePage(value);
             this.appSettings.showAmountInHomePage = value;
         },
+        setItemsCountInTransactionListPage(value) {
+            settings.setItemsCountInTransactionListPage(value);
+            this.appSettings.itemsCountInTransactionListPage = value;
+        },
         setShowTotalAmountInTransactionListPage(value) {
             settings.setShowTotalAmountInTransactionListPage(value);
             this.appSettings.showTotalAmountInTransactionListPage = value;

src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue

@@ -120,6 +120,15 @@
                 <v-form>
                     <v-card-text>
                         <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    persistent-placeholder
+                                    :label="$t('Transactions Per Page')"
+                                    :placeholder="$t('Transactions Per Page')"
+                                    :items="[ 5, 10, 15, 20, 25, 30, 50 ]"
+                                    v-model="itemsCountInTransactionListPage"
+                                />
+                            </v-col>
                             <v-col cols="12" md="6">
                                 <v-select
                                     item-title="displayName"
@@ -264,6 +273,14 @@ export default {
                 this.settingsStore.setShowTotalAmountInTransactionListPage(value);
             }
         },
+        itemsCountInTransactionListPage: {
+            get: function () {
+                return this.settingsStore.appSettings.itemsCountInTransactionListPage;
+            },
+            set: function (value) {
+                this.settingsStore.setItemsCountInTransactionListPage(value);
+            }
+        },
         isAutoGetCurrentGeoLocation: {
             get: function () {
                 return this.settingsStore.appSettings.autoGetCurrentGeoLocation;

src/views/desktop/transactions/ListPage.vue

@@ -14,6 +14,13 @@
                             ]" v-model="query.type" @update:modelValue="changeTypeFilter" />
                         </div>
                         <v-divider />
+                        <div class="mx-6 mt-4">
+                            <small>{{ $t('Transactions Per Page') }}</small>
+                            <v-select class="mt-2" density="compact" :disabled="loading"
+                                      :items="[ 5, 10, 15, 20, 25, 30, 50 ]"
+                                      v-model="countPerPage"
+                            />
+                        </div>
                         <v-tabs show-arrows class="my-4" direction="vertical"
                                 :disabled="loading" v-model="recentDateRangeType">
                             <v-tab class="tab-text-truncate" :key="idx" :value="idx" v-for="(recentDateRange, idx) in recentMonthDateRanges"
@@ -25,7 +32,7 @@
                     <v-main>
                         <v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
                             <v-window-item value="transactionPage">
-                                <v-card variant="flat" min-height="830">
+                                <v-card variant="flat" min-height="920">
                                     <template #title>
                                         <div class="title-and-toolbar d-flex align-center text-no-wrap">
                                             <v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
@@ -220,7 +227,7 @@
                                         </thead>
 
                                         <tbody v-if="loading && (!transactions || !transactions.length || transactions.length < 1)">
-                                        <tr :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]">
+                                        <tr :key="itemIdx" v-for="itemIdx in skeletonData">
                                             <td class="px-0" colspan="5">
                                                 <v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
                                             </td>
@@ -383,10 +390,10 @@ export default {
             updating: false,
             activeTab: 'transactionPage',
             currentPage: 1,
-            countPerPage: 15,
+            temporaryCountPerPage: null,
+            totalCount: 1,
             searchKeyword: '',
             currentPageTransactions: [],
-            totalPageCount: 1,
             alwaysShowNav: mdAndUp.value,
             showNav: mdAndUp.value,
             showCustomDateRangeDialog: false,
@@ -465,6 +472,31 @@ export default {
         queryMonthlyData() {
             return isDateRangeMatchOneMonth(this.query.minTime, this.query.maxTime);
         },
+        countPerPage: {
+            get: function () {
+                if (this.temporaryCountPerPage) {
+                    return this.temporaryCountPerPage;
+                }
+
+                return this.settingsStore.appSettings.itemsCountInTransactionListPage;
+            },
+            set: function(value) {
+                const newTotalPageCount = Math.ceil(this.totalCount / value);
+
+                if (this.currentPage > newTotalPageCount) {
+                    this.currentPage = newTotalPageCount;
+                }
+
+                this.temporaryCountPerPage = value;
+
+                if (!this.queryMonthlyData) {
+                    this.reload(false);
+                }
+            }
+        },
+        totalPageCount() {
+            return Math.ceil(this.totalCount / this.countPerPage);
+        },
         paginationCurrentPage: {
             get: function () {
                 return this.currentPage;
@@ -477,6 +509,15 @@ export default {
                 }
             }
         },
+        skeletonData() {
+            const data = [];
+
+            for (let i = 0; i < this.countPerPage; i++) {
+                data.push(i);
+            }
+
+            return data;
+        },
         currentMonthTransactionData() {
             const allTransactions = this.transactionsStore.transactions;
 
@@ -665,7 +706,7 @@ export default {
                 self.currentPageTransactions = data && data.items && data.items.length ? data.items : [];
 
                 if (page <= 1) {
-                    self.totalPageCount = data && data.totalCount ? Math.ceil(data.totalCount / this.countPerPage) : 1;
+                    self.totalCount = data && data.totalCount ? data.totalCount : 1;
                 }
 
                 if (force) {
@@ -674,7 +715,7 @@ export default {
             }).catch(error => {
                 self.loading = false;
                 self.currentPageTransactions = [];
-                self.totalPageCount = 1;
+                self.totalCount = 1;
 
                 if (!error.processed) {
                     self.$refs.snackbar.showError(error);
@@ -699,6 +740,7 @@ export default {
                 minTime: recentDateRange.minTime
             });
 
+            this.currentPageTransactions = [];
             this.$router.push(this.getFilterLinkUrl());
         },
         changeCustomDateFilter(minTime, maxTime) {
@@ -714,6 +756,7 @@ export default {
 
             this.showCustomDateRangeDialog = false;
 
+            this.currentPageTransactions = [];
             this.$router.push(this.getFilterLinkUrl());
         },
         changeTypeFilter(type) {
@@ -743,7 +786,6 @@ export default {
                 categoryId: categoryId
             });
 
-            this.showCategoryPopover = false;
             this.$router.push(this.getFilterLinkUrl());
         },
         changeAccountFilter(accountId) {