migrate app and user setting page framework to composition API and typescript

src/views/desktop/app/AppSettingsPage.vue

@@ -3,15 +3,15 @@
         <v-tabs show-arrows v-model="activeTab">
             <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
                 <v-icon size="20" start :icon="icons.basicSetting"/>
-                {{ $t('Basic') }}
+                {{ tt('Basic') }}
             </v-tab>
             <v-tab value="applicationLockSetting" @click="pushRouter('applicationLockSetting')">
                 <v-icon size="20" start :icon="icons.applicationLockSetting"/>
-                {{ $t('Application Lock') }}
+                {{ tt('Application Lock') }}
             </v-tab>
             <v-tab value="statisticsSetting" @click="pushRouter('statisticsSetting')">
                 <v-icon size="20" start :icon="icons.statisticsSetting"/>
-                {{ $t('Statistics') }}
+                {{ tt('Statistics') }}
             </v-tab>
         </v-tabs>
 
@@ -31,61 +31,61 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import AppBasicSettingTab from './settings/tabs/AppBasicSettingTab.vue';
 import AppLockSettingTab from './settings/tabs/AppLockSettingTab.vue';
 import AppStatisticsSettingTab from './settings/tabs/AppStatisticsSettingTab.vue';
 
+import { ref } from 'vue';
+import { useRouter, onBeforeRouteUpdate } from 'vue-router';
+
+import { useI18n } from '@/locales/helpers.ts';
+
 import {
     mdiCogOutline,
     mdiLockOpenOutline,
     mdiChartPieOutline
 } from '@mdi/js';
 
