Matthieu
93 lines
3.9 KiB
Vue
93 lines
3.9 KiB
Vue
<template>
|
|
<div v-if="documents.length" class="mt-3">
|
|
<p class="mb-2 text-sm font-medium text-neutral-700">
|
|
{{ $t('taskDocuments.title') }} ({{ documents.length }})
|
|
</p>
|
|
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
|
<div
|
|
v-for="doc in documents"
|
|
:key="doc.id"
|
|
class="group relative flex cursor-pointer items-center gap-2 rounded-lg border border-neutral-200 p-2 transition-colors hover:bg-neutral-50"
|
|
@click="$emit('preview', doc)"
|
|
>
|
|
<!-- Thumbnail or icon -->
|
|
<div class="relative h-10 w-10 shrink-0">
|
|
<div class="flex h-10 w-10 items-center justify-center overflow-hidden rounded">
|
|
<img
|
|
v-if="isImage(doc.mimeType)"
|
|
:src="getDownloadUrl(doc.id)"
|
|
:alt="doc.originalName"
|
|
class="h-10 w-10 object-cover"
|
|
/>
|
|
<Icon
|
|
v-else
|
|
:name="getIconForMime(doc.mimeType)"
|
|
class="h-6 w-6 text-neutral-400"
|
|
/>
|
|
</div>
|
|
<!-- Pastille : document lié depuis le partage SMB -->
|
|
<span
|
|
v-if="doc.sharePath"
|
|
class="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary-500 ring-2 ring-white"
|
|
:title="$t('taskDocuments.shareLinkBadge')"
|
|
>
|
|
<Icon name="heroicons:link" class="h-2.5 w-2.5 text-white" />
|
|
</span>
|
|
</div>
|
|
|
|
<!-- File info -->
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate text-xs font-medium text-neutral-700">{{ doc.originalName }}</p>
|
|
<p class="text-xs text-neutral-400">
|
|
<span v-if="doc.sharePath" class="font-medium text-primary-500">{{ $t('taskDocuments.shareLinkLabel') }}</span>
|
|
<span v-if="doc.sharePath"> · </span>{{ formatFileSize(doc.size) }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Delete button -->
|
|
<MalioButtonIcon
|
|
v-if="isAdmin"
|
|
icon="heroicons:x-mark"
|
|
aria-label="Supprimer"
|
|
variant="ghost"
|
|
icon-size="16"
|
|
button-class="absolute right-1 top-1 hidden text-neutral-400 hover:bg-red-50 hover:text-red-500 group-hover:block"
|
|
@click.stop="$emit('delete', doc)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { TaskDocument } from '~/services/dto/task-document'
|
|
import { useTaskDocumentService } from '~/services/task-documents'
|
|
import { formatFileSize } from '~/utils/format'
|
|
|
|
defineProps<{
|
|
documents: TaskDocument[]
|
|
isAdmin: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
preview: [doc: TaskDocument]
|
|
delete: [doc: TaskDocument]
|
|
}>()
|
|
|
|
const { getDownloadUrl } = useTaskDocumentService()
|
|
|
|
function isImage(mimeType: string): boolean {
|
|
return mimeType.startsWith('image/')
|
|
}
|
|
|
|
function getIconForMime(mimeType: string): string {
|
|
if (mimeType === 'text/markdown') return 'mdi:language-markdown'
|
|
if (mimeType === 'application/pdf') return 'heroicons:document-text'
|
|
if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return 'heroicons:table-cells'
|
|
if (mimeType.includes('word') || mimeType.includes('document')) return 'heroicons:document'
|
|
if (mimeType.includes('zip') || mimeType.includes('archive') || mimeType.includes('tar') || mimeType.includes('rar')) return 'heroicons:archive-box'
|
|
return 'heroicons:paper-clip'
|
|
}
|
|
|
|
</script>
|