matthieu
5b9c4ca09d
Rework CSS theme (app.css), navbar layout, dashboard page, machine detail, catalog pages, and various form/display components for better consistency and mobile responsiveness. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
251 lines
7.6 KiB
Vue
251 lines
7.6 KiB
Vue
<template>
|
||
<teleport to="body">
|
||
<div
|
||
v-if="visible"
|
||
class="fixed inset-0 z-[1200] flex items-center justify-center bg-black/60 backdrop-blur-sm px-4 py-6"
|
||
@click.self="close"
|
||
>
|
||
<div class="w-full max-w-[1600px] h-full max-h-[94vh] bg-base-100 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
|
||
<header class="flex items-start justify-between gap-4 p-6 border-b border-base-200">
|
||
<div class="min-w-0">
|
||
<h3 class="font-bold text-xl truncate">
|
||
Prévisualisation
|
||
<span v-if="navTotal > 1" class="text-base font-normal text-base-content/50">
|
||
{{ activeIndex + 1 }} / {{ navTotal }}
|
||
</span>
|
||
</h3>
|
||
<p class="text-sm text-base-content/50 truncate">
|
||
{{ activeDoc?.name || activeDoc?.filename }}<span v-if="documentDescription"> • {{ documentDescription }}</span>
|
||
</p>
|
||
</div>
|
||
<button type="button" class="btn btn-ghost btn-sm shrink-0" @click="close">
|
||
✕
|
||
</button>
|
||
</header>
|
||
|
||
<section class="flex-1 bg-base-200/40 px-6 py-5 overflow-hidden relative">
|
||
<button
|
||
v-if="hasPrev"
|
||
type="button"
|
||
class="absolute left-8 top-1/2 -translate-y-1/2 z-10 btn btn-circle bg-base-100/80 hover:bg-base-100 shadow-lg border-base-300"
|
||
title="Document précédent (←)"
|
||
@click="goToPrev"
|
||
>
|
||
❮
|
||
</button>
|
||
|
||
<button
|
||
v-if="hasNext"
|
||
type="button"
|
||
class="absolute right-8 top-1/2 -translate-y-1/2 z-10 btn btn-circle bg-base-100/80 hover:bg-base-100 shadow-lg border-base-300"
|
||
title="Document suivant (→)"
|
||
@click="goToNext"
|
||
>
|
||
❯
|
||
</button>
|
||
|
||
<div class="h-full w-full rounded-xl border border-base-300 bg-base-100 flex items-center justify-center overflow-hidden">
|
||
<template v-if="previewType === 'image'">
|
||
<img :src="documentSrc" alt="preview" class="max-h-full max-w-full object-contain">
|
||
</template>
|
||
|
||
<template v-else-if="previewType === 'pdf'">
|
||
<iframe
|
||
:src="documentSrc"
|
||
class="w-full h-full bg-white"
|
||
frameborder="0"
|
||
title="Aperçu PDF"
|
||
/>
|
||
</template>
|
||
|
||
<template v-else-if="previewType === 'audio'">
|
||
<audio :src="documentSrc" controls class="w-full" />
|
||
</template>
|
||
|
||
<template v-else-if="previewType === 'video'">
|
||
<video :src="documentSrc" controls class="w-full h-full bg-black" />
|
||
</template>
|
||
|
||
<template v-else-if="previewType === 'text'">
|
||
<div class="w-full h-full overflow-auto">
|
||
<div v-if="textLoading" class="flex items-center justify-center py-10 text-sm text-base-content/50">
|
||
<span class="loading loading-spinner loading-md mr-2" />
|
||
Chargement du document...
|
||
</div>
|
||
<div v-else-if="textError" class="alert alert-error text-sm">
|
||
{{ textError }}
|
||
</div>
|
||
<pre v-else class="bg-base-100 border border-base-300 rounded-lg p-4 whitespace-pre-wrap">
|
||
{{ textContent }}
|
||
</pre>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<div class="text-sm text-base-content/50 text-center px-6">
|
||
Prévisualisation non disponible pour ce type de document.
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="border-t border-base-200 px-6 py-4 flex flex-wrap gap-2 justify-end bg-base-100">
|
||
<button type="button" class="btn" @click="close">
|
||
Fermer
|
||
</button>
|
||
<button type="button" class="btn btn-primary" @click="download">
|
||
Télécharger
|
||
</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</teleport>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, watch, onUnmounted } from 'vue'
|
||
import { getPreviewType, describeDocument, canPreviewDocument } from '~/utils/documentPreview'
|
||
|
||
const props = defineProps({
|
||
document: {
|
||
type: Object,
|
||
default: null,
|
||
},
|
||
visible: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
documents: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
})
|
||
|
||
const emit = defineEmits(['close'])
|
||
|
||
// --- Carousel navigation ---
|
||
|
||
const previewableDocuments = computed(() => {
|
||
if (!props.documents?.length) return []
|
||
return props.documents.filter((doc) => canPreviewDocument(doc))
|
||
})
|
||
|
||
const navTotal = computed(() => previewableDocuments.value.length)
|
||
|
||
const activeIndex = ref(0)
|
||
|
||
// Sync index when the parent changes the document prop (e.g. user clicks a different "Consulter")
|
||
watch(
|
||
() => props.document,
|
||
(doc) => {
|
||
if (!doc || !previewableDocuments.value.length) {
|
||
activeIndex.value = 0
|
||
return
|
||
}
|
||
const idx = previewableDocuments.value.findIndex((d) => d.id === doc.id)
|
||
activeIndex.value = idx >= 0 ? idx : 0
|
||
},
|
||
{ immediate: true },
|
||
)
|
||
|
||
const activeDoc = computed(() => {
|
||
if (previewableDocuments.value.length && activeIndex.value < previewableDocuments.value.length) {
|
||
return previewableDocuments.value[activeIndex.value]
|
||
}
|
||
return props.document
|
||
})
|
||
|
||
const hasPrev = computed(() => navTotal.value > 1 && activeIndex.value > 0)
|
||
const hasNext = computed(() => navTotal.value > 1 && activeIndex.value < navTotal.value - 1)
|
||
|
||
const goToPrev = () => {
|
||
if (hasPrev.value) activeIndex.value--
|
||
}
|
||
const goToNext = () => {
|
||
if (hasNext.value) activeIndex.value++
|
||
}
|
||
|
||
// Keyboard navigation
|
||
const handleKeydown = (e) => {
|
||
if (!props.visible) return
|
||
if (e.key === 'ArrowLeft') {
|
||
e.preventDefault()
|
||
goToPrev()
|
||
} else if (e.key === 'ArrowRight') {
|
||
e.preventDefault()
|
||
goToNext()
|
||
} else if (e.key === 'Escape') {
|
||
e.preventDefault()
|
||
close()
|
||
}
|
||
}
|
||
|
||
watch(
|
||
() => props.visible,
|
||
(val) => {
|
||
if (val) {
|
||
document.addEventListener('keydown', handleKeydown)
|
||
} else {
|
||
document.removeEventListener('keydown', handleKeydown)
|
||
}
|
||
},
|
||
)
|
||
|
||
onUnmounted(() => {
|
||
document.removeEventListener('keydown', handleKeydown)
|
||
})
|
||
|
||
// --- Preview logic (uses activeDoc) ---
|
||
|
||
const previewType = computed(() => getPreviewType(activeDoc.value))
|
||
const documentDescription = computed(() => describeDocument(activeDoc.value))
|
||
const documentSrc = computed(() => activeDoc.value?.fileUrl || activeDoc.value?.path || '')
|
||
|
||
const textContent = ref('')
|
||
const textLoading = ref(false)
|
||
const textError = ref('')
|
||
|
||
watch(
|
||
activeDoc,
|
||
async (doc) => {
|
||
textContent.value = ''
|
||
textError.value = ''
|
||
textLoading.value = false
|
||
|
||
if (!doc) { return }
|
||
if (getPreviewType(doc) !== 'text') { return }
|
||
|
||
try {
|
||
textLoading.value = true
|
||
const url = doc.fileUrl || doc.path || ''
|
||
if (!url) {
|
||
textError.value = 'Aucune URL de document disponible.'
|
||
return
|
||
}
|
||
|
||
const response = await fetch(url, { credentials: 'include' })
|
||
if (!response.ok) {
|
||
throw new Error('Téléchargement du document impossible')
|
||
}
|
||
textContent.value = await response.text()
|
||
} catch (error) {
|
||
console.error('Erreur lors du chargement du texte:', error)
|
||
textError.value = error.message || 'Impossible de lire ce document.'
|
||
} finally {
|
||
textLoading.value = false
|
||
}
|
||
},
|
||
{ immediate: true },
|
||
)
|
||
|
||
const close = () => {
|
||
emit('close')
|
||
}
|
||
|
||
const download = () => {
|
||
const url = activeDoc.value?.downloadUrl || activeDoc.value?.fileUrl || activeDoc.value?.path
|
||
if (!url) { return }
|
||
window.open(url, '_blank')
|
||
}
|
||
</script>
|