[Feature][UI Next][V1.0.0-Alpha] UI support timezone setting (#8833)

This commit is contained in:
Devosend 2022-03-11 17:11:51 +08:00 committed by GitHub
parent a9c9eb00d0
commit 5aeb753ae8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 223 additions and 2 deletions

View File

@ -20,6 +20,7 @@ import styles from './index.module.scss'
import { NMenu } from 'naive-ui' import { NMenu } from 'naive-ui'
import Logo from '../logo' import Logo from '../logo'
import Locales from '../locales' import Locales from '../locales'
import Timezone from '../timezone'
import User from '../user' import User from '../user'
import Theme from '../theme' import Theme from '../theme'
import { useMenuClick } from './use-menuClick' import { useMenuClick } from './use-menuClick'
@ -36,6 +37,10 @@ const Navbar = defineComponent({
type: Array as PropType<any>, type: Array as PropType<any>,
default: [] default: []
}, },
timezoneOptions: {
type: Array as PropType<any>,
default: []
},
userDropdownOptions: { userDropdownOptions: {
type: Array as PropType<any>, type: Array as PropType<any>,
default: [] default: []
@ -62,6 +67,7 @@ const Navbar = defineComponent({
<div class={styles.settings}> <div class={styles.settings}>
<Theme /> <Theme />
<Locales localesOptions={this.localesOptions} /> <Locales localesOptions={this.localesOptions} />
<Timezone timezoneOptions={this.timezoneOptions} />
<User userDropdownOptions={this.userDropdownOptions} /> <User userDropdownOptions={this.userDropdownOptions} />
</div> </div>
</div> </div>

View File

@ -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;
}

View File

@ -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

View File

@ -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
}
}

View File

@ -107,6 +107,7 @@ const Content = defineComponent({
onHandleMenuClick={this.getSideMenuOptions} onHandleMenuClick={this.getSideMenuOptions}
headerMenuOptions={this.headerMenuOptions} headerMenuOptions={this.headerMenuOptions}
localesOptions={this.localesOptions} localesOptions={this.localesOptions}
timezoneOptions={this.timezoneOptions}
userDropdownOptions={this.userDropdownOptions} userDropdownOptions={this.userDropdownOptions}
/> />
</NLayoutHeader> </NLayoutHeader>

View File

@ -50,6 +50,7 @@ import {
} from '@vicons/antd' } from '@vicons/antd'
import { useMenuStore } from '@/store/menu/menu' import { useMenuStore } from '@/store/menu/menu'
import { useUserStore } from '@/store/user/user' import { useUserStore } from '@/store/user/user'
import { timezoneList } from '@/utils/timezone'
import type { UserInfoRes } from '@/service/modules/users/types' import type { UserInfoRes } from '@/service/modules/users/types'
export function useDataList() { export function useDataList() {
@ -72,9 +73,13 @@ export function useDataList() {
} }
] ]
const timezoneOptions = () =>
timezoneList.map((item) => ({ label: item, value: item }))
const state = reactive({ const state = reactive({
isShowSide: false, isShowSide: false,
localesOptions, localesOptions,
timezoneOptions: timezoneOptions(),
userDropdownOptions: [], userDropdownOptions: [],
menuOptions: [], menuOptions: [],
headerMenuOptions: [], headerMenuOptions: [],

View File

@ -136,7 +136,8 @@ const profile = {
phone_tips: 'Please enter your phone', phone_tips: 'Please enter your phone',
state_tips: 'Please choose your state', state_tips: 'Please choose your state',
enable: 'Enable', enable: 'Enable',
disable: 'Disable' disable: 'Disable',
timezone_success: 'Time zone updated successful'
} }
const monitor = { const monitor = {

View File

@ -135,7 +135,8 @@ const profile = {
phone_tips: '请输入手机号', phone_tips: '请输入手机号',
state_tips: '请选择状态', state_tips: '请选择状态',
enable: '启用', enable: '启用',
disable: '禁用' disable: '禁用',
timezone_success: '时区更新成功'
} }
const monitor = { const monitor = {

View File

@ -35,6 +35,7 @@ interface UserReq {
phone?: string phone?: string
queue?: string queue?: string
state?: number state?: number
timeZone?: string
} }
interface IdReq { interface IdReq {

View File

@ -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
}
}
})

View File

@ -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 }

View File

@ -24,11 +24,13 @@ import type { SessionIdRes } from '@/service/modules/login/types'
import type { UserInfoRes } from '@/service/modules/users/types' import type { UserInfoRes } from '@/service/modules/users/types'
import { useMenuStore } from '@/store/menu/menu' import { useMenuStore } from '@/store/menu/menu'
import cookies from 'js-cookie' import cookies from 'js-cookie'
import { useTimezoneStore } from '@/store/timezone/timezone'
export function useLogin(state: any) { export function useLogin(state: any) {
const router: Router = useRouter() const router: Router = useRouter()
const userStore = useUserStore() const userStore = useUserStore()
const menuStore = useMenuStore() const menuStore = useMenuStore()
const timezoneStore = useTimezoneStore()
const handleLogin = () => { const handleLogin = () => {
state.loginFormRef.validate(async (valid: any) => { state.loginFormRef.validate(async (valid: any) => {
@ -40,6 +42,11 @@ export function useLogin(state: any) {
const userInfoRes: UserInfoRes = await getUserInfo() const userInfoRes: UserInfoRes = await getUserInfo()
await userStore.setUserInfo(userInfoRes) await userStore.setUserInfo(userInfoRes)
const timezone = userInfoRes.timeZone
? userInfoRes.timeZone
: Intl.DateTimeFormat().resolvedOptions().timeZone
await timezoneStore.setTimezone(timezone)
const key = menuStore.getMenuKey const key = menuStore.getMenuKey
router.push({ path: key || 'home' }) router.push({ path: key || 'home' })