refactor(frontend) : extract home page modals into components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/components/home/AddMachineModal.vue

@@ -0,0 +1,108 @@
+<template>
+  <div v-if="open" class="modal modal-open">
+    <div class="modal-box max-w-2xl">
+      <h3 class="font-bold text-lg mb-4">
+        Ajouter une nouvelle machine
+      </h3>
+      <form @submit.prevent="handleSubmit">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nom de la machine</span>
+            </label>
+            <input
+              v-model="form.name"
+              type="text"
+              placeholder="Ex: Presse hydraulique #1"
+              class="input input-bordered"
+              :disabled="disabled"
+              required
+            >
+          </div>
+
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Site</span>
+            </label>
+            <select
+              v-model="form.siteId"
+              class="select select-bordered"
+              :disabled="disabled"
+              required
+            >
+              <option value="">
+                Sélectionner un site
+              </option>
+              <option v-for="site in sites" :key="site.id" :value="site.id">
+                {{ site.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-control mb-4">
+          <label class="label">
+            <span class="label-text">Référence</span>
+          </label>
+          <input
+            v-model="form.reference"
+            type="text"
+            placeholder="Ex: PRESS-001"
+            class="input input-bordered"
+            :disabled="disabled"
+          >
+        </div>
+
+        <div class="modal-action">
+          <button
+            type="button"
+            class="btn btn-outline"
+            @click="$emit('close')"
+          >
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
+            Créer la machine
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+
+const props = defineProps<{
+  open: boolean
+  sites: Array<{ id: string, name: string }>
+  disabled: boolean
+  preselectedSiteId?: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+  create: [data: { name: string, siteId: string, reference: string }]
+}>()
+
+const form = reactive({
+  name: '',
+  siteId: '',
+  reference: '',
+})
+
+function handleSubmit() {
+  emit('create', { ...form })
+}
+
+watch(() => props.open, (isOpen) => {
+  if (isOpen && props.preselectedSiteId) {
+    form.siteId = props.preselectedSiteId
+  }
+  if (!isOpen) {
+    form.name = ''
+    form.siteId = ''
+    form.reference = ''
+  }
+})
+</script>

app/components/home/AddSiteModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <div v-if="open" class="modal modal-open">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg mb-4">
+        Ajouter un nouveau site
+      </h3>
+      <form class="space-y-4" @submit.prevent="handleSubmit">
+        <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 de production"
+            class="input input-bordered"
+            :disabled="disabled"
+            required
+          >
+        </div>
+
+        <SiteContactFormFields :form="form" :disabled="disabled" />
+
+        <div class="modal-action">
+          <button
+            type="button"
+            class="btn btn-outline"
+            @click="$emit('close')"
+          >
+            Annuler
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
+            Créer le site
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
+
+const props = defineProps<{
+  open: boolean
+  disabled: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  create: [data: { name: string, contactName: string, contactPhone: string, contactAddress: string, contactPostalCode: string, contactCity: string }]
+}>()
+
+const form = reactive({
+  name: '',
+  contactName: '',
+  contactPhone: '',
+  contactAddress: '',
+  contactPostalCode: '',
+  contactCity: '',
+})
+
+function handleSubmit() {
+  emit('create', { ...form })
+}
+
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) {
+    form.name = ''
+    form.contactName = ''
+    form.contactPhone = ''
+    form.contactAddress = ''
+    form.contactPostalCode = ''
+    form.contactCity = ''
+  }
+})
+</script>

app/pages/index.vue

@@ -258,120 +258,27 @@
     </div>
 
     <!-- Add Site Modal -->
-    <div v-if="showAddSiteModal" class="modal modal-open">
+    <HomeAddSiteModal
-      <div class="modal-box">
+      :open="showAddSiteModal"
-        <h3 class="font-bold text-lg mb-4">
+      :disabled="!canEdit"
-          Ajouter un nouveau site
+      @close="showAddSiteModal = false"
-        </h3>
+      @create="handleCreateSite"
-        <form class="space-y-4" @submit.prevent="handleCreateSite">
+    />
-          <div class="form-control">
-            <label class="label">
-              <span class="label-text">Nom du site</span>
-            </label>
-            <input
-              v-model="newSite.name"
-              type="text"
-              placeholder="Ex: Usine de production"
-              class="input input-bordered"
-              :disabled="!canEdit"
-              required
-            >
-          </div>
-
-          <SiteContactFormFields :form="newSite" :disabled="!canEdit" />
-
-          <div class="modal-action">
-            <button
-              type="button"
-              class="btn btn-outline"
-              @click="showAddSiteModal = false"
-            >
-              Annuler
-            </button>
-            <button type="submit" class="btn btn-primary" :disabled="!canEdit">
-              Créer le site
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
 
     <!-- Add Machine Modal -->
