2026-03-11 23:33:10 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { Head } from '@inertiajs/vue3';
|
|
|
|
|
import { usePage } from '@inertiajs/vue3';
|
2026-03-12 18:25:32 +00:00
|
|
|
import { FileUp } from 'lucide-vue-next';
|
|
|
|
|
import { ref, computed } from 'vue';
|
2026-03-11 23:33:10 +00:00
|
|
|
import AppLogoIcon from '@/components/AppLogoIcon.vue';
|
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
|
import { Spinner } from '@/components/ui/spinner';
|
|
|
|
|
|
2026-03-12 18:25:32 +00:00
|
|
|
type Declaration = {
|
2026-03-11 23:33:10 +00:00
|
|
|
id: number;
|
|
|
|
|
title: string;
|
|
|
|
|
client_name: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type Document = {
|
|
|
|
|
id: number;
|
|
|
|
|
name: string;
|
|
|
|
|
file_name: string;
|
|
|
|
|
size: string;
|
|
|
|
|
created_at: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type Props = {
|
2026-03-12 18:25:32 +00:00
|
|
|
declaration: Declaration;
|
2026-03-11 23:33:10 +00:00
|
|
|
token: string;
|
|
|
|
|
documents: Document[];
|
|
|
|
|
uploadUrl: string;
|
|
|
|
|
csrfToken: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
|
|
|
|
|
|
const page = usePage<{ flash?: { type?: string; message?: string } }>();
|
|
|
|
|
const flash = computed(() => page.props.flash);
|
|
|
|
|
|
|
|
|
|
const fileInput = ref<HTMLInputElement | null>(null);
|
|
|
|
|
const isDragging = ref(false);
|
|
|
|
|
const isSubmitting = ref(false);
|
|
|
|
|
|
|
|
|
|
function triggerFileSelect() {
|
|
|
|
|
fileInput.value?.click();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onDragOver(e: DragEvent) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
isDragging.value = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onDragLeave() {
|
|
|
|
|
isDragging.value = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onDrop(e: DragEvent) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
isDragging.value = false;
|
|
|
|
|
const files = e.dataTransfer?.files;
|
|
|
|
|
if (files?.length && fileInput.value) {
|
|
|
|
|
const dt = new DataTransfer();
|
|
|
|
|
Array.from(files).forEach((f) => dt.items.add(f));
|
|
|
|
|
fileInput.value.files = dt.files;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function submit() {
|
|
|
|
|
if (!fileInput.value?.files?.length) return;
|
|
|
|
|
isSubmitting.value = true;
|
|
|
|
|
const form = document.getElementById('upload-form') as HTMLFormElement;
|
|
|
|
|
form.submit();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="flex min-h-svh flex-col bg-background">
|
2026-03-12 18:25:32 +00:00
|
|
|
<Head :title="`Dépôt - ${declaration.title}`" />
|
2026-03-11 23:33:10 +00:00
|
|
|
|
|
|
|
|
<header class="border-b border-sidebar-border/70 px-4 py-4">
|
|
|
|
|
<div class="mx-auto flex max-w-2xl items-center justify-between">
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<AppLogoIcon class="size-8 fill-current text-foreground" />
|
|
|
|
|
<div>
|
2026-03-12 18:25:32 +00:00
|
|
|
<h1 class="font-medium">{{ declaration.title }}</h1>
|
|
|
|
|
<p class="text-sm text-muted-foreground">
|
|
|
|
|
{{ declaration.client_name }}
|
|
|
|
|
</p>
|
2026-03-11 23:33:10 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<main class="mx-auto w-full max-w-2xl flex-1 p-4">
|
2026-03-12 18:25:32 +00:00
|
|
|
<div
|
|
|
|
|
v-if="flash?.message"
|
|
|
|
|
class="mb-4 rounded-lg bg-green-100 p-3 text-sm text-green-800 dark:bg-green-900/30 dark:text-green-300"
|
|
|
|
|
>
|
2026-03-11 23:33:10 +00:00
|
|
|
{{ flash.message }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="space-y-6">
|
|
|
|
|
<div>
|
|
|
|
|
<h2 class="text-lg font-medium">Déposer vos documents</h2>
|
|
|
|
|
<p class="mt-1 text-sm text-muted-foreground">
|
2026-03-12 18:25:32 +00:00
|
|
|
Glissez-déposez vos fichiers ou cliquez pour
|
|
|
|
|
sélectionner.
|
2026-03-11 23:33:10 +00:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<form
|
|
|
|
|
id="upload-form"
|
|
|
|
|
:action="uploadUrl"
|
|
|
|
|
method="post"
|
|
|
|
|
enctype="multipart/form-data"
|
|
|
|
|
class="space-y-4"
|
|
|
|
|
@submit.prevent="submit"
|
|
|
|
|
>
|
|
|
|
|
<input type="hidden" name="_token" :value="csrfToken" />
|
|
|
|
|
<input
|
|
|
|
|
ref="fileInput"
|
|
|
|
|
type="file"
|
|
|
|
|
name="files[]"
|
|
|
|
|
multiple
|
|
|
|
|
required
|
|
|
|
|
class="hidden"
|
|
|
|
|
accept="*/*"
|
|
|
|
|
/>
|
|
|
|
|
<div
|
|
|
|
|
class="rounded-xl border-2 border-dashed p-8 text-center transition-colors"
|
|
|
|
|
:class="[
|
|
|
|
|
isDragging
|
|
|
|
|
? 'border-primary bg-primary/5'
|
|
|
|
|
: 'border-sidebar-border/70 hover:border-primary/50',
|
|
|
|
|
]"
|
|
|
|
|
@dragover="onDragOver"
|
|
|
|
|
@dragleave="onDragLeave"
|
|
|
|
|
@drop="onDrop"
|
|
|
|
|
>
|
|
|
|
|
<FileUp class="mx-auto size-12 text-muted-foreground" />
|
|
|
|
|
<p class="mt-2 text-sm font-medium">
|
2026-03-12 18:25:32 +00:00
|
|
|
{{
|
|
|
|
|
fileInput?.files?.length
|
|
|
|
|
? `${fileInput.files.length} fichier(s) sélectionné(s)`
|
|
|
|
|
: 'Aucun fichier sélectionné'
|
|
|
|
|
}}
|
2026-03-11 23:33:10 +00:00
|
|
|
</p>
|
2026-03-12 18:25:32 +00:00
|
|
|
<Button
|
|
|
|
|
type="button"
|
|
|
|
|
variant="outline"
|
|
|
|
|
class="mt-2"
|
|
|
|
|
@click="triggerFileSelect"
|
|
|
|
|
>
|
2026-03-11 23:33:10 +00:00
|
|
|
Choisir des fichiers
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-03-12 18:25:32 +00:00
|
|
|
<Button
|
|
|
|
|
type="submit"
|
|
|
|
|
:disabled="!fileInput?.files?.length || isSubmitting"
|
|
|
|
|
>
|
2026-03-11 23:33:10 +00:00
|
|
|
<Spinner v-if="isSubmitting" class="mr-2 size-4" />
|
|
|
|
|
Envoyer
|
|
|
|
|
</Button>
|
|
|
|
|
</form>
|
|
|
|
|
|
2026-03-12 18:25:32 +00:00
|
|
|
<div
|
|
|
|
|
v-if="documents.length"
|
|
|
|
|
class="rounded-xl border border-sidebar-border/70 p-4"
|
|
|
|
|
>
|
2026-03-11 23:33:10 +00:00
|
|
|
<h3 class="font-medium">Documents déjà déposés</h3>
|
|
|
|
|
<ul class="mt-2 space-y-1 text-sm text-muted-foreground">
|
2026-03-12 18:25:32 +00:00
|
|
|
<li
|
|
|
|
|
v-for="doc in documents"
|
|
|
|
|
:key="doc.id"
|
|
|
|
|
class="flex justify-between"
|
|
|
|
|
>
|
2026-03-11 23:33:10 +00:00
|
|
|
<span>{{ doc.file_name }}</span>
|
|
|
|
|
<span>{{ doc.size }} — {{ doc.created_at }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
