[Feature][UI Next][V1.0.0-Alpha] Timezone to support search (#8872)

* timezone to support search

* Update data after switching time zones

* add blank after scss

dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.module.scss

@@ -18,3 +18,8 @@
  .icon {
   margin: 0 12px;
 }
+
+.custom-select {
+  margin: 10px;
+  width: auto;
+}

dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.tsx

@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 
-import { defineComponent, ref, PropType } from 'vue'
-import { NIcon, NButton, NPopselect } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { defineComponent, ref, PropType, computed, h, inject } from 'vue'
+import { NIcon, NButton, NSelect, NDropdown, NTag } from 'naive-ui'
 import styles from './index.module.scss'
 import { DownOutlined } from '@vicons/antd'
 import { useDropDown } from './use-dropdown'
@@ -24,6 +25,7 @@ import { useTimezoneStore } from '@/store/timezone/timezone'
 
 const Timezone = defineComponent({
   name: 'Timezone',
+  inject: ['reload'],
   props: {
     timezoneOptions: {
       type: Array as PropType<any>,
@@ -31,6 +33,8 @@ const Timezone = defineComponent({
     }
   },
   setup(props) {
+    const { t } = useI18n()
+    const reload: any = inject('reload')
     const timezoneStore = useTimezoneStore()
     const chooseVal = ref(
       props.timezoneOptions.filter(
@@ -38,17 +42,65 @@ const Timezone = defineComponent({
       )[0].label
     )
 
-    const { handleSelect } = useDropDown(chooseVal)
+    const currentTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+    const options = [
+      {
+        label: currentTimeZone,
+        key: currentTimeZone
+      },
+      {
+        key: 'header-divider',
+        type: 'divider'
+      },
+      {
+        key: 'footer',
+        type: 'render',
+        render: () => (
+          <NSelect
+            class={styles['custom-select']}
+            filterable
+            size='small'
+            placeholder={t('profile.please_select_timezone')}
+            options={props.timezoneOptions}
+            onUpdateValue={handleSelect}
+          />
+        )
+      }
+    ]
 
-    return { handleSelect, chooseVal }
+    const renderDropdownLabel = (option: any) => {
+      if (option.label === currentTimeZone) {
+        return h('div', null, [
+          h('span', null, option.label),
+          h(
+            NTag,
+            { type: 'info', size: 'small', style: 'margin-left: 10px' },
+            { default: () => 'Local' }
+          )
+        ])
+      } else {
+        return option.label
+      }
+    }
+
+    const optionsVal = computed(() =>
+      currentTimeZone === chooseVal.value
+        ? options
+        : [{ label: chooseVal.value, key: chooseVal.value }, ...options]
+    )
+
+    const { handleSelect } = useDropDown(chooseVal, reload)
+
+    return { handleSelect, chooseVal, optionsVal, renderDropdownLabel }
   },
   render() {
     return (
-      <NPopselect
-        options={this.timezoneOptions}
-        trigger='click'
-        scrollable
-        onUpdateValue={this.handleSelect}
+      <NDropdown
+        trigger='hover'
+        show-arrow
+        options={this.optionsVal}
+        on-select={this.handleSelect}
+        renderLabel={this.renderDropdownLabel}
       >
         <NButton text>
           {this.chooseVal}
@@ -56,7 +108,7 @@ const Timezone = defineComponent({
             <DownOutlined />
           </NIcon>
         </NButton>
-      </NPopselect>
+      </NDropdown>
     )
   }
 })

dolphinscheduler-ui-next/src/layouts/content/components/timezone/use-dropdown.ts

@@ -15,21 +15,18 @@
  * limitations under the License.
  */
 
-import { useI18n } from 'vue-i18n'
 import { updateUser } from '@/service/modules/users'
 import { useTimezoneStore } from '@/store/timezone/timezone'
 import { useUserStore } from '@/store/user/user'
 import type { UserInfoRes } from '@/service/modules/users/types'
 
-export function useDropDown(chooseVal: any) {
-  const { t } = useI18n()
-
+export function useDropDown(chooseVal: any, reload: any) {
   const userStore = useUserStore()
   const timezoneStore = useTimezoneStore()
 
   const userInfo = userStore.userInfo as UserInfoRes
 
-  const handleSelect = (value: string) => {
+  const handleSelect = (key: string) => {
     updateUser({
       userPassword: '',
       id: userInfo.id,
@@ -38,11 +35,11 @@ export function useDropDown(chooseVal: any) {
       email: '',
       phone: userInfo.phone,
       state: userInfo.state,
-      timeZone: value
+      timeZone: key
     }).then(() => {
-      chooseVal.value = value
-      timezoneStore.setTimezone(value as string)
-      window.$message.success(t('profile.timezone_success'))
+      chooseVal.value = key
+      timezoneStore.setTimezone(key as string)
+      reload()
     })
   }
 

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -137,7 +137,8 @@ const profile = {
   state_tips: 'Please choose your state',
   enable: 'Enable',
   disable: 'Disable',
-  timezone_success: 'Time zone updated successful'
+  timezone_success: 'Time zone updated successful',
+  please_select_timezone: 'Choose timeZone'
 }
 
 const monitor = {

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -136,7 +136,8 @@ const profile = {
   state_tips: '请选择状态',
   enable: '启用',
   disable: '禁用',
-  timezone_success: '时区更新成功'
+  timezone_success: '时区更新成功',
+  please_select_timezone: '请选择时区'
 }
 
 const monitor = {