migrate template list page to composition API and typescript

src/views/desktop/templates/ListPage.vue

@@ -4,12 +4,12 @@
             <v-card>
                 <template #title>
                     <div class="title-and-toolbar d-flex align-center">
-                        <span>{{ templateType === allTemplateTypes.Schedule.type ? $t('Scheduled Transactions') : $t('Transaction Templates') }}</span>
+                        <span>{{ templateType === TemplateType.Schedule.type ? tt('Scheduled Transactions') : tt('Transaction Templates') }}</span>
                         <v-btn class="ml-3" color="default" variant="outlined"
-                               :disabled="loading || updating" @click="add">{{ $t('Add') }}</v-btn>
+                               :disabled="loading || updating" @click="add">{{ tt('Add') }}</v-btn>
                         <v-btn class="ml-3" color="primary" variant="tonal"
                                :disabled="loading || updating" @click="saveSortResult"
-                               v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
+                               v-if="displayOrderModified">{{ tt('Save Display Order') }}</v-btn>
                         <v-btn density="compact" color="default" variant="text" size="24"
                                class="ml-2" :icon="true" :disabled="loading || updating"
                                :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 Templates')"
+                                                 :title="tt('Show Hidden Transaction Templates')"
                                                  v-if="!showHidden" @click="showHidden = true"></v-list-item>
                                     <v-list-item :prepend-icon="icons.hide"
-                                                 :title="$t('Hide Hidden Transaction Templates')"
+                                                 :title="tt('Hide Hidden Transaction Templates')"
                                                  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('Template Name') }}</span>
+                                <span>{{ tt('Template Name') }}</span>
                                 <v-spacer/>
-                                <span>{{ $t('Operation') }}</span>
+                                <span>{{ tt('Operation') }}</span>
                             </div>
                         </th>
                     </tr>
@@ -60,9 +60,9 @@
 
                     <tbody v-if="!loading && noAvailableTemplate">
                     <tr>
-                        <td v-if="templateType === allTemplateTypes.Normal.type">{{ $t('No available template. Once you add templates, you can quickly add a new transaction using the dropdown menu of the Add button on the transaction list page') }}</td>
+                        <td v-if="templateType === TemplateType.Normal.type">{{ tt('No available template. Once you add templates, you can quickly add a new transaction using the dropdown menu of the Add button on the transaction list page') }}</td>
-                        <td v-else-if="templateType === allTemplateTypes.Schedule.type">{{ $t('No available scheduled transactions') }}</td>
+                        <td v-else-if="templateType === TemplateType.Schedule.type">{{ tt('No available scheduled transactions') }}</td>
-                        <td v-else>{{ $t('No available template') }}</td>
+                        <td v-else>{{ tt('No available template') }}</td>
                     </tr>
                     </tbody>
 
@@ -81,9 +81,9 @@
                                             <v-badge class="right-bottom-icon" color="secondary"
                                                      location="bottom right" offset-x="8" :icon="icons.hide"
                                                      v-if="element.hidden">
-                                                <v-icon size="20" start :icon="templateType === allTemplateTypes.Schedule.type ? icons.clock : icons.text"/>
+                                                <v-icon size="20" start :icon="templateType === TemplateType.Schedule.type ? icons.clock : icons.text"/>
                                             </v-badge>
-                                            <v-icon size="20" start :icon="templateType === allTemplateTypes.Schedule.type ? icons.clock : icons.text" v-else-if="!element.hidden"/>
+                                            <v-icon size="20" start :icon="templateType === TemplateType.Schedule.type ? icons.clock : icons.text" v-else-if="!element.hidden"/>
                                             <span class="transaction-template-name">{{ element.name }}</span>
                                         </div>
 
@@ -99,7 +99,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"
@@ -110,7 +110,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"
@@ -122,12 +122,12 @@
                                             <template #loader>
                                                 <v-progress-circular indeterminate size="20" width="2"/>
                                             </template>
-                                            {{ $t('Delete') }}
+                                            {{ tt('Delete') }}
                                         </v-btn>
                                         <span class="ml-2">
                                             <v-icon :class="!loading && !updating && availableTemplateCount > 1 ? 'drag-handle' : 'disabled'"
                                                     :icon="icons.drag"/>
