support filtering transaction amount

2026-05-18 00:34:28 +08:00 · 2024-06-30 21:42:21 +08:00
parent d2b3900ed4
commit b5d72c89f2
18 changed files with 668 additions and 29 deletions
@@ -192,7 +192,56 @@
                                                    </v-list>
                                                </v-menu>
                                            </th>
-                                            <th class="transaction-table-column-amount">{{ $t('Amount') }}</th>
+                                            <th class="transaction-table-column-amount">
+                                                <v-menu ref="amountFilterMenu" class="transaction-amount-menu"
+                                                        eager location="bottom" max-height="500"
+                                                        :close-on-content-click="false"
+                                                        v-model="amountMenuState"
+                                                        @update:model-value="scrollAmountMenuToSelectedItem">
+                                                    <template #activator="{ props }">
+                                                        <div class="d-flex align-center cursor-pointer"
+                                                             :class="{ 'readonly': loading, 'text-primary': query.amountFilter }" v-bind="props">
+                                                            <span>{{ $t('Amount') }}</span>
+                                                            <v-icon :icon="icons.dropdownMenu" />
+                                                        </div>
+                                                    </template>
+                                                    <v-list :selected="[query.amountFilter.split(':')[0]]">
+                                                        <v-list-item key="0" value="0" class="text-sm" density="compact"
+                                                                     :class="{ 'list-item-selected': !query.amountFilter }"
+                                                                     :append-icon="(!query.amountFilter && !currentAmountFilterType ? icons.check : null)">
+                                                            <v-list-item-title class="cursor-pointer"
+                                                                               @click="changeAmountFilter('')">
+                                                                <div class="d-flex align-center">
+                                                                    <span class="text-sm ml-3">{{ $t('All') }}</span>
+                                                                </div>
+                                                            </v-list-item-title>
+                                                        </v-list-item>
+                                                        <template :key="filterType.type"
+                                                                  v-for="filterType in allAmountFilterTypes">
+                                                            <v-list-item class="text-sm" density="compact"
+                                                                         :value="filterType.type"
+                                                                         :class="{ 'list-item-selected': query.amountFilter && query.amountFilter.startsWith(`${filterType.type}:`) }"
+                                                                         :append-icon="(query.amountFilter && query.amountFilter.startsWith(`${filterType.type}:`) && currentAmountFilterType !== filterType.type ? icons.check : null)">
+                                                                <v-list-item-title class="cursor-pointer"
+                                                                                   @click="currentAmountFilterType = filterType.type">
+                                                                    <div class="d-flex align-center">
+                                                                        <span class="text-sm ml-3">{{ $t(filterType.name) }}</span>
+                                                                        <span class="text-sm ml-4" v-if="query.amountFilter && query.amountFilter.startsWith(`${filterType.type}:`) && currentAmountFilterType !== filterType.type">{{ queryAmount }}</span>
+                                                                        <amount-input class="transaction-amount-filter-value ml-4" density="compact" v-model="currentAmountFilterValue1"
+                                                                                      v-if="currentAmountFilterType === filterType.type"/>
+                                                                        <span class="ml-2 mr-2" v-if="currentAmountFilterType === filterType.type && filterType.paramCount === 2">~</span>
+                                                                        <amount-input class="transaction-amount-filter-value" density="compact" v-model="currentAmountFilterValue2"
+                                                                                      v-if="currentAmountFilterType === filterType.type && filterType.paramCount === 2"/>
+                                                                        <v-btn class="ml-2" density="compact" color="primary" variant="tonal"
+                                                                               @click="changeAmountFilter(filterType.type)"
+                                                                               v-if="currentAmountFilterType === filterType.type">{{ $t('Apply') }}</v-btn>
+                                                                    </div>
+                                                                </v-list-item-title>
+                                                            </v-list-item>
+                                                        </template>
+                                                    </v-list>
+                                                </v-menu>
+                                            </th>
                                            <th class="transaction-table-column-account">
                                                <v-menu ref="accountFilterMenu" class="transaction-account-menu"
                                                        eager location="bottom" max-height="500"
@@ -353,11 +402,13 @@ import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionsStore } from '@/stores/transaction.js';

+import numeralConstants from '@/consts/numeral.js';
 import datetimeConstants from '@/consts/datetime.js';
 import currencyConstants from '@/consts/currency.js';
 import accountConstants from '@/consts/account.js';
 import transactionConstants from '@/consts/transaction.js';
