diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue index 299a2ad5a..7403b80bd 100644 --- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue +++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue @@ -21,13 +21,45 @@ const recordedAudioAttachments = computed(() => props.attachments.filter(attachment => attachment.isRecordedAudio) ); -const onRemoveAttachment = itemIndex => { - emit( - 'removeAttachment', - nonRecordedAudioAttachments.value - .filter((_, index) => index !== itemIndex) - .concat(recordedAudioAttachments.value) +// Create unified list of attachments with metadata for rendering +const allAttachments = computed(() => { + const audioAttachments = recordedAudioAttachments.value.map( + (attachment, index) => ({ + attachment, + isRecordedAudio: true, + index, + key: `audio-${index}`, + }) ); + + const otherAttachments = nonRecordedAudioAttachments.value.map( + (attachment, index) => ({ + attachment, + isRecordedAudio: false, + index, + key: attachment.id, + }) + ); + + return [...audioAttachments, ...otherAttachments]; +}); + +const removeAttachment = (isRecordedAudio, itemIndex) => { + if (isRecordedAudio) { + emit( + 'removeAttachment', + nonRecordedAudioAttachments.value.concat( + recordedAudioAttachments.value.filter((_, index) => index !== itemIndex) + ) + ); + } else { + emit( + 'removeAttachment', + nonRecordedAudioAttachments.value + .filter((_, index) => index !== itemIndex) + .concat(recordedAudioAttachments.value) + ); + } }; const formatFileSize = file => { @@ -46,32 +78,37 @@ const fileName = file => {