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
245
frontend/app/components/DocumentUpload.vue
Normal file
245
frontend/app/components/DocumentUpload.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div
|
||||
class="border-2 border-dashed rounded-lg p-6 transition-colors"
|
||||
:class="dragActive ? 'border-primary bg-primary/5' : 'border-base-300 bg-base-100'"
|
||||
@dragover.prevent="onDragOver"
|
||||
@dragleave.prevent="onDragLeave"
|
||||
@drop.prevent="onDrop"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-3 text-center">
|
||||
<IconLucideCloudUpload class="w-10 h-10 text-primary" aria-hidden="true" />
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p class="text-sm text-base-content/50">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-2">
|
||||
<button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog">
|
||||
Sélectionner des fichiers
|
||||
</button>
|
||||
<span class="text-xs text-base-content/50">ou glisser-déposer ici</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
class="hidden"
|
||||
:accept="accept"
|
||||
:multiple="multiple"
|
||||
@change="onFileChange"
|
||||
>
|
||||
|
||||
<div class="w-full max-w-xs mt-2">
|
||||
<label class="text-xs font-semibold uppercase tracking-wide text-base-content/70">
|
||||
Type de document
|
||||
</label>
|
||||
<select
|
||||
class="select select-bordered select-sm w-full mt-1"
|
||||
:value="documentType"
|
||||
@change="emit('update:documentType', $event.target.value)"
|
||||
>
|
||||
<option v-for="t in DOCUMENT_TYPES" :key="t.value" :value="t.value">
|
||||
{{ t.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<ul v-if="selectedFiles.length" class="mt-4 w-full space-y-2 text-left">
|
||||
<li v-for="file in selectedFiles" :key="file.name" class="flex items-center justify-between text-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-300 bg-base-200/70 flex items-center justify-center">
|
||||
<img
|
||||
v-if="isImageFile(file)"
|
||||
:src="getFilePreview(file)"
|
||||
class="h-full w-full object-cover"
|
||||
:alt="`Aperçu de ${file.name}`"
|
||||
>
|
||||
<component
|
||||
v-else
|
||||
:is="getIcon(file).component"
|
||||
class="h-6 w-6"
|
||||
:class="getIcon(file).colorClass"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium">{{ file.name }}</span>
|
||||
<span class="text-xs text-base-content/50">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">
|
||||
Retirer
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onBeforeUnmount } from 'vue'
|
||||
import { useToast } from '~/composables/useToast'
|
||||
import { DOCUMENT_TYPES } from '~/shared/documentTypes'
|
||||
import { getFileIcon } from '~/utils/fileIcons'
|
||||
import IconLucideCloudUpload from '~icons/lucide/cloud-upload'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Ajouter des documents'
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: 'Formats acceptés : PDF, images, textes…'
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
maxFileSizeMb: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
documentType: {
|
||||
type: String,
|
||||
default: 'documentation'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'files-added', 'update:documentType'])
|
||||
|
||||
const dragActive = ref(false)
|
||||
const fileInput = ref(null)
|
||||
const internalFiles = ref([])
|
||||
const { showError } = useToast()
|
||||
const previewUrls = new Map()
|
||||
|
||||
const isImageFile = (file) => (file?.type || '').startsWith('image/')
|
||||
|
||||
const getFilePreview = (file) => {
|
||||
if (!isImageFile(file)) { return null }
|
||||
if (!previewUrls.has(file)) {
|
||||
previewUrls.set(file, URL.createObjectURL(file))
|
||||
}
|
||||
return previewUrls.get(file)
|
||||
}
|
||||
|
||||
const cleanupRemovedPreviews = (previousFiles = [], nextFiles = []) => {
|
||||
const nextSet = new Set(nextFiles)
|
||||
previousFiles.forEach((file) => {
|
||||
if (!nextSet.has(file)) {
|
||||
const url = previewUrls.get(file)
|
||||
if (url) {
|
||||
URL.revokeObjectURL(url)
|
||||
previewUrls.delete(file)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const selectedFiles = internalFiles
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
if (Array.isArray(newValue)) {
|
||||
cleanupRemovedPreviews(internalFiles.value, newValue)
|
||||
internalFiles.value = [...newValue]
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const triggerFileDialog = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const emitFiles = (files) => {
|
||||
cleanupRemovedPreviews(internalFiles.value, files)
|
||||
internalFiles.value = files
|
||||
emit('update:modelValue', files)
|
||||
emit('files-added', files)
|
||||
}
|
||||
|
||||
const handleFiles = (fileList) => {
|
||||
const files = Array.from(fileList)
|
||||
const maxBytes = props.maxFileSizeMb * 1024 * 1024
|
||||
if (!props.multiple) {
|
||||
const validFile = files[0]
|
||||
if (validFile && validFile.size > maxBytes) {
|
||||
showError(`Le fichier "${validFile.name}" dépasse la limite de ${props.maxFileSizeMb} Mo`)
|
||||
return
|
||||
}
|
||||
emitFiles(files.slice(0, 1))
|
||||
} else {
|
||||
const merged = [...internalFiles.value]
|
||||
files.forEach((file) => {
|
||||
if (file.size > maxBytes) {
|
||||
showError(`Le fichier "${file.name}" dépasse la limite de ${props.maxFileSizeMb} Mo`)
|
||||
return
|
||||
}
|
||||
if (!merged.some(existing => existing.name === file.name && existing.size === file.size)) {
|
||||
merged.push(file)
|
||||
}
|
||||
})
|
||||
emitFiles(merged)
|
||||
}
|
||||
}
|
||||
|
||||
const onFileChange = (event) => {
|
||||
handleFiles(event.target.files || [])
|
||||
event.target.value = ''
|
||||
}
|
||||
|
||||
const onDragOver = () => {
|
||||
dragActive.value = true
|
||||
}
|
||||
|
||||
const onDragLeave = () => {
|
||||
dragActive.value = false
|
||||
}
|
||||
|
||||
const onDrop = (event) => {
|
||||
dragActive.value = false
|
||||
if (event.dataTransfer?.files?.length) {
|
||||
handleFiles(event.dataTransfer.files)
|
||||
}
|
||||
}
|
||||
|
||||
const removeFile = (fileToRemove) => {
|
||||
const filtered = internalFiles.value.filter(file => file !== fileToRemove)
|
||||
emitFiles(filtered)
|
||||
}
|
||||
|
||||
const formatSize = (size) => {
|
||||
if (!size) { return '0 B' }
|
||||
const units = ['B', 'KB', 'MB', 'GB']
|
||||
const index = Math.floor(Math.log(size) / Math.log(1024))
|
||||
const formatted = size / Math.pow(1024, index)
|
||||
return `${formatted.toFixed(1)} ${units[index]}`
|
||||
}
|
||||
|
||||
const getIcon = (file) => {
|
||||
return getFileIcon({ name: file.name, mime: file.type })
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
previewUrls.forEach((url) => {
|
||||
URL.revokeObjectURL(url)
|
||||
})
|
||||
previewUrls.clear()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user