124 lines
4.4 KiB
Vue
124 lines
4.4 KiB
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 -->
|
|
<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>
|