support changing account category order

src/views/desktop/app/settings/dialogs/AccountCategoryDisplayOrderDialog.vue

@@ -0,0 +1,113 @@
+<template>
+    <v-dialog width="600" :persistent="isDisplayOrderModified()" v-model="showState">
+        <v-card class="pa-sm-1 pa-md-2">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <div class="d-flex align-center">
+                        <h4 class="text-h4">{{ tt('Account Category Order') }}</h4>
+                    </div>
+                    <v-spacer/>
+                    <v-btn density="comfortable" color="default" variant="text" class="ms-2" :icon="true">
+                        <v-icon :icon="mdiDotsVertical" />
+                        <v-menu activator="parent">
+                            <v-list>
+                                <v-list-item :prepend-icon="mdiRestore"
+                                             :title="tt('Reset to Default')"
+                                             @click="resetDisplayOrderToDefault"></v-list-item>
+                            </v-list>
+                        </v-menu>
+                    </v-btn>
+                </div>
+            </template>
+
+            <v-card-text class="d-flex flex-column flex-md-row flex-grow-1 overflow-y-auto">
+                <v-table hover density="comfortable" class="w-100 table-striped">
+                    <draggable-list tag="tbody"
+                                    item-key="id"
+                                    handle=".drag-handle"
+                                    ghost-class="dragging-item"
+                                    v-model="accountCategories">
+                        <template #item="{ element }">
+                            <tr class="text-sm">
+                                <td>
+                                    <div class="d-flex align-center">
+                                        <div class="d-flex align-center">
+                                            <span>{{ tt(element.name) }}</span>
+                                        </div>
+
+                                        <v-spacer/>
+
+                                        <span class="ms-2">
+                                        <v-icon class="drag-handle" :icon="mdiDrag"/>
+                                        <v-tooltip activator="parent">{{ tt('Drag to Reorder') }}</v-tooltip>
+                                    </span>
+                                    </div>
+                                </td>
+                            </tr>
+                        </template>
+                    </draggable-list>
+                </v-table>
+            </v-card-text>
+
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
+                    <v-btn :disabled="!isDisplayOrderModified()" @click="saveDisplayOrder">{{ tt('Save') }}</v-btn>
+                    <v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useAccountCategoryDisplayOrderSettingsPageBase } from '@/views/base/settings/AccountCategoryDisplayOrderSettingsPageBase.ts';
+
+import {
+    mdiDotsVertical,
+    mdiRestore,
+    mdiDrag
+} from '@mdi/js';
+
+const { tt } = useI18n();
+
+const {
+    accountCategories,
+    isDisplayOrderModified,
+    loadDisplayOrderFromSettings,
+    saveDisplayOrderToSettings,
+    resetDisplayOrderToDefault
+} = useAccountCategoryDisplayOrderSettingsPageBase();
+
+let resolveFunc: (() => void) | null = null;
+let rejectFunc: (() => void) | null = null;
+
+const showState = ref<boolean>(false);
+
+function open(): Promise<void> {
+    loadDisplayOrderFromSettings();
+    showState.value = true;
+
+    return new Promise<void>((resolve, reject) => {
+        resolveFunc = resolve;
+        rejectFunc = reject;
+    });
+}
+
+function saveDisplayOrder(): void {
+    saveDisplayOrderToSettings();
+    resolveFunc?.();
+    showState.value = false;
+}
+
+function cancel(): void {
+    rejectFunc?.();
+    showState.value = false;
+}
+
+defineExpose({
+    open
+});
+</script>

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

@@ -277,6 +277,19 @@
                                     @click="showAccountsIncludedInTotalDialog = true"
                                 />
                             </v-col>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                    class="always-cursor-pointer"
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :readonly="true"
+                                    :label="tt('Account Category Order')"
+                                    :placeholder="tt('Account Category Order')"
+                                    :model-value="accountCategorysDisplayOrderContent"
+                                    @click="accountCategorysDisplayOrderDialog?.open()"
+                                />
+                            </v-col>
                             <v-col cols="12" md="6">
                                 <v-select
                                     item-title="displayName"
@@ -332,6 +345,8 @@
                                       @settings:change="showAccountsIncludedInTotalDialog = false" />
     </v-dialog>
 
+    <account-category-display-order-dialog ref="accountCategorysDisplayOrderDialog" />
+
     <snack-bar ref="snackbar" />
 </template>
 
@@ -339,6 +354,7 @@
 import SnackBar from '@/components/desktop/SnackBar.vue';
 import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
 import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue';
+import AccountCategoryDisplayOrderDialog from '@/views/desktop/app/settings/dialogs/AccountCategoryDisplayOrderDialog.vue';
 
 import { ref, computed, useTemplateRef } from 'vue';
 import { useTheme } from 'vuetify';
@@ -358,6 +374,7 @@ import { CategoryType } from '@/core/category.ts';
 import { getSystemTheme } from '@/lib/ui/common.ts';
 
 type SnackBarType = InstanceType<typeof SnackBar>;
+type AccountCategoryDisplayOrderDialogType = InstanceType<typeof AccountCategoryDisplayOrderDialog>;
 
 const theme = useTheme();
 
@@ -386,6 +403,7 @@ const {
     currencySortByInExchangeRatesPage,
     accountsIncludedInHomePageOverviewDisplayContent,
     accountsIncludedInTotalDisplayContent,
+    accountCategorysDisplayOrderContent,
     transactionCategoriesIncludedInHomePageOverviewDisplayContent
 } = useAppSettingPageBase();
 
@@ -394,6 +412,7 @@ const accountsStore = useAccountsStore();
 const transactionCategoriesStore = useTransactionCategoriesStore();
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
+const accountCategorysDisplayOrderDialog = useTemplateRef<AccountCategoryDisplayOrderDialogType>('accountCategorysDisplayOrderDialog');
 
 const showAccountsIncludedInHomePageOverviewDialog = ref<boolean>(false);
 const showTransactionCategoriesIncludedInHomePageOverviewDialog = ref<boolean>(false);