feat(comments) : add file attachments UI for comments
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
55
app/components/CommentDocumentList.vue
Normal file
55
app/components/CommentDocumentList.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div v-if="documents.length" class="space-y-1 mt-2">
|
||||
<div
|
||||
v-for="doc in documents"
|
||||
:key="doc.id"
|
||||
class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-2 py-1.5 text-xs"
|
||||
>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<component
|
||||
:is="documentIcon(doc).component"
|
||||
class="w-4 h-4 flex-shrink-0"
|
||||
:class="documentIcon(doc).colorClass"
|
||||
/>
|
||||
<span class="truncate">{{ doc.name || doc.filename }}</span>
|
||||
<span class="text-base-content/40 flex-shrink-0">{{ formatSize(doc.size) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 flex-shrink-0 ml-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="!canPreviewDocument(doc)"
|
||||
:title="canPreviewDocument(doc) ? 'Consulter' : 'Aperçu non disponible'"
|
||||
@click="openPreview(doc)"
|
||||
>
|
||||
Consulter
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
@click="downloadDocument(doc)"
|
||||
>
|
||||
Télécharger
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CommentDocument } from '~/composables/useComments'
|
||||
import { canPreviewDocument } from '~/utils/documentPreview'
|
||||
import { formatSize, documentIcon, downloadDocument } from '~/shared/utils/documentDisplayUtils'
|
||||
|
||||
defineProps<{
|
||||
documents: CommentDocument[]
|
||||
}>()
|
||||
|
||||
const openPreview = (doc: CommentDocument) => {
|
||||
if (!canPreviewDocument(doc)) return
|
||||
// Open file URL in new tab for preview
|
||||
if (doc.fileUrl) {
|
||||
window.open(doc.fileUrl, '_blank')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user