From 2c3856be3ca068ff45bc9babc382ae1f2494633f Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 24 Jul 2023 00:20:01 +0800
Subject: [PATCH] change url when switching tab in user/app settings page

---
 src/router/desktop.js                       |  4 +--
 src/views/desktop/app/AppSettingsPage.vue   | 26 ++++++++++++++----
 src/views/desktop/user/UserSettingsPage.vue | 29 ++++++++++++++++-----
 3 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/router/desktop.js b/src/router/desktop.js
index 9c34516b..7fa4bd8f 100644
--- a/src/router/desktop.js
+++ b/src/router/desktop.js
@@ -114,7 +114,7 @@ const router = createRouter({
                     component: UserSettingsPage,
                     beforeEnter: checkLogin,
                     props: route => ({
-                        tab: route.query.tab
+                        initTab: route.query.tab
                     })
                 },
                 {
@@ -122,7 +122,7 @@ const router = createRouter({
                     component: AppSettingsPage,
                     beforeEnter: checkLogin,
                     props: route => ({
-                        tab: route.query.tab
+                        initTab: route.query.tab
                     })
                 },
                 {
diff --git a/src/views/desktop/app/AppSettingsPage.vue b/src/views/desktop/app/AppSettingsPage.vue
index 36dcb5f5..251b6419 100644
--- a/src/views/desktop/app/AppSettingsPage.vue
+++ b/src/views/desktop/app/AppSettingsPage.vue
@@ -1,15 +1,15 @@
 <template>
     <div>
         <v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab">
-            <v-tab value="basicSetting">
+            <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
                 <v-icon size="20" start :icon="icons.basicSetting"/>
                 {{ $t('Basic') }}
             </v-tab>
-            <v-tab value="applicationLockSetting">
+            <v-tab value="applicationLockSetting" @click="pushRouter('applicationLockSetting')">
                 <v-icon size="20" start :icon="icons.applicationLockSetting"/>
                 {{ $t('Application Lock') }}
             </v-tab>
-            <v-tab value="statisticsSetting">
+            <v-tab value="statisticsSetting" @click="pushRouter('statisticsSetting')">
                 <v-icon size="20" start :icon="icons.statisticsSetting"/>
                 {{ $t('Statistics') }}
             </v-tab>
@@ -49,10 +49,10 @@ export default {
         AppStatisticsSettingTab
     },
     props: [
-        'tab'
+        'initTab'
     ],
     data() {
-        let queryActiveTab = this.tab || 'basicSetting';
+        let queryActiveTab = this.initTab || 'basicSetting';
 
         if ([
             'basicSetting',
@@ -70,6 +70,22 @@ export default {
                 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}`);
+        }
     }
 }
 </script>
diff --git a/src/views/desktop/user/UserSettingsPage.vue b/src/views/desktop/user/UserSettingsPage.vue
index 18f16aee..689350c7 100644
--- a/src/views/desktop/user/UserSettingsPage.vue
+++ b/src/views/desktop/user/UserSettingsPage.vue
@@ -1,19 +1,19 @@
 <template>
     <div>
         <v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab">
-            <v-tab value="basicSetting">
+            <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
                 <v-icon size="20" start :icon="icons.basicSetting"/>
                 {{ $t('Basic') }}
             </v-tab>
-            <v-tab value="securitySetting">
+            <v-tab value="securitySetting" @click="pushRouter('securitySetting')">
                 <v-icon size="20" start :icon="icons.securitySetting"/>
                 {{ $t('Security') }}
             </v-tab>
-            <v-tab value="twoFactorSetting">
+            <v-tab value="twoFactorSetting" @click="pushRouter('twoFactorSetting')">
                 <v-icon size="20" start :icon="icons.twoFactorSetting"/>
                 {{ $t('Two-Factor Authentication') }}
             </v-tab>
-            <v-tab value="dataManagementSetting">
+            <v-tab value="dataManagementSetting" @click="pushRouter('dataManagementSetting')">
                 <v-icon size="20" start :icon="icons.dataManagementSetting"/>
                 {{ $t('Data Management') }}
             </v-tab>
@@ -60,10 +60,10 @@ export default {
         UserDataManagementSettingTab
     },
     props: [
-        'tab'
+        'initTab'
     ],
     data() {
-        let queryActiveTab = this.tab || 'basicSetting';
+        let queryActiveTab = this.initTab || 'basicSetting';
 
         if ([
             'basicSetting',
@@ -90,6 +90,23 @@ export default {
                 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}`);
+        }
     }
 }
 </script>