feat(lists): add error handling (#1593)
parent
2daaad90a1
commit
6c1ec2a252
|
@ -1,22 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
describedBy: string
|
||||
}>()
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
defineProps<{ describedBy: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
:aria-describedby="describedBy"
|
||||
flex="~ col"
|
||||
gap-1 text-sm
|
||||
pt-1 ps-2 pe-1 pb-2
|
||||
text-red-600 dark:text-red-400
|
||||
border="~ base rounded red-600 dark:red-400"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
|
@ -19,24 +19,28 @@ const client = useMastoClient()
|
|||
let isEditing = $ref<boolean>(false)
|
||||
let busy = $ref<boolean>(false)
|
||||
let deleteBusy = $ref<boolean>(false)
|
||||
let actionError = $ref<string | undefined>(undefined)
|
||||
|
||||
const enableSaveButton = computed(() => list.title !== modelValue.value)
|
||||
|
||||
const edit = ref()
|
||||
const deleteBtn = ref()
|
||||
const input = ref()
|
||||
|
||||
const prepareEdit = () => {
|
||||
isEditing = true
|
||||
actionError = undefined
|
||||
nextTick(() => {
|
||||
input.value.focus()
|
||||
input.value?.focus()
|
||||
})
|
||||
}
|
||||
const cancelEdit = (updateTitle = true) => {
|
||||
const cancelEdit = () => {
|
||||
isEditing = false
|
||||
if (updateTitle)
|
||||
modelValue.value = list.title
|
||||
actionError = undefined
|
||||
modelValue.value = list.title
|
||||
|
||||
nextTick(() => {
|
||||
edit.value.focus()
|
||||
edit.value?.focus()
|
||||
})
|
||||
}
|
||||
async function finishEditing() {
|
||||
|
@ -44,14 +48,22 @@ async function finishEditing() {
|
|||
return
|
||||
|
||||
busy = true
|
||||
actionError = undefined
|
||||
await nextTick()
|
||||
try {
|
||||
const updateList = await client.v1.lists.update(list.id, {
|
||||
title: modelValue.value,
|
||||
})
|
||||
cancelEdit(false)
|
||||
cancelEdit()
|
||||
emit('listUpdated', updateList)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
actionError = (err as Error).message
|
||||
nextTick(() => {
|
||||
input.value?.focus()
|
||||
})
|
||||
}
|
||||
finally {
|
||||
busy = false
|
||||
}
|
||||
|
@ -61,6 +73,7 @@ async function removeList() {
|
|||
return
|
||||
|
||||
deleteBusy = true
|
||||
actionError = undefined
|
||||
await nextTick()
|
||||
|
||||
const confirmDelete = await openConfirmDialog({
|
||||
|
@ -75,6 +88,13 @@ async function removeList() {
|
|||
await client.v1.lists.remove(list.id)
|
||||
emit('listRemoved', list.id)
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
actionError = (err as Error).message
|
||||
nextTick(() => {
|
||||
deleteBtn.value?.focus()
|
||||
})
|
||||
}
|
||||
finally {
|
||||
deleteBusy = false
|
||||
}
|
||||
|
@ -83,11 +103,27 @@ async function removeList() {
|
|||
deleteBusy = false
|
||||
}
|
||||
}
|
||||
onBeforeUnmount(() => cancelEdit(false))
|
||||
|
||||
function clearError() {
|
||||
actionError = undefined
|
||||
nextTick(() => {
|
||||
if (isEditing)
|
||||
input.value?.focus()
|
||||
else
|
||||
deleteBtn.value?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
onDeactivated(cancelEdit)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form hover:bg-active flex justify-between items-center gap-x-2 @submit.prevent="finishEditing">
|
||||
<form
|
||||
hover:bg-active flex justify-between items-center gap-x-2
|
||||
:aria-describedby="actionError ? `action-list-error-${list.id}` : undefined"
|
||||
:class="actionError ? 'border border-base border-rounded rounded-be-is-0 rounded-be-ie-0 border-b-unset border-$c-danger-active' : null"
|
||||
@submit.prevent="finishEditing"
|
||||
>
|
||||
<div
|
||||
v-if="isEditing"
|
||||
bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row"
|
||||
|
@ -98,7 +134,7 @@ onBeforeUnmount(() => cancelEdit(false))
|
|||
type="button"
|
||||
rounded-full text-sm p2 transition-colors
|
||||
hover:text-primary
|
||||
@click="cancelEdit(true)"
|
||||
@click="cancelEdit()"
|
||||
>
|
||||
<span block text-current i-ri:close-fill />
|
||||
</button>
|
||||
|
@ -114,7 +150,7 @@ onBeforeUnmount(() => cancelEdit(false))
|
|||
pb="1px"
|
||||
flex-1
|
||||
placeholder-text-secondary
|
||||
@keydown.esc="cancelEdit(true)"
|
||||
@keydown.esc="cancelEdit()"
|
||||
>
|
||||
</div>
|
||||
<NuxtLink v-else :to="`list/${list.id}`" block grow p4>
|
||||
|
@ -151,6 +187,7 @@ onBeforeUnmount(() => cancelEdit(false))
|
|||
</CommonTooltip>
|
||||
<CommonTooltip :content="$t('list.delete')" no-auto-focus>
|
||||
<button
|
||||
ref="delete"
|
||||
type="button"
|
||||
text-sm p2 border-1 transition-colors
|
||||
border-dark hover:text-primary
|
||||
|
@ -166,4 +203,31 @@ onBeforeUnmount(() => cancelEdit(false))
|
|||
</CommonTooltip>
|
||||
</div>
|
||||
</form>
|
||||
<CommonErrorMessage
|
||||
v-if="actionError"
|
||||
:id="`action-list-error-${list.id}`"
|
||||
:described-by="`action-list-failed-${list.id}`"
|
||||
class="rounded-bs-is-0 rounded-bs-ie-0 border-t-dashed m-b-2"
|
||||
>
|
||||
<header :id="`action-list-failed-${list.id}`" flex justify-between>
|
||||
<div flex items-center gap-x-2 font-bold>
|
||||
<div aria-hidden="true" i-ri:error-warning-fill />
|
||||
<p>{{ $t(`list.${isEditing ? 'edit_error' : 'delete_error'}`) }}</p>
|
||||
</div>
|
||||
<CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
|
||||
<button
|
||||
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
|
||||
@click="clearError"
|
||||
>
|
||||
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</header>
|
||||
<ol ps-2 sm:ps-1>
|
||||
<li flex="~ col sm:row" gap-y-1 sm:gap-x-2>
|
||||
<strong sr-only>{{ $t('list.error_prefix') }}</strong>
|
||||
<span>{{ actionError }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</CommonErrorMessage>
|
||||
</template>
|
||||
|
|
|
@ -164,8 +164,8 @@ defineExpose({
|
|||
>
|
||||
</div>
|
||||
|
||||
<PublishErrMessage v-if="failedMessages.length > 0" described-by="publish-failed">
|
||||
<head id="publish-failed" flex justify-between>
|
||||
<CommonErrorMessage v-if="failedMessages.length > 0" described-by="publish-failed">
|
||||
<header id="publish-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.publish_failed') }}</p>
|
||||
|
@ -178,14 +178,14 @@ defineExpose({
|
|||
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</head>
|
||||
</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>
|
||||
</PublishErrMessage>
|
||||
</CommonErrorMessage>
|
||||
|
||||
<div relative flex-1 flex flex-col>
|
||||
<EditorContent
|
||||
|
@ -201,11 +201,11 @@ defineExpose({
|
|||
</div>
|
||||
{{ $t('state.uploading') }}
|
||||
</div>
|
||||
<PublishErrMessage
|
||||
<CommonErrorMessage
|
||||
v-else-if="failedAttachments.length > 0"
|
||||
:described-by="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
|
||||
>
|
||||
<head id="upload-failed" flex justify-between>
|
||||
<header id="upload-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.upload_failed') }}</p>
|
||||
|
@ -218,7 +218,7 @@ defineExpose({
|
|||
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</head>
|
||||
</header>
|
||||
<div v-if="isExceedingAttachmentLimit" id="uploads-per-post" ps-2 sm:ps-1 text-small>
|
||||
{{ $t('state.attachments_exceed_server_limit') }}
|
||||
</div>
|
||||
|
@ -228,7 +228,7 @@ defineExpose({
|
|||
<span>{{ error[0] }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</PublishErrMessage>
|
||||
</CommonErrorMessage>
|
||||
|
||||
<div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
|
||||
<PublishAttachment
|
||||
|
|
|
@ -183,9 +183,14 @@
|
|||
"list": {
|
||||
"add_account": "Add account to list",
|
||||
"cancel_edit": "Cancel editing",
|
||||
"clear_error": "Clear error",
|
||||
"create": "Create",
|
||||
"delete": "Delete this list",
|
||||
"delete_error": "There was an error while deleting the list",
|
||||
"edit": "Edit this list",
|
||||
"edit_error": "There was an error while updating the list",
|
||||
"error": "There was an error while creating the list",
|
||||
"error_prefix": "Error: ",
|
||||
"list_title_placeholder": "List title",
|
||||
"modify_account": "Modify lists with account",
|
||||
"remove_account": "Remove account from list",
|
||||
|
|
|
@ -183,9 +183,14 @@
|
|||
"list": {
|
||||
"add_account": "Agregar cuenta a la lista",
|
||||
"cancel_edit": "Cancelar edición",
|
||||
"clear_error": "Limpiar error",
|
||||
"create": "Crear",
|
||||
"delete": "Eliminar esta lista",
|
||||
"delete_error": "Se produjo un error eliminando la lista",
|
||||
"edit": "Ediar esta lista",
|
||||
"edit_error": "Se produjo un error modificando la lista",
|
||||
"error": "Se produjo un error creando la lista",
|
||||
"error_prefix": "Error: ",
|
||||
"list_title_placeholder": "Título de la lista",
|
||||
"modify_account": "Modificar listas con cuenta",
|
||||
"remove_account": "Eliminar cuenta de la lista",
|
||||
|
|
|
@ -16,6 +16,8 @@ useHeadFixed({
|
|||
})
|
||||
|
||||
const paginatorRef = ref()
|
||||
const inputRef = ref()
|
||||
let actionError = $ref<string | undefined>(undefined)
|
||||
let busy = $ref<boolean>(false)
|
||||
const createText = ref('')
|
||||
const enableSubmit = computed(() => createText.value.length > 0)
|
||||
|
@ -25,24 +27,42 @@ async function createList() {
|
|||
return
|
||||
|
||||
busy = true
|
||||
actionError = undefined
|
||||
await nextTick()
|
||||
try {
|
||||
const newEntry = await client.v1.lists.create({
|
||||
title: createText.value,
|
||||
})
|
||||
paginatorRef.value.createEntry(newEntry)
|
||||
paginatorRef.value?.createEntry(newEntry)
|
||||
createText.value = ''
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
actionError = (err as Error).message
|
||||
nextTick(() => {
|
||||
inputRef.value?.focus()
|
||||
})
|
||||
}
|
||||
finally {
|
||||
busy = false
|
||||
}
|
||||
}
|
||||
|
||||
function clearError(focusBtn: boolean) {
|
||||
actionError = undefined
|
||||
focusBtn && nextTick(() => {
|
||||
inputRef.value?.focus()
|
||||
})
|
||||
}
|
||||
|
||||
function updateEntry(list: mastodon.v1.List) {
|
||||
paginatorRef.value.updateEntry(list)
|
||||
paginatorRef.value?.updateEntry(list)
|
||||
}
|
||||
function removeEntry(id: string) {
|
||||
paginatorRef.value.removeEntry(id)
|
||||
paginatorRef.value?.removeEntry(id)
|
||||
}
|
||||
|
||||
onDeactivated(() => clearError(false))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -67,6 +87,8 @@ function removeEntry(id: string) {
|
|||
border="t base"
|
||||
p-4 w-full
|
||||
flex="~ wrap" relative gap-3
|
||||
:aria-describedby="actionError ? 'create-list-error' : undefined"
|
||||
:class="actionError ? 'border border-base border-rounded rounded-be-is-0 rounded-be-ie-0 border-b-unset border-$c-danger-active' : null"
|
||||
@submit.prevent="createList"
|
||||
>
|
||||
<div
|
||||
|
@ -74,6 +96,7 @@ function removeEntry(id: string) {
|
|||
items-center relative focus-within:box-shadow-outline gap-3
|
||||
>
|
||||
<input
|
||||
ref="inputRef"
|
||||
v-model="createText"
|
||||
bg-transparent
|
||||
outline="focus:none"
|
||||
|
@ -95,6 +118,33 @@ function removeEntry(id: string) {
|
|||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<CommonErrorMessage
|
||||
v-if="actionError"
|
||||
id="create-list-error"
|
||||
described-by="create-list-failed"
|
||||
class="rounded-bs-is-0 rounded-bs-ie-0 border-t-dashed m-b-2"
|
||||
>
|
||||
<header id="create-list-failed" flex justify-between>
|
||||
<div flex items-center gap-x-2 font-bold>
|
||||
<div aria-hidden="true" i-ri:error-warning-fill />
|
||||
<p>{{ $t('list.error') }}</p>
|
||||
</div>
|
||||
<CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
|
||||
<button
|
||||
flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
|
||||
@click="clearError(true)"
|
||||
>
|
||||
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</header>
|
||||
<ol ps-2 sm:ps-1>
|
||||
<li flex="~ col sm:row" gap-y-1 sm:gap-x-2>
|
||||
<strong sr-only>{{ $t('list.error_prefix') }}</strong>
|
||||
<span>{{ actionError }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</CommonErrorMessage>
|
||||
</template>
|
||||
</CommonPaginator>
|
||||
</slot>
|
||||
|
|
Loading…
Reference in New Issue