feat(share) : viewer de documents du partage (image/pdf/texte)
This commit is contained in:
Matthieu
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade" appear>
|
||||
<div
|
||||
v-if="entry"
|
||||
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="inlineUrl"
|
||||
:alt="entry.name"
|
||||
class="max-h-[85vh] max-w-[90vw] object-contain"
|
||||
/>
|
||||
|
||||
<!-- PDF preview — iframe pattern, même approche que TaskDocumentPreview -->
|
||||
<iframe
|
||||
v-else-if="isPdf"
|
||||
:src="inlineUrl"
|
||||
class="h-[85vh] w-[80vw] rounded-lg bg-white"
|
||||
/>
|
||||
|
||||
<!-- Text / Markdown / JSON / XML / CSV / Log 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">{{ entry.name }}</p>
|
||||
<a
|
||||
:href="downloadUrl"
|
||||
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('sharedFiles.download') }}
|
||||
</a>
|
||||
</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 — download fallback -->
|
||||
<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">{{ entry.name }}</p>
|
||||
<p class="text-sm text-neutral-400">{{ formatFileSize(entry.size) }}</p>
|
||||
<a
|
||||
:href="downloadUrl"
|
||||
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('sharedFiles.download') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- File name footer (hors bloc texte car il a déjà le nom dans l'en-tête) -->
|
||||
<p v-if="!isText" class="mt-3 text-sm text-white/70">{{ entry.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { FileEntry } from '~/services/dto/share'
|
||||
import { useShareService } from '~/services/share'
|
||||
import { formatFileSize } from '~/utils/format'
|
||||
|
||||
const props = defineProps<{
|
||||
entry: FileEntry | null
|
||||
hasPrev: boolean
|
||||
hasNext: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
close: []
|
||||
prev: []
|
||||
next: []
|
||||
}>()
|
||||
|
||||
const overlayRef = ref<HTMLElement | null>(null)
|
||||
const textContent = ref('')
|
||||
const loadingText = ref(false)
|
||||
|
||||
const { getDownloadUrl } = useShareService()
|
||||
|
||||
const TEXT_RE = /\.(md|markdown|txt|csv|json|xml|log)$/i
|
||||
|
||||
const inlineUrl = computed(() => props.entry ? getDownloadUrl(props.entry.path, 'inline') : '')
|
||||
const downloadUrl = computed(() => props.entry ? getDownloadUrl(props.entry.path, 'attachment') : '')
|
||||
const isImage = computed(() => props.entry?.mimeType.startsWith('image/') ?? false)
|
||||
const isPdf = computed(() => props.entry?.mimeType === 'application/pdf')
|
||||
const isText = computed(() =>
|
||||
props.entry
|
||||
? (props.entry.mimeType.startsWith('text/') || TEXT_RE.test(props.entry.name))
|
||||
: false
|
||||
)
|
||||
|
||||
watch(() => props.entry, async (entry) => {
|
||||
textContent.value = ''
|
||||
if (!entry) return
|
||||
|
||||
nextTick(() => overlayRef.value?.focus())
|
||||
|
||||
if (isText.value) {
|
||||
loadingText.value = true
|
||||
try {
|
||||
textContent.value = await $fetch<string>(inlineUrl.value, {
|
||||
credentials: 'include',
|
||||
responseType: 'text' as never,
|
||||
})
|
||||
} 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>
|
||||
Reference in New Issue
Block a user