83 lines
5.7 KiB
Vue
83 lines
5.7 KiB
Vue
<script setup>
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
|
import { Head, useForm, router } from '@inertiajs/vue3'
|
|
import { ref } from 'vue'
|
|
|
|
defineProps({ communes: Array })
|
|
|
|
const showForm = ref(false)
|
|
const editTarget = ref(null)
|
|
const form = useForm({ nom: '', code_postal: '' })
|
|
const editForm = useForm({ nom: '', code_postal: '' })
|
|
|
|
function openEdit(c) {
|
|
editTarget.value = c
|
|
editForm.nom = c.nom; editForm.code_postal = c.code_postal ?? ''
|
|
}
|
|
|
|
function submitCreate() { form.post(route('communes.store'), { onSuccess: () => { showForm.value = false; form.reset() } }) }
|
|
function submitEdit() { editForm.put(route('communes.update', editTarget.value.id), { onSuccess: () => editTarget.value = null }) }
|
|
|
|
function deleteCommune(c) {
|
|
if (confirm(`Supprimer "${c.nom}" ?`)) router.delete(route('communes.destroy', c.id))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Communes" />
|
|
<AuthenticatedLayout>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-xl font-semibold text-gray-900">Gestion des Communes</h1>
|
|
<button @click="showForm = !showForm" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition-colors">+ Ajouter</button>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="showForm" class="mb-6 rounded-xl bg-white p-5 shadow-sm border border-indigo-200">
|
|
<form @submit.prevent="submitCreate" class="grid gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Nom de la commune *</label>
|
|
<input v-model="form.nom" type="text" required placeholder="ex: Béziers" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1">Code Postal</label>
|
|
<input v-model="form.code_postal" type="text" placeholder="ex: 34500" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none" />
|
|
</div>
|
|
<div class="sm:col-span-2 flex gap-2">
|
|
<button type="submit" :disabled="form.processing" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50 transition-colors">Créer</button>
|
|
<button type="button" @click="showForm = false" class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">Annuler</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
<div v-for="c in communes" :key="c.id" class="rounded-xl bg-white p-5 shadow-sm border border-gray-100 hover:border-indigo-100 transition-all">
|
|
<template v-if="editTarget?.id !== c.id">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900">{{ c.nom }}</h3>
|
|
<p v-if="c.code_postal" class="text-xs text-gray-400 mt-0.5">{{ c.code_postal }}</p>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<button @click="openEdit(c)" class="text-gray-400 hover:text-indigo-600 transition-colors p-1"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg></button>
|
|
<button @click="deleteCommune(c)" class="text-gray-400 hover:text-red-600 transition-colors p-1"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg></button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 flex gap-4 text-xs text-gray-500 pt-3 border-t border-gray-50">
|
|
<span>{{ c.commandes_count }} commandes</span>
|
|
<span>{{ c.contrats_count }} contrats</span>
|
|
</div>
|
|
</template>
|
|
<form v-else @submit.prevent="submitEdit" class="space-y-3">
|
|
<div><label class="block text-xs font-medium text-gray-600 mb-1">Nom *</label><input v-model="editForm.nom" type="text" required class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none" /></div>
|
|
<div><label class="block text-xs font-medium text-gray-600 mb-1">CP</label><input v-model="editForm.code_postal" type="text" class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none" /></div>
|
|
<div class="flex gap-2">
|
|
<button type="submit" :disabled="editForm.processing" class="flex-1 rounded-lg bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50 transition-colors">OK</button>
|
|
<button type="button" @click="editTarget = null" class="rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">X</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
</template>
|