migrate transaction categories page to composition API and typescript

src/views/mobile/categories/AllPage.vue

@@ -1,6 +1,6 @@
 <template>
     <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
-        <f7-navbar :title="$t('Transaction Categories')" :back-link="$t('Back')"></f7-navbar>
+        <f7-navbar :title="tt('Transaction Categories')" :back-link="tt('Back')"></f7-navbar>
 
         <f7-list strong inset dividers class="margin-top skeleton-text" v-if="loading">
             <f7-list-item title="Expense" link="#"></f7-list-item>
@@ -9,77 +9,68 @@
         </f7-list>
 
         <f7-list strong inset dividers class="margin-top" v-else-if="!loading">
-            <f7-list-item :title="$t('Expense')" link="/category/list?type=2"></f7-list-item>
+            <f7-list-item :title="tt('Expense')" link="/category/list?type=2"></f7-list-item>
-            <f7-list-item :title="$t('Income')" link="/category/list?type=1"></f7-list-item>
+            <f7-list-item :title="tt('Income')" link="/category/list?type=1"></f7-list-item>
-            <f7-list-item :title="$t('Transfer')" link="/category/list?type=3"></f7-list-item>
+            <f7-list-item :title="tt('Transfer')" link="/category/list?type=3"></f7-list-item>
         </f7-list>
     </f7-page>
 </template>
 
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Router } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
 
-<script>
-import { mapStores } from 'pinia';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
-export default {
+const { tt } = useI18n();
-    props: [
+const { showToast, routeBackOnError } = useI18nUIComponents();
-        'f7router'
-    ],
-    data() {
-        return {
-            loading: true,
-            loadingError: null
-        };
-    },
-    computed: {
-        ...mapStores(useTransactionCategoriesStore)
-    },
-    created() {
-        const self = this;
 
-        self.loading = true;
+const transactionCategoriesStore = useTransactionCategoriesStore();
 
-        self.transactionCategoriesStore.loadAllCategories({
+const props = defineProps<{
-            force: false
+    f7router: Router.Router;
-        }).then(() => {
+}>();
-            self.loading = false;
+
-        }).catch(error => {
+const loading = ref<boolean>(true);
-            if (error.processed) {
+const loadingError = ref<unknown | null>(null);
-                self.loading = false;
+
-            } else {
+function onPageAfterIn(): void {
-                self.loadingError = error;
+    routeBackOnError(props.f7router, loadingError);
-                self.$toast(error.message || error);
 }
-        });
+
-    },
+function reload(done?: () => void): void {
-    methods: {
-        onPageAfterIn() {
-            this.$routeBackOnError(this.f7router, 'loadingError');
-        },
-        reload(done) {
-            const self = this;
     const force = !!done;
 
-            self.transactionCategoriesStore.loadAllCategories({
+    transactionCategoriesStore.loadAllCategories({
         force: force
     }).then(() => {
-                if (done) {
+        done?.();
-                    done();
-                }
 
         if (force) {
-                    self.$toast('Category list has been updated');
+            showToast('Category list has been updated');
         }
     }).catch(error => {
-                if (done) {
+        done?.();
-                    done();
-                }
 
         if (!error.processed) {
-                    self.$toast(error.message || error);
+            showToast(error.message || error);
         }
     });
 }
+
+transactionCategoriesStore.loadAllCategories({
+    force: false
+}).then(() => {
+    loading.value = false;
+}).catch(error => {
+    if (error.processed) {
+        loading.value = false;
+    } else {
+        loadingError.value = error;
+        showToast(error.message || error);
     }
-}
+});
 </script>