refactor(settings): improve profile appearance

- move user info to bottom
- don't reset dirty form after pulling the latest info
This commit is contained in:
三咲智子 2023-01-08 17:06:15 +08:00
parent 2211383258
commit d415638bd9
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E

View file

@ -5,8 +5,6 @@ import { parse } from 'ultrahtml'
definePageMeta({ definePageMeta({
middleware: 'auth', middleware: 'auth',
// Keep alive the form page will reduce raw data timeliness and its status timeliness
keepalive: false,
}) })
const { t } = useI18n() const { t } = useI18n()
@ -51,13 +49,8 @@ const { form, reset, submitter, dirtyFields, isError } = useForm({
}, },
}) })
onMastoInit(async () => { const isDirty = $computed(() => !isEmptyObject(dirtyFields.value))
// Keep the information to be edited up to date const isCanSubmit = computed(() => !isError.value && isDirty)
await pullMyAccountInfo()
reset()
})
const isCanSubmit = computed(() => !isError.value && !isEmptyObject(dirtyFields.value))
const { submit, submitting } = submitter(async ({ dirtyFields }) => { const { submit, submitting } = submitter(async ({ dirtyFields }) => {
if (!isCanSubmit.value) if (!isCanSubmit.value)
@ -76,6 +69,16 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
setAccountInfo(account!.id, res.account) setAccountInfo(account!.id, res.account)
reset() reset()
}) })
const refreshInfo = async () => {
// Keep the information to be edited up to date
await pullMyAccountInfo()
if (!isDirty)
reset()
}
onMastoInit(refreshInfo)
onReactivated(refreshInfo)
</script> </script>
<template> <template>
@ -107,15 +110,16 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
rounded-full border="bg-base 4" rounded-full border="bg-base 4"
w="sm:30 24" min-w="sm:30 24" h="sm:30 24" w="sm:30 24" min-w="sm:30 24" h="sm:30 24"
/> />
<div flex="~ col gap1" self-end>
<AccountDisplayName
:account="{ ...account, displayName: form.displayName }"
font-bold sm:text-2xl text-xl
/>
<AccountHandle :account="account" />
</div>
</div> </div>
<CommonCropImage v-model="form.avatar" /> <CommonCropImage v-model="form.avatar" />
<div px4>
<AccountDisplayName
:account="{ ...account, displayName: form.displayName }"
font-bold sm:text-2xl text-xl
/>
<AccountHandle :account="account" />
</div>
</div> </div>
<div px4 py3 space-y-5> <div px4 py3 space-y-5>