support changing account category order

src/views/mobile/accounts/ListPage.vue

@@ -68,7 +68,7 @@
         </f7-list>
 
         <div :key="accountCategory.type"
-             v-for="accountCategory in AccountCategory.values()"
+             v-for="accountCategory in AccountCategory.values(customAccountCategoryOrder)"
              v-show="!loading && ((showHidden && hasAccount(accountCategory, false)) || hasAccount(accountCategory, true))">
             <f7-list strong inset dividers sortable class="list-has-group-title account-list margin-vertical"
                      :sortable-enabled="sortable"
@@ -246,6 +246,7 @@ const {
     showHidden,
     displayOrderModified,
     showAccountBalance,
+    customAccountCategoryOrder,
     allCategorizedAccountsMap,
     allAccountCount,
     netAssets,

src/views/mobile/settings/AccountCategoryDisplayOrderSettingsPage.vue

@@ -0,0 +1,117 @@
+<template>
+    <f7-page>
+        <f7-navbar>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-title :title="tt('Account Category Order')"></f7-nav-title>
+            <f7-nav-right class="navbar-compact-icons">
+                <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
+                <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !isDisplayOrderModified() }" @click="saveDisplayOrder"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
+
+        <f7-list strong inset dividers sortable sortable-enabled class="margin-top"
+                 @sortable:sort="onSort">
+            <f7-list-item :id="getAccountCategoryDomId(accountCategory)"
+                          :key="accountCategory.type"
+                          :title="tt(accountCategory.name)"
+                          v-for="accountCategory in accountCategories">
+            </f7-list-item>
+        </f7-list>
+
+        <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
+            <f7-actions-group>
+                <f7-actions-button @click="resetToDefault()">{{ tt('Reset to Default') }}</f7-actions-button>
+            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
+            </f7-actions-group>
+        </f7-actions>
+    </f7-page>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Router } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
+import { useAccountCategoryDisplayOrderSettingsPageBase } from '@/views/base/settings/AccountCategoryDisplayOrderSettingsPageBase.ts';
+
+import { AccountCategory } from '@/core/account.ts';
+
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
+
+const { tt } = useI18n();
+const { showToast } = useI18nUIComponents();
+
+const {
+    accountCategories,
+    isDisplayOrderModified,
+    loadDisplayOrderFromSettings,
+    saveDisplayOrderToSettings,
+    resetDisplayOrderToDefault
+} = useAccountCategoryDisplayOrderSettingsPageBase();
+
+const showMoreActionSheet = ref<boolean>(false);
+
+function getAccountCategoryDomId(accountCategory: AccountCategory): string {
+    return 'account_category_' + accountCategory.type;
+}
+
+function parseAccountCategoryTypeFromDomId(domId: string): string | null {
+    if (!domId || domId.indexOf('account_category_') !== 0) {
+        return null;
+    }
+
+    return domId.substring(17); // account_category_
+}
+
+function init(): void {
+    loadDisplayOrderFromSettings();
+}
+
+function saveDisplayOrder(): void {
+    saveDisplayOrderToSettings();
+    showToast('Account category order saved');
+    props.f7router.back();
+}
+
+function resetToDefault() {
+    resetDisplayOrderToDefault();
+    showMoreActionSheet.value = false;
+}
+
+function onSort(event: { el: { id: string }, from: number, to: number }): void {
+    if (!event || !event.el || !event.el.id) {
+        showToast('Unable to move account category');
+        return;
+    }
+
+    const type = parseAccountCategoryTypeFromDomId(event.el.id);
+
+    if (!type) {
+        showToast('Unable to move account category');
+        return;
+    }
+
+    let currentAccountCategory: AccountCategory | null = null;
+
+    for (const accountCategory of accountCategories.value) {
+        if (accountCategory.type.toString() === type) {
+            currentAccountCategory = accountCategory;
+            break;
+        }
+    }
+
+    if (!currentAccountCategory || !accountCategories.value[event.to]) {
+        showToast('Unable to move account category');
+        return;
+    }
+
+    accountCategories.value.splice(event.to, 0, accountCategories.value.splice(event.from, 1)[0] as AccountCategory);
+}
+
+init();
+</script>

src/views/mobile/settings/AccountFilterSettingsPage.vue

@@ -178,6 +178,7 @@ const {
     filterAccountIds,
     title,
     allowHiddenAccount,
+    customAccountCategoryOrder,
     allCategorizedAccounts,
     allVisibleAccountMap,
     hasAnyAvailableAccount,
@@ -195,7 +196,7 @@ const showMoreActionSheet = ref<boolean>(false);
 
 function getCollapseStates(): Record<number, CollapseState> {
     const collapseStates: Record<number, CollapseState> = {};
-    const allCategories = AccountCategory.values();
+    const allCategories = AccountCategory.values(customAccountCategoryOrder.value);
 
     for (const accountCategory of allCategories) {
         collapseStates[accountCategory.type] = {

src/views/mobile/settings/PageSettingsPage.vue

@@ -153,6 +153,18 @@
                     <div v-else-if="!loadingAccounts">{{ accountsIncludedInTotalDisplayContent }}</div>
                 </template>
             </f7-list-item>
+            <f7-list-item
+                class="item-truncate-after-text"
+                link="/settings/account_category_display_order">
+                <template #after-title>
+                    <div class="item-actual-title">
+                        <span>{{ tt('Account Category Order') }}</span>
+                    </div>
+                </template>
+                <template #after>
+                    <div>{{ accountCategorysDisplayOrderContent }}</div>
+                </template>
+            </f7-list-item>
         </f7-list>
 
         <f7-block-title>{{ tt('Exchange Rates Data Page') }}</f7-block-title>
@@ -221,6 +233,7 @@ const {
     currencySortByInExchangeRatesPage,
     accountsIncludedInHomePageOverviewDisplayContent,
     accountsIncludedInTotalDisplayContent,
+    accountCategorysDisplayOrderContent,
     transactionCategoriesIncludedInHomePageOverviewDisplayContent
 } = useAppSettingPageBase();