refactor: extract site management flow

app/components/sites/SiteCreateModal.vue

@@ -0,0 +1,118 @@
+<template>
+  <div v-if="visible" class="modal modal-open">
+    <div class="modal-box max-w-md">
+      <h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
+      <form @submit.prevent="emit('submit')" class="space-y-4">
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Nom du site</span>
+          </label>
+          <input
+            v-model="form.name"
+            type="text"
+            placeholder="Ex: Usine principale"
+            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="form.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="form.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="form.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="form.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="form.contactCity"
+                type="text"
+                placeholder="Ville"
+                class="input input-bordered"
+                required
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-action">
+          <button type="button" class="btn" @click="emit('close')">
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary">
+            Créer le site
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs } from 'vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  site: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const form = toRefs(props.site)
+</script>