-import { getNameByKeyValue } from '@/lib/common.js';
+import { isString, getNameByKeyValue } from '@/lib/common.js';
+import logger from '@/lib/logger.js';
 import {
    getCurrentUnixTime,
    parseDateFromUnixTime,
@@ -406,6 +457,7 @@ export default {
        'initType',
        'initCategoryId',
        'initAccountId',
+        'initAmountFilter',
        'initKeyword'
    ],
    data() {
@@ -421,8 +473,12 @@ export default {
            searchKeyword: '',
            customMinDatetime: 0,
            customMaxDatetime: 0,
+            currentAmountFilterType: '',
+            currentAmountFilterValue1: '0',
+            currentAmountFilterValue2: '0',
            currentPageTransactions: [],
            categoryMenuState: false,
+            amountMenuState: false,
            alwaysShowNav: mdAndUp.value,
            showNav: mdAndUp.value,
            showCustomDateRangeDialog: false,
@@ -497,6 +553,25 @@ export default {
        queryAccountName() {
            return getNameByKeyValue(this.allAccounts, this.query.accountId, null, 'name', this.$t('Account'));
        },
+        queryAmount() {
+            if (!this.query.amountFilter) {
+                return '';
+            }
+
+            const amountFilterItems = this.query.amountFilter.split(':');
+
+            if (amountFilterItems.length < 2) {
+                return '';
+            }
+
+            const displayAmount = [];
+
+            for (let i = 1; i < amountFilterItems.length; i++) {
+                displayAmount.push(this.getDisplayCurrency(amountFilterItems[i], false));
+            }
+
+            return displayAmount.join(' ~ ');
+        },
        queryMonthlyData() {
            return isDateRangeMatchOneMonth(this.query.minTime, this.query.maxTime);
        },
@@ -597,6 +672,9 @@ export default {
                return null;
            }
        },
+        allAmountFilterTypes() {
+            return numeralConstants.allAmountFilterTypeArray;
+        },
        allTransactionTypes() {
            return transactionConstants.allTransactionTypes;
        },
@@ -638,6 +716,7 @@ export default {
            type: this.initType,
            categoryId: this.initCategoryId,
            accountId: this.initAccountId,
+            amountFilter: this.initAmountFilter,
            keyword: this.initKeyword
        });
    },
@@ -666,6 +745,7 @@ export default {
                type: to.query.type,
                categoryId: to.query.categoryId,
                accountId: to.query.accountId,
+                amountFilter: to.query.amountFilter,
                keyword: to.query.keyword
            });
        }
@@ -691,10 +771,12 @@ export default {
                type: parseInt(query.type) > 0 ? parseInt(query.type) : undefined,
                categoryId: query.categoryId,
                accountId: query.accountId,
+                amountFilter: query.amountFilter || '',
                keyword: query.keyword || ''
            });

            this.searchKeyword = query.keyword || '';
+            this.currentAmountFilterType = '';

            this.currentPage = 1;
            this.reload(false);
@@ -855,6 +937,50 @@ export default {
            this.transactionsStore.clearTransactions();
            this.$router.push(this.getFilterLinkUrl());
        },
