From eb2b6d1002369678f51cf11177b8905ecb225fb6 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 11 Jan 2025 23:09:03 +0800
Subject: [PATCH] migrate transaction tag list page to composition API and
 typescript

---
 src/components/desktop/ConfirmDialog.vue |  26 +-
 src/components/desktop/SnackBar.vue      |   9 +-
 src/lib/{tag.js => tag.ts}               |  10 +-
 src/lib/ui/mobile.ts                     |  20 +-
 src/views/desktop/tags/ListPage.vue      | 466 ++++++++++----------
 src/views/mobile/tags/ListPage.vue       | 525 +++++++++++------------
 6 files changed, 534 insertions(+), 522 deletions(-)
 rename src/lib/{tag.js => tag.ts} (59%)

diff --git a/src/components/desktop/ConfirmDialog.vue b/src/components/desktop/ConfirmDialog.vue
index ea72fca5..3b58fc28 100644
--- a/src/components/desktop/ConfirmDialog.vue
+++ b/src/components/desktop/ConfirmDialog.vue
@@ -19,7 +19,7 @@ import { ref, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
-import { isString } from '@/lib/common.ts';
+import { isString, isObject } from '@/lib/common.ts';
 
 const props = defineProps<{
     show?: boolean
@@ -42,16 +42,26 @@ const finalColor = ref<string>(props.color || 'primary');
 let resolveFunc: ((value?: unknown) => void) | null = null;
 let rejectFunc: ((reason?: unknown) => void) | null = null;
 
-function open(titleOrText: string, textOrOptions: string | Record<string, unknown>, options: Record<string, unknown>): Promise<unknown> {
+function open(titleOrText: string, textOrOptions?: string | Record<string, unknown>, options?: Record<string, unknown>): Promise<unknown> {
     showState.value = true;
 
-    if (isString(textOrOptions)) { // second parameter is text
-        titleContent.value = tt(titleOrText, options);
-        textContent.value = tt(textOrOptions as string, options);
-    } else { // second parameter is options
-        const actualOptions = textOrOptions as Record<string, unknown>;
+    if (!textOrOptions || isObject(textOrOptions)) { // only one parameter or second parameter is options
         titleContent.value = tt('global.app.title');
-        textContent.value = tt(titleOrText, actualOptions);
+
+        if (!textOrOptions) {
+            textContent.value = tt(titleOrText);
+        } else {
+            const actualOptions = textOrOptions as Record<string, unknown>;
+            textContent.value = tt(titleOrText, actualOptions);
+        }
+    } else if (isString(textOrOptions)) { // second parameter is text
+        if (!options) {
+            titleContent.value = tt(titleOrText);
+            textContent.value = tt(textOrOptions as string);
+        } else {
+            titleContent.value = tt(titleOrText, options);
+            textContent.value = tt(textOrOptions as string, options);
+        }
     }
 
     if (options && isString(options.color)) {
diff --git a/src/components/desktop/SnackBar.vue b/src/components/desktop/SnackBar.vue
index 40e19af4..29bb00ad 100644
--- a/src/components/desktop/SnackBar.vue
+++ b/src/components/desktop/SnackBar.vue
@@ -24,9 +24,14 @@ const { tt, te } = useI18n();
 const showState= ref<boolean>(false);
 const messageContent = ref<string>('');
 
-function showMessage(message: string, options: Record<string, unknown>): void {
+function showMessage(message: string, options?: Record<string, unknown>): void {
     showState.value = true;
-    messageContent.value = tt(message, options);
+
+    if (options) {
+        messageContent.value = tt(message, options);
+    } else {
+        messageContent.value = tt(message);
+    }
 }
 
 function showError(error: string | { message: string }): void {
diff --git a/src/lib/tag.js b/src/lib/tag.ts
similarity index 59%
rename from src/lib/tag.js
rename to src/lib/tag.ts
index 6938ec94..03d15fae 100644
--- a/src/lib/tag.js
+++ b/src/lib/tag.ts
@@ -1,4 +1,6 @@
-export function isNoAvailableTag(tags, showHidden) {
+import { TransactionTag } from '@/models/transaction_tag.ts';
+
+export function isNoAvailableTag(tags: TransactionTag[], showHidden: boolean): boolean {
     for (let i = 0; i < tags.length; i++) {
         if (showHidden || !tags[i].hidden) {
             return false;
@@ -8,7 +10,7 @@ export function isNoAvailableTag(tags, showHidden) {
     return true;
 }
 
-export function getAvailableTagCount(tags, showHidden) {
+export function getAvailableTagCount(tags: TransactionTag[], showHidden: boolean): number {
     let count = 0;
 
     for (let i = 0; i < tags.length; i++) {
@@ -20,7 +22,7 @@ export function getAvailableTagCount(tags, showHidden) {
     return count;
 }
 
-export function getFirstShowingId(tags, showHidden) {
+export function getFirstShowingId(tags: TransactionTag[], showHidden: boolean): string | null {
     for (let i = 0; i < tags.length; i++) {
         if (showHidden || !tags[i].hidden) {
             return tags[i].id;
@@ -30,7 +32,7 @@ export function getFirstShowingId(tags, showHidden) {
     return null;
 }
 
-export function getLastShowingId(tags, showHidden) {
+export function getLastShowingId(tags: TransactionTag[], showHidden: boolean): string | null {
     for (let i = tags.length - 1; i >= 0; i--) {
         if (showHidden || !tags[i].hidden) {
             return tags[i].id;
diff --git a/src/lib/ui/mobile.ts b/src/lib/ui/mobile.ts
index 3bed4fb8..092a1a21 100644
--- a/src/lib/ui/mobile.ts
+++ b/src/lib/ui/mobile.ts
@@ -1,3 +1,4 @@
+import { type Ref, watch } from 'vue';
 import { useI18n as useVueI18n } from 'vue-i18n';
 import { f7, f7ready } from 'framework7-vue';
 import type { Dialog, Picker, Router } from 'framework7/types';
@@ -211,9 +212,26 @@ export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector:
 export function useI18nUIComponents() {
     const i18nGlobal = useVueI18n();
 
+    function routeBackOnError<T>(f7router: Router.Router, errorRef: Ref<T>): void {
+        const unwatch = watch(errorRef, (newValue) => {
+            if (newValue) {
+                setTimeout(() => {
+                    if (unwatch) {
+                        unwatch();
+                    }
+
+                    f7router.back();
+                }, 200);
+            }
+        }, {
+            immediate: true
+        });
+    }
+
     return {
         showAlert: (message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void) => showAlert(message, confirmCallback, i18nGlobal.t),
         showConfirm: (message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback: (dialog: Dialog.Dialog, e: Event) => void): void => showConfirm(message, confirmCallback, cancelCallback, i18nGlobal.t),
-        showToast: (message: string, timeout?: number): void => showToast(message, timeout, i18nGlobal.t)
+        showToast: (message: string, timeout?: number): void => showToast(message, timeout, i18nGlobal.t),
+        routeBackOnError
     }
 }
diff --git a/src/views/desktop/tags/ListPage.vue b/src/views/desktop/tags/ListPage.vue
index e6ec602f..6b01fc03 100644
--- a/src/views/desktop/tags/ListPage.vue
+++ b/src/views/desktop/tags/ListPage.vue
@@ -4,12 +4,12 @@
             <v-card>
                 <template #title>
                     <div class="title-and-toolbar d-flex align-center">
-                        <span>{{ $t('Transaction Tags') }}</span>
+                        <span>{{ tt('Transaction Tags') }}</span>
                         <v-btn class="ml-3" color="default" variant="outlined"
-                               :disabled="loading || updating || hasEditingTag" @click="add">{{ $t('Add') }}</v-btn>
+                               :disabled="loading || updating || hasEditingTag" @click="add">{{ tt('Add') }}</v-btn>
                         <v-btn class="ml-3" color="primary" variant="tonal"
                                :disabled="loading || updating || hasEditingTag" @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" :disabled="loading || updating || hasEditingTag"
                                :loading="loading" @click="reload">
@@ -17,7 +17,7 @@
                                 <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"
@@ -26,10 +26,10 @@
                             <v-menu activator="parent">
                                 <v-list>
                                     <v-list-item :prepend-icon="icons.show"
-                                                 :title="$t('Show Hidden Transaction Tags')"
+                                                 :title="tt('Show Hidden Transaction Tags')"
                                                  v-if="!showHidden" @click="showHidden = true"></v-list-item>
                                     <v-list-item :prepend-icon="icons.hide"
-                                                 :title="$t('Hide Hidden Transaction Tags')"
+                                                 :title="tt('Hide Hidden Transaction Tags')"
                                                  v-if="showHidden" @click="showHidden = false"></v-list-item>
                                 </v-list>
                             </v-menu>
@@ -42,9 +42,9 @@
                     <tr>
                         <th>
                             <div class="d-flex align-center">
-                                <span>{{ $t('Tag Title') }}</span>
+                                <span>{{ tt('Tag Title') }}</span>
                                 <v-spacer/>
-                                <span>{{ $t('Operation') }}</span>
+                                <span>{{ tt('Operation') }}</span>
                             </div>
                         </th>
                     </tr>
@@ -60,7 +60,7 @@
 
                     <tbody v-if="!loading && noAvailableTag && !newTag">
                     <tr>
-                        <td>{{ $t('No available tag') }}</td>
+                        <td>{{ tt('No available tag') }}</td>
                     </tr>
                     </tbody>
 
@@ -89,7 +89,7 @@
                                         <v-text-field class="w-100 mr-2" type="text"
                                             density="compact" variant="underlined"
                                             :disabled="loading || updating"
-                                            :placeholder="$t('Tag Title')"
+                                            :placeholder="tt('Tag Title')"
                                             v-model="editingTag.name"
                                             v-else-if="editingTag.id === element.id"
                                             @keyup.enter="save(editingTag)"
@@ -117,7 +117,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"
@@ -130,7 +130,7 @@
                                             <template #loader>
                                                 <v-progress-circular indeterminate size="20" width="2"/>
                                             </template>
-                                            {{ $t('Edit') }}
+                                            {{ tt('Edit') }}
                                         </v-btn>
                                         <v-btn class="px-2" color="default"
                                                density="comfortable" variant="text"
@@ -143,7 +143,7 @@
                                             <template #loader>
                                                 <v-progress-circular indeterminate size="20" width="2"/>
                                             </template>
-                                            {{ $t('Delete') }}
+                                            {{ tt('Delete') }}
                                         </v-btn>
                                         <v-btn class="px-2"
                                                density="comfortable" variant="text"
@@ -154,19 +154,19 @@
                                             <template #loader>
                                                 <v-progress-circular indeterminate size="20" width="2"/>
                                             </template>
-                                            {{ $t('Save') }}
+                                            {{ tt('Save') }}
                                         </v-btn>
                                         <v-btn class="px-2" color="default"
                                                density="comfortable" variant="text"
                                                :prepend-icon="icons.cancel"
                                                :disabled="loading || updating"
                                                v-if="editingTag.id === element.id" @click="cancelSave(editingTag)">
-                                            {{ $t('Cancel') }}
+                                            {{ tt('Cancel') }}
                                         </v-btn>
                                         <span class="ml-2">
-                                            <v-icon :class="!loading && !updating && availableTagCount > 1 ? 'drag-handle' : 'disabled'"
+                                            <v-icon :class="!loading && !updating && !hasEditingTag && availableTagCount > 1 ? 'drag-handle' : 'disabled'"
                                                     :icon="icons.drag"/>
-                                            <v-tooltip activator="parent" v-if="!loading && !updating && availableTagCount > 1">{{ $t('Drag to Reorder') }}</v-tooltip>
+                                            <v-tooltip activator="parent" v-if="!loading && !updating && !hasEditingTag && availableTagCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
                                         </span>
                                     </div>
                                 </td>
@@ -175,12 +175,12 @@
                     </draggable-list>
 
                     <tbody v-if="newTag">
-                    <tr class="text-sm" :class="{ 'even-row': availableTagCount & 1 === 1}">
+                    <tr class="text-sm" :class="{ 'even-row': (availableTagCount & 1) === 1}">
                         <td>
                             <div class="d-flex align-center">
                                 <v-text-field class="w-100 mr-2" type="text" color="primary"
                                               density="compact" variant="underlined"
-                                              :disabled="loading || updating" :placeholder="$t('Tag Title')"
+                                              :disabled="loading || updating" :placeholder="tt('Tag Title')"
                                               v-model="newTag.name" @keyup.enter="save(newTag)">
                                     <template #prepend>
                                         <v-icon size="20" start :icon="icons.tag"/>
@@ -191,20 +191,20 @@
 
                                 <v-btn class="px-2" density="comfortable" variant="text"
                                        :prepend-icon="icons.confirm"
-                                       :loading="tagUpdating[null]"
+                                       :loading="tagUpdating['']"
                                        :disabled="loading || updating || !isTagModified(newTag)"
                                        @click="save(newTag)">
                                     <template #loader>
                                         <v-progress-circular indeterminate size="20" width="2"/>
                                     </template>
-                                    {{ $t('Save') }}
+                                    {{ tt('Save') }}
                                 </v-btn>
                                 <v-btn class="px-2" color="default"
                                        density="comfortable" variant="text"
                                        :prepend-icon="icons.cancel"
                                        :disabled="loading || updating"
                                        @click="cancelSave(newTag)">
-                                    {{ $t('Cancel') }}
+                                    {{ tt('Cancel') }}
                                 </v-btn>
                                 <span class="ml-2">
                                     <v-icon class="disabled" :icon="icons.drag"/>
@@ -222,8 +222,14 @@
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 
 import { TransactionTag } from '@/models/transaction_tag.ts';
@@ -231,7 +237,7 @@ import { TransactionTag } from '@/models/transaction_tag.ts';
 import {
     isNoAvailableTag,
     getAvailableTagCount
-} from '@/lib/tag.js';
+} from '@/lib/tag.ts';
 
 import {
     mdiRefresh,
@@ -247,226 +253,214 @@ import {
     mdiPound
 } from '@mdi/js';
 
-export default {
-    data() {
-        return {
-            newTag: null,
-            editingTag: TransactionTag.createNewTag(),
-            loading: true,
-            updating: false,
-            tagUpdating: {},
-            tagHiding: {},
-            tagRemoving: {},
-            displayOrderModified: false,
-            showHidden: false,
-            icons: {
-                refresh: mdiRefresh,
-                add: mdiPlus,
-                edit: mdiPencilOutline,
-                confirm: mdiCheck,
-                cancel: mdiClose,
-                show: mdiEyeOutline,
-                hide: mdiEyeOffOutline,
-                remove: mdiDeleteOutline,
-                drag: mdiDrag,
-                more: mdiDotsVertical,
-                tag: mdiPound
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useTransactionTagsStore),
-        tags() {
-            return this.transactionTagsStore.allTransactionTags;
-        },
-        noAvailableTag() {
-            return isNoAvailableTag(this.tags, this.showHidden);
-        },
-        availableTagCount() {
-            return getAvailableTagCount(this.tags, this.showHidden);
-        },
-        hasEditingTag() {
-            return !!(this.newTag || (this.editingTag.id && this.editingTag.id !== ''));
-        }
-    },
-    created() {
-        const self = this;
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
+type SnackBarType = InstanceType<typeof SnackBar>;
 
-        self.loading = true;
+const icons = {
+    refresh: mdiRefresh,
+    add: mdiPlus,
+    edit: mdiPencilOutline,
+    confirm: mdiCheck,
+    cancel: mdiClose,
+    show: mdiEyeOutline,
+    hide: mdiEyeOffOutline,
+    remove: mdiDeleteOutline,
+    drag: mdiDrag,
+    more: mdiDotsVertical,
+    tag: mdiPound
+};
 
-        self.transactionTagsStore.loadAllTags({
-            force: false
-        }).then(() => {
-            self.loading = false;
-        }).catch(error => {
-            self.loading = false;
+const newTag = ref<TransactionTag | null>(null);
+const editingTag = ref<TransactionTag>(TransactionTag.createNewTag());
+const loading = ref<boolean>(true);
+const updating = ref<boolean>(false);
+const tagUpdating = ref<Record<string, boolean>>({});
+const tagHiding = ref<Record<string, boolean>>({});
+const tagRemoving = ref<Record<string, boolean>>({});
+const displayOrderModified = ref<boolean>(false);
+const showHidden = ref<boolean>(false);
 
-            if (!error.processed) {
-                self.$refs.snackbar.showError(error);
-            }
-        });
-    },
-    methods: {
-        reload() {
-            if (this.hasEditingTag) {
-                return;
-            }
+const { tt } = useI18n();
 
-            const self = this;
-            self.loading = true;
+const transactionTagsStore = useTransactionTagsStore();
 
-            self.transactionTagsStore.loadAllTags({
-                force: true
-            }).then(() => {
-                self.loading = false;
-                self.displayOrderModified = false;
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
-                self.$refs.snackbar.showMessage('Tag list has been updated');
-            }).catch(error => {
-                self.loading = false;
+const tags = computed(() => transactionTagsStore.allTransactionTags);
+const noAvailableTag = computed(() => isNoAvailableTag(tags.value, showHidden.value));
+const availableTagCount = computed(() => getAvailableTagCount(tags.value, showHidden.value));
+const hasEditingTag = computed(() => !!(newTag.value || (editingTag.value.id && editingTag.value.id !== '')));
 
-                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 tag');
-                return;
-            }
-
-            self.transactionTagsStore.changeTagDisplayOrder({
-                tagId: 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.transactionTagsStore.updateTagDisplayOrders().then(() => {
-                self.loading = false;
-                self.displayOrderModified = false;
-            }).catch(error => {
-                self.loading = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        add() {
-            this.newTag = TransactionTag.createNewTag();
-        },
-        edit(tag) {
-            this.editingTag.id = tag.id;
-            this.editingTag.name = tag.name;
-        },
-        save(tag) {
-            const self = this;
-
-            self.updating = true;
-            self.tagUpdating[tag.id || null] = true;
-
-            self.transactionTagsStore.saveTag({
-                tag: tag
-            }).then(() => {
-                self.updating = false;
-                self.tagUpdating[tag.id || null] = false;
-
-                if (tag.id) {
-                    self.editingTag.id = '';
-                    self.editingTag.name = '';
-                } else {
-                    self.newTag = null;
-                }
-            }).catch(error => {
-                self.updating = false;
-                self.tagUpdating[tag.id || null] = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        cancelSave(tag) {
-            if (tag.id) {
-                this.editingTag.id = '';
-                this.editingTag.name = '';
-            } else {
-                this.newTag = null;
-            }
-        },
-        isTagModified(tag) {
-            if (tag.id) {
-                return this.editingTag.name !== '' && this.editingTag.name !== tag.name;
-            } else {
-                return tag.name !== '';
-            }
-        },
-        hide(tag, hidden) {
-            const self = this;
-
-            self.updating = true;
-            self.tagHiding[tag.id] = true;
-
-            self.transactionTagsStore.hideTag({
-                tag: tag,
-                hidden: hidden
-            }).then(() => {
-                self.updating = false;
-                self.tagHiding[tag.id] = false;
-            }).catch(error => {
-                self.updating = false;
-                self.tagHiding[tag.id] = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        remove(tag) {
-            const self = this;
-
-            self.$refs.confirmDialog.open('Are you sure you want to delete this tag?').then(() => {
-                self.updating = true;
-                self.tagRemoving[tag.id] = true;
-
-                self.transactionTagsStore.deleteTag({
-                    tag: tag
-                }).then(() => {
-                    self.updating = false;
-                    self.tagRemoving[tag.id] = false;
-                }).catch(error => {
-                    self.updating = false;
-                    self.tagRemoving[tag.id] = false;
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            });
-        }
+function isTagModified(tag: TransactionTag): boolean {
+    if (tag.id) {
+        return editingTag.value.name !== '' && editingTag.value.name !== tag.name;
+    } else {
+        return tag.name !== '';
     }
 }
+
+function reload(): void {
+    if (hasEditingTag.value) {
+        return;
+    }
+
+    loading.value = true;
+
+    transactionTagsStore.loadAllTags({
+        force: true
+    }).then(() => {
+        loading.value = false;
+        displayOrderModified.value = false;
+
+        snackbar.value?.showMessage('Tag list has been updated');
+    }).catch(error => {
+        loading.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function add(): void {
+    newTag.value = TransactionTag.createNewTag();
+}
+
+function edit(tag: TransactionTag): void {
+    editingTag.value.id = tag.id;
+    editingTag.value.name = tag.name;
+}
+
+function save(tag: TransactionTag): void {
+    updating.value = true;
+    tagUpdating.value[tag.id || ''] = true;
+
+    transactionTagsStore.saveTag({
+        tag: tag
+    }).then(() => {
+        updating.value = false;
+        tagUpdating.value[tag.id || ''] = false;
+
+        if (tag.id) {
+            editingTag.value.id = '';
+            editingTag.value.name = '';
+        } else {
+            newTag.value = null;
+        }
+    }).catch(error => {
+        updating.value = false;
+        tagUpdating.value[tag.id || ''] = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function cancelSave(tag: TransactionTag): void {
+    if (tag.id) {
+        editingTag.value.id = '';
+        editingTag.value.name = '';
+    } else {
+        newTag.value = null;
+    }
+}
+
+function saveSortResult(): void {
+    if (!displayOrderModified.value) {
+        return;
+    }
+
+    loading.value = true;
+
+    transactionTagsStore.updateTagDisplayOrders().then(() => {
+        loading.value = false;
+        displayOrderModified.value = false;
+    }).catch(error => {
+        loading.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function hide(tag: TransactionTag, hidden: boolean): void {
+    updating.value = true;
+    tagHiding.value[tag.id] = true;
+
+    transactionTagsStore.hideTag({
+        tag: tag,
+        hidden: hidden
+    }).then(() => {
+        updating.value = false;
+        tagHiding.value[tag.id] = false;
+    }).catch(error => {
+        updating.value = false;
+        tagHiding.value[tag.id] = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function remove(tag: TransactionTag): void {
+    confirmDialog.value?.open('Are you sure you want to delete this tag?').then(() => {
+        updating.value = true;
+        tagRemoving.value[tag.id] = true;
+
+        transactionTagsStore.deleteTag({
+            tag: tag
+        }).then(() => {
+            updating.value = false;
+            tagRemoving.value[tag.id] = false;
+        }).catch(error => {
+            updating.value = false;
+            tagRemoving.value[tag.id] = 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 tag');
+        return;
+    }
+
+    transactionTagsStore.changeTagDisplayOrder({
+        tagId: moveEvent.element.id,
+        from: moveEvent.oldIndex,
+        to: moveEvent.newIndex
+    }).then(() => {
+        displayOrderModified.value = true;
+    }).catch(error => {
+        snackbar.value?.showError(error);
+    });
+}
+
+transactionTagsStore.loadAllTags({
+    force: false
+}).then(() => {
+    loading.value = false;
+}).catch(error => {
+    loading.value = false;
+
+    if (!error.processed) {
+        snackbar.value?.showError(error);
+    }
+});
 </script>
 
 <style>
diff --git a/src/views/mobile/tags/ListPage.vue b/src/views/mobile/tags/ListPage.vue
index f3f26d57..dcee9e39 100644
--- a/src/views/mobile/tags/ListPage.vue
+++ b/src/views/mobile/tags/ListPage.vue
@@ -1,12 +1,12 @@
 <template>
     <f7-page :ptr="!sortable && !hasEditingTag" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t('Transaction Tags')"></f7-nav-title>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-title :title="tt('Transaction Tags')"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
                 <f7-link :class="{ 'disabled': hasEditingTag || !tags.length }" icon-f7="ellipsis" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link :class="{ 'disabled': hasEditingTag }" icon-f7="plus" v-if="!sortable" @click="add"></f7-link>
-                <f7-link :text="$t('Done')" :class="{ 'disabled': displayOrderSaving || hasEditingTag }" v-else-if="sortable" @click="saveSortResult"></f7-link>
+                <f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving || hasEditingTag }" v-else-if="sortable" @click="saveSortResult"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -24,7 +24,7 @@
         </f7-list>
 
         <f7-list strong inset dividers class="tag-item-list margin-top" v-if="!loading && noAvailableTag && !newTag">
-            <f7-list-item :title="$t('No available tag')"></f7-list-item>
+            <f7-list-item :title="tt('No available tag')"></f7-list-item>
         </f7-list>
 
         <f7-list strong inset dividers sortable class="tag-item-list margin-top"
@@ -52,7 +52,7 @@
                         </div>
                         <f7-input class="list-title-input padding-left-half"
                                   type="text"
-                                  :placeholder="$t('Tag Title')"
+                                  :placeholder="tt('Tag Title')"
                                   v-else-if="editingTag.id === tag.id"
                                   v-model:value="editingTag.name"
                                   @keyup.enter="save(tag)">
@@ -82,7 +82,7 @@
                     </f7-swipeout-button>
                 </f7-swipeout-actions>
                 <f7-swipeout-actions right v-if="!sortable && editingTag.id !== tag.id">
-                    <f7-swipeout-button color="orange" close :text="$t('Edit')" @click="edit(tag)"></f7-swipeout-button>
+                    <f7-swipeout-button color="orange" close :text="tt('Edit')" @click="edit(tag)"></f7-swipeout-button>
                     <f7-swipeout-button color="red" class="padding-left padding-right" @click="remove(tag, false)">
                         <f7-icon f7="trash"></f7-icon>
                     </f7-swipeout-button>
@@ -97,7 +97,7 @@
                     <div class="display-flex">
                         <f7-input class="list-title-input padding-left-half"
                                   type="text"
-                                  :placeholder="$t('Tag Title')"
+                                  :placeholder="tt('Tag Title')"
                                   v-model:value="newTag.name"
                                   @keyup.enter="save(newTag)">
                         </f7-input>
@@ -122,29 +122,34 @@
 
         <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 Tags') }}</f7-actions-button>
-                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Transaction Tags') }}</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 Tags') }}</f7-actions-button>
+                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ tt('Hide Hidden Transaction Tags') }}</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 tag?') }}</f7-actions-label>
-                <f7-actions-button color="red" @click="remove(tagToDelete, true)">{{ $t('Delete') }}</f7-actions-button>
+                <f7-actions-label>{{ tt('Are you sure you want to delete this tag?') }}</f7-actions-label>
+                <f7-actions-button color="red" @click="remove(tagToDelete, 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 { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 
 import { TransactionTag } from '@/models/transaction_tag.ts';
@@ -153,269 +158,247 @@ import {
     isNoAvailableTag,
     getFirstShowingId,
     getLastShowingId
-} from '@/lib/tag.js';
-import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
+} from '@/lib/tag.ts';
 
-export default {
-    props: [
-        'f7router'
-    ],
-    data() {
-        return {
-            newTag: null,
-            editingTag: TransactionTag.createNewTag(),
-            loading: true,
-            loadingError: null,
-            showHidden: false,
-            sortable: false,
-            tagToDelete: null,
-            showMoreActionSheet: false,
-            showDeleteActionSheet: false,
-            editSaving: false,
-            displayOrderModified: false,
-            displayOrderSaving: false
-        };
-    },
-    computed: {
-        ...mapStores(useTransactionTagsStore),
-        tags() {
-            return this.transactionTagsStore.allTransactionTags;
-        },
-        firstShowingId() {
-            return getFirstShowingId(this.tags, this.showHidden);
-        },
-        lastShowingId() {
-            return getLastShowingId(this.tags, this.showHidden);
-        },
-        noAvailableTag() {
-            return isNoAvailableTag(this.tags, this.showHidden);
-        },
-        hasEditingTag() {
-            return !!(this.newTag || (this.editingTag.id && this.editingTag.id !== ''));
-        }
-    },
-    created() {
-        const self = this;
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
 
-        self.loading = true;
+const newTag = ref<TransactionTag | null>(null);
+const editingTag = ref<TransactionTag>(TransactionTag.createNewTag());
+const loading = ref<boolean>(true);
+const loadingError = ref<unknown | null>(null);
+const showHidden = ref<boolean>(false);
+const sortable = ref<boolean>(false);
+const tagToDelete = ref<TransactionTag | null>(null);
+const showMoreActionSheet = ref<boolean>(false);
+const showDeleteActionSheet = ref<boolean>(false);
+const displayOrderModified = ref<boolean>(false);
+const displayOrderSaving = ref<boolean>(false);
 
-        self.transactionTagsStore.loadAllTags({
-            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() {
-            this.$routeBackOnError(this.f7router, 'loadingError');
-        },
-        reload(done) {
-            if (this.sortable || this.hasEditingTag) {
-                done();
-                return;
-            }
+const { tt } = useI18n();
+const { showToast, routeBackOnError } = useI18nUIComponents();
 
-            const self = this;
-            const force = !!done;
+const transactionTagsStore = useTransactionTagsStore();
 
-            self.transactionTagsStore.loadAllTags({
-                force: force
-            }).then(() => {
-                if (done) {
-                    done();
-                }
+const tags = computed(() => transactionTagsStore.allTransactionTags);
+const firstShowingId = computed(() => getFirstShowingId(tags.value, showHidden.value));
+const lastShowingId = computed(() => getLastShowingId(tags.value, showHidden.value));
+const noAvailableTag = computed(() => isNoAvailableTag(tags.value, showHidden.value));
+const hasEditingTag = computed(() => !!(newTag.value || (editingTag.value.id && editingTag.value.id !== '')));
 
-                if (force) {
-                    self.$toast('Tag list has been updated');
-                }
-            }).catch(error => {
-                if (done) {
-                    done();
-                }
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        setSortable() {
-            if (this.sortable || this.hasEditingTag) {
-                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 tag');
-                return;
-            }
-
-            const id = self.parseTagIdFromDomId(event.el.id);
-
-            if (!id) {
-                self.$toast('Unable to move tag');
-                return;
-            }
-
-            self.transactionTagsStore.changeTagDisplayOrder({
-                tagId: 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.transactionTagsStore.updateTagDisplayOrders().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);
-                }
-            });
-        },
-        add() {
-            this.newTag = TransactionTag.createNewTag();
-        },
-        edit(tag) {
-            this.editingTag.id = tag.id;
-            this.editingTag.name = tag.name;
-        },
-        save(tag) {
-            const self = this;
-
-            self.$showLoading();
-
-            self.transactionTagsStore.saveTag({
-                tag: tag
-            }).then(() => {
-                self.$hideLoading();
-
-                if (tag.id) {
-                    self.editingTag.id = '';
-                    self.editingTag.name = '';
-                } else {
-                    self.newTag = null;
-                }
-            }).catch(error => {
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        cancelSave(tag) {
-            if (tag.id) {
-                this.editingTag.id = '';
-                this.editingTag.name = '';
-            } else {
-                this.newTag = null;
-            }
-        },
-        isTagModified(tag) {
-            if (tag.id) {
-                return this.editingTag.name !== '' && this.editingTag.name !== tag.name;
-            } else {
-                return tag.name !== '';
-            }
-        },
-        hide(tag, hidden) {
-            const self = this;
-
-            self.$showLoading();
-
-            self.transactionTagsStore.hideTag({
-                tag: tag,
-                hidden: hidden
-            }).then(() => {
-                self.$hideLoading();
-            }).catch(error => {
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        remove(tag, confirm) {
-            const self = this;
-
-            if (!tag) {
-                self.$alert('An error occurred');
-                return;
-            }
-
-            if (!confirm) {
-                self.tagToDelete = tag;
-                self.showDeleteActionSheet = true;
-                return;
-            }
-
-            self.showDeleteActionSheet = false;
-            self.tagToDelete = null;
-            self.$showLoading();
-
-            self.transactionTagsStore.deleteTag({
-                tag: tag,
-                beforeResolve: (done) => {
-                    onSwipeoutDeleted(self.getTagDomId(tag), done);
-                }
-            }).then(() => {
-                self.$hideLoading();
-            }).catch(error => {
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        getTagDomId(category) {
-            return 'tag_' + category.id;
-        },
-        parseTagIdFromDomId(domId) {
-            if (!domId || domId.indexOf('tag_') !== 0) {
-                return null;
-            }
-
-            return domId.substring(4); // tag_
-        }
+function isTagModified(tag: TransactionTag): boolean {
+    if (tag.id) {
+        return editingTag.value.name !== '' && editingTag.value.name !== tag.name;
+    } else {
+        return tag.name !== '';
     }
 }
+
+function getTagDomId(tag: TransactionTag): string {
+    return 'tag_' + tag.id;
+}
+
+function parseTagIdFromDomId(domId: string): string | null {
+    if (!domId || domId.indexOf('tag_') !== 0) {
+        return null;
+    }
+
+    return domId.substring(4); // tag_
+}
+
+function reload(done?: () => void): void {
+    if (sortable.value || hasEditingTag.value) {
+        done?.();
+        return;
+    }
+
+    const force = !!done;
+
+    transactionTagsStore.loadAllTags({
+        force: force
+    }).then(() => {
+        done?.();
+
+        if (force) {
+            showToast('Tag list has been updated');
+        }
+    }).catch(error => {
+        done?.();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function add(): void {
+    newTag.value = TransactionTag.createNewTag();
+}
+
+function edit(tag: TransactionTag): void {
+    editingTag.value.id = tag.id;
+    editingTag.value.name = tag.name;
+}
+
+function save(tag: TransactionTag): void {
+    showLoading();
+
+    transactionTagsStore.saveTag({
+        tag: tag
+    }).then(() => {
+        hideLoading();
+
+        if (tag.id) {
+            editingTag.value.id = '';
+            editingTag.value.name = '';
+        } else {
+            newTag.value = null;
+        }
+    }).catch(error => {
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function cancelSave(tag: TransactionTag): void {
+    if (tag.id) {
+        editingTag.value.id = '';
+        editingTag.value.name = '';
+    } else {
+        newTag.value = null;
+    }
+}
+
+function setSortable(): void {
+    if (sortable.value || hasEditingTag.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();
+
+    transactionTagsStore.updateTagDisplayOrders().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 hide(tag: TransactionTag, hidden: boolean): void {
+    showLoading();
+
+    transactionTagsStore.hideTag({
+        tag: tag,
+        hidden: hidden
+    }).then(() => {
+        hideLoading();
+    }).catch(error => {
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function remove(tag: TransactionTag | null, confirm: boolean): void {
+    if (!tag) {
+        showToast('An error occurred');
+        return;
+    }
+
+    if (!confirm) {
+        tagToDelete.value = tag;
+        showDeleteActionSheet.value = true;
+        return;
+    }
+
+    showDeleteActionSheet.value = false;
+    tagToDelete.value = null;
+    showLoading();
+
+    transactionTagsStore.deleteTag({
+        tag: tag,
+        beforeResolve: (done) => {
+            onSwipeoutDeleted(getTagDomId(tag), done);
+        }
+    }).then(() => {
+        hideLoading();
+    }).catch(error => {
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function onPageAfterIn(): void {
+    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 tag');
+        return;
+    }
+
+    const id = parseTagIdFromDomId(event.el.id);
+
+    if (!id) {
+        showToast('Unable to move tag');
+        return;
+    }
+
+    transactionTagsStore.changeTagDisplayOrder({
+        tagId: id,
+        from: event.from,
+        to: event.to
+    }).then(() => {
+        displayOrderModified.value = true;
+    }).catch(error => {
+        showToast(error.message || error);
+    });
+}
+
+transactionTagsStore.loadAllTags({
+    force: false
+}).then(() => {
+    loading.value = false;
+}).catch(error => {
+    if (error.processed) {
+        loading.value = false;
+    } else {
+        loadingError.value = error;
+        showToast(error.message || error);
+    }
+});
 </script>
 
 <style>