-export default {
+const props = defineProps<{
-    components: {
+    initTab?: string;
-        AppBasicSettingTab,
+}>();
-        AppLockSettingTab,
-        AppStatisticsSettingTab
-    },
-    props: [
-        'initTab'
-    ],
-    data() {
-        let queryActiveTab = this.initTab || 'basicSetting';
 
-        if ([
+const router = useRouter();
+
+const { tt } = useI18n();
+
+const ALL_TABS: string[] = [
     'basicSetting',
     'applicationLockSetting',
     'statisticsSetting'
-        ].indexOf(queryActiveTab) === -1) {
+];
-            queryActiveTab = 'basicSetting';
-        }
 
-        return {
+const icons = {
-            activeTab: queryActiveTab,
-            icons: {
     basicSetting: mdiCogOutline,
     applicationLockSetting: mdiLockOpenOutline,
     statisticsSetting: mdiChartPieOutline
-            }
 };
-    },
+
-    beforeRouteUpdate(to) {
+const activeTab = ref<string>((() => {
-        if (to.query && to.query.tab && [
+    let queryActiveTab = props.initTab || 'basicSetting';
-            'basicSetting',
+
-            'applicationLockSetting',
+    if (ALL_TABS.indexOf(queryActiveTab) < 0) {
-            'statisticsSetting'
+        queryActiveTab = 'basicSetting';
-        ].indexOf(to.query.tab) >= 0) {
+    }
-            this.activeTab = to.query.tab;
+
+    return queryActiveTab;
+})());
+
+const pushRouter = (tab: string) => {
+    router.push(`/app/settings?tab=${tab}`);
+};
+
+onBeforeRouteUpdate((to) => {
+    if (to.query && to.query.tab && ALL_TABS.indexOf(to.query.tab) >= 0) {
+        activeTab.value = to.query.tab;
     } else {
-            this.activeTab = 'basicSetting';
+        activeTab.value = 'basicSetting';
-        }
-    },
-    methods: {
-        pushRouter(tab) {
-            this.$router.push(`/app/settings?tab=${tab}`);
-        }
-    }
     }
+});
 </script>

src/views/desktop/user/UserSettingsPage.vue

@@ -3,19 +3,19 @@
         <v-tabs show-arrows v-model="activeTab">
             <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
                 <v-icon size="20" start :icon="icons.basicSetting"/>
-                {{ $t('Basic') }}
+                {{ tt('Basic') }}
             </v-tab>
             <v-tab value="securitySetting" @click="pushRouter('securitySetting')">
                 <v-icon size="20" start :icon="icons.securitySetting"/>
-                {{ $t('Security') }}
+                {{ tt('Security') }}
             </v-tab>
             <v-tab value="twoFactorSetting" @click="pushRouter('twoFactorSetting')">
                 <v-icon size="20" start :icon="icons.twoFactorSetting"/>
-                {{ $t('Two-Factor Authentication') }}
+                {{ tt('Two-Factor Authentication') }}
             </v-tab>
             <v-tab value="dataManagementSetting" @click="pushRouter('dataManagementSetting')">
                 <v-icon size="20" start :icon="icons.dataManagementSetting"/>
-                {{ $t('Data Management') }}
+                {{ tt('Data Management') }}
             </v-tab>
         </v-tabs>
 
@@ -39,12 +39,17 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import UserBasicSettingTab from './settings/tabs/UserBasicSettingTab.vue';
 import UserSecuritySettingTab from './settings/tabs/UserSecuritySettingTab.vue';
 import UserTwoFactorAuthSettingTab from './settings/tabs/UserTwoFactorAuthSettingTab.vue';
 import UserDataManagementSettingTab from './settings/tabs/UserDataManagementSettingTab.vue';
 
+import { ref, useTemplateRef, watch } from 'vue';
+import { useRouter, onBeforeRouteUpdate } from 'vue-router';
+
+import { useI18n } from '@/locales/helpers.ts';
+
 import {
     mdiAccountOutline,
     mdiLockOpenOutline,
@@ -52,61 +57,57 @@ import {
     mdiDatabaseCogOutline
 } from '@mdi/js';
 
-export default {
+type TwoFactorSettingTabType = InstanceType<typeof UserTwoFactorAuthSettingTab>;
-    components: {
-        UserBasicSettingTab,
-        UserSecuritySettingTab,
-        UserTwoFactorAuthSettingTab,
-        UserDataManagementSettingTab
-    },
-    props: [
-        'initTab'
-    ],
-    data() {
-        let queryActiveTab = this.initTab || 'basicSetting';
 
-        if ([
+const props = defineProps<{
+    initTab?: string;
+}>();
+
+const router = useRouter();
+
+const { tt } = useI18n();
+
+const ALL_TABS: string[] = [
     'basicSetting',
     'securitySetting',
     'twoFactorSetting',
     'dataManagementSetting'
-        ].indexOf(queryActiveTab) === -1) {
+];
-            queryActiveTab = 'basicSetting';
-        }
 
-        return {
+const icons = {
-            activeTab: queryActiveTab,
-            icons: {
     basicSetting: mdiAccountOutline,
     securitySetting: mdiLockOpenOutline,
     twoFactorSetting: mdiOnepassword,
     dataManagementSetting: mdiDatabaseCogOutline
-            }
 };
-    },
+
-    watch: {
+const twoFactorSettingTab = useTemplateRef<TwoFactorSettingTabType>('twoFactorSettingTab');
-        'activeTab': function (newValue, oldValue) {
+
-            if (oldValue === 'twoFactorSetting' && newValue !== 'twoFactorSetting') {
+const activeTab = ref<string>((() => {
-                this.$refs.twoFactorSettingTab.reset();
+    let queryActiveTab = props.initTab || 'basicSetting';
+
+    if (ALL_TABS.indexOf(queryActiveTab) < 0) {
+        queryActiveTab = 'basicSetting';
     }
-        }
+
-    },
+    return queryActiveTab;
-    beforeRouteUpdate(to) {
+})());
-        if (to.query && to.query.tab && [
+
-            'basicSetting',
+const pushRouter = (tab: string) => {
-            'securitySetting',
+    router.push(`/user/settings?tab=${tab}`);
-            'twoFactorSetting',
+};
-            'dataManagementSetting'
+
-        ].indexOf(to.query.tab) >= 0) {
+onBeforeRouteUpdate((to) => {
-            this.activeTab = to.query.tab;
+    if (to.query && to.query.tab && ALL_TABS.indexOf(to.query.tab) >= 0) {
+        activeTab.value = to.query.tab;
     } else {
-            this.activeTab = 'basicSetting';
+        activeTab.value = 'basicSetting';
-        }
-    },
-    methods: {
-        pushRouter(tab) {
-            this.$router.push(`/user/settings?tab=${tab}`);
-        }
     }
+});
+
+watch(activeTab, (newValue, oldValue) => {
+    if (oldValue === 'twoFactorSetting' && newValue !== 'twoFactorSetting') {
+        twoFactorSettingTab.value?.reset();
     }
+});
 </script>