fix the wrong display order of savings accounts and certificate of de…

…posit accounts
mayswind · Feb 9, 2025 · a0e3a26 · a0e3a26
1 parent 1658d07
commit a0e3a26
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 27 deletions.
diff --git a/src/core/account.ts b/src/core/account.ts
@@ -25,24 +25,26 @@ export class AccountCategory implements TypeAndName {
     private static readonly allInstances: AccountCategory[] = [];
     private static readonly allInstancesByType: Record<number, AccountCategory> = {};
 
-    public static readonly Cash = new AccountCategory(1, 'Cash', '1');
-    public static readonly CheckingAccount = new AccountCategory(2, 'Checking Account', '100');
-    public static readonly SavingsAccount = new AccountCategory(8, 'Savings Account', '100');
-    public static readonly CreditCard = new AccountCategory(3, 'Credit Card', '100');
-    public static readonly VirtualAccount = new AccountCategory(4, 'Virtual Account', '500');
-    public static readonly DebtAccount = new AccountCategory(5, 'Debt Account', '600');
-    public static readonly Receivables = new AccountCategory(6, 'Receivables', '700');
-    public static readonly CertificateOfDeposit = new AccountCategory(9, 'Certificate of Deposit', '110');
-    public static readonly InvestmentAccount = new AccountCategory(7, 'Investment Account', '800');
+    public static readonly Cash = new AccountCategory(1, 1, 'Cash', '1');
+    public static readonly CheckingAccount = new AccountCategory(2, 2, 'Checking Account', '100');
+    public static readonly SavingsAccount = new AccountCategory(8, 3, 'Savings Account', '100');
+    public static readonly CreditCard = new AccountCategory(3, 4, 'Credit Card', '100');
+    public static readonly VirtualAccount = new AccountCategory(4, 5, 'Virtual Account', '500');
+    public static readonly DebtAccount = new AccountCategory(5, 6, 'Debt Account', '600');
+    public static readonly Receivables = new AccountCategory(6, 7, 'Receivables', '700');
+    public static readonly CertificateOfDeposit = new AccountCategory(9, 8, 'Certificate of Deposit', '110');
+    public static readonly InvestmentAccount = new AccountCategory(7, 9, 'Investment Account', '800');
 
     public static readonly Default = AccountCategory.Cash;
 
     public readonly type: number;
+    public readonly displayOrder: number;
     public readonly name: string;
     public readonly defaultAccountIconId: string;
 
-    private constructor(type: number, name: string, defaultAccountIconId: string) {
+    private constructor(type: number, displayOrder: number, name: string, defaultAccountIconId: string) {
         this.type = type;
+        this.displayOrder = displayOrder;
         this.name = name;
         this.defaultAccountIconId = defaultAccountIconId;
 

diff --git a/src/models/account.ts b/src/models/account.ts
@@ -285,6 +285,31 @@ export class Account implements AccountInfoResponse {
 
         return defaultName;
     }
+
+    public static sortAccounts(accounts: Account[]): Account[] {
+        if (!accounts || !accounts.length) {
+            return accounts;
+        }
+
+        return accounts.sort(function (account1, account2) {
+            if (account1.category !== account2.category) {
+                const account1Category = AccountCategory.valueOf(account1.category);
+                const account2Category = AccountCategory.valueOf(account2.category);
+
+                if (!account1Category) {
+                    return 1;
+                }
+
+                if (!account2Category) {
+                    return -1;
+                }
+
+                return account1Category.displayOrder - account2Category.displayOrder;
+            }
+
+            return account1.displayOrder - account2.displayOrder;
+        });
+    }
 }
 
 export class AccountWithDisplayBalance extends Account {

diff --git a/src/stores/account.ts b/src/stores/account.ts
@@ -30,7 +30,7 @@ export const useAccountsStore = defineStore('accounts', () => {
     const accountListStateInvalid = ref<boolean>(true);
 
     const allPlainAccounts = computed<Account[]>(() => {
-        const allAccountsList = [];
+        const allAccountsList: Account[] = [];
 
         for (let i = 0; i < allAccounts.value.length; i++) {
             const account = allAccounts.value[i];
@@ -47,11 +47,11 @@ export const useAccountsStore = defineStore('accounts', () => {
             }
         }
 
-        return allAccountsList;
+        return Account.sortAccounts(allAccountsList);
     });
 
     const allVisiblePlainAccounts = computed<Account[]>(() => {
-        const allVisibleAccounts = [];
+        const allVisibleAccounts: Account[] = [];
 
         for (let i = 0; i < allAccounts.value.length; i++) {
             const account = allAccounts.value[i];
@@ -72,7 +72,7 @@ export const useAccountsStore = defineStore('accounts', () => {
             }
         }
 
-        return allVisibleAccounts;
+        return Account.sortAccounts(allVisibleAccounts);
     });
 
     const allAvailableAccountsCount = computed<number>(() => {
@@ -129,12 +129,17 @@ export const useAccountsStore = defineStore('accounts', () => {
     }
 
     function addAccountToAccountList(account: Account): void {
-        let insertIndexToAllList = 0;
+        const newAccountCategory = AccountCategory.valueOf(account.category);
+        let insertIndexToAllList = allAccounts.value.length;
 
-        for (let i = 0; i < allAccounts.value.length; i++) {
-            if (allAccounts.value[i].category > account.category) {
-                insertIndexToAllList = i;
-                break;
+        if (newAccountCategory) {
+            for (let i = 0; i < allAccounts.value.length; i++) {
+                const accountCategory = AccountCategory.valueOf(allAccounts.value[i].category);
+
+                if (accountCategory && accountCategory.displayOrder > newAccountCategory.displayOrder) {
+                    insertIndexToAllList = i;
+                    break;
+                }
             }
         }
 
@@ -714,7 +719,7 @@ export const useAccountsStore = defineStore('accounts', () => {
                     updateAccountListInvalidState(false);
                 }
 
-                const accounts = Account.ofMany(data.result);
+                const accounts = Account.sortAccounts(Account.ofMany(data.result));
 
                 if (force && data.result && isEquals(allAccounts.value, accounts)) {
                     reject({ message: 'Account list is up to date', isUpToDate: true });

diff --git a/src/views/base/transactions/TransactionListPageBase.ts b/src/views/base/transactions/TransactionListPageBase.ts
@@ -60,13 +60,14 @@ export function useTransactionListPageBase() {
 
     const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(settingsStore.appSettings.timeZone));
     const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
-    const defaultCurrency = computed<string>(() => getUnifiedSelectedAccountsCurrencyOrDefaultCurrency(allAccounts.value, queryAllFilterAccountIds.value, userStore.currentUserDefaultCurrency));
+    const defaultCurrency = computed<string>(() => getUnifiedSelectedAccountsCurrencyOrDefaultCurrency(allAccountsMap.value, queryAllFilterAccountIds.value, userStore.currentUserDefaultCurrency));
     const showTotalAmountInTransactionListPage = computed<boolean>(() => settingsStore.appSettings.showTotalAmountInTransactionListPage);
     const showTagInTransactionListPage = computed<boolean>(() => settingsStore.appSettings.showTagInTransactionListPage);
 
     const allDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.Normal, true, !!accountsStore.getAccountStatementDate(query.value.accountIds)));
 
-    const allAccounts = computed<Record<string, Account>>(() => accountsStore.allAccountsMap);
+    const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
+    const allAccountsMap = computed<Record<string, Account>>(() => accountsStore.allAccountsMap);
     const allAvailableAccountsCount = computed<number>(() => accountsStore.allAvailableAccountsCount);
     const allPrimaryCategories = computed<Record<number, TransactionCategory[]>>(() => {
         const primaryCategories: Record<number, TransactionCategory[]> = {};
@@ -131,7 +132,7 @@ export function useTransactionListPageBase() {
             return tt('Multiple Accounts');
         }
 
-        return allAccounts.value[query.value.accountIds]?.name || tt('Account');
+        return allAccountsMap.value[query.value.accountIds]?.name || tt('Account');
     });
 
     const queryCategoryName = computed<string>(() => {
@@ -176,7 +177,7 @@ export function useTransactionListPageBase() {
 
     const canAddTransaction = computed<boolean>(() => {
         if (query.value.accountIds && queryAllFilterAccountIdsCount.value === 1) {
-            const account = allAccounts.value[query.value.accountIds];
+            const account = allAccountsMap.value[query.value.accountIds];
 
             if (account && account.type === AccountType.MultiSubAccounts.type) {
                 return false;
@@ -278,6 +279,7 @@ export function useTransactionListPageBase() {
         showTagInTransactionListPage,
         allDateRanges,
         allAccounts,
+        allAccountsMap,
         allAvailableAccountsCount,
         allCategories,
         allPrimaryCategories,

diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue
@@ -346,12 +346,12 @@
                                                         </v-list-item>
                                                         <template :key="account.id"
                                                                   v-for="account in allAccounts">
-                                                            <v-divider v-if="(!account.hidden && (!allAccounts[account.parentId] || !allAccounts[account.parentId].hidden)) || query.accountIds === account.id" />
+                                                            <v-divider v-if="(!account.hidden && (!allAccountsMap[account.parentId] || !allAccountsMap[account.parentId].hidden)) || query.accountIds === account.id" />
                                                             <v-list-item class="text-sm" density="compact"
                                                                          :value="account.id"
                                                                          :class="{ 'list-item-selected': query.accountIds === account.id, 'item-in-multiple-selection': queryAllFilterAccountIdsCount > 1 && queryAllFilterAccountIds[account.id] }"
                                                                          :append-icon="(query.accountIds === account.id ? mdiCheck : undefined)"
-                                                                         v-if="(!account.hidden && (!allAccounts[account.parentId] || !allAccounts[account.parentId].hidden)) || query.accountIds === account.id">
+                                                                         v-if="(!account.hidden && (!allAccountsMap[account.parentId] || !allAccountsMap[account.parentId].hidden)) || query.accountIds === account.id">
                                                                 <v-list-item-title class="cursor-pointer"
                                                                                    @click="changeAccountFilter(account.id)">
                                                                     <div class="d-flex align-center">
@@ -721,6 +721,7 @@ const {
     showTagInTransactionListPage,
     allDateRanges,
     allAccounts,
+    allAccountsMap,
     allAvailableAccountsCount,
     allCategories,
     allPrimaryCategories,

diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
@@ -391,7 +391,7 @@
                               :class="{ 'list-item-selected': query.accountIds === account.id, 'item-in-multiple-selection': queryAllFilterAccountIdsCount > 1 && queryAllFilterAccountIds[account.id] }"
                               :key="account.id"
                               v-for="account in allAccounts"
-                              v-show="(!account.hidden && (!allAccounts[account.parentId] || !allAccounts[account.parentId].hidden)) || query.accountIds === account.id"
+                              v-show="(!account.hidden && (!allAccountsMap[account.parentId] || !allAccountsMap[account.parentId].hidden)) || query.accountIds === account.id"
                               @click="changeAccountFilter(account.id)"
                 >
                     <template #media>
@@ -584,6 +584,7 @@ const {
     showTagInTransactionListPage,
     allDateRanges,
     allAccounts,
+    allAccountsMap,
     allAvailableAccountsCount,
     allCategories,
     allPrimaryCategories,