migrate about page to composition API and typescript

src/views/base/AboutPage.ts

@@ -0,0 +1,50 @@
+import { computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+
+import type { LatestExchangeRateResponse } from '@/models/exchange_rate.ts';
+
+import { getMapProvider } from '@/lib/server_settings.ts';
+import { getMapWebsite } from '@/lib/map/index.ts';
+import { getLicense, getThirdPartyLicenses } from '@/lib/licenses.ts';
+import { getVersion, getBuildTime } from '@/lib/version.ts';
+
+export function useAboutPage() {
+    const { tt, formatUnixTimeToLongDateTime } = useI18n();
+
+    const exchangeRatesStore = useExchangeRatesStore();
+
+    const version = `v${getVersion()}`;
+
+    const buildTime = computed<string>(() => {
+        const time = getBuildTime();
+
+        if (!time) {
+            return time;
+        }
+
+        return formatUnixTimeToLongDateTime(parseInt(time));
+    });
+    const exchangeRatesData = computed<LatestExchangeRateResponse | undefined>(() => exchangeRatesStore.latestExchangeRates.data);
+    const mapProviderName = computed<string>(() => {
+        const provider = getMapProvider();
+        return provider ? tt(`mapprovider.${provider}`) : '';
+    });
+    const mapProviderWebsite = computed<string>(() => getMapWebsite());
+    const licenseLines = computed<string[]>(() => getLicense().replaceAll(/\r/g, '').split('\n'));
+    const thirdPartyLicenses = computed<LicenseInfo[]>(() => getThirdPartyLicenses());
+
+    return {
+        // constants
+        version,
+        // computed states
+        buildTime,
+        exchangeRatesData,
+        mapProviderName,
+        mapProviderWebsite,
+        licenseLines,
+        thirdPartyLicenses
+    };
+}

src/views/desktop/AboutPage.vue

@@ -1,11 +1,11 @@
 <template>
     <v-row class="match-height">
         <v-col cols="12">
-            <v-card :title="$t('global.app.title')">
+            <v-card :title="tt('global.app.title')">
                 <v-card-text>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Version') }}</span>
+                            <span class="text-body-1">{{ tt('Version') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
                             <span class="text-body-1">{{ version }}</span>
@@ -13,7 +13,7 @@
                     </v-row>
                     <v-row no-gutters v-if="buildTime">
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Build Time') }}</span>
+                            <span class="text-body-1">{{ tt('Build Time') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
                             <span class="text-body-1">{{ buildTime }}</span>
@@ -21,7 +21,7 @@
                     </v-row>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Official Website') }}</span>
+                            <span class="text-body-1">{{ tt('Official Website') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
                             <a class="text-body-1" href="https://github.com/mayswind/ezbookkeeping" target="_blank">
@@ -31,7 +31,7 @@
                     </v-row>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Report Issue') }}</span>
+                            <span class="text-body-1">{{ tt('Report Issue') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
                             <a class="text-body-1" href="https://github.com/mayswind/ezbookkeeping/issues" target="_blank">
@@ -41,7 +41,7 @@
                     </v-row>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Documents') }}</span>
+                            <span class="text-body-1">{{ tt('Documents') }}</span>
                         </v-col>
                         <v-col cols="12" md="10">
                             <a class="text-body-1" href="https://ezbookkeeping.mayswind.net" target="_blank">
@@ -54,11 +54,11 @@
         </v-col>
 
         <v-col cols="12" v-if="exchangeRatesData">
-            <v-card :title="$t('Exchange Rates Data')">
+            <v-card :title="tt('Exchange Rates Data')">
                 <v-card-text>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Provider') }}</span>
+                            <span class="text-body-1">{{ tt('Provider') }}</span>
                         </v-col>
                         <v-col cols="12" md="10">
                             <a class="text-body-1" :href="exchangeRatesData.referenceUrl" target="_blank"
@@ -71,11 +71,11 @@
         </v-col>
 
         <v-col cols="12" v-if="mapProviderName">
-            <v-card :title="$t('Map')">
+            <v-card :title="tt('Map')">
                 <v-card-text>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-body-1">{{ $t('Provider') }}</span>
+                            <span class="text-body-1">{{ tt('Provider') }}</span>
                         </v-col>
                         <v-col cols="12" md="10">
                             <a class="text-body-1" :href="mapProviderWebsite" target="_blank"
@@ -88,7 +88,7 @@
         </v-col>
 
         <v-col cols="12">
-            <v-card :title="$t('License')">
+            <v-card :title="tt('License')">
                 <v-card-text>
                     <v-row no-gutters>
                         <v-col cols="12">
@@ -119,44 +119,10 @@
     </v-row>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+<script setup lang="ts">
+import { useI18n } from '@/locales/helpers.ts';
+import { useAboutPage } from '@/views/base/AboutPage.ts';
 
-import { getMapProvider } from '@/lib/server_settings.ts';
-import { getMapWebsite } from '@/lib/map/index.ts';
-import { getLicense, getThirdPartyLicenses } from '@/lib/licenses.ts';
-
-export default {
-    computed: {
-        ...mapStores(useUserStore, useExchangeRatesStore),
-        version() {
-            return 'v' + this.$version;
-        },
-        buildTime() {
-            if (!this.$buildTime) {
-                return this.$buildTime;
-            }
-
-            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.$buildTime);
-        },
-        exchangeRatesData() {
-            return this.exchangeRatesStore.latestExchangeRates.data;
-        },
-        mapProviderName() {
-            const provider = getMapProvider();
-            return provider ? this.$t(`mapprovider.${provider}`) : '';
-        },
-        mapProviderWebsite() {
-            return getMapWebsite();
-        },
-        licenseLines() {
-            return getLicense().replaceAll(/\r/g, '').split('\n');
-        },
-        thirdPartyLicenses() {
-            return getThirdPartyLicenses();
-        }
-    }
-}
+const { tt } = useI18n();
+const { version, buildTime, exchangeRatesData, mapProviderName, mapProviderWebsite, licenseLines, thirdPartyLicenses } = useAboutPage();
 </script>

src/views/mobile/AboutPage.vue

@@ -1,36 +1,36 @@
 <template>
     <f7-page>
-        <f7-navbar :title="$t('About')" :back-link="$t('Back')"></f7-navbar>
+        <f7-navbar :title="tt('About')" :back-link="tt('Back')"></f7-navbar>
 
-        <f7-block-title class="margin-top">{{ $t('global.app.title') }}</f7-block-title>
+        <f7-block-title class="margin-top">{{ tt('global.app.title') }}</f7-block-title>
         <f7-list strong inset dividers>
-            <f7-list-item :title="$t('Version')" :after="version"></f7-list-item>
-            <f7-list-item :title="$t('Build Time')" :after="buildTime" v-if="buildTime"></f7-list-item>
-            <f7-list-item external :title="$t('Official Website')" link="https://github.com/mayswind/ezbookkeeping" target="_blank"></f7-list-item>
-            <f7-list-item external :title="$t('Report Issue')" link="https://github.com/mayswind/ezbookkeeping/issues" target="_blank"></f7-list-item>
-            <f7-list-item external :title="$t('Documents')" link="https://ezbookkeeping.mayswind.net" target="_blank"></f7-list-item>
-            <f7-list-item :title="$t('License')" link="#" popup-open=".license-popup"></f7-list-item>
+            <f7-list-item :title="tt('Version')" :after="version"></f7-list-item>
+            <f7-list-item :title="tt('Build Time')" :after="buildTime" v-if="buildTime"></f7-list-item>
+            <f7-list-item external :title="tt('Official Website')" link="https://github.com/mayswind/ezbookkeeping" target="_blank"></f7-list-item>
+            <f7-list-item external :title="tt('Report Issue')" link="https://github.com/mayswind/ezbookkeeping/issues" target="_blank"></f7-list-item>
+            <f7-list-item external :title="tt('Documents')" link="https://ezbookkeeping.mayswind.net" target="_blank"></f7-list-item>
+            <f7-list-item :title="tt('License')" link="#" popup-open=".license-popup"></f7-list-item>
         </f7-list>
 
-        <f7-block-title class="margin-top" v-if="exchangeRatesData">{{ $t('Exchange Rates Data') }}</f7-block-title>
+        <f7-block-title class="margin-top" v-if="exchangeRatesData">{{ tt('Exchange Rates Data') }}</f7-block-title>
         <f7-list strong inset dividers v-if="exchangeRatesData">
-            <f7-list-item external :title="$t('Provider')" :after="exchangeRatesData.dataSource"
+            <f7-list-item external :title="tt('Provider')" :after="exchangeRatesData.dataSource"
                           :link="exchangeRatesData.referenceUrl" target="_blank" v-if="exchangeRatesData.referenceUrl"></f7-list-item>
-            <f7-list-item :title="$t('Provider')" :after="exchangeRatesData.dataSource" v-if="!exchangeRatesData.referenceUrl"></f7-list-item>
+            <f7-list-item :title="tt('Provider')" :after="exchangeRatesData.dataSource" v-if="!exchangeRatesData.referenceUrl"></f7-list-item>
         </f7-list>
 
-        <f7-block-title class="margin-top" v-if="mapProviderName">{{ $t('Map') }}</f7-block-title>
+        <f7-block-title class="margin-top" v-if="mapProviderName">{{ tt('Map') }}</f7-block-title>
         <f7-list strong inset dividers v-if="mapProviderName">
-            <f7-list-item external :title="$t('Provider')" :after="mapProviderName"
+            <f7-list-item external :title="tt('Provider')" :after="mapProviderName"
                           :link="mapProviderWebsite" target="_blank" v-if="mapProviderWebsite"></f7-list-item>
-            <f7-list-item :title="$t('Provider')" :after="mapProviderName" v-if="!mapProviderWebsite"></f7-list-item>
+            <f7-list-item :title="tt('Provider')" :after="mapProviderName" v-if="!mapProviderWebsite"></f7-list-item>
         </f7-list>
 
         <f7-popup push with-subnavbar swipe-to-close swipe-handler=".swipe-handler" class="license-popup">
             <f7-page>
                 <f7-navbar>
                     <div class="swipe-handler" style="z-index: 10"></div>
-                    <f7-subnavbar :title="$t('License') "></f7-subnavbar>
+                    <f7-subnavbar :title="tt('License') "></f7-subnavbar>
                 </f7-navbar>
                 <f7-block strong outline class="license-content">
                     <p>
@@ -57,46 +57,12 @@
     </f7-page>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
-import { useUserStore } from '@/stores/user.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+<script setup lang="ts">
+import { useI18n } from '@/locales/helpers.ts';
+import { useAboutPage } from '@/views/base/AboutPage.ts';
 
-import { getMapProvider } from '@/lib/server_settings.ts';
-import { getMapWebsite } from '@/lib/map/index.ts';
-import { getLicense, getThirdPartyLicenses } from '@/lib/licenses.ts';
-
-export default {
-    computed: {
-        ...mapStores(useUserStore, useExchangeRatesStore),
-        version() {
-            return 'v' + this.$version;
-        },
-        buildTime() {
-            if (!this.$buildTime) {
-                return this.$buildTime;
-            }
-
-            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.$buildTime);
-        },
-        exchangeRatesData() {
-            return this.exchangeRatesStore.latestExchangeRates.data;
-        },
-        mapProviderName() {
-            const provider = getMapProvider();
-            return provider ? this.$t(`mapprovider.${provider}`) : '';
-        },
-        mapProviderWebsite() {
-            return getMapWebsite();
-        },
-        licenseLines() {
-            return getLicense().replaceAll(/\r/g, '').split('\n');
-        },
-        thirdPartyLicenses() {
-            return getThirdPartyLicenses();
-        }
-    }
-}
+const { tt } = useI18n();
+const { version, buildTime, exchangeRatesData, mapProviderName, mapProviderWebsite, licenseLines, thirdPartyLicenses } = useAboutPage();
 </script>
 
 <style>