-    <div v-if="showAddMachineModal" class="modal modal-open">
+    <HomeAddMachineModal
-      <div class="modal-box max-w-2xl">
+      :open="showAddMachineModal"
-        <h3 class="font-bold text-lg mb-4">
+      :sites="sites"
-          Ajouter une nouvelle machine
+      :disabled="!canEdit"
-        </h3>
+      :preselected-site-id="preselectedSiteId"
-        <form @submit.prevent="handleCreateMachine">
+      @close="showAddMachineModal = false"
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+      @create="handleCreateMachine"
-            <div class="form-control">
+    />
-              <label class="label">
-                <span class="label-text">Nom de la machine</span>
-              </label>
-              <input
-                v-model="newMachine.name"
-                type="text"
-                placeholder="Ex: Presse hydraulique #1"
-                class="input input-bordered"
-                :disabled="!canEdit"
-                required
-              >
-            </div>
-
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Site</span>
-              </label>
-              <select
-                v-model="newMachine.siteId"
-                class="select select-bordered"
-                :disabled="!canEdit"
-                required
-              >
-                <option value="">
-                  Sélectionner un site
-                </option>
-                <option v-for="site in sites" :key="site.id" :value="site.id">
-                  {{ site.name }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div class="form-control mb-4">
-            <label class="label">
-              <span class="label-text">Référence</span>
-            </label>
-            <input
-              v-model="newMachine.reference"
-              type="text"
-              placeholder="Ex: PRESS-001"
-              class="input input-bordered"
-              :disabled="!canEdit"
-            >
-          </div>
-
-          <div class="modal-action">
-            <button
-              type="button"
-              class="btn btn-outline"
-              @click="showAddMachineModal = false"
-            >
-              Annuler
-            </button>
-            <button type="submit" class="btn btn-primary" :disabled="!canEdit">
-              Créer la machine
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
   </main>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
+import { ref, onMounted, computed } from 'vue'
-import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
 import { useSites } from '~/composables/useSites'
 import { useMachines } from '~/composables/useMachines'
 import { useToast } from '~/composables/useToast'
@@ -396,21 +303,7 @@ const showAddMachineModal = ref(false)
 const searchTerm = ref('')
 const selectedSiteFilter = ref('')
 const collapsedSites = ref([])
-
+const preselectedSiteId = ref('')
-const newSite = reactive({
-  name: '',
-  contactName: '',
-  contactPhone: '',
-  contactAddress: '',
-  contactPostalCode: '',
-  contactCity: ''
-})
-
-const newMachine = reactive({
-  name: '',
-  siteId: '',
-  reference: ''
-})
 
 // Computed
 const machinesBySiteId = computed(() => {
@@ -491,39 +384,17 @@ const filteredSites = computed(() => {
 })
 
 // Methods
-const handleCreateSite = async () => {
+const handleCreateSite = async (data) => {
-  const result = await createSite({
+  const result = await createSite(data)
-    name: newSite.name,
-    contactName: newSite.contactName,
-    contactPhone: newSite.contactPhone,
-    contactAddress: newSite.contactAddress,
-    contactPostalCode: newSite.contactPostalCode,
-    contactCity: newSite.contactCity
-  })
   if (result.success) {
     showAddSiteModal.value = false
-
-    // Reset form
-    newSite.name = ''
-    newSite.contactName = ''
-    newSite.contactPhone = ''
-    newSite.contactAddress = ''
-    newSite.contactPostalCode = ''
-    newSite.contactCity = ''
   }
 }
 
-const handleCreateMachine = async () => {
+const handleCreateMachine = async (data) => {
-  const result = await createMachine({
+  const result = await createMachine(data)
-    name: newMachine.name,
-    siteId: newMachine.siteId,
-    reference: newMachine.reference
-  })
 
   if (result.success) {
-    newMachine.name = ''
-    newMachine.siteId = ''
-    newMachine.reference = ''
     showAddMachineModal.value = false
     await loadMachines()
   }
@@ -573,7 +444,7 @@ const confirmDeleteMachine = async (machine) => {
 }
 
 const addMachineToSite = (site) => {
-  newMachine.siteId = site.id
+  preselectedSiteId.value = site.id
   showAddMachineModal.value = true
 }