You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/03/14 09:16:20 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next][V1.0.0-Alpha] Timezone to support search (#8872)
This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 3bbca9d [Feature][UI Next][V1.0.0-Alpha] Timezone to support search (#8872)
3bbca9d is described below
commit 3bbca9d10173e5a5eb2db602e210473f32c40588
Author: Devosend <de...@gmail.com>
AuthorDate: Mon Mar 14 17:16:11 2022 +0800
[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
---
.../content/components/timezone/index.module.scss | 5 ++
.../layouts/content/components/timezone/index.tsx | 72 +++++++++++++++++++---
.../content/components/timezone/use-dropdown.ts | 15 ++---
.../src/locales/modules/en_US.ts | 3 +-
.../src/locales/modules/zh_CN.ts | 3 +-
5 files changed, 77 insertions(+), 21 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.module.scss b/dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.module.scss
index 64991b4..ec3fa47 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.module.scss
+++ b/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;
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.tsx
index cb7a506..4d6c060 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.tsx
+++ b/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>
)
}
})
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/timezone/use-dropdown.ts b/dolphinscheduler-ui-next/src/layouts/content/components/timezone/use-dropdown.ts
index 0b26906..f73b5e1 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/timezone/use-dropdown.ts
+++ b/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()
})
}
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 2982407..67512fc 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/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 = {
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index 9222de7..3f68bfd 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/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 = {