feat: improve site management and type forms

This commit is contained in:
Matthieu
2025-09-17 11:13:57 +02:00
parent dd0ef12b46
commit c63b543c74
4 changed files with 667 additions and 1619 deletions

View File

@@ -112,18 +112,8 @@
<h3 class="card-title text-lg">Champs personnalisés du type</h3> <h3 class="card-title text-lg">Champs personnalisés du type</h3>
<span class="badge badge-primary">{{ formData.customFields.length }}</span> <span class="badge badge-primary">{{ formData.customFields.length }}</span>
</div> </div>
<button
type="button"
@click="addCustomField"
class="btn btn-primary btn-sm"
>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter un champ
</button>
</div> </div>
<div v-if="expandedSections.customFields" class="space-y-4"> <div v-if="expandedSections.customFields" class="space-y-4">
<div <div
v-for="(field, fieldIndex) in formData.customFields" v-for="(field, fieldIndex) in formData.customFields"
@@ -237,6 +227,30 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="expandedSections.customFields" class="flex justify-end">
<button
type="button"
@click="addCustomField"
class="btn btn-primary btn-sm"
>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter un champ
</button>
</div>
<div v-else class="flex justify-end">
<button
type="button"
@click="addCustomField"
class="btn btn-primary btn-sm"
>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter un champ
</button>
</div>
</div> </div>
</div> </div>
@@ -263,18 +277,8 @@
<h3 class="card-title text-lg">Pièces principales</h3> <h3 class="card-title text-lg">Pièces principales</h3>
<span class="badge badge-secondary">{{ formData.machinePieces.length }}</span> <span class="badge badge-secondary">{{ formData.machinePieces.length }}</span>
</div> </div>
<button
type="button"
@click="addMachinePiece"
class="btn btn-primary btn-sm"
>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter une pièce
</button>
</div> </div>
<div v-if="expandedSections.machinePieces" class="space-y-4"> <div v-if="expandedSections.machinePieces" class="space-y-4">
<div <div
v-for="(piece, pieceIndex) in formData.machinePieces" v-for="(piece, pieceIndex) in formData.machinePieces"
@@ -372,21 +376,9 @@
</div> </div>
<!-- Champs personnalisés de la pièce --> <!-- Champs personnalisés de la pièce -->
<div v-if="isPieceExpanded(pieceIndex)" class="mt-4"> <div v-if="isPieceExpanded(pieceIndex)" class="mt-4 space-y-2">
<div class="flex items-center gap-2 mb-2"> <span class="text-sm font-medium">Champs personnalisés de cette pièce :</span>
<span class="text-sm font-medium">Champs personnalisés de cette pièce :</span>
<button
type="button"
@click="addPieceCustomField(pieceIndex)"
class="btn btn-xs btn-outline"
>
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter
</button>
</div>
<div class="space-y-2"> <div class="space-y-2">
<div <div
v-for="(field, fieldIndex) in piece.customFields" v-for="(field, fieldIndex) in piece.customFields"
@@ -472,9 +464,45 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-end">
<button
type="button"
@click="addPieceCustomField(pieceIndex)"
class="btn btn-xs btn-outline"
>
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="expandedSections.machinePieces" class="flex justify-end">
<button
type="button"
@click="addMachinePiece"
class="btn btn-primary btn-sm"
>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter une pièce
</button>
</div>
<div v-else class="flex justify-end">
<button
type="button"
@click="addMachinePiece"
class="btn btn-primary btn-sm"
>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter une pièce
</button>
</div>
</div> </div>
</div> </div>
@@ -501,16 +529,6 @@
<h3 class="card-title text-lg">Composants</h3> <h3 class="card-title text-lg">Composants</h3>
<span class="badge badge-accent">{{ formData.components.length }}</span> <span class="badge badge-accent">{{ formData.components.length }}</span>
</div> </div>
<button
type="button"
@click="addComponent"
class="btn btn-primary btn-sm"
>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter un composant
</button>
</div> </div>
<div v-if="expandedSections.components" class="space-y-4"> <div v-if="expandedSections.components" class="space-y-4">
@@ -610,21 +628,9 @@
</div> </div>
<!-- Champs personnalisés du composant --> <!-- Champs personnalisés du composant -->
<div v-if="isComponentExpanded(componentIndex)" class="mt-4"> <div v-if="isComponentExpanded(componentIndex)" class="mt-4 space-y-2">
<div class="flex items-center gap-2 mb-2"> <span class="text-sm font-medium">Champs personnalisés du composant :</span>
<span class="text-sm font-medium">Champs personnalisés du composant :</span>
<button
type="button"
@click="addComponentCustomField(componentIndex)"
class="btn btn-xs btn-outline"
>
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter
</button>
</div>
<div class="space-y-2"> <div class="space-y-2">
<div <div
v-for="(field, fieldIndex) in component.customFields" v-for="(field, fieldIndex) in component.customFields"
@@ -710,15 +716,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div class="flex justify-end">
<!-- Pièces du composant -->
<div class="mt-4">
<div class="flex items-center gap-2 mb-2">
<span class="text-sm font-medium">Pièces du composant :</span>
<button <button
type="button" type="button"
@click="addComponentPiece(componentIndex)" @click="addComponentCustomField(componentIndex)"
class="btn btn-xs btn-outline" class="btn btn-xs btn-outline"
> >
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -727,7 +728,12 @@
Ajouter Ajouter
</button> </button>
</div> </div>
</div>
<!-- Pièces du composant -->
<div class="mt-4 space-y-2">
<span class="text-sm font-medium">Pièces du composant :</span>
<div class="space-y-2"> <div class="space-y-2">
<div <div
v-for="(piece, pieceIndex) in component.pieces" v-for="(piece, pieceIndex) in component.pieces"
@@ -885,9 +891,45 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-end">
<button
type="button"
@click="addComponentPiece(componentIndex)"
class="btn btn-xs btn-outline"
>
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="expandedSections.components" class="flex justify-end">
<button
type="button"
@click="addComponent"
class="btn btn-primary btn-sm"
>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter un composant
</button>
</div>
<div v-else class="flex justify-end">
<button
type="button"
@click="addComponent"
class="btn btn-primary btn-sm"
>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Ajouter un composant
</button>
</div>
</div> </div>
</div> </div>

