total amount on the account list page supports excluding specified accounts (#161)

This commit is contained in:
MaysWind
2025-06-29 22:27:34 +08:00
parent 90e862fbb1
commit 801c0f8572
25 changed files with 305 additions and 24 deletions
+13
View File
@@ -80,6 +80,10 @@
<v-list-item :prepend-icon="mdiEyeOffOutline"
:title="tt('Hide Hidden Accounts')"
v-if="showHidden" @click="showHidden = false"></v-list-item>
<v-divider class="my-2" v-if="hasAnyVisibleAccount"/>
<v-list-item :prepend-icon="mdiCalculatorVariantOutline"
:title="tt('Set Accounts Included in Total')"
v-if="hasAnyVisibleAccount" @click="showAccountsIncludedInTotalDialog = true"></v-list-item>
</v-list>
</v-menu>
</v-btn>
@@ -248,6 +252,11 @@
</v-col>
</v-row>
<v-dialog width="800" v-model="showAccountsIncludedInTotalDialog">
<account-filter-settings-card type="accountListTotalAmount" :dialog-mode="true"
@settings:change="showAccountsIncludedInTotalDialog = false" />
</v-dialog>
<edit-dialog ref="editDialog" />
<confirm-dialog ref="confirmDialog"/>
@@ -258,6 +267,7 @@
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
import SnackBar from '@/components/desktop/SnackBar.vue';
import EditDialog from './list/dialogs/EditDialog.vue';
import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
import { ref, computed, useTemplateRef, watch } from 'vue';
import { useDisplay } from 'vuetify';
@@ -273,6 +283,7 @@ import type { Account } from '@/models/account.ts';
import {
mdiEyeOutline,
mdiEyeOffOutline,
mdiCalculatorVariantOutline,
mdiRefresh,
mdiSquareRounded,
mdiMenu,
@@ -317,7 +328,9 @@ const activeTab = ref<string>('accountPage');
const activeSubAccount = ref<Record<string, string>>({});
const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
const showNav = ref<boolean>(display.mdAndUp.value);
const showAccountsIncludedInTotalDialog = ref<boolean>(false);
const hasAnyVisibleAccount = computed<boolean>(() => accountsStore.allVisibleAccountsCount > 0);
const activeAccountCategory = computed<AccountCategory | undefined>(() => AccountCategory.valueOf(activeAccountCategoryType.value));
const activeAccountCategoryTotalBalance = computed<string>(() => accountCategoryTotalBalance(activeAccountCategory.value));
@@ -192,6 +192,32 @@
</v-card>
</v-col>
<v-col cols="12">
<v-card :title="tt('Account List Page')">
<v-form>
<v-card-text>
<v-row>
<v-col cols="12" md="6">
<v-text-field
class="always-cursor-pointer"
item-title="displayName"
item-value="type"
persistent-placeholder
:loading="loadingAccounts"
:readonly="true"
:disabled="!hasAnyVisibleAccount"
:label="tt('Accounts Included in Total')"
:placeholder="tt('Accounts Included in Total')"
:model-value="accountsIncludedInTotalDisplayContent"
@click="showAccountsIncludedInTotalDialog = true"
/>
</v-col>
</v-row>
</v-card-text>
</v-form>
</v-card>
</v-col>
<v-col cols="12">
<v-card :title="tt('Exchange Rates Data Page')">
<v-form>
@@ -214,30 +240,45 @@
</v-card>
</v-col>
</v-row>
<v-dialog width="800" v-model="showAccountsIncludedInTotalDialog">
<account-filter-settings-card type="accountListTotalAmount" :dialog-mode="true"
@settings:change="showAccountsIncludedInTotalDialog = false" />
</v-dialog>
<snack-bar ref="snackbar" />
</template>
<script setup lang="ts">
import { computed } from 'vue';
import SnackBar from '@/components/desktop/SnackBar.vue';
import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
import { ref, computed, useTemplateRef } from 'vue';
import { useTheme } from 'vuetify';
import { useI18n } from '@/locales/helpers.ts';
import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase.ts';
import { useSettingsStore } from '@/stores/setting.ts';
import { useAccountsStore } from '@/stores/account.ts';
import type { LocalizedSwitchOption } from '@/core/base.ts';
import { ThemeType } from '@/core/theme.ts';
import { getSystemTheme } from '@/lib/ui/common.ts';
type SnackBarType = InstanceType<typeof SnackBar>;
const theme = useTheme();
const { tt, getAllEnableDisableOptions } = useI18n();
const {
loadingAccounts,
allThemes,
allTimezones,
allTimezoneTypesUsedForStatistics,
allCurrencySortingTypes,
allAutoSaveTransactionDraftTypes,
hasAnyVisibleAccount,
timeZone,
isAutoUpdateExchangeRatesData,
showAccountBalance,
@@ -248,10 +289,16 @@ const {
showTagInTransactionListPage,
autoSaveTransactionDraft,
isAutoGetCurrentGeoLocation,
currencySortByInExchangeRatesPage
currencySortByInExchangeRatesPage,
accountsIncludedInTotalDisplayContent
} = useAppSettingPageBase();
const settingsStore = useSettingsStore();
const accountsStore = useAccountsStore();
const snackbar = useTemplateRef<SnackBarType>('snackbar');
const showAccountsIncludedInTotalDialog = ref<boolean>(false);
const enableDisableOptions = computed<LocalizedSwitchOption[]>(() => getAllEnableDisableOptions());
@@ -274,4 +321,22 @@ const showAddTransactionButtonInDesktopNavbar = computed<boolean>({
get: () => settingsStore.appSettings.showAddTransactionButtonInDesktopNavbar,
set: (value) => settingsStore.setShowAddTransactionButtonInDesktopNavbar(value)
});
function init(): void {
loadingAccounts.value = true;
accountsStore.loadAllAccounts({
force: false
}).then(() => {
loadingAccounts.value = false;
}).catch(error => {
loadingAccounts.value = false;
if (!error.processed) {
snackbar.value?.showError(error);
}
});
}
init();
</script>
@@ -22,13 +22,13 @@
:title="tt('Invert Selection')"
:disabled="!hasAnyVisibleAccount"
@click="selectInvertAccounts"></v-list-item>
<v-divider class="my-2"/>
<v-divider class="my-2" v-if="allowHiddenAccount"/>
<v-list-item :prepend-icon="mdiEyeOutline"
:title="tt('Show Hidden Accounts')"
v-if="!showHidden" @click="showHidden = true"></v-list-item>
v-if="allowHiddenAccount && !showHidden" @click="showHidden = true"></v-list-item>
<v-list-item :prepend-icon="mdiEyeOffOutline"
:title="tt('Hide Hidden Accounts')"
v-if="showHidden" @click="showHidden = false"></v-list-item>
v-if="allowHiddenAccount && showHidden" @click="showHidden = false"></v-list-item>
</v-list>
</v-menu>
</v-btn>
@@ -53,13 +53,13 @@
:title="tt('Invert Selection')"
:disabled="!hasAnyVisibleAccount"
@click="selectInvertAccounts"></v-list-item>
<v-divider class="my-2"/>
<v-divider class="my-2" v-if="allowHiddenAccount"/>
<v-list-item :prepend-icon="mdiEyeOutline"
:title="tt('Show Hidden Accounts')"
v-if="!showHidden" @click="showHidden = true"></v-list-item>
v-if="allowHiddenAccount && !showHidden" @click="showHidden = true"></v-list-item>
<v-list-item :prepend-icon="mdiEyeOffOutline"
:title="tt('Hide Hidden Accounts')"
v-if="showHidden" @click="showHidden = false"></v-list-item>
v-if="allowHiddenAccount && showHidden" @click="showHidden = false"></v-list-item>
</v-list>
</v-menu>
</v-btn>
@@ -196,6 +196,7 @@ const {
filterAccountIds,
title,
applyText,
allowHiddenAccount,
allCategorizedAccounts,
hasAnyAvailableAccount,
hasAnyVisibleAccount,
@@ -245,7 +246,7 @@ function updateAccountSelected(account: Account, value: boolean | null): void {
}
function selectAllAccounts(): void {
selectAll(filterAccountIds.value, accountsStore.allAccountsMap);
selectAll(filterAccountIds.value, accountsStore.allAccountsMap, !allowHiddenAccount.value);
if (props.autoSave) {
save();
@@ -253,7 +254,7 @@ function selectAllAccounts(): void {
}
function selectNoneAccounts(): void {
selectNone(filterAccountIds.value, accountsStore.allAccountsMap);
selectNone(filterAccountIds.value, accountsStore.allAccountsMap, !allowHiddenAccount.value);
if (props.autoSave) {
save();
@@ -261,7 +262,7 @@ function selectNoneAccounts(): void {
}
function selectInvertAccounts(): void {
selectInvert(filterAccountIds.value, accountsStore.allAccountsMap);
selectInvert(filterAccountIds.value, accountsStore.allAccountsMap, !allowHiddenAccount.value);
if (props.autoSave) {
save();