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

---
 .../mobile/TransactionTagSelectionSheet.vue   |   8 +-
 src/core/base.ts                              |   2 +
 src/lib/services.ts                           |   2 +-
 src/models/transaction_tag.ts                 |  45 +++
 src/stores/index.js                           |   2 +-
 src/stores/transactionTag.js                  | 344 -----------------
 src/stores/transactionTag.ts                  | 356 ++++++++++++++++++
 .../TransactionTagFilterSettingsCard.vue      |   2 +-
 src/views/desktop/tags/ListPage.vue           |  13 +-
 src/views/desktop/transactions/ListPage.vue   |   2 +-
 .../list/dialogs/BatchReplaceDialog.vue       |   2 +-
 .../transactions/list/dialogs/EditDialog.vue  |   2 +-
 .../list/dialogs/ImportDialog.vue             |   2 +-
 .../TransactionTagFilterSettingsPage.vue      |   2 +-
 src/views/mobile/tags/ListPage.vue            |  14 +-
 src/views/mobile/transactions/EditPage.vue    |   2 +-
 src/views/mobile/transactions/ListPage.vue    |   2 +-
 17 files changed, 427 insertions(+), 375 deletions(-)
 delete mode 100644 src/stores/transactionTag.js
 create mode 100644 src/stores/transactionTag.ts

diff --git a/src/components/mobile/TransactionTagSelectionSheet.vue b/src/components/mobile/TransactionTagSelectionSheet.vue
index c6cfafd3..68e419e1 100644
--- a/src/components/mobile/TransactionTagSelectionSheet.vue
+++ b/src/components/mobile/TransactionTagSelectionSheet.vue
@@ -77,7 +77,9 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
+
+import { TransactionTag } from '@/models/transaction_tag.ts';
 
 import { copyArrayTo } from '@/lib/common.ts';
 import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
