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/11 09:11:58 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next][V1.0.0-Alpha] UI support timezone setting (#8833)
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 5aeb753 [Feature][UI Next][V1.0.0-Alpha] UI support timezone setting (#8833)
5aeb753 is described below
commit 5aeb753ae880f9a67ca16f96df3946a0235b82e6
Author: Devosend <de...@gmail.com>
AuthorDate: Fri Mar 11 17:11:51 2022 +0800
[Feature][UI Next][V1.0.0-Alpha] UI support timezone setting (#8833)
---
.../layouts/content/components/navbar/index.tsx | 6 ++
.../content/components/timezone/index.module.scss | 20 +++++++
.../layouts/content/components/timezone/index.tsx | 64 ++++++++++++++++++++++
.../content/components/timezone/use-dropdown.ts} | 47 ++++++++--------
.../src/layouts/content/index.tsx | 1 +
.../src/layouts/content/use-dataList.ts | 5 ++
.../src/locales/modules/en_US.ts | 3 +-
.../src/locales/modules/zh_CN.ts | 3 +-
.../src/service/modules/users/types.ts | 1 +
.../src/store/timezone/timezone.ts | 37 +++++++++++++
.../src/store/timezone/types.ts | 26 +++++++++
.../src/views/login/use-login.ts | 7 +++
12 files changed, 194 insertions(+), 26 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx
index f15e50c..71b0ca2 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx
@@ -20,6 +20,7 @@ import styles from './index.module.scss'
import { NMenu } from 'naive-ui'
import Logo from '../logo'
import Locales from '../locales'
+import Timezone from '../timezone'
import User from '../user'
import Theme from '../theme'
import { useMenuClick } from './use-menuClick'
@@ -36,6 +37,10 @@ const Navbar = defineComponent({
type: Array as PropType<any>,
default: []
},
+ timezoneOptions: {
+ type: Array as PropType<any>,
+ default: []
+ },
userDropdownOptions: {
type: Array as PropType<any>,
default: []
@@ -62,6 +67,7 @@ const Navbar = defineComponent({
<div class={styles.settings}>
<Theme />
<Locales localesOptions={this.localesOptions} />
+ <Timezone timezoneOptions={this.timezoneOptions} />
<User userDropdownOptions={this.userDropdownOptions} />
</div>
</div>
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
new file mode 100644
index 0000000..64991b4
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.module.scss
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ .icon {
+ margin: 0 12px;
+}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.tsx
new file mode 100644
index 0000000..cb7a506
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.tsx
@@ -0,0 +1,64 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, ref, PropType } from 'vue'
+import { NIcon, NButton, NPopselect } from 'naive-ui'
+import styles from './index.module.scss'
+import { DownOutlined } from '@vicons/antd'
+import { useDropDown } from './use-dropdown'
+import { useTimezoneStore } from '@/store/timezone/timezone'
+
+const Timezone = defineComponent({
+ name: 'Timezone',
+ props: {
+ timezoneOptions: {
+ type: Array as PropType<any>,
+ default: []
+ }
+ },
+ setup(props) {
+ const timezoneStore = useTimezoneStore()
+ const chooseVal = ref(
+ props.timezoneOptions.filter(
+ (item: { value: string }) => item.value === timezoneStore.getTimezone
+ )[0].label
+ )
+
+ const { handleSelect } = useDropDown(chooseVal)
+
+ return { handleSelect, chooseVal }
+ },
+ render() {
+ return (
+ <NPopselect
+ options={this.timezoneOptions}
+ trigger='click'
+ scrollable
+ onUpdateValue={this.handleSelect}
+ >
+ <NButton text>
+ {this.chooseVal}
+ <NIcon class={styles.icon}>
+ <DownOutlined />
+ </NIcon>
+ </NButton>
+ </NPopselect>
+ )
+ }
+})
+
+export default Timezone
diff --git a/dolphinscheduler-ui-next/src/views/login/use-login.ts b/dolphinscheduler-ui-next/src/layouts/content/components/timezone/use-dropdown.ts
similarity index 50%
copy from dolphinscheduler-ui-next/src/views/login/use-login.ts
copy to dolphinscheduler-ui-next/src/layouts/content/components/timezone/use-dropdown.ts
index 0ee349f..0b26906 100644
--- a/dolphinscheduler-ui-next/src/views/login/use-login.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/timezone/use-dropdown.ts
@@ -15,39 +15,38 @@
* limitations under the License.
*/
-import { useRouter } from 'vue-router'
-import { login } from '@/service/modules/login'
-import { getUserInfo } from '@/service/modules/users'
+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 { Router } from 'vue-router'
-import type { SessionIdRes } from '@/service/modules/login/types'
import type { UserInfoRes } from '@/service/modules/users/types'
-import { useMenuStore } from '@/store/menu/menu'
-import cookies from 'js-cookie'
-export function useLogin(state: any) {
- const router: Router = useRouter()
- const userStore = useUserStore()
- const menuStore = useMenuStore()
-
- const handleLogin = () => {
- state.loginFormRef.validate(async (valid: any) => {
- if (!valid) {
- const loginRes: SessionIdRes = await login({ ...state.loginForm })
- await userStore.setSessionId(loginRes.sessionId)
- cookies.set('sessionId', loginRes.sessionId, { path: '/' })
+export function useDropDown(chooseVal: any) {
+ const { t } = useI18n()
- const userInfoRes: UserInfoRes = await getUserInfo()
- await userStore.setUserInfo(userInfoRes)
+ const userStore = useUserStore()
+ const timezoneStore = useTimezoneStore()
- const key = menuStore.getMenuKey
+ const userInfo = userStore.userInfo as UserInfoRes
- router.push({ path: key || 'home' })
- }
+ const handleSelect = (value: string) => {
+ updateUser({
+ userPassword: '',
+ id: userInfo.id,
+ userName: '',
+ tenantId: userInfo.tenantId,
+ email: '',
+ phone: userInfo.phone,
+ state: userInfo.state,
+ timeZone: value
+ }).then(() => {
+ chooseVal.value = value
+ timezoneStore.setTimezone(value as string)
+ window.$message.success(t('profile.timezone_success'))
})
}
return {
- handleLogin
+ handleSelect
}
}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
index d80f63e..b8ae1ba 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
@@ -107,6 +107,7 @@ const Content = defineComponent({
onHandleMenuClick={this.getSideMenuOptions}
headerMenuOptions={this.headerMenuOptions}
localesOptions={this.localesOptions}
+ timezoneOptions={this.timezoneOptions}
userDropdownOptions={this.userDropdownOptions}
/>
</NLayoutHeader>
diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
index a82a0fa..62d455c 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
@@ -50,6 +50,7 @@ import {
} from '@vicons/antd'
import { useMenuStore } from '@/store/menu/menu'
import { useUserStore } from '@/store/user/user'
+import { timezoneList } from '@/utils/timezone'
import type { UserInfoRes } from '@/service/modules/users/types'
export function useDataList() {
@@ -72,9 +73,13 @@ export function useDataList() {
}
]
+ const timezoneOptions = () =>
+ timezoneList.map((item) => ({ label: item, value: item }))
+
const state = reactive({
isShowSide: false,
localesOptions,
+ timezoneOptions: timezoneOptions(),
userDropdownOptions: [],
menuOptions: [],
headerMenuOptions: [],
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 92d1519..50f44bd 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@@ -136,7 +136,8 @@ const profile = {
phone_tips: 'Please enter your phone',
state_tips: 'Please choose your state',
enable: 'Enable',
- disable: 'Disable'
+ disable: 'Disable',
+ timezone_success: 'Time zone updated successful'
}
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 006bcbe..bb65aec 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@@ -135,7 +135,8 @@ const profile = {
phone_tips: '请输入手机号',
state_tips: '请选择状态',
enable: '启用',
- disable: '禁用'
+ disable: '禁用',
+ timezone_success: '时区更新成功'
}
const monitor = {
diff --git a/dolphinscheduler-ui-next/src/service/modules/users/types.ts b/dolphinscheduler-ui-next/src/service/modules/users/types.ts
index 95b4a9f..0a71e12 100644
--- a/dolphinscheduler-ui-next/src/service/modules/users/types.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/users/types.ts
@@ -35,6 +35,7 @@ interface UserReq {
phone?: string
queue?: string
state?: number
+ timeZone?: string
}
interface IdReq {
diff --git a/dolphinscheduler-ui-next/src/store/timezone/timezone.ts b/dolphinscheduler-ui-next/src/store/timezone/timezone.ts
new file mode 100644
index 0000000..3624a35
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/store/timezone/timezone.ts
@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineStore } from 'pinia'
+import { timezoneStore, Timezone } from './types'
+
+export const useTimezoneStore = defineStore({
+ id: 'timezone',
+ state: (): timezoneStore => ({
+ timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
+ }),
+ persist: true,
+ getters: {
+ getTimezone(): Timezone {
+ return this.timezone
+ }
+ },
+ actions: {
+ setTimezone(timezone: Timezone): void {
+ this.timezone = timezone
+ }
+ }
+})
diff --git a/dolphinscheduler-ui-next/src/store/timezone/types.ts b/dolphinscheduler-ui-next/src/store/timezone/types.ts
new file mode 100644
index 0000000..558a779
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/store/timezone/types.ts
@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { timezoneList } from '@/utils/timezone'
+
+type Timezone = typeof timezoneList[number]
+
+interface timezoneStore {
+ timezone: Timezone
+}
+
+export { timezoneStore, Timezone }
diff --git a/dolphinscheduler-ui-next/src/views/login/use-login.ts b/dolphinscheduler-ui-next/src/views/login/use-login.ts
index 0ee349f..e98e9e6 100644
--- a/dolphinscheduler-ui-next/src/views/login/use-login.ts
+++ b/dolphinscheduler-ui-next/src/views/login/use-login.ts
@@ -24,11 +24,13 @@ import type { SessionIdRes } from '@/service/modules/login/types'
import type { UserInfoRes } from '@/service/modules/users/types'
import { useMenuStore } from '@/store/menu/menu'
import cookies from 'js-cookie'
+import { useTimezoneStore } from '@/store/timezone/timezone'
export function useLogin(state: any) {
const router: Router = useRouter()
const userStore = useUserStore()
const menuStore = useMenuStore()
+ const timezoneStore = useTimezoneStore()
const handleLogin = () => {
state.loginFormRef.validate(async (valid: any) => {
@@ -40,6 +42,11 @@ export function useLogin(state: any) {
const userInfoRes: UserInfoRes = await getUserInfo()
await userStore.setUserInfo(userInfoRes)
+ const timezone = userInfoRes.timeZone
+ ? userInfoRes.timeZone
+ : Intl.DateTimeFormat().resolvedOptions().timeZone
+ await timezoneStore.setTimezone(timezone)
+
const key = menuStore.getMenuKey
router.push({ path: key || 'home' })