From 5bf7f775206ecae5ede79b2763b4aa4e5ae956d8 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Wed, 22 Jan 2025 23:08:18 +0800
Subject: [PATCH] migrate transaction category list page to composition API and
 typescript

---
 src/stores/transactionCategory.ts         |   2 +-
 src/views/desktop/categories/ListPage.vue | 590 +++++++++++-----------
 src/views/mobile/categories/ListPage.vue  | 583 +++++++++++----------
 3 files changed, 580 insertions(+), 595 deletions(-)

diff --git a/src/stores/transactionCategory.ts b/src/stores/transactionCategory.ts
index b5a00df3..9b6cad59 100644
--- a/src/stores/transactionCategory.ts
+++ b/src/stores/transactionCategory.ts
@@ -456,7 +456,7 @@ export const useTransactionCategoriesStore = defineStore('transactionCategories'
         });
     }
 
-    function deleteCategory({ category, beforeResolve }: { category: TransactionCategory, beforeResolve: BeforeResolveFunction }): Promise<boolean> {
+    function deleteCategory({ category, beforeResolve }: { category: TransactionCategory, beforeResolve?: BeforeResolveFunction }): Promise<boolean> {
         return new Promise((resolve, reject) => {
             services.deleteTransactionCategory({
                 id: category.id
diff --git a/src/views/desktop/categories/ListPage.vue b/src/views/desktop/categories/ListPage.vue
index 323720db..bec1f3e6 100644
--- a/src/views/desktop/categories/ListPage.vue
+++ b/src/views/desktop/categories/ListPage.vue
@@ -6,16 +6,16 @@
                     <v-navigation-drawer ref="navbar" :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
                             <btn-vertical-group :disabled="loading" :buttons="[
-                                { name: $t('Expense'), value: allCategoryTypes.Expense },
-                                { name: $t('Income'), value: allCategoryTypes.Income },
-                                { name: $t('Transfer'), value: allCategoryTypes.Transfer }
+                                { name: tt('Expense'), value: CategoryType.Expense },
+                                { name: tt('Income'), value: CategoryType.Income },
+                                { name: tt('Transfer'), value: CategoryType.Transfer }
                             ]" v-model="activeCategoryType" @update:model-value="switchAllPrimaryCategories" />
                         </div>
                         <v-divider />
                         <v-tabs show-arrows class="my-4" direction="vertical"
                                 :disabled="loading" v-model="primaryCategoryId">
                             <v-tab class="tab-text-truncate" value="0" @click="switchAllPrimaryCategories">
-                                <span class="text-truncate">{{ $t('Primary Categories') }}</span>
+                                <span class="text-truncate">{{ tt('Primary Categories') }}</span>
                             </v-tab>
                             <template :key="category.id" v-for="category in primaryCategories">
                                 <v-tab class="tab-text-truncate" :value="category.id" v-if="!category.hidden"
@@ -39,19 +39,19 @@
                                                    :ripple="false" :icon="true" @click="showNav = !showNav">
                                                 <v-icon :icon="icons.menu" size="24" />
                                             </v-btn>
-                                            <span>{{ $t('Transaction Categories') }}</span>
+                                            <span>{{ tt('Transaction Categories') }}</span>
                                             <v-btn class="ml-3" color="default" variant="outlined"
-                                                   :disabled="loading || updating" @click="add">{{ $t('Add') }}</v-btn>
+                                                   :disabled="loading || updating" @click="add">{{ tt('Add') }}</v-btn>
                                             <v-btn class="ml-3" color="primary" variant="tonal"
                                                    :disabled="loading || updating" @click="saveSortResult"
-                                                   v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
+                                                   v-if="displayOrderModified">{{ tt('Save Display Order') }}</v-btn>
                                             <v-btn density="compact" color="default" variant="text" size="24"
-                                                   class="ml-2" :icon="true" :loading="loading || updating" @click="reload">
+                                                   class="ml-2" :icon="true" :loading="loading || updating" @click="reload(true)">
                                                 <template #loader>
                                                     <v-progress-circular indeterminate size="20"/>
                                                 </template>
                                                 <v-icon :icon="icons.refresh" size="24" />
-                                                <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                                <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                                             </v-btn>
                                             <v-spacer/>
                                             <v-btn density="comfortable" color="default" variant="text" class="ml-2"
@@ -60,10 +60,10 @@
                                                 <v-menu activator="parent">
                                                     <v-list>
                                                         <v-list-item :prepend-icon="icons.show"
-                                                                     :title="$t('Show Hidden Transaction Categories')"
+                                                                     :title="tt('Show Hidden Transaction Categories')"
                                                                      v-if="!showHidden" @click="showHidden = true"></v-list-item>
                                                         <v-list-item :prepend-icon="icons.hide"
-                                                                     :title="$t('Hide Hidden Transaction Categories')"
+                                                                     :title="tt('Hide Hidden Transaction Categories')"
                                                                      v-if="showHidden" @click="showHidden = false"></v-list-item>
                                                     </v-list>
                                                 </v-menu>
@@ -76,9 +76,9 @@
                                         <tr>
                                             <th>
                                                 <div class="d-flex align-center">
-                                                    <span>{{ $t('Category Name') }}</span>
+                                                    <span>{{ tt('Category Name') }}</span>
                                                     <v-spacer/>
-                                                    <span>{{ $t('Operation') }}</span>
+                                                    <span>{{ tt('Operation') }}</span>
                                                 </div>
                                             </th>
                                         </tr>
@@ -96,11 +96,11 @@
                                         <tr>
                                             <td>
                                                 <div class="d-flex align-center">
-                                                    <span>{{ $t('No available category') }}</span>
+                                                    <span>{{ tt('No available category') }}</span>
                                                     <v-btn class="ml-3" color="default" variant="outlined"
                                                            @click="showPresetDialog = true"
                                                            v-if="hasSubCategories && noCategory">
-                                                        {{ $t('Add Default Categories') }}
+                                                        {{ tt('Add Default Categories') }}
                                                     </v-btn>
                                                 </div>
                                             </td>
@@ -141,7 +141,7 @@
                                                                 <template #loader>
                                                                     <v-progress-circular indeterminate size="20" width="2"/>
                                                                 </template>
-                                                                {{ element.hidden ? $t('Show') : $t('Hide') }}
+                                                                {{ element.hidden ? tt('Show') : tt('Hide') }}
                                                             </v-btn>
                                                             <v-btn class="px-2" color="default"
                                                                    density="comfortable" variant="text"
@@ -149,7 +149,7 @@
                                                                    :prepend-icon="icons.edit"
                                                                    :disabled="loading || updating"
                                                                    @click="edit(element)">
-                                                                {{ $t('Edit') }}
+                                                                {{ tt('Edit') }}
                                                             </v-btn>
                                                             <v-btn class="px-2" color="default"
                                                                    density="comfortable" variant="text"
@@ -161,12 +161,12 @@
                                                                 <template #loader>
                                                                     <v-progress-circular indeterminate size="20" width="2"/>
                                                                 </template>
-                                                                {{ $t('Delete') }}
+                                                                {{ tt('Delete') }}
                                                             </v-btn>
                                                             <span class="ml-2">
                                                                 <v-icon :class="!loading && !updating && availableCategoryCount > 1 ? 'drag-handle' : 'disabled'"
                                                                         :icon="icons.drag"/>
-                                                                <v-tooltip activator="parent" v-if="!loading && !updating && availableCategoryCount > 1">{{ $t('Drag to Reorder') }}</v-tooltip>
+                                                                <v-tooltip activator="parent" v-if="!loading && !updating && availableCategoryCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
                                                             </span>
                                                         </div>
                                                     </td>
@@ -185,22 +185,30 @@
 
     <edit-dialog ref="editDialog" :persistent="true" />
     <preset-dialog :category-type="activeCategoryType" v-model:show="showPresetDialog"
-                            @category:saved="presetCategorySaved" />
+                            @category:saved="onPresetCategorySaved" />
 
     <confirm-dialog ref="confirmDialog"/>
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
+<script setup lang="ts">
+import { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer';
+
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
 import EditDialog from './list/dialogs/EditDialog.vue';
 import PresetDialog from './list/dialogs/PresetDialog.vue';
 
+import { ref, computed, useTemplateRef, watch, nextTick } from 'vue';
 import { useDisplay } from 'vuetify';
 
-import { mapStores } from 'pinia';
+import { useI18n } from '@/locales/helpers.ts';
+
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
 import { CategoryType } from '@/core/category.ts';
+import type { TransactionCategory } from '@/models/transaction_category.ts';
+
 import {
     isNoAvailableCategory,
     getAvailableCategoryCount
@@ -218,296 +226,278 @@ import {
     mdiDotsVertical
 } from '@mdi/js';
 
-export default {
-    components: {
-        EditDialog,
-        PresetDialog
-    },
-    data() {
-        const { mdAndUp } = useDisplay();
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
+type SnackBarType = InstanceType<typeof SnackBar>;
+type EditDialogType = InstanceType<typeof EditDialog>;
 
-        return {
-            activeCategoryType: CategoryType.Expense,
-            activeTab: 'categoryPage',
-            primaryCategoryId: '0',
-            loading: true,
-            updating: false,
-            categoryHiding: {},
-            categoryRemoving: {},
-            displayOrderModified: false,
-            cardMinHeight: 680,
-            alwaysShowNav: mdAndUp.value,
-            showNav: mdAndUp.value,
-            showHidden: false,
-            showPresetDialog: false,
-            icons: {
-                refresh: mdiRefresh,
-                menu: mdiMenu,
-                edit: mdiPencilOutline,
-                show: mdiEyeOutline,
-                hide: mdiEyeOffOutline,
-                remove: mdiDeleteOutline,
-                drag: mdiDrag,
-                more: mdiDotsVertical
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useTransactionCategoriesStore),
-        allCategoryTypes() {
-            return CategoryType;
-        },
-        primaryCategories() {
-            if (!this.transactionCategoriesStore.allTransactionCategories || !this.transactionCategoriesStore.allTransactionCategories[this.activeCategoryType]) {
-                return [];
-            }
+const display = useDisplay();
+const { tt } = useI18n();
 
-            return this.transactionCategoriesStore.allTransactionCategories[this.activeCategoryType];
-        },
-        secondaryCategories() {
-            if (!this.transactionCategoriesStore.allTransactionCategoriesMap || !this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId]) {
-                return [];
-            }
+const transactionCategoriesStore = useTransactionCategoriesStore();
 
-            return this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId].subCategories;
-        },
-        hasSubCategories() {
-            return !this.primaryCategoryId || this.primaryCategoryId === '' || this.primaryCategoryId === '0';
-        },
-        categories() {
-            if (this.hasSubCategories) {
-                return this.primaryCategories;
-            } else {
-                return this.secondaryCategories;
-            }
-        },
-        noAvailableCategory() {
-            return isNoAvailableCategory(this.categories, this.showHidden);
-        },
-        noCategory() {
-            return this.categories.length < 1;
-        },
-        availableCategoryCount() {
-            return getAvailableCategoryCount(this.categories, this.showHidden);
+const icons = {
+    refresh: mdiRefresh,
+    menu: mdiMenu,
+    edit: mdiPencilOutline,
+    show: mdiEyeOutline,
+    hide: mdiEyeOffOutline,
+    remove: mdiDeleteOutline,
+    drag: mdiDrag,
+    more: mdiDotsVertical
+};
+
+const navbar = useTemplateRef<VNavigationDrawer>('navbar');
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+const editDialog = useTemplateRef<EditDialogType>('editDialog');
+
+const activeCategoryType = ref<CategoryType>(CategoryType.Expense);
+const activeTab = ref<string>('categoryPage');
+const primaryCategoryId = ref<string>('0');
+const loading = ref<boolean>(true);
+const updating = ref<boolean>(false);
+const categoryHiding = ref<Record<string, boolean>>({});
+const categoryRemoving = ref<Record<string, boolean>>({});
+const displayOrderModified = ref<boolean>(false);
+const cardMinHeight = ref<number>(680);
+const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
+const showNav = ref<boolean>(display.mdAndUp.value);
+const showHidden = ref<boolean>(false);
+const showPresetDialog = ref<boolean>(false);
+
+const primaryCategories = computed<TransactionCategory[]>(() => {
+    if (!transactionCategoriesStore.allTransactionCategories || !transactionCategoriesStore.allTransactionCategories[activeCategoryType.value]) {
+        return [];
+    }
+
+    return transactionCategoriesStore.allTransactionCategories[activeCategoryType.value];
+});
+
+const secondaryCategories = computed<TransactionCategory[]>(() => {
+    if (!transactionCategoriesStore.allTransactionCategoriesMap || !transactionCategoriesStore.allTransactionCategoriesMap[primaryCategoryId.value]) {
+        return [];
+    }
+
+    return transactionCategoriesStore.allTransactionCategoriesMap[primaryCategoryId.value].secondaryCategories || [];
+});
+
+const hasSubCategories = computed<boolean>(() => {
+    return !primaryCategoryId.value || primaryCategoryId.value === '' || primaryCategoryId.value === '0';
+});
+
+const categories = computed<TransactionCategory[]>(() => {
+    if (hasSubCategories.value) {
+        return primaryCategories.value;
+    } else {
+        return secondaryCategories.value;
+    }
+});
+
+const noAvailableCategory = computed<boolean>(() => isNoAvailableCategory(categories.value, showHidden.value));
+const noCategory = computed<boolean>(() => categories.value.length < 1);
+const availableCategoryCount = computed<number>(() => getAvailableCategoryCount(categories.value, showHidden.value));
+
+function updateCardMinHeight(): void {
+    nextTick(() => {
+        if (navbar.value && navbar.value.$el && navbar.value.$el.nextElementSibling) {
+            const navbarHeight = getNavSideBarOuterHeight(navbar.value.$el.nextElementSibling);
+            cardMinHeight.value = Math.max(navbarHeight, 680);
         }
-    },
-    created() {
-        this.reload(false);
-    },
-    setup() {
-        const display = useDisplay();
+    });
+}
 
-        return {
-            display: display
-        };
-    },
-    watch: {
-        'display.mdAndUp.value': function (newValue) {
-            this.alwaysShowNav = newValue;
+function isCategorySupportSwitch(category: TransactionCategory): boolean {
+    if (!category || category.hidden) {
+        return false;
+    }
 
-            if (!this.showNav) {
-                this.showNav = newValue;
-            }
+    return !category.parentId || category.parentId === '' || category.parentId === '0';
+}
+
+function switchAllPrimaryCategories(): void {
+    primaryCategoryId.value = '0';
+    updateCardMinHeight();
+}
+
+function switchPrimaryCategory(category: TransactionCategory): void {
+    if (!category || category.hidden) {
+        return;
+    }
+
+    if (!category.parentId || category.parentId === '' || category.parentId === '0') {
+        primaryCategoryId.value = category.id;
+    }
+
+    updateCardMinHeight();
+}
+
+function reload(force: boolean): void {
+    loading.value = true;
+
+    transactionCategoriesStore.loadAllCategories({
+        force: force
+    }).then(() => {
+        loading.value = false;
+        displayOrderModified.value = false;
+
+        if (force) {
+            snackbar.value?.showMessage('Category list has been updated');
         }
-    },
-    methods: {
-        reload(force) {
-            const self = this;
 
-            self.loading = true;
+        updateCardMinHeight();
+    }).catch(error => {
+        loading.value = false;
 
-            self.transactionCategoriesStore.loadAllCategories({
-                force: force
-            }).then(() => {
-                self.loading = false;
-                self.displayOrderModified = false;
-
-                if (force) {
-                    self.$refs.snackbar.showMessage('Category list has been updated');
-                }
-
-                self.updateCardMinHeight();
-            }).catch(error => {
-                self.loading = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        onMove(event) {
-            if (!event || !event.moved) {
-                return;
-            }
-
-            const self = this;
-            const moveEvent = event.moved;
-
-            if (!moveEvent.element || !moveEvent.element.id) {
-                self.$refs.snackbar.showMessage('Unable to move category');
-                return;
-            }
-
-            self.transactionCategoriesStore.changeCategoryDisplayOrder({
-                categoryId: moveEvent.element.id,
-                from: moveEvent.oldIndex,
-                to: moveEvent.newIndex
-            }).then(() => {
-                self.displayOrderModified = true;
-            }).catch(error => {
-                self.$refs.snackbar.showError(error);
-            });
-        },
-        saveSortResult() {
-            const self = this;
-
-            if (!self.displayOrderModified) {
-                return;
-            }
-
-            self.loading = true;
-
-            self.transactionCategoriesStore.updateCategoryDisplayOrders({
-                type: self.activeCategoryType,
-                parentId: self.primaryCategoryId,
-            }).then(() => {
-                self.loading = false;
-                self.displayOrderModified = false;
-            }).catch(error => {
-                self.loading = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        add() {
-            const self = this;
-
-            self.$refs.editDialog.open({
-                type: self.activeCategoryType,
-                parentId: self.primaryCategoryId
-            }).then(result => {
-                if (result && result.message) {
-                    self.$refs.snackbar.showMessage(result.message);
-                }
-
-                self.updateCardMinHeight();
-            }).catch(error => {
-                if (error) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        edit(category) {
-            const self = this;
-
-            self.$refs.editDialog.open({
-                id: category.id,
-                currentCategory: category
-            }).then(result => {
-                if (result && result.message) {
-                    self.$refs.snackbar.showMessage(result.message);
-                }
-
-                if (self.transactionCategoriesStore.transactionCategoryListStateInvalid) {
-                    self.reload(true);
-                }
-
-                self.updateCardMinHeight();
-            }).catch(error => {
-                if (error) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        hide(category, hidden) {
-            const self = this;
-
-            self.updating = true;
-            self.categoryHiding[category.id] = true;
-
-            self.transactionCategoriesStore.hideCategory({
-                category: category,
-                hidden: hidden
-            }).then(() => {
-                self.updating = false;
-                self.categoryHiding[category.id] = false;
-
-                self.updateCardMinHeight();
-            }).catch(error => {
-                self.updating = false;
-                self.categoryHiding[category.id] = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        remove(category) {
-            const self = this;
-
-            self.$refs.confirmDialog.open('Are you sure you want to delete this category?').then(() => {
-                self.updating = true;
-                self.categoryRemoving[category.id] = true;
-
-                self.transactionCategoriesStore.deleteCategory({
-                    category: category
-                }).then(() => {
-                    self.updating = false;
-                    self.categoryRemoving[category.id] = false;
-
-                    self.updateCardMinHeight();
-                }).catch(error => {
-                    self.updating = false;
-                    self.categoryRemoving[category.id] = false;
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            });
-        },
-        presetCategorySaved(e) {
-            if (e && e.message) {
-                this.$refs.snackbar.showMessage(e.message);
-                this.reload(false);
-            }
-        },
-        isCategorySupportSwitch(category) {
-            if (!category || category.hidden) {
-                return false;
-            }
-
-            return !category.parentId || category.parentId === '' || category.parentId === '0';
-        },
-        switchAllPrimaryCategories() {
-            this.primaryCategoryId = '0';
-            this.updateCardMinHeight();
-        },
-        switchPrimaryCategory(category) {
-            if (!category || category.hidden) {
-                return;
-            }
-
-            if (!category.parentId || category.parentId === '' || category.parentId === '0') {
-                this.primaryCategoryId = category.id;
-            }
-
-            this.updateCardMinHeight();
-        },
-        updateCardMinHeight() {
-            const self = this
-
-            self.$nextTick(() => {
-                if (self.$refs.navbar && self.$refs.navbar.$el && self.$refs.navbar.$el.nextElementSibling) {
-                    const navbarHeight = getNavSideBarOuterHeight(self.$refs.navbar.$el.nextElementSibling);
-                    self.cardMinHeight = Math.max(navbarHeight, 680);
-                }
-            });
+        if (!error.processed) {
+            snackbar.value?.showError(error);
         }
+    });
+}
+
+function add(): void {
+    editDialog.value?.open({
+        type: activeCategoryType.value,
+        parentId: primaryCategoryId.value
+    }).then(result => {
+        if (result && result.message) {
+            snackbar.value?.showMessage(result.message);
+        }
+
+        updateCardMinHeight();
+    }).catch(error => {
+        if (error) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function edit(category: TransactionCategory): void {
+    editDialog.value?.open({
+        id: category.id,
+        currentCategory: category
+    }).then(result => {
+        if (result && result.message) {
+            snackbar.value?.showMessage(result.message);
+        }
+
+        if (transactionCategoriesStore.transactionCategoryListStateInvalid) {
+            reload(true);
+        }
+
+        updateCardMinHeight();
+    }).catch(error => {
+        if (error) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function hide(category: TransactionCategory, hidden: boolean): void {
+    updating.value = true;
+    categoryHiding.value[category.id] = true;
+
+    transactionCategoriesStore.hideCategory({
+        category: category,
+        hidden: hidden
+    }).then(() => {
+        updating.value = false;
+        categoryHiding.value[category.id] = false;
+
+        updateCardMinHeight();
+    }).catch(error => {
+        updating.value = false;
+        categoryHiding.value[category.id] = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function remove(category: TransactionCategory): void {
+    confirmDialog.value?.open('Are you sure you want to delete this category?').then(() => {
+        updating.value = true;
+        categoryRemoving.value[category.id] = true;
+
+        transactionCategoriesStore.deleteCategory({
+            category: category
+        }).then(() => {
+            updating.value = false;
+            categoryRemoving.value[category.id] = false;
+
+            updateCardMinHeight();
+        }).catch(error => {
+            updating.value = false;
+            categoryRemoving.value[category.id] = false;
+
+            if (!error.processed) {
+                snackbar.value?.showError(error);
+            }
+        });
+    });
+}
+
+function saveSortResult(): void {
+    if (!displayOrderModified.value) {
+        return;
+    }
+
+    loading.value = true;
+
+    transactionCategoriesStore.updateCategoryDisplayOrders({
+        type: activeCategoryType.value,
+        parentId: primaryCategoryId.value
+    }).then(() => {
+        loading.value = false;
+        displayOrderModified.value = false;
+    }).catch(error => {
+        loading.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function onMove(event: { moved: { element: { id: string }, oldIndex: number, newIndex: number } }): void {
+    if (!event || !event.moved) {
+        return;
+    }
+
+    const moveEvent = event.moved;
+
+    if (!moveEvent.element || !moveEvent.element.id) {
+        snackbar.value?.showMessage('Unable to move category');
+        return;
+    }
+
+    transactionCategoriesStore.changeCategoryDisplayOrder({
+        categoryId: moveEvent.element.id,
+        from: moveEvent.oldIndex,
+        to: moveEvent.newIndex
+    }).then(() => {
+        displayOrderModified.value = true;
+    }).catch(error => {
+        snackbar.value?.showError(error);
+    });
+}
+
+function onPresetCategorySaved(e: { message: string }): void {
+    if (e && e.message) {
+        snackbar.value?.showMessage(e.message);
+        reload(false);
     }
 }
+
+watch(() => display.mdAndUp.value, (newValue) => {
+    alwaysShowNav.value = newValue;
+
+    if (!showNav.value) {
+        showNav.value = newValue;
+    }
+});
+
+reload(false);
 </script>
 
 <style>
diff --git a/src/views/mobile/categories/ListPage.vue b/src/views/mobile/categories/ListPage.vue
index f64a2930..6f9ed9ab 100644
--- a/src/views/mobile/categories/ListPage.vue
+++ b/src/views/mobile/categories/ListPage.vue
@@ -1,12 +1,12 @@
 <template>
     <f7-page :ptr="!sortable" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t(title)"></f7-nav-title>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-title :title="tt(title)"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !categories.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link :href="'/category/add?type=' + categoryType + '&parentId=' + primaryCategoryId" icon-f7="plus" v-if="!sortable"></f7-link>
-                <f7-link :text="$t('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
+                <f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -21,9 +21,9 @@
         </f7-list>
 
         <f7-list strong inset dividers class="margin-top" v-if="!loading && noAvailableCategory">
-            <f7-list-item :title="$t('No available category')"></f7-list-item>
+            <f7-list-item :title="tt('No available category')"></f7-list-item>
             <f7-list-button v-if="hasSubCategories && noCategory"
-                            :title="$t('Add Default Categories')"
+                            :title="tt('Add Default Categories')"
                             :href="'/category/preset?type=' + categoryType"></f7-list-button>
         </f7-list>
 
@@ -55,7 +55,7 @@
                     </f7-swipeout-button>
                 </f7-swipeout-actions>
                 <f7-swipeout-actions right v-if="!sortable">
-                    <f7-swipeout-button color="orange" close :text="$t('Edit')" @click="edit(category)"></f7-swipeout-button>
+                    <f7-swipeout-button color="orange" close :text="tt('Edit')" @click="edit(category)"></f7-swipeout-button>
                     <f7-swipeout-button color="red" class="padding-left padding-right" @click="remove(category, false)">
                         <f7-icon f7="trash"></f7-icon>
                     </f7-swipeout-button>
@@ -65,326 +65,321 @@
 
         <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
             <f7-actions-group>
-                <f7-actions-button @click="setSortable()">{{ $t('Sort') }}</f7-actions-button>
-                <f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ $t('Show Hidden Transaction Categories') }}</f7-actions-button>
-                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Transaction Categories') }}</f7-actions-button>
+                <f7-actions-button @click="setSortable()">{{ tt('Sort') }}</f7-actions-button>
+                <f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ tt('Show Hidden Transaction Categories') }}</f7-actions-button>
+                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ tt('Hide Hidden Transaction Categories') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
-                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
             </f7-actions-group>
         </f7-actions>
 
         <f7-actions close-by-outside-click close-on-escape :opened="showDeleteActionSheet" @actions:closed="showDeleteActionSheet = false">
             <f7-actions-group>
-                <f7-actions-label>{{ $t('Are you sure you want to delete this category?') }}</f7-actions-label>
-                <f7-actions-button color="red" @click="remove(categoryToDelete, true)">{{ $t('Delete') }}</f7-actions-button>
+                <f7-actions-label>{{ tt('Are you sure you want to delete this category?') }}</f7-actions-label>
+                <f7-actions-button color="red" @click="remove(categoryToDelete, true)">{{ tt('Delete') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
-                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
             </f7-actions-group>
         </f7-actions>
     </f7-page>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { Router } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents, showLoading, hideLoading, onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
+
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
 import { CategoryType } from '@/core/category.ts';
+import type { TransactionCategory } from '@/models/transaction_category.ts';
+
 import {
     isNoAvailableCategory,
     getFirstShowingId,
     getLastShowingId
 } from '@/lib/category.ts';
-import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
 
-export default {
-    props: [
-        'f7route',
-        'f7router'
-    ],
-    data() {
-        return {
-            hasSubCategories: false,
-            categoryType: 0,
-            primaryCategoryId: '',
-            loading: true,
-            loadingError: null,
-            showHidden: false,
-            sortable: false,
-            categoryToDelete: null,
-            showMoreActionSheet: false,
-            showDeleteActionSheet: false,
-            displayOrderModified: false,
-            displayOrderSaving: false
-        };
-    },
-    computed: {
-        ...mapStores(useTransactionCategoriesStore),
-        categories() {
-            if (!this.primaryCategoryId || this.primaryCategoryId === '' || this.primaryCategoryId === '0') {
-                if (!this.transactionCategoriesStore.allTransactionCategories || !this.transactionCategoriesStore.allTransactionCategories[this.categoryType]) {
-                    return [];
-                }
+const props = defineProps<{
+    f7route: Router.Route;
+    f7router: Router.Router;
+}>();
 
-                return this.transactionCategoriesStore.allTransactionCategories[this.categoryType];
-            } else if (this.primaryCategoryId && this.primaryCategoryId !== '' && this.primaryCategoryId !== '0') {
-                if (!this.transactionCategoriesStore.allTransactionCategoriesMap || !this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId]) {
-                    return [];
-                }
+const { tt } = useI18n();
+const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
 
-                return this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId].subCategories;
-            } else {
-                return [];
-            }
-        },
-        title() {
-            let title = '';
+const transactionCategoriesStore = useTransactionCategoriesStore();
 
-            switch (this.categoryType) {
-                case CategoryType.Income:
-                    title = 'Income';
-                    break;
-                case CategoryType.Expense:
-                    title = 'Expense';
-                    break;
-                case CategoryType.Transfer:
-                    title = 'Transfer';
-                    break;
-                default:
-                    title = 'Transaction';
-                    break;
-            }
+const hasSubCategories = ref<boolean>(false);
+const categoryType = ref<CategoryType | 0>(0);
+const primaryCategoryId = ref<string>('0');
+const loading = ref<boolean>(true);
+const loadingError = ref<unknown | null>(null);
+const showHidden = ref<boolean>(false);
+const sortable = ref<boolean>(false);
+const categoryToDelete = ref<TransactionCategory | null>(null);
+const showMoreActionSheet = ref<boolean>(false);
+const showDeleteActionSheet = ref<boolean>(false);
+const displayOrderModified = ref<boolean>(false);
+const displayOrderSaving = ref<boolean>(false);
 
-            switch (this.hasSubCategories) {
-                case true:
-                    title += ' Primary';
-                    break;
-                case false:
-                    title += ' Secondary';
-                    break;
-            }
-
-            return title + ' Categories';
-        },
-        firstShowingId() {
-            return getFirstShowingId(this.categories, this.showHidden);
-        },
-        lastShowingId() {
-            return getLastShowingId(this.categories, this.showHidden);
-        },
-        noAvailableCategory() {
-            return isNoAvailableCategory(this.categories, this.showHidden);
-        },
-        noCategory() {
-            return this.categories.length < 1;
-        }
-    },
-    created() {
-        const self = this;
-        const query = self.f7route.query;
-
-        self.categoryType = parseInt(query.type);
-
-        if (self.categoryType !== CategoryType.Income &&
-            self.categoryType !== CategoryType.Expense &&
-            self.categoryType !== CategoryType.Transfer) {
-            self.$toast('Parameter Invalid');
-            self.loadingError = 'Parameter Invalid';
-            return;
+const categories = computed<TransactionCategory[]>(() => {
+    if (!primaryCategoryId.value || primaryCategoryId.value === '' || primaryCategoryId.value === '0') {
+        if (!transactionCategoriesStore.allTransactionCategories || !transactionCategoriesStore.allTransactionCategories[categoryType.value]) {
+            return [];
         }
 
-        if (query.id && query.id !== '0') {
-            self.primaryCategoryId = query.id;
-            self.hasSubCategories = false;
-        } else {
-            self.primaryCategoryId = '0';
-            self.hasSubCategories = true;
+        return transactionCategoriesStore.allTransactionCategories[categoryType.value];
+    } else if (primaryCategoryId.value && primaryCategoryId.value !== '' && primaryCategoryId.value !== '0') {
+        if (!transactionCategoriesStore.allTransactionCategoriesMap || !transactionCategoriesStore.allTransactionCategoriesMap[primaryCategoryId.value]) {
+            return [];
         }
 
-        self.loading = true;
-
-        self.transactionCategoriesStore.loadAllCategories({
-            force: false
-        }).then(() => {
-            self.loading = false;
-        }).catch(error => {
-            if (error.processed) {
-                self.loading = false;
-            } else {
-                self.loadingError = error;
-                self.$toast(error.message || error);
-            }
-        });
-    },
-    methods: {
-        onPageAfterIn() {
-            if (this.transactionCategoriesStore.transactionCategoryListStateInvalid && !this.loading) {
-                this.reload(null);
-            }
-
-            this.$routeBackOnError(this.f7router, 'loadingError');
-        },
-        reload(done) {
-            if (this.sortable) {
-                done();
-                return;
-            }
-
-            const self = this;
-            const force = !!done;
-
-            self.transactionCategoriesStore.loadAllCategories({
-                force: force
-            }).then(() => {
-                if (done) {
-                    done();
-                }
-
-                if (force) {
-                    self.$toast('Category list has been updated');
-                }
-            }).catch(error => {
-                if (done) {
-                    done();
-                }
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        setSortable() {
-            if (this.sortable) {
-                return;
-            }
-
-            this.showHidden = true;
-            this.sortable = true;
-            this.displayOrderModified = false;
-        },
-        onSort(event) {
-            const self = this;
-
-            if (!event || !event.el || !event.el.id) {
-                self.$toast('Unable to move category');
-                return;
-            }
-
-            const id = self.parseCategoryIdFromDomId(event.el.id);
-
-            if (!id) {
-                self.$toast('Unable to move category');
-                return;
-            }
-
-            self.transactionCategoriesStore.changeCategoryDisplayOrder({
-                categoryId: id,
-                from: event.from,
-                to: event.to
-            }).then(() => {
-                self.displayOrderModified = true;
-            }).catch(error => {
-                self.$toast(error.message || error);
-            });
-        },
-        saveSortResult() {
-            const self = this;
-
-            if (!self.displayOrderModified) {
-                self.showHidden = false;
-                self.sortable = false;
-                return;
-            }
-
-            self.displayOrderSaving = true;
-            self.$showLoading();
-
-            self.transactionCategoriesStore.updateCategoryDisplayOrders({
-                type: self.categoryType,
-                parentId: self.primaryCategoryId,
-            }).then(() => {
-                self.displayOrderSaving = false;
-                self.$hideLoading();
-
-                self.showHidden = false;
-                self.sortable = false;
-                self.displayOrderModified = false;
-            }).catch(error => {
-                self.displayOrderSaving = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        edit(category) {
-            this.f7router.navigate('/category/edit?id=' + category.id);
-        },
-        hide(category, hidden) {
-            const self = this;
-
-            self.$showLoading();
-
-            self.transactionCategoriesStore.hideCategory({
-                category: category,
-                hidden: hidden
-            }).then(() => {
-                self.$hideLoading();
-            }).catch(error => {
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        remove(category, confirm) {
-            const self = this;
-
-            if (!category) {
-                self.$alert('An error occurred');
-                return;
-            }
-
-            if (!confirm) {
-                self.categoryToDelete = category;
-                self.showDeleteActionSheet = true;
-                return;
-            }
-
-            self.showDeleteActionSheet = false;
-            self.categoryToDelete = null;
-            self.$showLoading();
-
-            self.transactionCategoriesStore.deleteCategory({
-                category: category,
-                beforeResolve: (done) => {
-                    onSwipeoutDeleted(self.getCategoryDomId(category), done);
-                }
-            }).then(() => {
-                self.$hideLoading();
-            }).catch(error => {
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        getCategoryDomId(category) {
-            return 'category_' + category.id;
-        },
-        parseCategoryIdFromDomId(domId) {
-            if (!domId || domId.indexOf('category_') !== 0) {
-                return null;
-            }
-
-            return domId.substring(9); // category_
-        }
+        return transactionCategoriesStore.allTransactionCategoriesMap[primaryCategoryId.value].secondaryCategories || [];
+    } else {
+        return [];
     }
-};
+});
+
+const title = computed<string>(() => {
+    let title = '';
+
+    switch (categoryType.value) {
+        case CategoryType.Income:
+            title = 'Income';
+            break;
+        case CategoryType.Expense:
+            title = 'Expense';
+            break;
+        case CategoryType.Transfer:
+            title = 'Transfer';
+            break;
+        default:
+            title = 'Transaction';
+            break;
+    }
+
+    switch (hasSubCategories.value) {
+        case true:
+            title += ' Primary';
+            break;
+        case false:
+            title += ' Secondary';
+            break;
+    }
+
+    return title + ' Categories';
+});
+
+const firstShowingId = computed<string | null>(() => getFirstShowingId(categories.value, showHidden.value));
+const lastShowingId = computed<string | null>(() => getLastShowingId(categories.value, showHidden.value));
+const noAvailableCategory = computed<boolean>(() => isNoAvailableCategory(categories.value, showHidden.value));
+const noCategory = computed<boolean>(() => categories.value.length < 1);
+
+function getCategoryDomId(category: TransactionCategory): string {
+    return 'category_' + category.id;
+}
+
+function parseCategoryIdFromDomId(domId: string): string | null {
+    if (!domId || domId.indexOf('category_') !== 0) {
+        return null;
+    }
+
+    return domId.substring(9); // category_
+}
+
+function init(): void {
+    const query = props.f7route.query;
+
+    categoryType.value = parseInt(query['type'] || '0');
+
+    if (categoryType.value !== CategoryType.Income &&
+        categoryType.value !== CategoryType.Expense &&
+        categoryType.value !== CategoryType.Transfer) {
+        showToast('Parameter Invalid');
+        loadingError.value = 'Parameter Invalid';
+        return;
+    }
+
+    if (query['id'] && query['id'] !== '0') {
+        primaryCategoryId.value = query['id'];
+        hasSubCategories.value = false;
+    } else {
+        primaryCategoryId.value = '0';
+        hasSubCategories.value = true;
+    }
+
+    loading.value = true;
+
+    transactionCategoriesStore.loadAllCategories({
+        force: false
+    }).then(() => {
+        loading.value = false;
+    }).catch(error => {
+        if (error.processed) {
+            loading.value = false;
+        } else {
+            loadingError.value = error;
+            showToast(error.message || error);
+        }
+    });
+}
+
+function reload(done: (() => void) | null): void {
+    if (sortable.value) {
+        done?.();
+        return;
+    }
+
+    const force = !!done;
+
+    transactionCategoriesStore.loadAllCategories({
+        force: force
+    }).then(() => {
+        done?.();
+
+        if (force) {
+            showToast('Category list has been updated');
+        }
+    }).catch(error => {
+        done?.();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function edit(category: TransactionCategory): void {
+    props.f7router.navigate('/category/edit?id=' + category.id);
+}
+
+function hide(category: TransactionCategory, hidden: boolean): void {
+    showLoading();
+
+    transactionCategoriesStore.hideCategory({
+        category: category,
+        hidden: hidden
+    }).then(() => {
+        hideLoading();
+    }).catch(error => {
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function remove(category: TransactionCategory | null, confirm: boolean): void {
+    if (!category) {
+        showAlert('An error occurred');
+        return;
+    }
+
+    if (!confirm) {
+        categoryToDelete.value = category;
+        showDeleteActionSheet.value = true;
+        return;
+    }
+
+    showDeleteActionSheet.value = false;
+    categoryToDelete.value = null;
+    showLoading();
+
+    transactionCategoriesStore.deleteCategory({
+        category: category,
+        beforeResolve: (done) => {
+            onSwipeoutDeleted(getCategoryDomId(category), done);
+        }
+    }).then(() => {
+        hideLoading();
+    }).catch(error => {
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function setSortable(): void {
+    if (sortable.value) {
+        return;
+    }
+
+    showHidden.value = true;
+    sortable.value = true;
+    displayOrderModified.value = false;
+}
+
+function saveSortResult(): void {
+    if (!displayOrderModified.value) {
+        showHidden.value = false;
+        sortable.value = false;
+        return;
+    }
+
+    displayOrderSaving.value = true;
+    showLoading();
+
+    transactionCategoriesStore.updateCategoryDisplayOrders({
+        type: categoryType.value as CategoryType,
+        parentId: primaryCategoryId.value
+    }).then(() => {
+        displayOrderSaving.value = false;
+        hideLoading();
+
+        showHidden.value = false;
+        sortable.value = false;
+        displayOrderModified.value = false;
+    }).catch(error => {
+        displayOrderSaving.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function onPageAfterIn(): void {
+    if (transactionCategoriesStore.transactionCategoryListStateInvalid && !loading.value) {
+        reload(null);
+    }
+
+    routeBackOnError(props.f7router, loadingError);
+}
+
+function onSort(event: { el: { id: string }; from: number; to: number }): void {
+    if (!event || !event.el || !event.el.id) {
+        showToast('Unable to move category');
+        return;
+    }
+
+    const id = parseCategoryIdFromDomId(event.el.id);
+
+    if (!id) {
+        showToast('Unable to move category');
+        return;
+    }
+
+    transactionCategoriesStore.changeCategoryDisplayOrder({
+        categoryId: id,
+        from: event.from,
+        to: event.to
+    }).then(() => {
+        displayOrderModified.value = true;
+    }).catch(error => {
+        showToast(error.message || error);
+    });
+}
+
+init();
 </script>
 
 <style>