feat: show save failed error messages on the profile config page (#2274)

This commit is contained in:
TAKAHASHI Shuuji 2023-07-29 17:52:57 +09:00 committed by GitHub
parent f45f51d44b
commit 357fac4d49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 2 deletions

View file

@ -51,6 +51,7 @@
"boost_count": "{0}", "boost_count": "{0}",
"boosted": "Boosted", "boosted": "Boosted",
"clear_publish_failed": "Clear publish errors", "clear_publish_failed": "Clear publish errors",
"clear_save_failed": "Clear save errors",
"clear_upload_failed": "Clear file upload errors", "clear_upload_failed": "Clear file upload errors",
"close": "Close", "close": "Close",
"compose": "Compose", "compose": "Compose",
@ -557,6 +558,7 @@
"loading": "Loading...", "loading": "Loading...",
"publish_failed": "Publish failed", "publish_failed": "Publish failed",
"publishing": "Publishing", "publishing": "Publishing",
"save_failed": "Save failed",
"upload_failed": "Upload failed", "upload_failed": "Upload failed",
"uploading": "Uploading..." "uploading": "Uploading..."
}, },

View file

@ -51,6 +51,7 @@
"boost_count": "{0}", "boost_count": "{0}",
"boosted": "ブースト済み", "boosted": "ブースト済み",
"clear_publish_failed": "投稿エラーをクリア", "clear_publish_failed": "投稿エラーをクリア",
"clear_save_failed": "保存エラーをクリア",
"clear_upload_failed": "ファイルアップロードエラーをクリア", "clear_upload_failed": "ファイルアップロードエラーをクリア",
"close": "閉じる", "close": "閉じる",
"compose": "投稿", "compose": "投稿",
@ -499,6 +500,7 @@
"loading": "読込中...", "loading": "読込中...",
"publish_failed": "投稿に失敗しました", "publish_failed": "投稿に失敗しました",
"publishing": "投稿中", "publishing": "投稿中",
"save_failed": "保存に失敗しました",
"upload_failed": "アップロードに失敗しました", "upload_failed": "アップロードに失敗しました",
"uploading": "更新中..." "uploading": "更新中..."
}, },

View file

@ -57,6 +57,7 @@ const { form, reset, submitter, isDirty, isError } = useForm({
}) })
const isCanSubmit = computed(() => !isError.value && isDirty.value) const isCanSubmit = computed(() => !isError.value && isDirty.value)
const failedMessages = $ref<string[]>([])
const { submit, submitting } = submitter(async ({ dirtyFields }) => { const { submit, submitting } = submitter(async ({ dirtyFields }) => {
if (!isCanSubmit.value) if (!isCanSubmit.value)
@ -67,8 +68,8 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
.catch((error: Error) => ({ error })) .catch((error: Error) => ({ error }))
if ('error' in res) { if ('error' in res) {
// TODO: Show error message console.error(res.error)
console.error('Error(updateCredentials):', res.error) failedMessages.push(res.error.message)
return return
} }
@ -200,6 +201,7 @@ onReactivated(refreshInfo)
</button> </button>
<button <button
v-if="failedMessages.length === 0"
type="submit" type="submit"
btn-solid rounded-full text-sm btn-solid rounded-full text-sm
flex gap-x-2 items-center flex gap-x-2 items-center
@ -211,7 +213,42 @@ onReactivated(refreshInfo)
<span v-else aria-hidden="true" block i-ri:save-line /> <span v-else aria-hidden="true" block i-ri:save-line />
{{ $t('action.save') }} {{ $t('action.save') }}
</button> </button>
<button
v-else
type="submit"
btn-danger rounded-full text-sm
flex gap-x-2 items-center
>
<span
aria-hidden="true" block i-carbon:face-dizzy-filled
/>
<span>{{ $t('state.save_failed') }}</span>
</button>
</div> </div>
<CommonErrorMessage v-if="failedMessages.length > 0" described-by="save-failed">
<header id="save-failed" flex justify-between>
<div flex items-center gap-x-2 font-bold>
<div aria-hidden="true" i-ri:error-warning-fill />
<p>{{ $t('state.save_failed') }}</p>
</div>
<CommonTooltip placement="bottom" :content="$t('action.clear_save_failed')">
<button
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('action.clear_save_failed')"
@click="failedMessages = []"
>
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
</button>
</CommonTooltip>
</header>
<ol ps-2 sm:ps-1>
<li v-for="(error, i) in failedMessages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
<strong>{{ i + 1 }}.</strong>
<span>{{ error }}</span>
</li>
</ol>
</CommonErrorMessage>
</div> </div>
</form> </form>
</MainContent> </MainContent>