22373a0b87
- Replace all AppDrawer with MalioDrawer across 10 drawer components - Replace native <button> with MalioButton/MalioButtonIcon in all pages and components - Fix TimeTrackingExportDrawer: use MalioSelectCheckbox for multi-select filters - Add Malio design system colors (m-btn-*, m-disabled, m-surface) to tailwind.config.ts - Align toggle button heights with MalioButton (h-[40px]) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
79 lines
3.0 KiB
Vue
79 lines
3.0 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="flex h-10 w-10 shrink-0 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>
|
|
|
|
<!-- 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">{{ 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 === '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>
|