feat(site): allow document management
This commit is contained in:
Matthieu
180
app/pages/documents.vue
Normal file
180
app/pages/documents.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<main class="container mx-auto px-6 py-8 space-y-8">
|
||||
<div class="hero min-h-[25vh] bg-gradient-to-r from-primary to-secondary">
|
||||
<div class="hero-content text-center text-neutral-content">
|
||||
<div class="max-w-xl">
|
||||
<h1 class="mb-3 text-4xl font-bold">Gestion documentaire</h1>
|
||||
<p class="text-sm opacity-90">
|
||||
Consultez tous les documents liés à vos sites, machines et composants. Recherchez et filtrez pour retrouver rapidement l'information.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body space-y-6">
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
||||
<div class="w-full md:w-2/3">
|
||||
<label class="label">
|
||||
<span class="label-text">Recherche</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="searchTerm"
|
||||
type="search"
|
||||
placeholder="Nom du document, type, site, machine..."
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/3">
|
||||
<label class="label">
|
||||
<span class="label-text">Filtrer par rattachement</span>
|
||||
</label>
|
||||
<select v-model="attachmentFilter" class="select select-bordered w-full">
|
||||
<option value="all">Tous</option>
|
||||
<option value="site">Sites</option>
|
||||
<option value="machine">Machines</option>
|
||||
<option value="composant">Composants</option>
|
||||
<option value="piece">Pièces</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider my-0"></div>
|
||||
|
||||
<div v-if="loading" class="flex flex-col items-center justify-center py-16 text-sm text-gray-500">
|
||||
<span class="loading loading-spinner loading-lg mb-3"></span>
|
||||
Chargement des documents...
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredDocuments.length === 0" class="text-center py-16 text-sm text-gray-500">
|
||||
<svg class="mx-auto mb-4 h-14 w-14 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 000 2.828L11.586 19a2 2 0 002.828 0L21 12.414V7H15.172z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 17L3 20m0 0l3 3m-3-3h12" />
|
||||
</svg>
|
||||
Aucun document ne correspond à votre recherche pour l'instant.
|
||||
</div>
|
||||
|
||||
<div v-else class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr class="text-xs uppercase">
|
||||
<th>Nom</th>
|
||||
<th>Type</th>
|
||||
<th>Taille</th>
|
||||
<th>Rattaché à</th>
|
||||
<th>Date</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="document in filteredDocuments" :key="document.id" class="text-sm">
|
||||
<td>
|
||||
<div class="font-semibold">{{ document.name }}</div>
|
||||
<div class="text-xs text-gray-500">{{ document.filename }}</div>
|
||||
</td>
|
||||
<td>{{ document.mimeType || 'Inconnu' }}</td>
|
||||
<td>{{ formatSize(document.size) }}</td>
|
||||
<td>
|
||||
<div class="flex flex-col text-xs">
|
||||
<span v-if="document.site">Site · {{ document.site.name }}</span>
|
||||
<span v-else-if="document.machine">Machine · {{ document.machine.name }}</span>
|
||||
<span v-else-if="document.composant">Composant · {{ document.composant.name }}</span>
|
||||
<span v-else-if="document.piece">Pièce · {{ document.piece.name }}</span>
|
||||
<span v-else class="text-gray-400">Non défini</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ formatDate(document.createdAt) }}</td>
|
||||
<td class="text-right">
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
|
||||
Télécharger
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useDocuments } from '~/composables/useDocuments'
|
||||
|
||||
const { documents, loading, loadDocuments } = useDocuments()
|
||||
|
||||
const searchTerm = ref('')
|
||||
const attachmentFilter = ref('all')
|
||||
|
||||
onMounted(() => {
|
||||
loadDocuments()
|
||||
})
|
||||
|
||||
const filteredDocuments = computed(() => {
|
||||
const term = searchTerm.value.trim().toLowerCase()
|
||||
const filter = attachmentFilter.value
|
||||
|
||||
return documents.value.filter((document) => {
|
||||
const matchesFilter =
|
||||
filter === 'all' ||
|
||||
(filter === 'site' && document.siteId) ||
|
||||
(filter === 'machine' && document.machineId) ||
|
||||
(filter === 'composant' && document.composantId) ||
|
||||
(filter === 'piece' && document.pieceId)
|
||||
|
||||
if (!matchesFilter) return false
|
||||
|
||||
if (!term) return true
|
||||
|
||||
const searchable = [
|
||||
document.name,
|
||||
document.filename,
|
||||
document.mimeType,
|
||||
document.site?.name,
|
||||
document.machine?.name,
|
||||
document.composant?.name,
|
||||
document.piece?.name,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.map(value => value.toLowerCase())
|
||||
|
||||
return searchable.some(value => value.includes(term))
|
||||
})
|
||||
})
|
||||
|
||||
const formatSize = (size) => {
|
||||
if (size === undefined || size === null) return '—'
|
||||
if (size === 0) return '0 B'
|
||||
const units = ['B', 'KB', 'MB', 'GB']
|
||||
const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
|
||||
const formatted = size / Math.pow(1024, index)
|
||||
return `${formatted.toFixed(1)} ${units[index]}`
|
||||
}
|
||||
|
||||
const formatDate = (date) => {
|
||||
if (!date) return '—'
|
||||
return new Intl.DateTimeFormat('fr-FR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
}).format(new Date(date))
|
||||
}
|
||||
|
||||
const downloadDocument = (doc) => {
|
||||
if (!doc?.path) return
|
||||
|
||||
if (doc.path.startsWith('data:')) {
|
||||
const link = document.createElement('a')
|
||||
link.href = doc.path
|
||||
link.download = doc.filename || doc.name || 'document'
|
||||
link.click()
|
||||
return
|
||||
}
|
||||
|
||||
window.open(doc.path, '_blank')
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user