@@ -152,9 +154,7 @@ export default {
             }
         },
         addNewTag() {
-            this.newTag = {
-                name: ''
-            };
+            this.newTag = TransactionTag.createNewTag();
         },
         saveNewTag() {
             const self = this;
diff --git a/src/core/base.ts b/src/core/base.ts
index c2d570d6..1011a469 100644
--- a/src/core/base.ts
+++ b/src/core/base.ts
@@ -12,3 +12,5 @@ export interface TypeAndDisplayName {
     readonly type: number;
     readonly displayName: string;
 }
+
+export type BeforeResolveFunction = (callback: () => void) => void;
diff --git a/src/lib/services.ts b/src/lib/services.ts
index 54f579b7..50da8f09 100644
--- a/src/lib/services.ts
+++ b/src/lib/services.ts
@@ -137,7 +137,7 @@ interface ApiRequestConfig extends AxiosRequestConfig {
     timeout?: number;
 }
 
-type ApiResponsePromise<T> = Promise<AxiosResponse<ApiResponse<T>>>;
+export type ApiResponsePromise<T> = Promise<AxiosResponse<ApiResponse<T>>>;
 
 let needBlockRequest = false;
 const blockedRequests: ((token: string | undefined) => void)[] = [];
diff --git a/src/models/transaction_tag.ts b/src/models/transaction_tag.ts
index 192aa4fc..da63961d 100644
--- a/src/models/transaction_tag.ts
+++ b/src/models/transaction_tag.ts
@@ -1,3 +1,48 @@
+export class TransactionTag implements TransactionTagInfoResponse {
+    public id: string;
+    public name: string;
+    public displayOrder: number;
+    public hidden: boolean;
+
+    private constructor(id: string, name: string, displayOrder: number, hidden: boolean) {
+        this.id = id;
+        this.name = name;
+        this.displayOrder = displayOrder;
+        this.hidden = hidden;
+    }
+
+    public toCreateRequest(): TransactionTagCreateRequest {
+        return {
+            name: this.name
+        };
+    }
+
+    public toModifyRequest(): TransactionTagModifyRequest {
+        return {
+            id: this.id,
+            name: this.name
+        };
+    }
+
+    public static of(tagResponse: TransactionTagInfoResponse): TransactionTag {
+        return new TransactionTag(tagResponse.id, tagResponse.name, tagResponse.displayOrder, tagResponse.hidden);
+    }
+
+    public static ofMany(tagResponses: TransactionTagInfoResponse[]): TransactionTag[] {
+        const tags: TransactionTag[] = [];
+
+        for (const tagResponse of tagResponses) {
+            tags.push(TransactionTag.of(tagResponse));
+        }
+
+        return tags;
+    }
+
+    public static createNewTag(): TransactionTag {
+        return new TransactionTag('', '', 0, false);
+    }
+}
+
 export interface TransactionTagCreateRequest {
     readonly name: string;
 }
diff --git a/src/stores/index.js b/src/stores/index.js
index 006c201f..3063b312 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -4,7 +4,7 @@ import { useSettingsStore } from './setting.ts';
 import { useUserStore } from './user.ts';
 import { useAccountsStore } from './account.js';
 import { useTransactionCategoriesStore } from './transactionCategory.js';
-import { useTransactionTagsStore } from './transactionTag.js';
+import { useTransactionTagsStore } from './transactionTag.ts';
 import { useTransactionTemplatesStore } from './transactionTemplate.js';
 import { useTransactionsStore } from './transaction.js';
 import { useOverviewStore } from './overview.ts';
diff --git a/src/stores/transactionTag.js b/src/stores/transactionTag.js
deleted file mode 100644
index 48a124a2..00000000
--- a/src/stores/transactionTag.js
+++ /dev/null
@@ -1,344 +0,0 @@
-import { defineStore } from 'pinia';
-
-import { isEquals } from '@/lib/common.ts';
-import services from '@/lib/services.ts';
-import logger from '@/lib/logger.ts';
-
-function loadTransactionTagList(state, tags) {
-    state.allTransactionTags = tags;
-    state.allTransactionTagsMap = {};
-
-    for (let i = 0; i < tags.length; i++) {
-        const tag = tags[i];
-        state.allTransactionTagsMap[tag.id] = tag;
-    }
-}
-
-function addTagToTransactionTagList(state, tag) {
-    state.allTransactionTags.push(tag);
-    state.allTransactionTagsMap[tag.id] = tag;
-}
-
-function updateTagInTransactionTagList(state, tag) {
-    for (let i = 0; i < state.allTransactionTags.length; i++) {
-        if (state.allTransactionTags[i].id === tag.id) {
-            state.allTransactionTags.splice(i, 1, tag);
-            break;
-        }
-    }
-
-    state.allTransactionTagsMap[tag.id] = tag;
-}
-
-function updateTagDisplayOrderInTransactionTagList(state, { from, to }) {
-    state.allTransactionTags.splice(to, 0, state.allTransactionTags.splice(from, 1)[0]);
-}
-
-function updateTagVisibilityInTransactionTagList(state, { tag, hidden }) {
-    if (state.allTransactionTagsMap[tag.id]) {
-        state.allTransactionTagsMap[tag.id].hidden = hidden;
-    }
-}
-
-function removeTagFromTransactionTagList(state, tag) {
-    for (let i = 0; i < state.allTransactionTags.length; i++) {
-        if (state.allTransactionTags[i].id === tag.id) {
-            state.allTransactionTags.splice(i, 1);
-            break;
-        }
-    }
-
-    if (state.allTransactionTagsMap[tag.id]) {
-        delete state.allTransactionTagsMap[tag.id];
-    }
-}
-
-export const useTransactionTagsStore = defineStore('transactionTags', {
-    state: () => ({
-        allTransactionTags: [],
-        allTransactionTagsMap: {},
-        transactionTagListStateInvalid: true,
-    }),
-    getters: {
-        allVisibleTags(state) {
-            const allVisibleTags = [];
-
-            for (let i = 0; i < state.allTransactionTags.length; i++) {
-                const tag = state.allTransactionTags[i];
-
-                if (!tag.hidden) {
-                    allVisibleTags.push(tag);
-                }
-            }
-
-            return allVisibleTags;
-        },
-        allAvailableTagsCount(state) {
-            return state.allTransactionTags.length;
-        },
-        allVisibleTagsCount(state) {
-            return state.allVisibleTags.length;
-        }
-    },
-    actions: {
-        generateNewTransactionTagModel() {
-            return {
-                id: '',
-                name: ''
-            };
-        },
-        updateTransactionTagListInvalidState(invalidState) {
-            this.transactionTagListStateInvalid = invalidState;
-        },
-        resetTransactionTags() {
-            this.allTransactionTags = [];
-            this.allTransactionTagsMap = {};
-            this.transactionTagListStateInvalid = true;
-        },
-        loadAllTags({ force }) {
-            const self = this;
-
-            if (!force && !self.transactionTagListStateInvalid) {
-                return new Promise((resolve) => {
-                    resolve(self.allTransactionTags);
-                });
-            }
-
-            return new Promise((resolve, reject) => {
-                services.getAllTransactionTags().then(response => {
-                    const data = response.data;
-
-                    if (!data || !data.success || !data.result) {
-                        reject({ message: 'Unable to retrieve tag list' });
-                        return;
-                    }
-
-                    if (self.transactionTagListStateInvalid) {
-                        self.updateTransactionTagListInvalidState(false);
-                    }
-
-                    if (force && data.result && isEquals(self.allTransactionTags, data.result)) {
-                        reject({ message: 'Tag list is up to date' });
-                        return;
-                    }
-
-                    loadTransactionTagList(self, data.result);
-
-                    resolve(data.result);
-                }).catch(error => {
-                    if (force) {
-                        logger.error('failed to force load tag list', error);
-                    } else {
-                        logger.error('failed to load tag list', error);
-                    }
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        reject({ error: error.response.data });
-                    } else if (!error.processed) {
-                        reject({ message: 'Unable to retrieve tag list' });
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        },
-        saveTag({ tag }) {
-            const self = this;
-
-            return new Promise((resolve, reject) => {
-                let promise = null;
-
-                if (!tag.id) {
-                    promise = services.addTransactionTag(tag);
-                } else {
-                    promise = services.modifyTransactionTag(tag);
-                }
-
-                promise.then(response => {
-                    const data = response.data;
-
-                    if (!data || !data.success || !data.result) {
-                        if (!tag.id) {
-                            reject({ message: 'Unable to add tag' });
-                        } else {
-                            reject({ message: 'Unable to save tag' });
-                        }
-                        return;
-                    }
-
-                    if (!tag.id) {
-                        addTagToTransactionTagList(self, data.result);
-                    } else {
-                        updateTagInTransactionTagList(self, data.result);
-                    }
-
-                    resolve(data.result);
-                }).catch(error => {
-                    logger.error('failed to save tag', error);
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        reject({ error: error.response.data });
-                    } else if (!error.processed) {
-                        if (!tag.id) {
-                            reject({ message: 'Unable to add tag' });
-                        } else {
-                            reject({ message: 'Unable to save tag' });
-                        }
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        },
-        changeTagDisplayOrder({ tagId, from, to }) {
-            const self = this;
-
-            return new Promise((resolve, reject) => {
-                let tag = null;
-
-                for (let i = 0; i < self.allTransactionTags.length; i++) {
-                    if (self.allTransactionTags[i].id === tagId) {
-                        tag = self.allTransactionTags[i];
-                        break;
-                    }
-                }
-
-                if (!tag || !self.allTransactionTags[to]) {
-                    reject({ message: 'Unable to move tag' });
-                    return;
-                }
-
-                if (!self.transactionTagListStateInvalid) {
-                    self.updateTransactionTagListInvalidState(true);
-                }
-
-                updateTagDisplayOrderInTransactionTagList(self, {
-                    tag: tag,
-                    from: from,
-                    to: to
-                });
-
-                resolve();
-            });
-        },
-        updateTagDisplayOrders() {
-            const self = this;
-            const newDisplayOrders = [];
-
-            for (let i = 0; i < self.allTransactionTags.length; i++) {
-                newDisplayOrders.push({
-                    id: self.allTransactionTags[i].id,
-                    displayOrder: i + 1
-                });
-            }
-
-            return new Promise((resolve, reject) => {
-                services.moveTransactionTag({
-                    newDisplayOrders: newDisplayOrders
-                }).then(response => {
-                    const data = response.data;
-
-                    if (!data || !data.success || !data.result) {
-                        reject({ message: 'Unable to move tag' });
-                        return;
-                    }
-
-                    if (self.transactionTagListStateInvalid) {
-                        self.updateTransactionTagListInvalidState(false);
-                    }
-
-                    resolve(data.result);
-                }).catch(error => {
-                    logger.error('failed to save tags display order', error);
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        reject({ error: error.response.data });
-                    } else if (!error.processed) {
-                        reject({ message: 'Unable to move tag' });
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        },
-        hideTag({ tag, hidden }) {
-            const self = this;
-
-            return new Promise((resolve, reject) => {
-                services.hideTransactionTag({
-                    id: tag.id,
-                    hidden: hidden
-                }).then(response => {
-                    const data = response.data;
-
-                    if (!data || !data.success || !data.result) {
-                        if (hidden) {
-                            reject({ message: 'Unable to hide this tag' });
-                        } else {
-                            reject({ message: 'Unable to unhide this tag' });
-                        }
-
-                        return;
-                    }
-
-                    updateTagVisibilityInTransactionTagList(self, {
-                        tag: tag,
-                        hidden: hidden
-                    });
-
-                    resolve(data.result);
-                }).catch(error => {
-                    logger.error('failed to change tag visibility', error);
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        reject({ error: error.response.data });
-                    } else if (!error.processed) {
-                        if (hidden) {
-                            reject({ message: 'Unable to hide this tag' });
-                        } else {
-                            reject({ message: 'Unable to unhide this tag' });
-                        }
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        },
-        deleteTag({ tag, beforeResolve }) {
-            const self = this;
-
-            return new Promise((resolve, reject) => {
-                services.deleteTransactionTag({
-                    id: tag.id
-                }).then(response => {
-                    const data = response.data;
-
-                    if (!data || !data.success || !data.result) {
-                        reject({ message: 'Unable to delete this tag' });
-                        return;
-                    }
-
-                    if (beforeResolve) {
-                        beforeResolve(() => {
-                            removeTagFromTransactionTagList(self, tag);
-                        });
-                    } else {
-                        removeTagFromTransactionTagList(self, tag);
-                    }
-
-                    resolve(data.result);
-                }).catch(error => {
-                    logger.error('failed to delete tag', error);
-
-                    if (error.response && error.response.data && error.response.data.errorMessage) {
-                        reject({ error: error.response.data });
-                    } else if (!error.processed) {
-                        reject({ message: 'Unable to delete this tag' });
-                    } else {
-                        reject(error);
-                    }
-                });
-            });
-        }
-    }
-});
diff --git a/src/stores/transactionTag.ts b/src/stores/transactionTag.ts
new file mode 100644
index 00000000..ef7303b1
--- /dev/null
+++ b/src/stores/transactionTag.ts
@@ -0,0 +1,356 @@
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
+
+import type { BeforeResolveFunction } from '@/core/base.ts';
+
+import {
+    type TransactionTagInfoResponse,
+    type TransactionTagNewDisplayOrderRequest,
+    TransactionTag
+} from '@/models/transaction_tag.ts';
+
+import { isEquals } from '@/lib/common.ts';
+
+import logger from '@/lib/logger.ts';
+import services, { type ApiResponsePromise } from '@/lib/services.ts';
+
+export const useTransactionTagsStore = defineStore('transactionTags', () => {
+    const allTransactionTags = ref<TransactionTag[]>([]);
+    const allTransactionTagsMap = ref<Record<string, TransactionTag>>({});
+    const transactionTagListStateInvalid = ref<boolean>(true);
+
+    const allVisibleTags = computed<TransactionTag[]>(() => {
+        const visibleTags: TransactionTag[] = [];
+
+        for (const tag of allTransactionTags.value) {
+            if (!tag.hidden) {
+                visibleTags.push(tag);
+            }
+        }
+
+        return visibleTags;
+    });
+
+    const allAvailableTagsCount = computed<number>(() => allTransactionTags.value.length);
+    const allVisibleTagsCount = computed<number>(() => allVisibleTags.value.length);
+
+    function loadTransactionTagList(tags: TransactionTag[]): void {
+        allTransactionTags.value = tags;
+        allTransactionTagsMap.value = {};
+
+        for (const tag of tags) {
+            allTransactionTagsMap.value[tag.id] = tag;
+        }
+    }
+
+    function addTagToTransactionTagList(tag: TransactionTag): void {
+        allTransactionTags.value.push(tag);
+        allTransactionTagsMap.value[tag.id] = tag;
+    }
+
+    function updateTagInTransactionTagList(tag: TransactionTag): void {
+        for (let i = 0; i < allTransactionTags.value.length; i++) {
+            if (allTransactionTags.value[i].id === tag.id) {
+                allTransactionTags.value.splice(i, 1, tag);
+                break;
+            }
+        }
+
+        allTransactionTagsMap.value[tag.id] = tag;
+    }
+
+    function updateTagDisplayOrderInTransactionTagList(params: { from: number, to: number }): void {
+        allTransactionTags.value.splice(params.to, 0, allTransactionTags.value.splice(params.from, 1)[0]);
+    }
+
+    function updateTagVisibilityInTransactionTagList(params: { tag: TransactionTag, hidden: boolean }): void {
+        if (allTransactionTagsMap.value[params.tag.id]) {
+            allTransactionTagsMap.value[params.tag.id].hidden = params.hidden;
+        }
+    }
+
+    function removeTagFromTransactionTagList(tag: TransactionTag): void {
+        for (let i = 0; i < allTransactionTags.value.length; i++) {
+            if (allTransactionTags.value[i].id === tag.id) {
+                allTransactionTags.value.splice(i, 1);
+                break;
+            }
+        }
+
+        if (allTransactionTagsMap.value[tag.id]) {
+            delete allTransactionTagsMap.value[tag.id];
+        }
+    }
+
+    function updateTransactionTagListInvalidState(invalidState: boolean): void {
+        transactionTagListStateInvalid.value = invalidState;
+    }
+
+    function resetTransactionTags(): void {
+        allTransactionTags.value = [];
+        allTransactionTagsMap.value = {};
+        transactionTagListStateInvalid.value = true;
+    }
+
+    function loadAllTags(params: { force?: boolean }): Promise<TransactionTag[]> {
+        if (!params.force && !transactionTagListStateInvalid.value) {
+            return new Promise((resolve) => {
+                resolve(allTransactionTags.value);
+            });
+        }
+
+        return new Promise((resolve, reject) => {
+            services.getAllTransactionTags().then(response => {
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    reject({ message: 'Unable to retrieve tag list' });
+                    return;
+                }
+
+                if (transactionTagListStateInvalid.value) {
+                    updateTransactionTagListInvalidState(false);
+                }
+
+                const transactionTags = TransactionTag.ofMany(data.result);
+
+                if (params.force && data.result && isEquals(allTransactionTags.value, transactionTags)) {
+                    reject({ message: 'Tag list is up to date' });
+                    return;
+                }
+
+                loadTransactionTagList(transactionTags);
+
+                resolve(transactionTags);
+            }).catch(error => {
+                if (params.force) {
+                    logger.error('failed to force load tag list', error);
+                } else {
+                    logger.error('failed to load tag list', error);
+                }
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    reject({ error: error.response.data });
+                } else if (!error.processed) {
+                    reject({ message: 'Unable to retrieve tag list' });
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    function saveTag(params: { tag: TransactionTag }): Promise<TransactionTag> {
+        return new Promise((resolve, reject) => {
+            let promise: ApiResponsePromise<TransactionTagInfoResponse>;
+
+            if (!params.tag.id) {
+                promise = services.addTransactionTag(params.tag.toCreateRequest());
+            } else {
+                promise = services.modifyTransactionTag(params.tag.toModifyRequest());
+            }
+
+            promise.then(response => {
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    if (!params.tag.id) {
+                        reject({ message: 'Unable to add tag' });
+                    } else {
+                        reject({ message: 'Unable to save tag' });
+                    }
+                    return;
+                }
+
+                const transactionTag = TransactionTag.of(data.result);
+
+                if (!params.tag.id) {
+                    addTagToTransactionTagList(transactionTag);
+                } else {
+                    updateTagInTransactionTagList(transactionTag);
+                }
+
+                resolve(transactionTag);
+            }).catch(error => {
+                logger.error('failed to save tag', error);
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    reject({ error: error.response.data });
+                } else if (!error.processed) {
+                    if (!params.tag.id) {
+                        reject({ message: 'Unable to add tag' });
+                    } else {
+                        reject({ message: 'Unable to save tag' });
+                    }
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    function changeTagDisplayOrder(params: { tagId: string, from: number, to: number }): Promise<void> {
+        return new Promise((resolve, reject) => {
+            let tag: TransactionTag | null = null;
+
+            for (let i = 0; i < allTransactionTags.value.length; i++) {
+                if (allTransactionTags.value[i].id === params.tagId) {
+                    tag = allTransactionTags.value[i];
+                    break;
+                }
+            }
+
+            if (!tag || !allTransactionTags.value[params.to]) {
+                reject({ message: 'Unable to move tag' });
+                return;
+            }
+
+            if (!transactionTagListStateInvalid.value) {
+                updateTransactionTagListInvalidState(true);
+            }
+
+            updateTagDisplayOrderInTransactionTagList({
+                from: params.from,
+                to: params.to
+            });
+
+            resolve();
+        });
+    }
+
+    function updateTagDisplayOrders(): Promise<boolean> {
+        const newDisplayOrders: TransactionTagNewDisplayOrderRequest[] = [];
+
+        for (let i = 0; i < allTransactionTags.value.length; i++) {
+            newDisplayOrders.push({
+                id: allTransactionTags.value[i].id,
+                displayOrder: i + 1
+            });
+        }
+
+        return new Promise((resolve, reject) => {
+            services.moveTransactionTag({
+                newDisplayOrders: newDisplayOrders
+            }).then(response => {
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    reject({ message: 'Unable to move tag' });
+                    return;
+                }
+
+                if (transactionTagListStateInvalid.value) {
+                    updateTransactionTagListInvalidState(false);
+                }
+
+                resolve(data.result);
+            }).catch(error => {
+                logger.error('failed to save tags display order', error);
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    reject({ error: error.response.data });
+                } else if (!error.processed) {
+                    reject({ message: 'Unable to move tag' });
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    function hideTag(params: { tag: TransactionTag, hidden: boolean }): Promise<boolean> {
+        return new Promise((resolve, reject) => {
+            services.hideTransactionTag({
+                id: params.tag.id,
+                hidden: params.hidden
+            }).then(response => {
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    if (params.hidden) {
+                        reject({ message: 'Unable to hide this tag' });
+                    } else {
+                        reject({ message: 'Unable to unhide this tag' });
+                    }
+                    return;
+                }
+
+                updateTagVisibilityInTransactionTagList({
+                    tag: params.tag,
+                    hidden: params.hidden
+                });
+
+                resolve(data.result);
+            }).catch(error => {
+                logger.error('failed to change tag visibility', error);
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    reject({ error: error.response.data });
+                } else if (!error.processed) {
+                    if (params.hidden) {
+                        reject({ message: 'Unable to hide this tag' });
+                    } else {
+                        reject({ message: 'Unable to unhide this tag' });
+                    }
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    function deleteTag(params: { tag: TransactionTag, beforeResolve?: BeforeResolveFunction }): Promise<boolean> {
+        return new Promise((resolve, reject) => {
+            services.deleteTransactionTag({
+                id: params.tag.id
+            }).then(response => {
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    reject({ message: 'Unable to delete this tag' });
+                    return;
+                }
+
+                if (params.beforeResolve) {
+                    params.beforeResolve(() => {
+                        removeTagFromTransactionTagList(params.tag);
+                    });
+                } else {
+                    removeTagFromTransactionTagList(params.tag);
+                }
+
+                resolve(data.result);
+            }).catch(error => {
+                logger.error('failed to delete tag', error);
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    reject({ error: error.response.data });
+                } else if (!error.processed) {
+                    reject({ message: 'Unable to delete this tag' });
+                } else {
+                    reject(error);
+                }
+            });
+        });
+    }
+
+    return {
+        // states
+        allTransactionTags,
+        allTransactionTagsMap,
+        transactionTagListStateInvalid,
+        // computed states
+        allVisibleTags,
+        allAvailableTagsCount,
+        allVisibleTagsCount,
+        // functions
+        updateTransactionTagListInvalidState,
+        resetTransactionTags,
+        loadAllTags,
+        saveTag,
+        changeTagDisplayOrder,
+        updateTagDisplayOrders,
+        hideTag,
+        deleteTag
+    }
+});
diff --git a/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue b/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
index b0566618..0d57ee7f 100644
--- a/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
+++ b/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
@@ -132,7 +132,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
 
diff --git a/src/views/desktop/tags/ListPage.vue b/src/views/desktop/tags/ListPage.vue
index 65c66c6e..e6ec602f 100644
--- a/src/views/desktop/tags/ListPage.vue
+++ b/src/views/desktop/tags/ListPage.vue
@@ -224,7 +224,9 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
+
+import { TransactionTag } from '@/models/transaction_tag.ts';
 
 import {
     isNoAvailableTag,
@@ -247,12 +249,9 @@ import {
 
 export default {
     data() {
-        const transactionTagsStore = useTransactionTagsStore();
-        const newTransactionTag = transactionTagsStore.generateNewTransactionTagModel();
-
         return {
             newTag: null,
-            editingTag: newTransactionTag,
+            editingTag: TransactionTag.createNewTag(),
             loading: true,
             updating: false,
             tagUpdating: {},
@@ -375,9 +374,7 @@ export default {
             });
         },
         add() {
-            this.newTag = {
-                name: ''
-            };
+            this.newTag = TransactionTag.createNewTag();
         },
         edit(tag) {
             this.editingTag.id = tag.id;
diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue
index ebadc6d9..6bf734da 100644
--- a/src/views/desktop/transactions/ListPage.vue
+++ b/src/views/desktop/transactions/ListPage.vue
@@ -592,7 +592,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.js';
 
diff --git a/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue b/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
index 14b5347c..28c19105 100644
--- a/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
@@ -176,7 +176,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { CategoryType } from '@/core/category.ts';
diff --git a/src/views/desktop/transactions/list/dialogs/EditDialog.vue b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
index 88e22dc8..e0123d16 100644
--- a/src/views/desktop/transactions/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
@@ -395,7 +395,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
diff --git a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
index 101a657b..23354f17 100644
--- a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
@@ -601,7 +601,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useOverviewStore } from '@/stores/overview.ts';
 import { useStatisticsStore } from '@/stores/statistics.js';
diff --git a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
index c6f932c2..07270da1 100644
--- a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
+++ b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
@@ -112,7 +112,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
 
diff --git a/src/views/mobile/tags/ListPage.vue b/src/views/mobile/tags/ListPage.vue
index 0456bf7f..f3f26d57 100644
--- a/src/views/mobile/tags/ListPage.vue
+++ b/src/views/mobile/tags/ListPage.vue
@@ -145,7 +145,9 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
+
+import { TransactionTag } from '@/models/transaction_tag.ts';
 
 import {
     isNoAvailableTag,
@@ -159,12 +161,9 @@ export default {
         'f7router'
     ],
     data() {
-        const transactionTagsStore = useTransactionTagsStore();
-        const newTransactionTag = transactionTagsStore.generateNewTransactionTagModel();
-
         return {
             newTag: null,
-            editingTag: newTransactionTag,
+            editingTag: TransactionTag.createNewTag(),
             loading: true,
             loadingError: null,
             showHidden: false,
@@ -179,7 +178,6 @@ export default {
     },
     computed: {
         ...mapStores(useTransactionTagsStore),
-
         tags() {
             return this.transactionTagsStore.allTransactionTags;
         },
@@ -310,9 +308,7 @@ export default {
             });
         },
         add() {
-            this.newTag = {
-                name: ''
-            };
+            this.newTag = TransactionTag.createNewTag();
         },
         edit(tag) {
             this.editingTag.id = tag.id;
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index 6cc6e1e2..89160527 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -435,7 +435,7 @@ import { useEnvironmentsStore } from '@/stores/environment.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index ade77b9f..d5ea0597 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -525,7 +525,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
-import { useTransactionTagsStore } from '@/stores/transactionTag.js';
+import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 
 import { DateRangeScene, DateRange } from '@/core/datetime.ts';