-                                            <v-tooltip activator="parent" v-if="!loading && !updating && availableTemplateCount > 1">{{ $t('Drag to Reorder') }}</v-tooltip>
+                                            <v-tooltip activator="parent" v-if="!loading && !updating && availableTemplateCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
                                         </span>
                                     </div>
                                 </td>
@@ -145,13 +145,20 @@
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
+<script setup lang="ts">
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
 import EditDialog from '@/views/desktop/transactions/list/dialogs/EditDialog.vue';
 
-import { mapStores } from 'pinia';
+import { ref, computed, useTemplateRef } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
 import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.ts';
 
 import { TemplateType } from '@/core/template.ts';
+import { TransactionTemplate } from '@/models/transaction_template.ts';
+
 import {
     isNoAvailableTemplate,
     getAvailableTemplateCount
@@ -172,234 +179,207 @@ import {
     mdiClockTimeNineOutline
 } from '@mdi/js';
 
-export default {
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
-    components: {
+type SnackBarType = InstanceType<typeof SnackBar>;
-        EditDialog
+type EditDialogType = InstanceType<typeof EditDialog>;
-    },
+
-    props: [
+const props = defineProps<{
-        'initType',
+    initType: number;
-    ],
+}>();
-    data() {
+
-        return {
+const { tt } = useI18n();
-            templateType: TemplateType.Normal.type,
+
-            loading: true,
+const transactionTemplatesStore = useTransactionTemplatesStore();
-            updating: false,
+
-            templateHiding: {},
+const icons = {
-            templateRemoving: {},
+    refresh: mdiRefresh,
-            displayOrderModified: false,
+    add: mdiPlus,
-            showHidden: false,
+    edit: mdiPencilOutline,
-            icons: {
+    confirm: mdiCheck,
-                refresh: mdiRefresh,
+    cancel: mdiClose,
-                add: mdiPlus,
+    show: mdiEyeOutline,
-                edit: mdiPencilOutline,
+    hide: mdiEyeOffOutline,
-                confirm: mdiCheck,
+    remove: mdiDeleteOutline,
-                cancel: mdiClose,
+    drag: mdiDrag,
-                show: mdiEyeOutline,
+    more: mdiDotsVertical,
-                hide: mdiEyeOffOutline,
+    text: mdiTextBoxOutline,
-                remove: mdiDeleteOutline,
+    clock: mdiClockTimeNineOutline
-                drag: mdiDrag,
+};
-                more: mdiDotsVertical,
+
-                text: mdiTextBoxOutline,
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
-                clock: mdiClockTimeNineOutline
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
-            }
+const editDialog = useTemplateRef<EditDialogType>('editDialog');
-        };
+
-    },
+const templateType = ref<number>(TemplateType.Normal.type);
-    computed: {
+const loading = ref<boolean>(true);
-        ...mapStores(useTransactionTemplatesStore),
+const updating = ref<boolean>(false);
-        templates() {
+const templateHiding = ref<Record<string, boolean>>({});
-            return this.transactionTemplatesStore.allTransactionTemplates[this.templateType] || [];
+const templateRemoving = ref<Record<string, boolean>>({});
-        },
+const displayOrderModified = ref<boolean>(false);
-        noAvailableTemplate() {
+const showHidden = ref<boolean>(false);
-            return isNoAvailableTemplate(this.templates, this.showHidden);
+
-        },
+const templates = computed<TransactionTemplate[]>(() => transactionTemplatesStore.allTransactionTemplates[templateType.value] || []);
-        availableTemplateCount() {
+const noAvailableTemplate = computed<boolean>(() => isNoAvailableTemplate(templates.value, showHidden.value));
-            return getAvailableTemplateCount(this.templates, this.showHidden);
+const availableTemplateCount = computed<number>(() => getAvailableTemplateCount(templates.value, showHidden.value));
-        },
+
-        allTemplateTypes() {
+function init(): void {
-            return TemplateType.all();
+    templateType.value = props.initType;
+    loading.value = true;
+
+    transactionTemplatesStore.loadAllTemplates({
+        templateType: templateType.value,
+        force: false
+    }).then(() => {
+        loading.value = false;
+    }).catch(error => {
+        loading.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
         }
-    },
+    });
-    created() {
+}
-        const self = this;
 
-        self.templateType = self.initType;
+function reload(): void {
-        self.loading = true;
+    loading.value = true;
 
-        self.transactionTemplatesStore.loadAllTemplates({
+    transactionTemplatesStore.loadAllTemplates({
-            templateType: self.templateType,
+        templateType: templateType.value,
-            force: false
+        force: true
+    }).then(() => {
+        loading.value = false;
+        displayOrderModified.value = false;
+
+        snackbar.value?.showMessage('Template list has been updated');
+    }).catch(error => {
+        loading.value = false;
+
+        if (error && error.isUpToDate) {
+            displayOrderModified.value = false;
+        }
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function add(): void {
+    editDialog.value?.open({
+        templateType: templateType.value
+    }).then(result => {
+        if (result && result.message) {
+            snackbar.value?.showMessage(result.message);
+        }
+    }).catch(error => {
+        if (error) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function edit(template: TransactionTemplate): void {
+    editDialog.value?.open({
+        id: template.id,
+        currentTemplate: template
+    }).then(result => {
+        if (result && result.message) {
+            snackbar.value?.showMessage(result.message);
+        }
+    }).catch(error => {
+        if (error) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function hide(template: TransactionTemplate, hidden: boolean): void {
+    updating.value = true;
+    templateHiding.value[template.id] = true;
+
+    transactionTemplatesStore.hideTemplate({
+        template: template,
+        hidden: hidden
+    }).then(() => {
+        updating.value = false;
+        templateHiding.value[template.id] = false;
+    }).catch(error => {
+        updating.value = false;
+        templateHiding.value[template.id] = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function remove(template: TransactionTemplate): void {
+    confirmDialog.value?.open('Are you sure you want to delete this template?').then(() => {
+        updating.value = true;
+        templateRemoving.value[template.id] = true;
+
+        transactionTemplatesStore.deleteTemplate({
+            template: template
         }).then(() => {
-            self.loading = false;
+            updating.value = false;
+            templateRemoving.value[template.id] = false;
         }).catch(error => {
-            self.loading = false;
+            updating.value = false;
+            templateRemoving.value[template.id] = false;
 
             if (!error.processed) {
-                self.$refs.snackbar.showError(error);
+                snackbar.value?.showError(error);
             }
         });
-    },
+    });
-    methods: {
-        reload() {
-            const self = this;
-            self.loading = true;
-
-            self.transactionTemplatesStore.loadAllTemplates({
-                templateType: self.templateType,
-                force: true
-            }).then(() => {
-                self.loading = false;
-                self.displayOrderModified = false;
-
-                self.$refs.snackbar.showMessage('Template list has been updated');
-            }).catch(error => {
-                self.loading = false;
-
-                if (error && error.isUpToDate) {
-                    self.displayOrderModified = false;
-                }
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        onMove(event) {
-            if (!event || !event.moved) {
-                return;
-            }
-
-            const self = this;
-            const moveEvent = event.moved;
-
-            if (!moveEvent.element || !moveEvent.element.id) {
-                self.$refs.snackbar.showMessage('Unable to move template');
-                return;
-            }
-
-            self.transactionTemplatesStore.changeTemplateDisplayOrder({
-                templateType: self.templateType,
-                templateId: 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.transactionTemplatesStore.updateTemplateDisplayOrders({
-                templateType: self.templateType
-            }).then(() => {
-                self.loading = false;
-                self.displayOrderModified = false;
-            }).catch(error => {
-                self.loading = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        add() {
-            const self = this;
-
-            self.$refs.editDialog.open({
-                templateType: self.templateType
-            }).then(result => {
-                if (result && result.message) {
-                    self.$refs.snackbar.showMessage(result.message);
-                }
-            }).catch(error => {
-                if (error) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        edit(template) {
-            const self = this;
-
-            self.$refs.editDialog.open({
-                id: template.id,
-                currentTemplate: {
-                    templateType: template.templateType,
-                    name: template.name,
-                    type: template.type,
-                    categoryId: template.categoryId,
-                    sourceAccountId: template.sourceAccountId,
-                    destinationAccountId: template.destinationAccountId,
-                    sourceAmount: template.sourceAmount,
-                    destinationAmount: template.destinationAmount,
-                    hideAmount: template.hideAmount,
-                    tagIds: template.tagIds,
-                    comment: template.comment,
-                    scheduledFrequencyType: template.scheduledFrequencyType,
-                    scheduledFrequency: template.scheduledFrequency,
-                    utcOffset: template.utcOffset
-                }
-            }).then(result => {
-                if (result && result.message) {
-                    self.$refs.snackbar.showMessage(result.message);
-                }
-            }).catch(error => {
-                if (error) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        hide(template, hidden) {
-            const self = this;
-
-            self.updating = true;
-            self.templateHiding[template.id] = true;
-
-            self.transactionTemplatesStore.hideTemplate({
-                template: template,
-                hidden: hidden
-            }).then(() => {
-                self.updating = false;
-                self.templateHiding[template.id] = false;
-            }).catch(error => {
-                self.updating = false;
-                self.templateHiding[template.id] = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        remove(template) {
-            const self = this;
-
-            self.$refs.confirmDialog.open('Are you sure you want to delete this template?').then(() => {
-                self.updating = true;
-                self.templateRemoving[template.id] = true;
-
-                self.transactionTemplatesStore.deleteTemplate({
-                    template: template
-                }).then(() => {
-                    self.updating = false;
-                    self.templateRemoving[template.id] = false;
-                }).catch(error => {
-                    self.updating = false;
-                    self.templateRemoving[template.id] = false;
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            });
-        }
-    }
 }
+
+function saveSortResult(): void {
+    if (!displayOrderModified.value) {
+        return;
+    }
+
+    loading.value = true;
+
+    transactionTemplatesStore.updateTemplateDisplayOrders({
+        templateType: templateType.value
+    }).then(() => {
+        loading.value = false;
+        displayOrderModified.value = false;
+    }).catch(error => {
+        loading.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function onMove(event: { moved: { element: { id: string }, oldIndex: number, newIndex: number } }): void {
+    if (!event || !event.moved) {
+        return;
+    }
+
+    const moveEvent = event.moved;
+
+    if (!moveEvent.element || !moveEvent.element.id) {
+        snackbar.value?.showMessage('Unable to move template');
+        return;
+    }
+
+    transactionTemplatesStore.changeTemplateDisplayOrder({
+        templateType: templateType.value,
+        templateId: moveEvent.element.id,
+        from: moveEvent.oldIndex,
+        to: moveEvent.newIndex
+    }).then(() => {
+        displayOrderModified.value = true;
+    }).catch(error => {
+        snackbar.value?.showError(error);
+    });
+}
+
+init();
 </script>
 
 <style>

src/views/mobile/templates/ListPage.vue

@@ -1,12 +1,12 @@
 <template>
     <f7-page :ptr="!sortable" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
-            <f7-nav-title :title="templateType === allTemplateTypes.Schedule.type ? $t('Scheduled Transactions') : $t('Transaction Templates')"></f7-nav-title>
+            <f7-nav-title :title="templateType === TemplateType.Schedule.type ? tt('Scheduled Transactions') : tt('Transaction Templates')"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !templates.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link :href="'/template/add?templateType=' + templateType" icon-f7="plus" v-if="!sortable"></f7-link>
-                <f7-link :text="$t('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
+                <f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -20,11 +20,11 @@
         </f7-list>
 
         <f7-list strong inset dividers class="margin-top" v-if="!loading && noAvailableTemplate">
-            <f7-list-item :title="$t('No available template')"
+            <f7-list-item :title="tt('No available template')"
-                          :footer="$t('Once you add templates, you can long press the Add button on the home page to quickly add a new transaction')"
+                          :footer="tt('Once you add templates, you can long press the Add button on the home page to quickly add a new transaction')"
-                          v-if="templateType === allTemplateTypes.Normal.type"></f7-list-item>
+                          v-if="templateType === TemplateType.Normal.type"></f7-list-item>
-            <f7-list-item :title="$t('No available scheduled transactions')" v-else-if="templateType === allTemplateTypes.Schedule.type"></f7-list-item>
+            <f7-list-item :title="tt('No available scheduled transactions')" v-else-if="templateType === TemplateType.Schedule.type"></f7-list-item>
-            <f7-list-item :title="$t('No available template')" v-else></f7-list-item>
+            <f7-list-item :title="tt('No available template')" v-else></f7-list-item>
         </f7-list>
 
         <f7-list strong inset dividers sortable class="margin-top template-list"
@@ -40,7 +40,7 @@
                           v-show="showHidden || !template.hidden"
                           @taphold="setSortable()">
                 <template #media>
-                    <f7-icon :f7="templateType === allTemplateTypes.Schedule.type ? 'clock' : 'doc_plaintext'">
+                    <f7-icon :f7="templateType === TemplateType.Schedule.type ? 'clock' : 'doc_plaintext'">
                         <f7-badge color="gray" class="right-bottom-icon" v-if="template.hidden">
                             <f7-icon f7="eye_slash_fill"></f7-icon>
                         </f7-badge>
@@ -53,7 +53,7 @@
                     </f7-swipeout-button>
                 </f7-swipeout-actions>
                 <f7-swipeout-actions right v-if="!sortable">
-                    <f7-swipeout-button color="orange" close :text="$t('Edit')" @click="edit(template)"></f7-swipeout-button>
+                    <f7-swipeout-button color="orange" close :text="tt('Edit')" @click="edit(template)"></f7-swipeout-button>
                     <f7-swipeout-button color="red" class="padding-left padding-right" @click="remove(template, false)">
                         <f7-icon f7="trash"></f7-icon>
                     </f7-swipeout-button>
@@ -63,271 +63,260 @@
 
         <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 @click="setSortable()">{{ tt('Sort') }}</f7-actions-button>
-                <f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ $t('Show Hidden Transaction Templates') }}</f7-actions-button>
+                <f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ tt('Show Hidden Transaction Templates') }}</f7-actions-button>
-                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Transaction Templates') }}</f7-actions-button>
+                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ tt('Hide Hidden Transaction Templates') }}</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 template?') }}</f7-actions-label>
+                <f7-actions-label>{{ tt('Are you sure you want to delete this template?') }}</f7-actions-label>
-                <f7-actions-button color="red" @click="remove(templateToDelete, true)">{{ $t('Delete') }}</f7-actions-button>
+                <f7-actions-button color="red" @click="remove(templateToDelete, 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>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+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 { useTransactionTemplatesStore } from '@/stores/transactionTemplate.ts';
 
 import { TemplateType } from '@/core/template.ts';
+import { TransactionTemplate } from '@/models/transaction_template.ts';
+
 import { isDefined } from '@/lib/common.ts';
 import {
     isNoAvailableTemplate,
     getFirstShowingId,
     getLastShowingId
 } from '@/lib/template.ts';
-import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
 
-export default {
+const props = defineProps<{
-    props: [
+    f7route: Router.Route;
-        'f7route',
+    f7router: Router.Router;
-        'f7router'
+}>();
-    ],
-    data() {
-        return {
-            templateType: TemplateType.Normal.type,
-            loading: true,
-            loadingError: null,
-            showHidden: false,
-            sortable: false,
-            templateToDelete: null,
-            showMoreActionSheet: false,
-            showDeleteActionSheet: false,
-            displayOrderModified: false,
-            displayOrderSaving: false
-        };
-    },
-    computed: {
-        ...mapStores(useTransactionTemplatesStore),
-        templates() {
-            return this.transactionTemplatesStore.allTransactionTemplates[this.templateType] || [];
-        },
-        firstShowingId() {
-            return getFirstShowingId(this.templates, this.showHidden);
-        },
-        lastShowingId() {
-            return getLastShowingId(this.templates, this.showHidden);
-        },
-        noAvailableTemplate() {
-            return isNoAvailableTemplate(this.templates, this.showHidden);
-        },
-        allTemplateTypes() {
-            return TemplateType.all();
-        }
-    },
-    created() {
-        const self = this;
 
-        if (self.f7route.path === '/template/list') {
+const { tt } = useI18n();
-            self.templateType = TemplateType.Normal.type;
+const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
-        } else if (self.f7route.path === '/schedule/list') {
-            self.templateType = TemplateType.Schedule.type;
-        }
 
-        self.loading = true;
+const transactionTemplatesStore = useTransactionTemplatesStore();
 
-        self.transactionTemplatesStore.loadAllTemplates({
+const templateType = ref<number>(TemplateType.Normal.type);
-            templateType: self.templateType,
+const loading = ref<boolean>(true);
-            force: false
+const loadingError = ref<unknown | null>(null);
-        }).then(() => {
+const showHidden = ref<boolean>(false);
-            self.loading = false;
+const sortable = ref<boolean>(false);
-        }).catch(error => {
+const templateToDelete = ref<TransactionTemplate | null>(null);
-            if (error.processed) {
+const showMoreActionSheet = ref<boolean>(false);
-                self.loading = false;
+const showDeleteActionSheet = ref<boolean>(false);
-            } else {
+const displayOrderModified = ref<boolean>(false);
-                self.loadingError = error;
+const displayOrderSaving = ref<boolean>(false);
-                self.$toast(error.message || error);
-            }
-        });
-    },
-    methods: {
-        onPageAfterIn() {
-            if ((!isDefined(this.transactionTemplatesStore.transactionTemplateListStatesInvalid[this.templateType]) || this.transactionTemplatesStore.transactionTemplateListStatesInvalid[this.templateType]) && !this.loading) {
-                this.reload(null);
-            }
 
-            this.$routeBackOnError(this.f7router, 'loadingError');
+const templates = computed<TransactionTemplate[]>(() => transactionTemplatesStore.allTransactionTemplates[templateType.value] || []);
-        },
+const firstShowingId = computed<string | null>(() => getFirstShowingId(templates.value, showHidden.value));
-        reload(done) {
+const lastShowingId = computed<string | null>(() => getLastShowingId(templates.value, showHidden.value));
-            if (this.sortable) {
+const noAvailableTemplate = computed<boolean>(() => isNoAvailableTemplate(templates.value, showHidden.value));
-                done();
-                return;
-            }
 
-            const self = this;
+function getTemplateDomId(template: TransactionTemplate): string {
-            const force = !!done;
+    return 'template_' + template.id;
+}
 
-            self.transactionTemplatesStore.loadAllTemplates({
+function parseTemplateIdFromDomId(domId: string): string | null {
-                templateType: self.templateType,
+    if (!domId || domId.indexOf('template_') !== 0) {
-                force: force
+        return null;
-            }).then(() => {
-                if (done) {
-                    done();
-                }
-
-                if (force) {
-                    self.$toast('Template list has been updated');
-                }
-            }).catch(error => {
-                if (done) {
-                    done();
-                }
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        setSortable() {
-            if (this.sortable) {
-                return;
-            }
-
-            this.showHidden = true;
-            this.sortable = true;
-            this.displayOrderModified = false;
-        },
-        onSort(event) {
-            const self = this;
-
-            if (!event || !event.el || !event.el.id) {
-                self.$toast('Unable to move template');
-                return;
-            }
-
-            const id = self.parseTemplateIdFromDomId(event.el.id);
-
-            if (!id) {
-                self.$toast('Unable to move template');
-                return;
-            }
-
-            self.transactionTemplatesStore.changeTemplateDisplayOrder({
-                templateType: self.templateType,
-                templateId: 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.transactionTemplatesStore.updateTemplateDisplayOrders({
-                templateType: self.templateType
-            }).then(() => {
-                self.displayOrderSaving = false;
-                self.$hideLoading();
-
-                self.showHidden = false;
-                self.sortable = false;
-                self.displayOrderModified = false;
-            }).catch(error => {
-                self.displayOrderSaving = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        edit(template) {
-            this.f7router.navigate(`/template/edit?id=${template.id}&templateType=${template.templateType}`);
-        },
-        hide(template, hidden) {
-            const self = this;
-
-            self.$showLoading();
-
-            self.transactionTemplatesStore.hideTemplate({
-                template: template,
-                hidden: hidden
-            }).then(() => {
-                self.$hideLoading();
-            }).catch(error => {
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        remove(template, confirm) {
-            const self = this;
-
-            if (!template) {
-                self.$alert('An error occurred');
-                return;
-            }
-
-            if (!confirm) {
-                self.templateToDelete = template;
-                self.showDeleteActionSheet = true;
-                return;
-            }
-
-            self.showDeleteActionSheet = false;
-            self.templateToDelete = null;
-            self.$showLoading();
-
-            self.transactionTemplatesStore.deleteTemplate({
-                template: template,
-                beforeResolve: (done) => {
-                    onSwipeoutDeleted(self.getTemplateDomId(template), done);
-                }
-            }).then(() => {
-                self.$hideLoading();
-            }).catch(error => {
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        getTemplateDomId(template) {
-            return 'template_' + template.id;
-        },
-        parseTemplateIdFromDomId(domId) {
-            if (!domId || domId.indexOf('template_') !== 0) {
-                return null;
-            }
-
-            return domId.substring(9); // template_
-        }
     }
-};
+
+    return domId.substring(9); // template_
+}
+
+function init(): void {
+    if (props.f7route.path === '/template/list') {
+        templateType.value = TemplateType.Normal.type;
+    } else if (props.f7route.path === '/schedule/list') {
+        templateType.value = TemplateType.Schedule.type;
+    }
+
+    loading.value = true;
+
+    transactionTemplatesStore.loadAllTemplates({
+        templateType: templateType.value,
+        force: false
+    }).then(() => {
+        loading.value = false;
+    }).catch(error => {
+        if (error.processed) {
+            loading.value = false;
+        } else {
+            loadingError.value = error;
+            showToast(error.message || error);
+        }
+    });
+}
+
+function reload(done: (() => void) | null): void {
+    if (sortable.value) {
+        done?.();
+        return;
+    }
+
+    const force = !!done;
+
+    transactionTemplatesStore.loadAllTemplates({
+        templateType: templateType.value,
+        force: force
+    }).then(() => {
+        done?.();
+
+        if (force) {
+            showToast('Template list has been updated');
+        }
+    }).catch(error => {
+        done?.();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function edit(template: TransactionTemplate): void {
+    props.f7router.navigate(`/template/edit?id=${template.id}&templateType=${template.templateType}`);
+}
+
+function hide(template: TransactionTemplate, hidden: boolean): void {
+    showLoading();
+
+    transactionTemplatesStore.hideTemplate({
+        template: template,
+        hidden: hidden
+    }).then(() => {
+        hideLoading();
+    }).catch(error => {
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function remove(template: TransactionTemplate | null, confirm: boolean): void {
+    if (!template) {
+        showAlert('An error occurred');
+        return;
+    }
+
+    if (!confirm) {
+        templateToDelete.value = template;
+        showDeleteActionSheet.value = true;
+        return;
+    }
+
+    showDeleteActionSheet.value = false;
+    templateToDelete.value = null;
+    showLoading();
+
+    transactionTemplatesStore.deleteTemplate({
+        template: template,
+        beforeResolve: (done) => {
+            onSwipeoutDeleted(getTemplateDomId(template), done);
+        }
+    }).then(() => {
+        hideLoading();
+    }).catch(error => {
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function setSortable(): void {
+    if (sortable.value) {
+        return;
+    }
+
+    showHidden.value = true;
+    sortable.value = true;
+    displayOrderModified.value = false;
+}
+
+function saveSortResult(): void {
+    if (!displayOrderModified.value) {
+        showHidden.value = false;
+        sortable.value = false;
+        return;
+    }
+
+    displayOrderSaving.value = true;
+    showLoading();
+
+    transactionTemplatesStore.updateTemplateDisplayOrders({
+        templateType: templateType.value
+    }).then(() => {
+        displayOrderSaving.value = false;
+        hideLoading();
+
+        showHidden.value = false;
+        sortable.value = false;
+        displayOrderModified.value = false;
+    }).catch(error => {
+        displayOrderSaving.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function onSort(event: { el: { id: string }; from: number; to: number }): void {
+    if (!event || !event.el || !event.el.id) {
+        showToast('Unable to move template');
+        return;
+    }
+
+    const id = parseTemplateIdFromDomId(event.el.id);
+
+    if (!id) {
+        showToast('Unable to move template');
+        return;
+    }
+
+    transactionTemplatesStore.changeTemplateDisplayOrder({
+        templateType: templateType.value,
+        templateId: id,
+        from: event.from,
+        to: event.to
+    }).then(() => {
+        displayOrderModified.value = true;
+    }).catch(error => {
+        showToast(error.message || error);
+    });
+}
+
+function onPageAfterIn(): void {
+    if ((!isDefined(transactionTemplatesStore.transactionTemplateListStatesInvalid[templateType.value]) || transactionTemplatesStore.transactionTemplateListStatesInvalid[templateType.value]) && !loading.value) {
+        reload(null);
+    }
+
+    routeBackOnError(props.f7router, loadingError);
+}
+
+init();
 </script>
 
 <style>