refactor : merge Inventory_frontend submodule into frontend/ directory
Merges the full git history of Inventory_frontend into the monorepo under frontend/. Removes the submodule in favor of a unified repo. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
250
frontend/app/components/DocumentPreviewModal.vue
Normal file
250
frontend/app/components/DocumentPreviewModal.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user