migrate transaction tag list page to composition API and typescript

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>