feat(settings): add save-and-test button

GreptimeTeam · Dec 26, 2024 · dbc811a · dbc811a
1 parent 5a58612
commit dbc811a
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 41 deletions.
diff --git a/src/components/global-setting/index.vue b/src/components/global-setting/index.vue
@@ -4,14 +4,13 @@
     template(#icon)
       icon-settings
 a-drawer.settings-drawer(
+  v-model:visible="globalSettings"
   unmount-on-close
   placement="left"
   :width="323"
-  :visible="globalSettings"
   :mask-closable="true"
   :footer="false"
   :drawer-style="{ bottom: MARGIN_BOTTOM }"
-  @cancel="cancel"
 )
   a-form(layout="vertical" :model="settingsForm")
     a-form-item(:label="$t('settings.host')")
@@ -45,6 +44,15 @@ a-drawer.settings-drawer(
           span.bold {{ ` US/Pacific. ` }}
           | See more at
           a-link(icon href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones" target="_blank") Wiki.
+    a-form-item
+      a-button(
+        type="primary"
+        long
+        :loading="loginLoading"
+        @click="save"
+      ) {{ $t('settings.save') }}
+      template(#extra)
+        span.fail(v-if="!loginSuccess") {{ $t('settings.saveTip') }}
 </template>
 
 <script lang="ts" setup name="GlobalSetting">
@@ -53,8 +61,6 @@ a-drawer.settings-drawer(
   import axios from 'axios'
 
   const MARGIN_BOTTOM = `${38 * 2 + 8}px`
-  const emit = defineEmits(['cancel'])
-
   const { t } = useI18n()
 
   const { navbar, updateSettings, login } = useAppStore()
@@ -63,6 +69,9 @@ a-drawer.settings-drawer(
   const { role } = storeToRefs(useUserStore())
   const { globalSettings, host, database, username, password, databaseList, userTimezone } = storeToRefs(useAppStore())
 
+  const loginSuccess = ref(true)
+  const loginLoading = ref(false)
+
   const settingsForm = ref({
     username: username.value,
     password: password.value,
@@ -72,25 +81,18 @@ a-drawer.settings-drawer(
     userTimezone: userTimezone.value,
   })
 
-  const cancel = async () => {
+  const save = async () => {
     // TODO: check userTimezone format validation
-    updateSettings({ globalSettings: false, userTimezone: settingsForm.value.userTimezone })
+    updateSettings({ userTimezone: settingsForm.value.userTimezone })
+
     axios.defaults.baseURL = settingsForm.value.host
-    // Check if settings are changed
-    if (
-      settingsForm.value.username !== username.value ||
-      settingsForm.value.password !== password.value ||
-      settingsForm.value.database !== database.value ||
-      settingsForm.value.host !== host.value
-    ) {
-      const res = await login(settingsForm.value)
-      if (res) {
-        getScriptsTable()
-        checkTables()
-      }
+    loginLoading.value = true
+    loginSuccess.value = await login(settingsForm.value)
+    if (loginSuccess.value) {
+      updateSettings({ globalSettings: false })
+      checkTables()
     }
-
-    emit('cancel')
+    loginLoading.value = false
   }
 
   const setVisible = () => {
@@ -154,6 +156,16 @@ a-drawer.settings-drawer(
       .arco-drawer-body {
         padding: 16px 16px 10px 16px;
       }
+
+      .save {
+        .arco-form-item {
+          margin-bottom: 0;
+        }
+      }
+
+      .fail {
+        color: var(--danger-color);
+      }
     }
     .bold {
       font-weight: 600;

diff --git a/src/components/global-setting/locale/en-US.ts b/src/components/global-setting/locale/en-US.ts
diff --git a/src/components/global-setting/locale/zh-CN.ts b/src/components/global-setting/locale/zh-CN.ts
diff --git a/src/locale/en-US/settings.ts b/src/locale/en-US/settings.ts
@@ -3,8 +3,9 @@ export default {
   'settings.database': 'Database',
   'settings.host': 'Host',
   'settings.password': 'Password',
-  'settings.save': 'Save',
+  'settings.save': 'Save and Test',
   'settings.title': 'Settings',
   'settings.username': 'Username',
   'settings.timezone': 'Timezone',
+  'settings.saveTip': 'Authentication failed. Please check your settings.',
 }
diff --git a/src/locale/zh-CN/settings.ts b/src/locale/zh-CN/settings.ts
@@ -7,4 +7,5 @@ export default {
   'settings.database': '数据库',
   'settings.save': '保存',
   'settings.timezone': '时区',
+  'settings.saveTip': '认证失败，请检查您的设置。',
 }
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
@@ -49,7 +49,6 @@ const useAppStore = defineStore('app', {
     },
 
     async login(form: Partial<AppState>) {
-      // TODO: add a save and test button
       try {
         this.updateSettings(form)
         // check if settings are valid
@@ -61,6 +60,7 @@ const useAppStore = defineStore('app', {
       } catch (error) {
         const { resetData } = useDataBaseStore()
         resetData()
+        this.updateSettings({ globalSettings: true })
         return false
       }
       return true