From 48ef434f8b19e49fc87526a20f58450239fe0994 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Sun, 15 Mar 2026 18:08:10 +0100
Subject: [PATCH] feat(frontend) : add document upload, list and preview
 components

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/components/task/TaskDocumentList.vue |  79 +++++++++++
 .../components/task/TaskDocumentPreview.vue   | 123 +++++++++++++++++
 .../components/task/TaskDocumentUpload.vue    | 129 ++++++++++++++++++
 3 files changed, 331 insertions(+)
 create mode 100644 frontend/components/task/TaskDocumentList.vue
 create mode 100644 frontend/components/task/TaskDocumentPreview.vue
 create mode 100644 frontend/components/task/TaskDocumentUpload.vue

diff --git a/frontend/components/task/TaskDocumentList.vue b/frontend/components/task/TaskDocumentList.vue
new file mode 100644
index 0000000..93b0edb
--- /dev/null
+++ b/frontend/components/task/TaskDocumentList.vue
@@ -0,0 +1,79 @@
+<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">{{ formatSize(doc.size) }}</p>
+                </div>
+
+                <!-- Delete button -->
+                <button
+                    v-if="isAdmin"
+                    class="absolute right-1 top-1 hidden rounded p-0.5 text-neutral-400 transition-colors hover:bg-red-50 hover:text-red-500 group-hover:block"
+                    @click.stop="$emit('delete', doc)"
+                >
+                    <Icon name="heroicons:x-mark" class="h-4 w-4" />
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { TaskDocument } from '~/services/dto/task-document'
+
+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'
+}
+
+function formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} o`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} Ko`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`
+}
+</script>
diff --git a/frontend/components/task/TaskDocumentPreview.vue b/frontend/components/task/TaskDocumentPreview.vue
new file mode 100644
index 0000000..3077e44
--- /dev/null
+++ b/frontend/components/task/TaskDocumentPreview.vue
@@ -0,0 +1,123 @@
+<template>
+    <Teleport to="body">
+        <Transition name="fade" appear>
+            <div
+                v-if="document"
+                class="fixed inset-0 z-[60] flex items-center justify-center bg-black/80"
+                @click.self="$emit('close')"
+                @keydown.escape="$emit('close')"
+                @keydown.left="$emit('prev')"
+                @keydown.right="$emit('next')"
+                tabindex="0"
+                ref="overlayRef"
+            >
+                <!-- Close button -->
+                <button
+                    class="absolute right-4 top-4 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+                    @click="$emit('close')"
+                >
+                    <Icon name="heroicons:x-mark" class="h-6 w-6" />
+                </button>
+
+                <!-- Navigation arrows -->
+                <button
+                    v-if="hasPrev"
+                    class="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+                    @click="$emit('prev')"
+                >
+                    <Icon name="heroicons:chevron-left" class="h-6 w-6" />
+                </button>
+                <button
+                    v-if="hasNext"
+                    class="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+                    @click="$emit('next')"
+                >
+                    <Icon name="heroicons:chevron-right" class="h-6 w-6" />
+                </button>
+
+                <!-- Content -->
+                <div class="flex max-h-[90vh] max-w-[90vw] flex-col items-center">
+                    <!-- Image preview -->
+                    <img
+                        v-if="isImage"
+                        :src="downloadUrl"
+                        :alt="document.originalName"
+                        class="max-h-[85vh] max-w-[90vw] object-contain"
+                    />
+
+                    <!-- PDF preview -->
+                    <iframe
+                        v-else-if="isPdf"
+                        :src="downloadUrl"
+                        class="h-[85vh] w-[80vw] rounded-lg bg-white"
+                    />
+
+                    <!-- Generic file -->
+                    <div v-else class="flex flex-col items-center gap-4 rounded-xl bg-white p-10">
+                        <Icon name="heroicons:document" class="h-16 w-16 text-neutral-400" />
+                        <p class="max-w-xs truncate text-lg font-medium text-neutral-700">{{ document.originalName }}</p>
+                        <p class="text-sm text-neutral-400">{{ formatSize(document.size) }}</p>
+                        <a
+                            :href="downloadUrl"
+                            download
+                            class="mt-2 rounded-lg bg-blue-600 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700"
+                        >
+                            {{ $t('taskDocuments.download') }}
+                        </a>
+                    </div>
+
+                    <!-- File name footer -->
+                    <p class="mt-3 text-sm text-white/70">{{ document.originalName }}</p>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { TaskDocument } from '~/services/dto/task-document'
+
+const props = defineProps<{
+    document: TaskDocument | null
+    hasPrev: boolean
+    hasNext: boolean
+}>()
+
+defineEmits<{
+    close: []
+    prev: []
+    next: []
+}>()
+
+const overlayRef = ref<HTMLElement | null>(null)
+
+const { getDownloadUrl } = useTaskDocumentService()
+
+const downloadUrl = computed(() => props.document ? getDownloadUrl(props.document.id) : '')
+const isImage = computed(() => props.document?.mimeType.startsWith('image/') ?? false)
+const isPdf = computed(() => props.document?.mimeType === 'application/pdf')
+
+function formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} o`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} Ko`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`
+}
+
+// Focus overlay for keyboard events
+watch(() => props.document, (doc) => {
+    if (doc) {
+        nextTick(() => overlayRef.value?.focus())
+    }
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/frontend/components/task/TaskDocumentUpload.vue b/frontend/components/task/TaskDocumentUpload.vue
new file mode 100644
index 0000000..b0587ac
--- /dev/null
+++ b/frontend/components/task/TaskDocumentUpload.vue
@@ -0,0 +1,129 @@
+<template>
+    <div
+        class="relative mt-4 rounded-lg border-2 border-dashed transition-colors"
+        :class="isDragging ? 'border-blue-400 bg-blue-50' : 'border-neutral-300 hover:border-neutral-400'"
+        @dragover.prevent="isDragging = true"
+        @dragleave.prevent="isDragging = false"
+        @drop.prevent="handleDrop"
+        @click="fileInput?.click()"
+    >
+        <input
+            ref="fileInput"
+            type="file"
+            multiple
+            class="hidden"
+            @change="handleFileSelect"
+        />
+
+        <div class="flex cursor-pointer flex-col items-center gap-2 px-4 py-6 text-center">
+            <Icon name="heroicons:cloud-arrow-up" class="h-8 w-8 text-neutral-400" />
+            <p class="text-sm text-neutral-500">{{ $t('taskDocuments.dropzone') }}</p>
+        </div>
+
+        <!-- Upload progress -->
+        <div v-if="uploads.length" class="space-y-2 border-t border-neutral-200 px-4 py-3">
+            <div v-for="upload in uploads" :key="upload.name" class="flex items-center gap-3">
+                <div class="min-w-0 flex-1">
+                    <p class="truncate text-sm text-neutral-700">{{ upload.name }}</p>
+                    <div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-neutral-200">
+                        <div
+                            class="h-full rounded-full transition-all"
+                            :class="upload.error ? 'bg-red-500' : 'bg-blue-500'"
+                            :style="{ width: `${upload.progress}%` }"
+                        />
+                    </div>
+                </div>
+                <Icon
+                    v-if="upload.error"
+                    name="heroicons:exclamation-circle"
+                    class="h-5 w-5 shrink-0 text-red-500"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    taskId: number
+}>()
+
+const emit = defineEmits<{
+    uploaded: []
+}>()
+
+const { upload: uploadFile } = useTaskDocumentService()
+const toast = useToast()
+const { t } = useI18n()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const isDragging = ref(false)
+
+type UploadState = {
+    name: string
+    progress: number
+    error: boolean
+}
+
+const uploads = ref<UploadState[]>([])
+
+function handleDrop(event: DragEvent) {
+    isDragging.value = false
+    const files = event.dataTransfer?.files
+    if (files?.length) {
+        processFiles(Array.from(files))
+    }
+}
+
+function handleFileSelect(event: Event) {
+    const input = event.target as HTMLInputElement
+    if (input.files?.length) {
+        processFiles(Array.from(input.files))
+        input.value = ''
+    }
+}
+
+async function processFiles(files: File[]) {
+    const maxSize = 50 * 1024 * 1024
+
+    for (const file of files) {
+        if (file.size > maxSize) {
+            toast.error({
+                title: 'Erreur',
+                message: t('taskDocuments.maxSizeError'),
+            })
+            continue
+        }
+
+        const state: UploadState = reactive({
+            name: file.name,
+            progress: 0,
+            error: false,
+        })
+        uploads.value.push(state)
+
+        try {
+            await uploadFile(props.taskId, file)
+            state.progress = 100
+            toast.success({
+                title: 'Succès',
+                message: t('taskDocuments.uploaded'),
+            })
+        } catch {
+            state.error = true
+            state.progress = 100
+            toast.error({
+                title: 'Erreur',
+                message: t('taskDocuments.uploadError'),
+            })
+        }
+    }
+
+    // Clean up completed uploads after a delay
+    setTimeout(() => {
+        uploads.value = uploads.value.filter(u => u.error)
+    }, 2000)
+
+    emit('uploaded')
+}
+</script>