support changing account category order

src/views/base/accounts/AccountEditPageBase.ts

@@ -2,6 +2,7 @@ import { ref, computed, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
+import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 
 import type { TypeAndDisplayName } from '@/core/base.ts';
@@ -25,13 +26,16 @@ export interface DayAndDisplayName {
 export function useAccountEditPageBase() {
     const { tt, getAllAccountCategories, getAllAccountTypes, getMonthdayShortName } = useI18n();
 
+    const settingsStore = useSettingsStore();
     const userStore = useUserStore();
 
+    const defaultAccountCategory = AccountCategory.values(settingsStore.appSettings.accountCategoryOrders)[0] ?? AccountCategory.Default;
+
     const editAccountId = ref<string | null>(null);
     const clientSessionId = ref<string>('');
     const loading = ref<boolean>(false);
     const submitting = ref<boolean>(false);
-    const account = ref<Account>(Account.createNewAccount(userStore.currentUserDefaultCurrency, getCurrentUnixTimeForNewAccount()));
+    const account = ref<Account>(Account.createNewAccount(defaultAccountCategory, userStore.currentUserDefaultCurrency, getCurrentUnixTimeForNewAccount()));
     const subAccounts = ref<Account[]>([]);
 
     const title = computed<string>(() => {
@@ -72,7 +76,8 @@ export function useAccountEditPageBase() {
 
     const inputIsEmpty = computed<boolean>(() => !!inputEmptyProblemMessage.value);
 
-    const allAccountCategories = computed<LocalizedAccountCategory[]>(() => getAllAccountCategories());
+    const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
+    const allAccountCategories = computed<LocalizedAccountCategory[]>(() => getAllAccountCategories(customAccountCategoryOrder.value));
     const allAccountTypes = computed<TypeAndDisplayName[]>(() => getAllAccountTypes());
 
     const allAvailableMonthDays = computed<DayAndDisplayName[]>(() => {
@@ -181,6 +186,8 @@ export function useAccountEditPageBase() {
     });
 
     return {
+        // constants
+        defaultAccountCategory,
         // states
         editAccountId,
         clientSessionId,

src/views/base/accounts/AccountListPageBase.ts

@@ -8,7 +8,7 @@ import { useAccountsStore } from '@/stores/account.ts';
 
 import type { HiddenAmount, NumberWithSuffix } from '@/core/numeral.ts';
 import type { WeekDayValue } from '@/core/datetime.ts';
-import { type AccountCategory, AccountType } from '@/core/account.ts';
+import { AccountCategory, AccountType } from '@/core/account.ts';
 import type { Account, CategorizedAccount } from '@/models/account.ts';
 
 import { isObject, isNumber, isString } from '@/lib/common.ts';
@@ -29,6 +29,9 @@ export function useAccountListPageBase() {
         set: (value) => settingsStore.setShowAccountBalance(value)
     });
 
+    const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
+    const defaultAccountCategory = computed<AccountCategory>(() => AccountCategory.values(customAccountCategoryOrder.value)[0] ?? AccountCategory.Default);
+
     const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
     const fiscalYearStart = computed<number>(() => userStore.currentUserFiscalYearStart);
     const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
@@ -90,6 +93,8 @@ export function useAccountListPageBase() {
         displayOrderModified,
         // computed states
         showAccountBalance,
+        customAccountCategoryOrder,
+        defaultAccountCategory,
         firstDayOfWeek,
         fiscalYearStart,
         defaultCurrency,

src/views/base/accounts/MoveAllTransactionsPageBase.ts

@@ -19,9 +19,10 @@ export function useMoveAllTransactionsPageBase() {
     const toAccountName = ref<string>('');
 
     const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
+    const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
     const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
     const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
-    const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value));
+    const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value, customAccountCategoryOrder.value));
 
     const displayToAccountName = computed<string>(() => {
         if (!toAccountId.value) {

src/views/base/settings/AccountCategoryDisplayOrderSettingsPageBase.ts

@@ -0,0 +1,63 @@
+import { ref } from 'vue';
+
+import { AccountCategory } from '@/core/account.ts';
+
+import { useSettingsStore } from '@/stores/setting.ts';
+
+export function useAccountCategoryDisplayOrderSettingsPageBase() {
+    const settingsStore = useSettingsStore();
+
+    const accountCategories = ref<AccountCategory[]>(AccountCategory.values(settingsStore.appSettings.accountCategoryOrders));
+
+    function isDisplayOrderModified(): boolean {
+        const currentOrders = AccountCategory.values(settingsStore.appSettings.accountCategoryOrders);
+
+        if (currentOrders.length !== accountCategories.value.length) {
+            return true;
+        }
+
+        for (let i = 0; i < currentOrders.length; i++) {
+            const accountCategory = accountCategories.value[i];
+            const currentCategory = currentOrders[i];
+
+            if (!accountCategory || !currentCategory) {
+                return true;
+            }
+
+            if (accountCategory.type !== currentCategory.type) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    function loadDisplayOrderFromSettings(): void {
+        accountCategories.value = AccountCategory.values(settingsStore.appSettings.accountCategoryOrders);
+    }
+
+    function saveDisplayOrderToSettings(): void {
+        const displayOrders = accountCategories.value.map(category => category.type).join(',');
+        const defaultOrders = AccountCategory.values('').map(category => category.type).join(',');
+
+        if (displayOrders === defaultOrders) {
+            settingsStore.setAccountCategoryOrders('');
+        } else {
+            settingsStore.setAccountCategoryOrders(displayOrders);
+        }
+    }
+
+    function resetDisplayOrderToDefault(): void {
+        accountCategories.value = AccountCategory.values('');
+    }
+
+    return {
+        // states
+        accountCategories,
+        // functions
+        isDisplayOrderModified,
+        loadDisplayOrderFromSettings,
+        saveDisplayOrderToSettings,
+        resetDisplayOrderToDefault
+    };
+}

src/views/base/settings/AccountFilterSettingPageBase.ts

@@ -7,7 +7,7 @@ import { useStatisticsStore } from '@/stores/statistics.ts';
 import { useOverviewStore } from '@/stores/overview.ts';
 
 import { keys, keysIfValueEquals, values } from '@/core/base.ts';
-import type {Account, CategorizedAccount} from '@/models/account.ts';
+import type { Account, CategorizedAccount } from '@/models/account.ts';
 
 import {
     filterCategorizedAccounts,
@@ -49,11 +49,12 @@ export function useAccountFilterSettingPageBase(type?: AccountFilterType, select
         return type === 'statisticsDefault' || type === 'statisticsCurrent' || type === 'homePageOverview' || type === 'transactionListCurrent' || type === 'custom';
     });
 
-    const allCategorizedAccounts = computed<Record<number, CategorizedAccount>>(() => filterCategorizedAccounts(accountsStore.allCategorizedAccountsMap, filterContent.value, showHidden.value));
+    const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
+    const allCategorizedAccounts = computed<CategorizedAccount[]>(() => filterCategorizedAccounts(accountsStore.allCategorizedAccountsMap, customAccountCategoryOrder.value, filterContent.value, showHidden.value));
     const allVisibleAccountMap = computed<Record<string, Account>>(() => {
         const accountMap: Record<string, Account> = {};
 
-        for (const accountCategory of values(allCategorizedAccounts.value)) {
+        for (const accountCategory of allCategorizedAccounts.value) {
             for (const account of accountCategory.accounts) {
                 accountMap[account.id] = account;
 
@@ -69,7 +70,7 @@ export function useAccountFilterSettingPageBase(type?: AccountFilterType, select
     });
     const hasAnyAvailableAccount = computed<boolean>(() => accountsStore.allAvailableAccountsCount > 0);
     const hasAnyVisibleAccount = computed<boolean>(() => {
-        for (const accountCategory of values(allCategorizedAccounts.value)) {
+        for (const accountCategory of allCategorizedAccounts.value) {
             if (accountCategory.accounts.length > 0) {
                 return true;
             }
@@ -204,6 +205,7 @@ export function useAccountFilterSettingPageBase(type?: AccountFilterType, select
         title,
         applyText,
         allowHiddenAccount,
+        customAccountCategoryOrder,
         allCategorizedAccounts,
         allVisibleAccountMap,
         hasAnyAvailableAccount,

src/views/base/settings/AppCloudSyncPageBase.ts

@@ -61,6 +61,7 @@ export const ALL_APPLICATION_CLOUD_SETTINGS: CategorizedApplicationCloudSettingI
         categoryName: 'Account List Page',
         items: [
             { settingKey: 'totalAmountExcludeAccountIds', settingName: 'Accounts Included in Total', mobile: true, desktop: true },
+            { settingKey: 'accountCategoryOrders', settingName: 'Account Category Order', mobile: true, desktop: true },
             { settingKey: 'hideCategoriesWithoutAccounts', settingName: 'Hide Categories Without Accounts', mobile: false, desktop: true }
         ]
     },

src/views/base/settings/AppSettingsPageBase.ts

@@ -134,6 +134,14 @@ export function useAppSettingPageBase() {
         return getIncludedAccountsDisplayContent(excludeAccountIds, accountsStore.allVisiblePlainAccounts);
     });
 
+    const accountCategorysDisplayOrderContent = computed<string>(() => {
+        if (!settingsStore.appSettings.accountCategoryOrders) {
+            return tt('Default');
+        }
+
+        return tt('Custom');
+    });
+
     const transactionCategoriesIncludedInHomePageOverviewDisplayContent = computed<string>(() => {
         const excludeAccountIds = settingsStore.appSettings.overviewTransactionCategoryFilterInHomePage;
         return getIncludedTransactionCategoriesDisplayContent(excludeAccountIds);
@@ -237,6 +245,7 @@ export function useAppSettingPageBase() {
         currencySortByInExchangeRatesPage,
         accountsIncludedInHomePageOverviewDisplayContent,
         accountsIncludedInTotalDisplayContent,
+        accountCategorysDisplayOrderContent,
         transactionCategoriesIncludedInHomePageOverviewDisplayContent
     };
 }

src/views/base/transactions/TransactionEditPageBase.ts

@@ -96,6 +96,7 @@ export function useTransactionEditPageBase(type: TransactionEditPageType, initMo
     const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
     const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(transaction.value.time));
     const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
+    const customAccountCategoryOrder = computed<string>(() => settingsStore.appSettings.accountCategoryOrders);
     const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
     const defaultAccountId = computed<string>(() => userStore.currentUserDefaultAccountId);
     const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
@@ -105,7 +106,7 @@ export function useTransactionEditPageBase(type: TransactionEditPageType, initMo
     const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
     const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
     const allAccountsMap = computed<Record<string, Account>>(() => accountsStore.allAccountsMap);
-    const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value));
+    const allVisibleCategorizedAccounts = computed<CategorizedAccountWithDisplayBalance[]>(() => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts.value, showAccountBalance.value, customAccountCategoryOrder.value));
     const allCategories = computed<Record<number, TransactionCategory[]>>(() => transactionCategoriesStore.allTransactionCategories);
     const allCategoriesMap = computed<Record<string, TransactionCategory>>(() => transactionCategoriesStore.allTransactionCategoriesMap);
     const allTags = computed<TransactionTag[]>(() => transactionTagsStore.allTransactionTags);

src/views/base/users/UserProfilePageBase.ts

@@ -68,7 +68,7 @@ export function useUserProfilePageBase() {
 
     const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
     const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
-    const allVisibleCategorizedAccounts = computed<CategorizedAccount[]>(() => getCategorizedAccounts(allVisibleAccounts.value));
+    const allVisibleCategorizedAccounts = computed<CategorizedAccount[]>(() => getCategorizedAccounts(allVisibleAccounts.value, settingsStore.appSettings.accountCategoryOrders));
     const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
     const allCalendarDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCalendarDisplayTypes());
     const allDateDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllDateDisplayTypes());