Lesstime/frontend/components/task/TaskDocumentPreview.vue

<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 -->
                <MalioButtonIcon
                    icon="heroicons:x-mark"
                    aria-label="Fermer"
                    variant="ghost"
                    icon-size="24"
                    button-class="absolute right-4 top-4 rounded-full bg-black/50 text-white hover:bg-black/70"
                    @click="$emit('close')"
                />

                <!-- Navigation arrows -->
                <MalioButtonIcon
                    v-if="hasPrev"
                    icon="heroicons:chevron-left"
                    aria-label="Précédent"
                    variant="ghost"
                    icon-size="24"
                    button-class="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 text-white hover:bg-black/70"
                    @click="$emit('prev')"
                />
                <MalioButtonIcon
                    v-if="hasNext"
                    icon="heroicons:chevron-right"
                    aria-label="Suivant"
                    variant="ghost"
                    icon-size="24"
                    button-class="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 text-white hover:bg-black/70"
                    @click="$emit('next')"
                />

                <!-- 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"
                    />

                    <!-- Text / Markdown preview -->
                    <div
                        v-else-if="isText"
                        class="flex max-h-[85vh] w-[85vw] max-w-3xl flex-col overflow-hidden rounded-xl bg-white"
                    >
                        <div class="flex items-center justify-between gap-2 border-b border-neutral-200 px-4 py-3">
                            <p class="truncate text-sm font-medium text-neutral-700">{{ document.originalName }}</p>
                            <div class="flex shrink-0 items-center gap-2">
                                <button
                                    type="button"
                                    class="inline-flex items-center gap-1.5 rounded-lg bg-neutral-100 px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-200"
                                    @click="copyContent"
                                >
                                    <Icon
                                        :name="copied ? 'heroicons:check' : 'mdi:content-copy'"
                                        class="h-4 w-4"
                                        :class="copied ? 'text-green-600' : ''"
                                    />
                                    {{ copied ? $t('taskDocuments.copied') : $t('taskDocuments.copy') }}
                                </button>
                                <a
                                    :href="downloadUrl"
                                    download
                                    class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700"
                                >
                                    {{ $t('taskDocuments.download') }}
                                </a>
                            </div>
                        </div>
                        <div class="overflow-auto p-4">
                            <div v-if="loadingText" class="flex justify-center py-10">
                                <Icon name="heroicons:arrow-path" class="h-6 w-6 animate-spin text-neutral-400" />
                            </div>
                            <pre
                                v-else
                                class="whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-neutral-800"
                            >{{ textContent }}</pre>
                        </div>
                    </div>

                    <!-- 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">{{ formatFileSize(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 v-if="!isText" 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'
import { useTaskDocumentService } from '~/services/task-documents'
import { formatFileSize } from '~/utils/format'
import { copyToClipboard } from '~/utils/clipboard'

const props = defineProps<{
    document: TaskDocument | null
    hasPrev: boolean
    hasNext: boolean
}>()

defineEmits<{
    close: []
    prev: []
    next: []
}>()

const overlayRef = ref<HTMLElement | null>(null)
const textContent = ref('')
const loadingText = ref(false)
const copied = ref(false)

const { getDownloadUrl, getContent } = useTaskDocumentService()
const { t } = useI18n()

const TEXT_MIME_TYPES = ['text/markdown', 'text/plain', 'text/csv', 'application/json', 'application/xml', 'text/xml']

function isTextDocument(doc: TaskDocument | null): boolean {
    if (!doc) return false
    if (TEXT_MIME_TYPES.includes(doc.mimeType)) return true
    return /\.(md|markdown|txt|csv|json|xml)$/i.test(doc.originalName)
}

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')
const isText = computed(() => isTextDocument(props.document))

async function copyContent() {
    if (await copyToClipboard(textContent.value)) {
        copied.value = true
        useToast().success(t('taskDocuments.copied'))
        setTimeout(() => { copied.value = false }, 2000)
    }
}

// Focus overlay for keyboard events, and load text content for text/markdown documents
watch(() => props.document, async (doc) => {
    textContent.value = ''
    copied.value = false
    if (!doc) return

    nextTick(() => overlayRef.value?.focus())

    if (isTextDocument(doc)) {
        loadingText.value = true
        try {
            textContent.value = await getContent(doc.id)
        } catch {
            textContent.value = ''
        } finally {
            loadingText.value = false
        }
    }
}, { immediate: true })
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>