From 081b270f046f5f632cb9a266a434127b40cf1d03 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 14 Jan 2025 23:48:06 +0800
Subject: [PATCH] migrate transaction categories page to composition API and
 typescript

---
 src/views/mobile/categories/AllPage.vue | 115 +++++++++++-------------
 1 file changed, 53 insertions(+), 62 deletions(-)

diff --git a/src/views/mobile/categories/AllPage.vue b/src/views/mobile/categories/AllPage.vue
index bea36ef4..bbd4787e 100644
--- a/src/views/mobile/categories/AllPage.vue
+++ b/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="$t('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('Expense')" link="/category/list?type=2"></f7-list-item>
+            <f7-list-item :title="tt('Income')" link="/category/list?type=1"></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 {
-    props: [
-        'f7router'
-    ],
-    data() {
-        return {
-            loading: true,
-            loadingError: null
-        };
-    },
-    computed: {
-        ...mapStores(useTransactionCategoriesStore)
-    },
-    created() {
-        const self = this;
+const { tt } = useI18n();
+const { showToast, routeBackOnError } = useI18nUIComponents();
 
-        self.loading = true;
+const transactionCategoriesStore = useTransactionCategoriesStore();
 
-        self.transactionCategoriesStore.loadAllCategories({
-            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) {
-            const self = this;
-            const force = !!done;
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
 
-            self.transactionCategoriesStore.loadAllCategories({
-                force: force
-            }).then(() => {
-                if (done) {
-                    done();
-                }
+const loading = ref<boolean>(true);
+const loadingError = ref<unknown | null>(null);
 
-                if (force) {
-                    self.$toast('Category list has been updated');
-                }
-            }).catch(error => {
-                if (done) {
-                    done();
-                }
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        }
-    }
+function onPageAfterIn(): void {
+    routeBackOnError(props.f7router, loadingError);
 }
+
+function reload(done?: () => void): void {
+    const force = !!done;
+
+    transactionCategoriesStore.loadAllCategories({
+        force: force
+    }).then(() => {
+        done?.();
+
+        if (force) {
+            showToast('Category list has been updated');
+        }
+    }).catch(error => {
+        done?.();
+
+        if (!error.processed) {
+            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>