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

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

@@ -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>