151 lines
8.0 KiB
Vue
151 lines
8.0 KiB
Vue
<script setup>
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
|
import { Head, Link, useForm } from '@inertiajs/vue3'
|
|
|
|
const props = defineProps({
|
|
services: Array,
|
|
fournisseurs: Array,
|
|
statuts: Object,
|
|
})
|
|
|
|
const form = useForm({
|
|
titre: '',
|
|
description: '',
|
|
fournisseur_id: '',
|
|
service_id: props.services.length === 1 ? props.services[0].id : '',
|
|
date_debut: '',
|
|
date_echeance: '',
|
|
statut: 'actif',
|
|
montant: '',
|
|
preavis_jours: '',
|
|
})
|
|
|
|
function submit() {
|
|
form.post(route('contrats.store'))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Nouveau contrat" />
|
|
<AuthenticatedLayout>
|
|
<template #header>
|
|
<div class="flex items-center gap-3">
|
|
<Link :href="route('contrats.index')" class="text-gray-400 hover:text-gray-600 transition-colors">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</Link>
|
|
<h1 class="text-xl font-semibold text-gray-900">Nouveau contrat</h1>
|
|
</div>
|
|
</template>
|
|
|
|
<form @submit.prevent="submit" class="mx-auto max-w-4xl space-y-6">
|
|
<div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
|
|
<h2 class="mb-5 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
|
|
Informations Générales
|
|
</h2>
|
|
|
|
<div class="grid gap-6 sm:grid-cols-2">
|
|
<div class="sm:col-span-2">
|
|
<label class="mb-1 block text-sm font-medium text-gray-700">Titre *</label>
|
|
<input v-model="form.titre" type="text" required
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" />
|
|
<div v-if="form.errors.titre" class="mt-1 text-sm text-red-600">{{ form.errors.titre }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-gray-700">Fournisseur *</label>
|
|
<select v-model="form.fournisseur_id" required
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
|
|
<option value="" disabled>Sélectionner un fournisseur...</option>
|
|
<option v-for="f in fournisseurs" :key="f.id" :value="f.id">{{ f.nom }}</option>
|
|
</select>
|
|
<div v-if="form.errors.fournisseur_id" class="mt-1 text-sm text-red-600">{{ form.errors.fournisseur_id }}</div>
|
|
</div>
|
|
|
|
<div v-if="$page.props.auth.user?.roles?.some(r => r.name === 'admin')">
|
|
<label class="mb-1 block text-sm font-medium text-gray-700">Service *</label>
|
|
<select v-model="form.service_id" required
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
|
|
<option value="">Sélectionner un service...</option>
|
|
<option v-for="s in services" :key="s.id" :value="s.id">{{ s.nom }}</option>
|
|
</select>
|
|
<div v-if="form.errors.service_id" class="mt-1 text-sm text-red-600">{{ form.errors.service_id }}</div>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<label class="mb-1 block text-sm font-medium text-gray-700">Service</label>
|
|
<input type="text" disabled :value="services[0]?.nom"
|
|
class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-500" />
|
|
</div>
|
|
|
|
<div class="sm:col-span-2">
|
|
<label class="mb-1 block text-sm font-medium text-gray-700">Description</label>
|
|
<textarea v-model="form.description" rows="3"
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"></textarea>
|
|
<div v-if="form.errors.description" class="mt-1 text-sm text-red-600">{{ form.errors.description }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
|
|
<h2 class="mb-5 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
|
|
Détails du Contrat
|
|
</h2>
|
|
|
|
<div class="grid gap-6 sm:grid-cols-2">
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-gray-700">Statut *</label>
|
|
<select v-model="form.statut" required
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
|
|
<option v-for="(lbl, val) in statuts" :key="val" :value="val">{{ lbl }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-gray-700">Montant</label>
|
|
<div class="relative">
|
|
<input v-model="form.montant" type="number" step="0.01" min="0" placeholder="0.00"
|
|
class="w-full rounded-lg border border-gray-300 pl-3 pr-8 py-2 text-sm focus:border-blue-500 focus:outline-none" />
|
|
<span class="absolute right-3 top-2 text-gray-500 text-sm">€</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-gray-700">Date de début</label>
|
|
<input v-model="form.date_debut" type="date"
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-gray-700">Date d'échéance *</label>
|
|
<input v-model="form.date_echeance" type="date" required
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-gray-700" title="Nombre de jours avant l'échéance pour recevoir une alerte relative à la dénonciation.">
|
|
Préavis (en jours)
|
|
</label>
|
|
<input v-model="form.preavis_jours" type="number" min="0"
|
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" />
|
|
<p class="text-xs text-gray-500 mt-1">Ex: 90 jours pour un préavis de 3 mois.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center justify-end gap-3">
|
|
<Link :href="route('contrats.index')"
|
|
class="rounded-lg px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition-colors">
|
|
Annuler
|
|
</Link>
|
|
<button type="submit" :disabled="form.processing"
|
|
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors disabled:opacity-50">
|
|
{{ form.processing ? 'Création...' : 'Créer le contrat' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</AuthenticatedLayout>
|
|
</template>
|