fix(ui): Publish button for threaded posts allows multiple click (#3333)
This commit is contained in:
parent
190be77043
commit
1d128f56f9
2 changed files with 10 additions and 5 deletions
|
@ -29,7 +29,7 @@ const emit = defineEmits<{
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
const { threadItems, threadIsActive, publishThread } = threadComposer ?? useThreadComposer(draftKey)
|
const { threadItems, threadIsActive, publishThread, threadIsSending } = threadComposer ?? useThreadComposer(draftKey)
|
||||||
|
|
||||||
const draft = computed({
|
const draft = computed({
|
||||||
get: () => threadItems.value[draftItemIndex],
|
get: () => threadItems.value[draftItemIndex],
|
||||||
|
@ -577,18 +577,18 @@ const detectLanguage = useDebounceFn(async () => {
|
||||||
<button
|
<button
|
||||||
v-if="!threadIsActive || isFinalItemOfThread"
|
v-if="!threadIsActive || isFinalItemOfThread"
|
||||||
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit class="publish-button"
|
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit class="publish-button"
|
||||||
:aria-disabled="isPublishDisabled || isExceedingCharacterLimit" aria-describedby="publish-tooltip"
|
:aria-disabled="isPublishDisabled || isExceedingCharacterLimit || threadIsSending" aria-describedby="publish-tooltip"
|
||||||
:disabled="isPublishDisabled || isExceedingCharacterLimit"
|
:disabled="isPublishDisabled || isExceedingCharacterLimit || threadIsSending"
|
||||||
@click="publish"
|
@click="publish"
|
||||||
>
|
>
|
||||||
<span v-if="isSending" block animate-spin preserve-3d>
|
<span v-if="isSending || threadIsSending" block animate-spin preserve-3d>
|
||||||
<div block i-ri:loader-2-fill />
|
<div block i-ri:loader-2-fill />
|
||||||
</span>
|
</span>
|
||||||
<span v-if="failedMessages.length" block>
|
<span v-if="failedMessages.length" block>
|
||||||
<div block i-carbon:face-dizzy-filled />
|
<div block i-carbon:face-dizzy-filled />
|
||||||
</span>
|
</span>
|
||||||
<template v-if="threadIsActive">
|
<template v-if="threadIsActive">
|
||||||
<span>{{ $t('action.publish_thread') }} </span>
|
<span>{{ !threadIsSending ? $t('action.publish_thread') : $t('state.publishing') }} </span>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
|
<span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
|
||||||
|
|
|
@ -11,6 +11,8 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
|
||||||
*/
|
*/
|
||||||
const threadIsActive = computed<boolean>(() => draftItems.value.length > 1)
|
const threadIsActive = computed<boolean>(() => draftItems.value.length > 1)
|
||||||
|
|
||||||
|
const threadIsSending = ref(false)
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add an item to the thread
|
* Add an item to the thread
|
||||||
*/
|
*/
|
||||||
|
@ -44,6 +46,7 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
|
||||||
async function publishThread() {
|
async function publishThread() {
|
||||||
const allFailedMessages: Array<string> = []
|
const allFailedMessages: Array<string> = []
|
||||||
const isAReplyThread = Boolean(draftItems.value[0].params.inReplyToId)
|
const isAReplyThread = Boolean(draftItems.value[0].params.inReplyToId)
|
||||||
|
threadIsSending.value = true
|
||||||
|
|
||||||
let lastPublishedStatus: mastodon.v1.Status | null = null
|
let lastPublishedStatus: mastodon.v1.Status | null = null
|
||||||
let amountPublished = 0
|
let amountPublished = 0
|
||||||
|
@ -72,6 +75,7 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
|
||||||
}
|
}
|
||||||
// Remove all published items from the thread
|
// Remove all published items from the thread
|
||||||
draftItems.value.splice(0, amountPublished)
|
draftItems.value.splice(0, amountPublished)
|
||||||
|
threadIsSending.value = false
|
||||||
|
|
||||||
// If we have errors, return them
|
// If we have errors, return them
|
||||||
if (allFailedMessages.length > 0)
|
if (allFailedMessages.length > 0)
|
||||||
|
@ -90,5 +94,6 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
|
||||||
addThreadItem,
|
addThreadItem,
|
||||||
removeThreadItem,
|
removeThreadItem,
|
||||||
publishThread,
|
publishThread,
|
||||||
|
threadIsSending,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue