From f2ebd751d443fe59b03baf343dd195b0d00c77c4 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 12 Jan 2025 12:55:45 +0800
Subject: [PATCH] migrate app and user setting page framework to composition
 API and typescript

---
 src/views/desktop/app/AppSettingsPage.vue   |  94 ++++++++--------
 src/views/desktop/user/UserSettingsPage.vue | 119 ++++++++++----------
 2 files changed, 107 insertions(+), 106 deletions(-)

diff --git a/src/views/desktop/app/AppSettingsPage.vue b/src/views/desktop/app/AppSettingsPage.vue
index 7085ce58..bb9d3ff8 100644
--- a/src/views/desktop/app/AppSettingsPage.vue
+++ b/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 {
-    components: {
-        AppBasicSettingTab,
-        AppLockSettingTab,
-        AppStatisticsSettingTab
-    },
-    props: [
-        'initTab'
-    ],
-    data() {
-        let queryActiveTab = this.initTab || 'basicSetting';
+const props = defineProps<{
+    initTab?: string;
+}>();
 
-        if ([
-            'basicSetting',
-            'applicationLockSetting',
-            'statisticsSetting'
-        ].indexOf(queryActiveTab) === -1) {
-            queryActiveTab = 'basicSetting';
-        }
+const router = useRouter();
 
-        return {
-            activeTab: queryActiveTab,
-            icons: {
-                basicSetting: mdiCogOutline,
-                applicationLockSetting: mdiLockOpenOutline,
-                statisticsSetting: mdiChartPieOutline
-            }
-        };
-    },
-    beforeRouteUpdate(to) {
-        if (to.query && to.query.tab && [
-            'basicSetting',
-            'applicationLockSetting',
-            'statisticsSetting'
-        ].indexOf(to.query.tab) >= 0) {
-            this.activeTab = to.query.tab;
-        } else {
-            this.activeTab = 'basicSetting';
-        }
-    },
-    methods: {
-        pushRouter(tab) {
-            this.$router.push(`/app/settings?tab=${tab}`);
-        }
+const { tt } = useI18n();
+
+const ALL_TABS: string[] = [
+    'basicSetting',
+    'applicationLockSetting',
+    'statisticsSetting'
+];
+
+const icons = {
+    basicSetting: mdiCogOutline,
+    applicationLockSetting: mdiLockOpenOutline,
+    statisticsSetting: mdiChartPieOutline
+};
+
+const activeTab = ref<string>((() => {
+    let queryActiveTab = props.initTab || 'basicSetting';
+
+    if (ALL_TABS.indexOf(queryActiveTab) < 0) {
+        queryActiveTab = 'basicSetting';
     }
-}
+
+    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 {
+        activeTab.value = 'basicSetting';
+    }
+});
 </script>
diff --git a/src/views/desktop/user/UserSettingsPage.vue b/src/views/desktop/user/UserSettingsPage.vue
index fbb0febe..2a5bf575 100644
--- a/src/views/desktop/user/UserSettingsPage.vue
+++ b/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 {
-    components: {
-        UserBasicSettingTab,
-        UserSecuritySettingTab,
-        UserTwoFactorAuthSettingTab,
-        UserDataManagementSettingTab
-    },
-    props: [
-        'initTab'
-    ],
-    data() {
-        let queryActiveTab = this.initTab || 'basicSetting';
+type TwoFactorSettingTabType = InstanceType<typeof UserTwoFactorAuthSettingTab>;
 
-        if ([
-            'basicSetting',
-            'securitySetting',
-            'twoFactorSetting',
-            'dataManagementSetting'
-        ].indexOf(queryActiveTab) === -1) {
-            queryActiveTab = 'basicSetting';
-        }
+const props = defineProps<{
+    initTab?: string;
+}>();
 
-        return {
-            activeTab: queryActiveTab,
-            icons: {
-                basicSetting: mdiAccountOutline,
-                securitySetting: mdiLockOpenOutline,
-                twoFactorSetting: mdiOnepassword,
-                dataManagementSetting: mdiDatabaseCogOutline
-            }
-        };
-    },
-    watch: {
-        'activeTab': function (newValue, oldValue) {
-            if (oldValue === 'twoFactorSetting' && newValue !== 'twoFactorSetting') {
-                this.$refs.twoFactorSettingTab.reset();
-            }
-        }
-    },
-    beforeRouteUpdate(to) {
-        if (to.query && to.query.tab && [
-            'basicSetting',
-            'securitySetting',
-            'twoFactorSetting',
-            'dataManagementSetting'
-        ].indexOf(to.query.tab) >= 0) {
-            this.activeTab = to.query.tab;
-        } else {
-            this.activeTab = 'basicSetting';
-        }
-    },
-    methods: {
-        pushRouter(tab) {
-            this.$router.push(`/user/settings?tab=${tab}`);
-        }
+const router = useRouter();
+
+const { tt } = useI18n();
+
+const ALL_TABS: string[] = [
+    'basicSetting',
+    'securitySetting',
+    'twoFactorSetting',
+    'dataManagementSetting'
+];
+
+const icons = {
+    basicSetting: mdiAccountOutline,
+    securitySetting: mdiLockOpenOutline,
+    twoFactorSetting: mdiOnepassword,
+    dataManagementSetting: mdiDatabaseCogOutline
+};
+
+const twoFactorSettingTab = useTemplateRef<TwoFactorSettingTabType>('twoFactorSettingTab');
+
+const activeTab = ref<string>((() => {
+    let queryActiveTab = props.initTab || 'basicSetting';
+
+    if (ALL_TABS.indexOf(queryActiveTab) < 0) {
+        queryActiveTab = 'basicSetting';
     }
-}
+
+    return queryActiveTab;
+})());
+
+const pushRouter = (tab: string) => {
+    router.push(`/user/settings?tab=${tab}`);
+};
+
+onBeforeRouteUpdate((to) => {
+    if (to.query && to.query.tab && ALL_TABS.indexOf(to.query.tab) >= 0) {
+        activeTab.value = to.query.tab;
+    } else {
+        activeTab.value = 'basicSetting';
+    }
+});
+
+watch(activeTab, (newValue, oldValue) => {
+    if (oldValue === 'twoFactorSetting' && newValue !== 'twoFactorSetting') {
+        twoFactorSettingTab.value?.reset();
+    }
+});
 </script>