多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

119 lines
3.4 KiB

<script lang="ts" setup>
const { user } = useGlobal()
const { t } = useI18n()
const isErrored = ref(false)
const isTitleUpdating = ref(false)
const form = ref({
title: '',
email: '',
})
const { updateUserProfile } = useUsers()
const formValidator = ref()
const formRules = {
title: [
{ required: true, message: t('error.nameRequired') },
{ min: 2, message: t('error.nameMinLength') },
{ max: 60, message: t('error.nameMaxLength') },
],
}
const onSubmit = async () => {
const valid = await formValidator.value.validate()
if (!valid) return
if (isTitleUpdating.value) return
isTitleUpdating.value = true
isErrored.value = false
try {
await updateUserProfile({ attrs: { display_name: form.value.title } })
} catch (e: any) {
console.error(e)
} finally {
isTitleUpdating.value = false
}
}
const email = computed(() => user.value?.email)
watch(
() => user.value?.display_name,
() => {
if (!user.value?.display_name) return
form.value.title = user.value.display_name
form.value.email = user.value.email
},
{
immediate: true,
},
)
const onValidate = async (_: any, valid: boolean) => {
isErrored.value = !valid
}
</script>
<template>
<div class="flex flex-col items-center">
<div class="flex flex-col w-150">
<div class="flex font-medium text-xl">{{ $t('labels.profile') }}</div>
<div class="mt-5 flex flex-col border-1 rounded-2xl border-gray-200 p-6 gap-y-2">
<div class="flex font-medium text-base">{{ $t('labels.accountDetails') }}</div>
<div class="flex text-gray-500">{{ $t('labels.controlAppearance') }}</div>
<div class="flex flex-row mt-4">
<div class="flex h-20 mt-1.5">
<GeneralUserIcon size="xlarge" />
</div>
<div class="flex w-10"></div>
<a-form
ref="formValidator"
layout="vertical"
no-style
:model="form"
class="flex flex-col w-full"
@finish="onSubmit"
@validate="onValidate"
>
<div class="text-gray-800 mb-1.5">{{ $t('general.name') }}</div>
<a-form-item name="title" :rules="formRules.title">
<a-input
v-model:value="form.title"
class="w-full !rounded-md !py-1.5"
:placeholder="$t('general.name')"
data-testid="nc-account-settings-rename-input"
/>
</a-form-item>
<div class="text-gray-800 mb-1.5">{{ $t('labels.accountEmailID') }}</div>
<a-input
v-model:value="email"
class="w-full !rounded-md !py-1.5"
:placeholder="$t('general.email')"
disabled
data-testid="nc-account-settings-email-input"
/>
<div class="flex flex-row w-full justify-end mt-8">
<NcButton
type="primary"
html-type="submit"
:disabled="isErrored || (form.title && form.title === user?.display_name)"
:loading="isTitleUpdating"
data-testid="nc-account-settings-save"
@click="onSubmit"
>
<template #loading> {{ $t('general.saving') }} </template>
{{ $t('general.save') }}
</NcButton>
</div>
</a-form>
</div>
</div>
</div>
</div>
</template>