+        changeAmountFilter(filterType) {
+            this.currentAmountFilterType = '';
+            this.amountMenuState = false;
+
+            if (this.query.amountFilter === filterType) {
+                return;
+            }
+
+            let amountFilter = filterType;
+
+            if (filterType) {
+                const amountCount = this.getAmountFilterParameterCount(filterType);
+
+                if (!amountCount) {
+                    return;
+                }
+
+                if (amountCount === 1) {
+                    amountFilter += ':' + this.currentAmountFilterValue1;
+                } else if (amountCount === 2) {
+                    if (this.currentAmountFilterValue2 < this.currentAmountFilterValue1) {
+                        this.$refs.snackbar.showMessage('Incorrect amount range');
+                        return;
+                    }
+
+                    amountFilter += ':' + this.currentAmountFilterValue1 + ':' + this.currentAmountFilterValue2;
+                } else {
+                    return;
+                }
+            }
+
+            if (this.query.amountFilter === amountFilter) {
+                return;
+            }
+
+            this.transactionsStore.updateTransactionListFilter({
+                amountFilter: amountFilter
+            });
+
+            this.loading = true;
+            this.currentPageTransactions = [];
+            this.transactionsStore.clearTransactions();
+            this.$router.push(this.getFilterLinkUrl());
+        },
        changeAccountFilter(accountId) {
            if (this.query.accountId === accountId) {
                return;
@@ -929,6 +1055,34 @@ export default {
                this.scrollMenuToSelectedItem(this.$refs.categoryFilterMenu);
            }
        },
+        scrollAmountMenuToSelectedItem(opened) {
+            if (opened) {
+                this.currentAmountFilterType = '';
+
+                let amount1 = 0, amount2 = 0;
+
+                if (isString(this.query.amountFilter)) {
+                    try {
+                        const filterItems = this.query.amountFilter.split(':');
+                        const amountCount = this.getAmountFilterParameterCount(filterItems[0]);
+
+                        if (filterItems.length === 2 && amountCount === 1) {
+                            amount1 = parseInt(filterItems[1]);
+                        } else if (filterItems.length === 3 && amountCount === 2) {
+                            amount1 = parseInt(filterItems[1]);
+                            amount2 = parseInt(filterItems[2]);
+                        }
+                    } catch (ex) {
+                        logger.warn('cannot parse amount from filter value, original value is ' + this.query.amountFilter);
+                    }
+                }
+
+                this.currentAmountFilterValue1 = amount1;
+                this.currentAmountFilterValue2 = amount2;
+
+                this.scrollMenuToSelectedItem(this.$refs.amountFilterMenu);
+            }
+        },
        scrollAccountMenuToSelectedItem(opened) {
            if (opened) {
                this.scrollMenuToSelectedItem(this.$refs.accountFilterMenu);
@@ -1005,6 +1159,10 @@ export default {

            return [];
        },
+        getAmountFilterParameterCount(filterType) {
+            const amountFilterType = numeralConstants.allAmountFilterTypeMap[filterType];
+            return amountFilterType ? amountFilterType.paramCount : 0;
+        },
        getFilterLinkUrl() {
            return `/transaction/list?${this.transactionsStore.getTransactionListPageParams()}`;
        }
@@ -1071,11 +1229,21 @@ export default {
 }

 .transaction-category-menu .item-icon,
+.transaction-amount-menu .item-icon,
 .transaction-account-menu .item-icon,
 .transaction-table .item-icon {
    padding-bottom: 3px;
 }

+.transaction-amount-filter-value {
+    width: 100px;
+}
+
+.transaction-amount-filter-value input.v-field__input {
+    min-height: 32px !important;
+    padding: 0 8px 0 8px;
+}
+
 .transaction-category-menu .has-children-item-selected span {
    font-weight: bold;
 }
@@ -0,0 +1,180 @@
+<template>
+    <f7-page @page:afterin="onPageAfterIn">
+        <f7-navbar>
+            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-title :title="$t('Filter Amount')"></f7-nav-title>
+            <f7-nav-right>
+                <f7-link :text="$t('Apply')" @click="confirm"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
+
+        <f7-list form strong inset dividers class="margin-vertical">
+            <f7-list-item
+                class="ebk-small-amount"
+                link="#" no-chevron
+                :header="amount1Header"
+                :title="getDisplayAmount(amount1)"
+                @click="showAmount1Sheet = true"
+            >
+                <number-pad-sheet :min-value="allowedMinAmount"
+                                  :max-value="allowedMaxAmount"
+                                  v-model:show="showAmount1Sheet"
+                                  v-model="amount1"
+                ></number-pad-sheet>
+            </f7-list-item>
+
+            <f7-list-item
+                class="ebk-small-amount"
+                link="#" no-chevron
+                :header="amount2Header"
+                :title="getDisplayAmount(amount2)"
+                @click="showAmount2Sheet = true"
+                v-if="amountCount === 2"
+            >
+                <number-pad-sheet :min-value="allowedMinAmount"
+                                  :max-value="allowedMaxAmount"
+                                  v-model:show="showAmount2Sheet"
+                                  v-model="amount2"
+                ></number-pad-sheet>
+            </f7-list-item>
+        </f7-list>
+
+        <f7-list form strong inset dividers class="margin-vertical">
+            <f7-list-item :key="filterType.type" :title="$t(filterType.name)"
+                          v-for="filterType in allAmountFilterTypes"
+                          @click="type = filterType.type">
+                <template #after>
+                    <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="type === filterType.type"></f7-icon>
+                </template>
+            </f7-list-item>
+        </f7-list>
+    </f7-page>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
+import { useTransactionsStore } from '@/stores/transaction.js';
+
+import numeralConstants from '@/consts/numeral.js';
+import transactionConstants from '@/consts/transaction.js';
+import { isString } from '@/lib/common.js';
+import logger from '@/lib/logger.js';
+
+export default {
+    props: [
+        'f7route',
+        'f7router'
+    ],
+    data() {
+        return {
+            type: '',
+            amount1: 0,
+            amount2: 0,
+            showAmount1Sheet: false,
+            showAmount2Sheet: false
+        }
+    },
+    computed: {
+        ...mapStores(useSettingsStore, useUserStore, useTransactionsStore),
+        allAmountFilterTypes() {
+            return numeralConstants.allAmountFilterTypeArray;
+        },
+        allowedMinAmount() {
+            return transactionConstants.minAmountNumber;
+        },
+        allowedMaxAmount() {
+            return transactionConstants.maxAmountNumber;
+        },
+        amountCount() {
+            return this.getAmountFilterParameterCount(this.type);
+        },
+        title() {
+            const amountFilterType = numeralConstants.allAmountFilterTypeMap[this.type];
+            return amountFilterType ? this.$t(amountFilterType.name) : this.$t('Amount');
+        },
+        amount1Header() {
+            if (this.type === numeralConstants.allAmountFilterType.GreaterThan.type
+                || this.type === numeralConstants.allAmountFilterType.Between.type
+                || this.type === numeralConstants.allAmountFilterType.NotBetween.type) {
+                return this.$t('Min Amount');
+            } else if (this.type === numeralConstants.allAmountFilterType.LessThan.type) {
+                return this.$t('Max Amount');
+            } else {
+                return this.$t('Amount');
+            }
+        },
+        amount2Header() {
+            if (this.type === numeralConstants.allAmountFilterType.Between.type) {
+                return this.$t('Max Amount');
+            } else if (this.type === numeralConstants.allAmountFilterType.NotBetween.type) {
+                return this.$t('Max Amount');
+            } else {
+                return this.$t('Amount');
+            }
+        }
+    },
+    created() {
+        const query = this.f7route.query;
+        this.type = query.type;
+
+        let amount1 = 0, amount2 = 0;
+
+        if (isString(query.value)) {
+            try {
+                const filterItems = query.value.split(':');
+                const amountCount = this.getAmountFilterParameterCount(filterItems[0]);
+
+                if (filterItems.length === 2 && amountCount === 1) {
+                    amount1 = parseInt(filterItems[1]);
+                } else if (filterItems.length === 3 && amountCount === 2) {
+                    amount1 = parseInt(filterItems[1]);
+                    amount2 = parseInt(filterItems[2]);
+                }
+            } catch (ex) {
+                logger.warn('cannot parse amount from filter value, original value is ' + query.value);
+            }
+        }
+
+        this.amount1 = amount1;
+        this.amount2 = amount2;
+    },
+    methods: {
+        onPageAfterIn() {
+            this.$routeBackOnError(this.f7router, 'loadingError');
+        },
+        confirm() {
+            const router = this.f7router;
+            let amountFilter = this.type;
+
+            if (this.amountCount === 1) {
+                amountFilter += ':' + this.amount1;
+            } else if (this.amountCount === 2) {
+                if (this.amount2 < this.amount1) {
+                    this.$toast('Incorrect amount range');
+                    return;
+                }
+
+                amountFilter += ':' + this.amount1 + ':' + this.amount2;
+            } else {
+                router.back();
+                return;
+            }
+
+            this.transactionsStore.updateTransactionListFilter({
+                amountFilter: amountFilter
+            });
+            this.transactionsStore.updateTransactionListInvalidState(true);
+            router.back();
+        },
+        getDisplayAmount(value) {
+            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, false);
+        },
+        getAmountFilterParameterCount(filterType) {
+            const amountFilterType = numeralConstants.allAmountFilterTypeMap[filterType];
+            return amountFilterType ? amountFilterType.paramCount : 0;
+        }
+    }
+}
+</script>
@@ -42,7 +42,7 @@
                <span :class="{ 'tabbar-item-changed': query.accountId > 0 }">{{ queryAccountName }}</span>
            </f7-link>
            <f7-link popover-open=".more-popover-menu">
-                <f7-icon f7="ellipsis_vertical" :class="{ 'tabbar-item-changed': query.type > 0 }"></f7-icon>
+                <f7-icon f7="ellipsis_vertical" :class="{ 'tabbar-item-changed': query.type > 0 || query.amountFilter }"></f7-icon>
            </f7-link>
        </f7-toolbar>

@@ -403,6 +403,23 @@
                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 4"></f7-icon>
                    </template>
                </f7-list-item>
+
+                <f7-list-item group-title :title="$t('Amount')" />
+                <f7-list-item :class="{ 'list-item-selected': !query.amountFilter }" :title="$t('All')" @click="changeAmountFilter('')">
+                    <template #after>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.amountFilter"></f7-icon>
+                    </template>
+                </f7-list-item>
+                <f7-list-item :key="filterType.type"
+                              :class="{ 'list-item-selected': query.amountFilter && query.amountFilter.startsWith(`${filterType.type}:`) }"
+                              :title="$t(filterType.name)"
+                              v-for="filterType in allAmountFilterTypes"
+                              @click="changeAmountFilter(filterType.type)">
+                    <template #after>
+                        <span class="margin-right-half" v-if="query.amountFilter && query.amountFilter.startsWith(`${filterType.type}:`)">{{ queryAmount }}</span>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.amountFilter && query.amountFilter.startsWith(`${filterType.type}:`)"></f7-icon>
+                    </template>
+                </f7-list-item>
            </f7-list>
        </f7-popover>

@@ -426,6 +443,7 @@ import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useTransactionsStore } from '@/stores/transaction.js';

+import numeralConstants from '@/consts/numeral.js';
 import datetimeConstants from '@/consts/datetime.js';
 import currencyConstants from '@/consts/currency.js';
 import accountConstants from '@/consts/account.js';
@@ -518,6 +536,25 @@ export default {
        queryAccountName() {
            return getNameByKeyValue(this.allAccounts, this.query.accountId, null, 'name', this.$t('Account'));
        },
+        queryAmount() {
+            if (!this.query.amountFilter) {
+                return '';
+            }
+
+            const amountFilterItems = this.query.amountFilter.split(':');
+
+            if (amountFilterItems.length < 2) {
+                return '';
+            }
+
+            const displayAmount = [];
+
+            for (let i = 1; i < amountFilterItems.length; i++) {
+                displayAmount.push(this.getDisplayCurrency(amountFilterItems[i], false));
+            }
+
+            return displayAmount.join(' ~ ');
+        },
        transactions() {
            if (this.loading) {
                return [];
@@ -531,6 +568,9 @@ export default {
        hasMoreTransaction() {
            return this.transactionsStore.hasMoreTransaction;
        },
+        allAmountFilterTypes() {
+            return numeralConstants.allAmountFilterTypeArray;
+        },
        allTransactionTypes() {
            return transactionConstants.allTransactionTypes;
        },
@@ -777,6 +817,24 @@ export default {
            this.showAccountPopover = false;
            this.reload(null);
        },
+        changeAmountFilter(filterType) {
+            if (this.query.amountFilter === filterType) {
+                return;
+            }
+
+            if (filterType) {
+                this.showMorePopover = false;
+                this.f7router.navigate(`/transaction/filter/amount?type=${filterType}&value=${this.query.amountFilter}`);
+                return;
+            }
+
+            this.transactionsStore.updateTransactionListFilter({
+                amountFilter: filterType
+            });
+
+            this.showMorePopover = false;
+            this.reload(null);
+        },
        changeKeywordFilter(keyword) {
            if (this.query.keyword === keyword) {
                return;
@@ -1008,7 +1066,10 @@ export default {
    text-overflow: ellipsis;
 }

-.date-popover-menu .popover-inner, .category-popover-menu .popover-inner, .account-popover-menu .popover-inner {
+.date-popover-menu .popover-inner,
+.category-popover-menu .popover-inner,
+.account-popover-menu .popover-inner,
+.more-popover-menu .popover-inner{
    max-height: 400px;
    overflow-y: auto;
 }