From 5aeb753ae880f9a67ca16f96df3946a0235b82e6 Mon Sep 17 00:00:00 2001 From: Devosend Date: Fri, 11 Mar 2022 17:11:51 +0800 Subject: [PATCH] [Feature][UI Next][V1.0.0-Alpha] UI support timezone setting (#8833) --- .../content/components/navbar/index.tsx | 6 ++ .../components/timezone/index.module.scss | 20 ++++++ .../content/components/timezone/index.tsx | 64 +++++++++++++++++++ .../components/timezone/use-dropdown.ts | 52 +++++++++++++++ .../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, 223 insertions(+), 2 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.module.scss create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/timezone/index.tsx create mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/timezone/use-dropdown.ts create mode 100644 dolphinscheduler-ui-next/src/store/timezone/timezone.ts create mode 100644 dolphinscheduler-ui-next/src/store/timezone/types.ts 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 f15e50c5f2..71b0ca20db 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, default: [] }, + timezoneOptions: { + type: Array as PropType, + default: [] + }, userDropdownOptions: { type: Array as PropType, default: [] @@ -62,6 +67,7 @@ const Navbar = defineComponent({
+
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 0000000000..64991b46d0 --- /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 0000000000..cb7a5062a2 --- /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, + 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 ( + + + {this.chooseVal} + + + + + + ) + } +}) + +export default Timezone 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 new file mode 100644 index 0000000000..0b26906798 --- /dev/null +++ b/dolphinscheduler-ui-next/src/layouts/content/components/timezone/use-dropdown.ts @@ -0,0 +1,52 @@ +/* + * 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 { 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() + + const userStore = useUserStore() + const timezoneStore = useTimezoneStore() + + const userInfo = userStore.userInfo as UserInfoRes + + 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 { + handleSelect + } +} diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx index d80f63e4ca..b8ae1ba17d 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} /> diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts index a82a0fa811..62d455cf6c 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 92d1519cff..50f44bd7f0 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 006bcbe2f1..bb65aecff8 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 95b4a9f1d9..0a71e12394 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 0000000000..3624a35b14 --- /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 0000000000..558a779ba8 --- /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 0ee349f303..e98e9e6c85 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' })