File diff suppressed because it is too large Load Diff

View File

@@ -117,7 +117,29 @@
</div> </div>
<div> <div>
<h3 class="text-xl font-bold">{{ site.name }}</h3> <h3 class="text-xl font-bold">{{ site.name }}</h3>
<p v-if="site.description" class="text-sm text-gray-600">{{ site.description }}</p> <div class="text-sm text-gray-600 space-y-1">
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 15c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span class="font-medium">{{ site.contactName }}</span>
</div>
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3l2 3h6l2-3h3a2 2 0 012 2v13a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" />
</svg>
<span>{{ site.contactPhone }}</span>
</div>
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-accent mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.38 0 2.5-1.12 2.5-2.5S13.38 6 12 6s-2.5 1.12-2.5 2.5S10.62 11 12 11zm0 0c-2.21 0-4 1.343-4 3v1.5h8V14c0-1.657-1.79-3-4-3z" />
</svg>
<span>
{{ site.contactAddress }}<br />
{{ site.contactPostalCode }} {{ site.contactCity }}
</span>
</div>
</div>
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@@ -208,7 +230,7 @@
<div v-if="showAddSiteModal" class="modal modal-open"> <div v-if="showAddSiteModal" class="modal modal-open">
<div class="modal-box"> <div class="modal-box">
<h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3> <h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
<form @submit.prevent="handleCreateSite"> <form @submit.prevent="handleCreateSite" class="space-y-4">
<div class="form-control"> <div class="form-control">
<label class="label"> <label class="label">
<span class="label-text">Nom du site</span> <span class="label-text">Nom du site</span>
@@ -221,16 +243,76 @@
required required
/> />
</div> </div>
<div class="form-control"> <div class="form-control">
<label class="label"> <label class="label">
<span class="label-text">Description</span> <span class="label-text">Nom du contact</span>
</label> </label>
<textarea <input
v-model="newSite.description" v-model="newSite.contactName"
placeholder="Description du site..." type="text"
class="textarea textarea-bordered h-20" placeholder="Nom et prénom"
></textarea> class="input input-bordered"
required
/>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text">Téléphone</span>
</label>
<input
v-model="newSite.contactPhone"
type="tel"
placeholder="Ex: 06 00 00 00 00"
class="input input-bordered"
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Adresse</span>
</label>
<input
v-model="newSite.contactAddress"
type="text"
placeholder="Adresse complète"
class="input input-bordered"
required
/>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text">Code postal</span>
</label>
<input
v-model="newSite.contactPostalCode"
type="text"
placeholder="Code postal"
class="input input-bordered"
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Ville</span>
</label>
<input
v-model="newSite.contactCity"
type="text"
placeholder="Ville"
class="input input-bordered"
required
/>
</div>
</div>
<div class="modal-action"> <div class="modal-action">
<button type="button" @click="showAddSiteModal = false" class="btn btn-outline"> <button type="button" @click="showAddSiteModal = false" class="btn btn-outline">
Annuler Annuler
@@ -367,7 +449,11 @@ const collapsedSites = ref([])
const newSite = reactive({ const newSite = reactive({
name: '', name: '',
description: '' contactName: '',
contactPhone: '',
contactAddress: '',
contactPostalCode: '',
contactCity: ''
}) })
const newMachine = reactive({ const newMachine = reactive({
@@ -404,12 +490,22 @@ const filteredSites = computed(() => {
// Filtrer par terme de recherche // Filtrer par terme de recherche
if (searchTerm.value) { if (searchTerm.value) {
filtered = filtered.filter(site => { filtered = filtered.filter(site => {
const siteMatches = site.name.toLowerCase().includes(searchTerm.value.toLowerCase()) || const lowerTerm = searchTerm.value.toLowerCase()
site.description?.toLowerCase().includes(searchTerm.value.toLowerCase()) const siteMatches = [
site.name,
site.contactName,
site.contactPhone,
site.contactAddress,
site.contactPostalCode,
site.contactCity
].some(field => {
if (!field) return false
return field.toLowerCase().includes(lowerTerm)
})
const machineMatches = site.machines?.some(machine => const machineMatches = site.machines?.some(machine =>
machine.name.toLowerCase().includes(searchTerm.value.toLowerCase()) || machine.name.toLowerCase().includes(lowerTerm) ||
machine.reference?.toLowerCase().includes(searchTerm.value.toLowerCase()) machine.reference?.toLowerCase().includes(lowerTerm)
) )
return siteMatches || machineMatches return siteMatches || machineMatches
@@ -437,13 +533,24 @@ const filteredSites = computed(() => {
// Methods // Methods
const handleCreateSite = async () => { const handleCreateSite = async () => {
const result = await createSite(newSite) const result = await createSite({
name: newSite.name,
contactName: newSite.contactName,
contactPhone: newSite.contactPhone,
contactAddress: newSite.contactAddress,
contactPostalCode: newSite.contactPostalCode,
contactCity: newSite.contactCity
})
if (result.success) { if (result.success) {
showAddSiteModal.value = false showAddSiteModal.value = false
// Reset form // Reset form
newSite.name = '' newSite.name = ''
newSite.description = '' newSite.contactName = ''
newSite.contactPhone = ''
newSite.contactAddress = ''
newSite.contactPostalCode = ''
newSite.contactCity = ''
} }
} }
@@ -532,4 +639,4 @@ onMounted(async () => {
loadMachineTypes() loadMachineTypes()
]) ])
}) })
</script> </script>

View File

@@ -56,14 +56,36 @@
<div class="badge badge-primary badge-sm">{{ site.machines?.length || 0 }} machines</div> <div class="badge badge-primary badge-sm">{{ site.machines?.length || 0 }} machines</div>
</div> </div>
<p v-if="site.description" class="text-sm text-gray-600 mb-3">{{ site.description }}</p> <div class="space-y-3 text-sm">
<div class="flex items-center gap-2 text-gray-700">
<div class="space-y-2 text-sm"> <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 15c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span class="font-medium">{{ site.contactName }}</span>
</div>
<div class="flex items-center gap-2 text-gray-600">
<svg class="w-4 h-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3l2 3h6l2-3h3a2 2 0 012 2v13a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" />
</svg>
<span>{{ site.contactPhone }}</span>
</div>
<div class="flex items-start gap-2 text-gray-600">
<svg class="w-4 h-4 text-accent mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.38 0 2.5-1.12 2.5-2.5S13.38 6 12 6s-2.5 1.12-2.5 2.5S10.62 11 12 11zm0 0c-2.21 0-4 1.343-4 3v1.5h8V14c0-1.657-1.79-3-4-3z" />
</svg>
<span>
{{ site.contactAddress }}<br />
{{ site.contactPostalCode }} {{ site.contactCity }}
</span>
</div>
<div class="flex items-center gap-2 text-gray-600">
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</svg> </svg>
<span class="text-gray-600">{{ site.machines?.length || 0 }} machine(s)</span> <span>{{ site.machines?.length || 0 }} machine(s)</span>
</div> </div>
</div> </div>
@@ -84,8 +106,8 @@
<div v-if="showAddSiteModal" class="modal modal-open"> <div v-if="showAddSiteModal" class="modal modal-open">
<div class="modal-box max-w-md"> <div class="modal-box max-w-md">
<h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3> <h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
<form @submit.prevent="handleCreateSite"> <form @submit.prevent="handleCreateSite" class="space-y-4">
<div class="form-control mb-4"> <div class="form-control">
<label class="label"> <label class="label">
<span class="label-text">Nom du site</span> <span class="label-text">Nom du site</span>
</label> </label>
@@ -97,17 +119,74 @@
required required
/> />
</div> </div>
<div class="form-control mb-4"> <div class="grid grid-cols-1 gap-4">
<label class="label"> <div class="form-control">
<span class="label-text">Description (optionnel)</span> <label class="label">
</label> <span class="label-text">Nom du contact</span>
<textarea </label>
v-model="newSite.description" <input
placeholder="Description du site..." v-model="newSite.contactName"
class="textarea textarea-bordered" type="text"
rows="3" placeholder="Nom et prénom"
></textarea> class="input input-bordered"
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Téléphone</span>
</label>
<input
v-model="newSite.contactPhone"
type="tel"
placeholder="Ex: 06 00 00 00 00"
class="input input-bordered"
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Adresse</span>
</label>
<input
v-model="newSite.contactAddress"
type="text"
placeholder="Adresse complète"
class="input input-bordered"
required
/>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text">Code postal</span>
</label>
<input
v-model="newSite.contactPostalCode"
type="text"
placeholder="Code postal"
class="input input-bordered"
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Ville</span>
</label>
<input
v-model="newSite.contactCity"
type="text"
placeholder="Ville"
class="input input-bordered"
required
/>
</div>
</div>
</div> </div>
<div class="modal-action"> <div class="modal-action">
@@ -121,6 +200,108 @@
</form> </form>
</div> </div>
</div> </div>
<!-- Edit Site Modal -->
<div v-if="showEditSiteModal" class="modal modal-open">
<div class="modal-box max-w-md">
<h3 class="font-bold text-lg mb-4">
Modifier le site
<span v-if="siteBeingEdited" class="block text-sm font-normal text-gray-500">{{ siteBeingEdited.name }}</span>
</h3>
<form @submit.prevent="handleUpdateSite" class="space-y-4">
<div class="form-control">
<label class="label">
<span class="label-text">Nom du site</span>
</label>
<input
v-model="editSiteForm.name"
type="text"
placeholder="Nom du site"
class="input input-bordered"
required
/>
</div>
<div class="grid grid-cols-1 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text">Nom du contact</span>
</label>
<input
v-model="editSiteForm.contactName"
type="text"
placeholder="Nom et prénom"
class="input input-bordered"
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Téléphone</span>
</label>
<input
v-model="editSiteForm.contactPhone"
type="tel"
placeholder="Ex: 06 00 00 00 00"
class="input input-bordered"
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Adresse</span>
</label>
<input
v-model="editSiteForm.contactAddress"
type="text"
placeholder="Adresse complète"
class="input input-bordered"
required
/>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
<label class="label">
<span class="label-text">Code postal</span>
</label>
<input
v-model="editSiteForm.contactPostalCode"
type="text"
placeholder="Code postal"
class="input input-bordered"
required
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Ville</span>
</label>
<input
v-model="editSiteForm.contactCity"
type="text"
placeholder="Ville"
class="input input-bordered"
required
/>
</div>
</div>
</div>
<div class="modal-action">
<button type="button" class="btn" @click="closeEditModal">
Annuler
</button>
<button type="submit" class="btn btn-primary">
Enregistrer
</button>
</div>
</form>
</div>
</div>
</main> </main>
</template> </template>
@@ -133,30 +314,82 @@ const { sites, loading, loadSites, createSite, updateSite, deleteSite } = useSit
// Data // Data
const showAddSiteModal = ref(false) const showAddSiteModal = ref(false)
const showEditSiteModal = ref(false)
const siteBeingEdited = ref(null)
const newSite = reactive({ const newSite = reactive({
name: '', name: '',
description: '' contactName: '',
contactPhone: '',
contactAddress: '',
contactPostalCode: '',
contactCity: ''
})
const editSiteForm = reactive({
name: '',
contactName: '',
contactPhone: '',
contactAddress: '',
contactPostalCode: '',
contactCity: ''
}) })
// Methods // Methods
const handleCreateSite = async () => { const handleCreateSite = async () => {
const result = await createSite({ const result = await createSite({
name: newSite.name, name: newSite.name,
description: newSite.description contactName: newSite.contactName,
contactPhone: newSite.contactPhone,
contactAddress: newSite.contactAddress,
contactPostalCode: newSite.contactPostalCode,
contactCity: newSite.contactCity
}) })
if (result.success) { if (result.success) {
// Reset form // Reset form
newSite.name = '' newSite.name = ''
newSite.description = '' newSite.contactName = ''
newSite.contactPhone = ''
newSite.contactAddress = ''
newSite.contactPostalCode = ''
newSite.contactCity = ''
showAddSiteModal.value = false showAddSiteModal.value = false
} }
} }
const editSite = (site) => { const editSite = (site) => {
// TODO: Ouvrir le modal d'édition siteBeingEdited.value = site
console.log('Modifier le site:', site) editSiteForm.name = site.name || ''
editSiteForm.contactName = site.contactName || ''
editSiteForm.contactPhone = site.contactPhone || ''
editSiteForm.contactAddress = site.contactAddress || ''
editSiteForm.contactPostalCode = site.contactPostalCode || ''
editSiteForm.contactCity = site.contactCity || ''
showEditSiteModal.value = true
}
const handleUpdateSite = async () => {
if (!siteBeingEdited.value) return
const result = await updateSite(siteBeingEdited.value.id, {
name: editSiteForm.name,
contactName: editSiteForm.contactName,
contactPhone: editSiteForm.contactPhone,
contactAddress: editSiteForm.contactAddress,
contactPostalCode: editSiteForm.contactPostalCode,
contactCity: editSiteForm.contactCity
})
if (result.success) {
closeEditModal()
}
}
const closeEditModal = () => {
showEditSiteModal.value = false
siteBeingEdited.value = null
} }
const confirmDeleteSite = async (site) => { const confirmDeleteSite = async (site) => {
@@ -188,4 +421,4 @@ onMounted(async () => {
await navigateTo('/sites', { replace: true }) await navigateTo('/sites', { replace: true })
} }
}) })
</script> </script>