From 7e67b124f3258b08c9428cefd0c6e61808992990 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Mon, 9 Mar 2026 15:09:14 +0100
Subject: [PATCH] feat(machine) : allow site editing on machine detail page and
 align card buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add site select field in MachineInfoCard (edit mode)
- Include siteId in machine PATCH payload
- Align action buttons (Modifier/Supprimer/Détails) consistently at card bottom
- Use mt-auto + flex-col to push buttons to bottom across all machine cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/components/machine/MachineInfoCard.vue | 27 ++++++++++++++++++++++
 app/composables/useMachineDetailData.ts    |  9 +++++++-
 app/composables/useMachineDetailUpdates.ts |  3 +++
 app/pages/index.vue                        | 20 ++++++++--------
 app/pages/machine/[id].vue                 |  4 ++++
 app/pages/machines/index.vue               | 12 +++++-----
 6 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/app/components/machine/MachineInfoCard.vue b/app/components/machine/MachineInfoCard.vue
index e364679..3b4f8f7 100644
--- a/app/components/machine/MachineInfoCard.vue
+++ b/app/components/machine/MachineInfoCard.vue
@@ -20,6 +20,29 @@
             {{ machineName }}
           </div>
         </div>
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Site</span>
+          </label>
+          <select
+            v-if="isEditMode"
+            :value="machineSiteId"
+            class="select select-bordered"
+            @change="$emit('update:machine-site-id', ($event.target as HTMLSelectElement).value); $emit('blur-field')"
+          >
+            <option value="">Sélectionner un site</option>
+            <option
+              v-for="site in sites"
+              :key="site.id"
+              :value="site.id"
+            >
+              {{ site.name }}
+            </option>
+          </select>
+          <div v-else class="input input-bordered bg-base-200">
+            {{ machineSiteName || 'Non défini' }}
+          </div>
+        </div>
         <div v-if="isEditMode || machineReference" class="form-control">
           <label class="label">
             <span class="label-text">Référence</span>
@@ -184,6 +207,9 @@ const props = defineProps<{
   isEditMode: boolean
   machineName: string
   machineReference: string
+  machineSiteId: string
+  machineSiteName: string
+  sites: any[]
   machineConstructeurIds: string[]
   machineConstructeursDisplay: any[]
   hasMachineConstructeur: boolean
@@ -196,6 +222,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   'update:machine-name': [value: string]
   'update:machine-reference': [value: string]
+  'update:machine-site-id': [value: string]
   'update:constructeur-ids': [ids: unknown]
   'blur-field': []
   'set-custom-field-value': [field: any, value: unknown]
diff --git a/app/composables/useMachineDetailData.ts b/app/composables/useMachineDetailData.ts
index dc1ae6f..13e102a 100644
--- a/app/composables/useMachineDetailData.ts
+++ b/app/composables/useMachineDetailData.ts
@@ -15,6 +15,7 @@ import { useCustomFields } from '~/composables/useCustomFields'
 import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useSites } from '~/composables/useSites'
 import { useMachinePrint } from '~/composables/useMachinePrint'
 import {
   resolveConstructeurs,
@@ -44,6 +45,7 @@ export function useMachineDetailData(machineId: string) {
   const { get } = useApi()
   const toast = useToast()
   const { constructeurs, loadConstructeurs } = useConstructeurs()
+  const { sites, loadSites } = useSites()
 
   const {
     printModalOpen,
@@ -64,6 +66,7 @@ export function useMachineDetailData(machineId: string) {
   // Machine fields
   const machineName = ref('')
   const machineReference = ref('')
+  const machineSiteId = ref('')
   const machineConstructeurIds = ref<string[]>([])
 
   const machineConstructeurId = computed({
@@ -229,6 +232,7 @@ export function useMachineDetailData(machineId: string) {
         machine.value.constructeurs,
         machine.value.constructeur,
       )
+      machineSiteId.value = (machine.value.siteId as string) || (machine.value.site as AnyRecord)?.id as string || ''
     }
   }
 
@@ -255,6 +259,7 @@ export function useMachineDetailData(machineId: string) {
     machine,
     machineName,
     machineReference,
+    machineSiteId,
     machineConstructeurIds,
     machineDocumentsLoaded,
     machineComponentLinks,
@@ -401,6 +406,7 @@ export function useMachineDetailData(machineId: string) {
       loadConstructeurs(),
       loadComponentTypes(),
       loadPieceTypes(),
+      loadSites(),
     ])
   }
 
@@ -419,8 +425,9 @@ export function useMachineDetailData(machineId: string) {
     machineComponentLinks, machinePieceLinks, machineProductLinks,
 
     // Machine fields
-    machineName, machineReference, machineConstructeurIds, machineConstructeurId,
+    machineName, machineReference, machineSiteId, machineConstructeurIds, machineConstructeurId,
     machineConstructeursDisplay, machineConstructeurContact, hasMachineConstructeur,
+    sites,
 
     // UI state
     machineDocumentFiles, machineDocumentsUploading, machineDocumentsLoaded,
diff --git a/app/composables/useMachineDetailUpdates.ts b/app/composables/useMachineDetailUpdates.ts
index 1c8a362..3e0d657 100644
--- a/app/composables/useMachineDetailUpdates.ts
+++ b/app/composables/useMachineDetailUpdates.ts
@@ -13,6 +13,7 @@ export interface UseMachineDetailUpdatesDeps {
   machine: Ref<AnyRecord | null>
   machineName: Ref<string>
   machineReference: Ref<string>
+  machineSiteId: Ref<string>
   machineConstructeurIds: Ref<string[]>
   machineDocumentsLoaded: Ref<boolean>
   machineComponentLinks: Ref<AnyRecord[]>
@@ -40,6 +41,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
     machine,
     machineName,
     machineReference,
+    machineSiteId,
     machineConstructeurIds,
     machineComponentLinks,
     machinePieceLinks,
@@ -63,6 +65,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
       const result: any = await updateMachineApi(machine.value.id as string, {
         name: machineName.value,
         reference: machineReference.value,
+        siteId: machineSiteId.value || undefined,
         constructeurIds: cIds,
       } as any)
       if (result.success) {
diff --git a/app/pages/index.vue b/app/pages/index.vue
index b2def40..0701a13 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -26,8 +26,8 @@
       <!-- Filters -->
       <div class="card bg-base-100 shadow-sm mb-8">
         <div class="card-body py-4">
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="form-control">
+          <div class="flex flex-col md:flex-row md:items-end gap-4">
+            <div class="form-control flex-1">
               <label class="label">
                 <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Rechercher</span>
               </label>
@@ -41,11 +41,11 @@
                 >
               </div>
             </div>
-            <div class="form-control">
+            <div class="form-control md:w-64">
               <label class="label">
                 <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Site</span>
               </label>
-              <select v-model="selectedSiteFilter" class="select select-bordered">
+              <select v-model="selectedSiteFilter" class="select select-bordered w-full">
                 <option value="">
                   Tous les sites
                 </option>
@@ -163,7 +163,7 @@
                 <div
                   v-for="machine in site.machines"
                   :key="machine.id"
-                  class="group rounded-xl border border-base-300/40 bg-base-200/30 hover:bg-base-200/60 hover:border-primary/20 transition-all cursor-pointer p-4"
+                  class="group flex flex-col rounded-xl border border-base-300/40 bg-base-200/30 hover:bg-base-200/60 hover:border-primary/20 transition-all cursor-pointer p-4"
                   @click="viewMachineDetails(machine)"
                 >
                   <div class="flex items-center justify-between mb-2">
@@ -172,29 +172,29 @@
                     </h4>
                   </div>
 
-                  <div v-if="machine.reference" class="flex items-center gap-1.5 text-xs text-base-content/40 mb-3">
+                  <div v-if="machine.reference" class="flex items-center gap-1.5 text-xs text-base-content/40">
                     <IconLucideTag class="w-3 h-3" aria-hidden="true" />
                     <span>{{ machine.reference }}</span>
                   </div>
 
-                  <div class="flex items-center gap-1.5 justify-end">
+                  <div class="mt-auto pt-3 flex items-center justify-end gap-2">
                     <button
                       v-if="canEdit"
-                      class="btn btn-xs btn-ghost text-base-content/40 hover:text-base-content opacity-0 group-hover:opacity-100 transition-opacity"
+                      class="btn btn-ghost btn-xs"
                       @click.stop="editMachine(machine)"
                     >
                       Modifier
                     </button>
                     <button
                       v-if="canEdit"
-                      class="btn btn-xs btn-ghost text-error/50 hover:text-error opacity-0 group-hover:opacity-100 transition-opacity"
+                      class="btn btn-ghost btn-xs text-error"
                       @click.stop="confirmDeleteMachine(machine)"
                     >
                       Supprimer
                     </button>
                     <NuxtLink
                       :to="`/machine/${machine.id}`"
-                      class="btn btn-xs btn-primary btn-outline opacity-0 group-hover:opacity-100 transition-opacity"
+                      class="btn btn-primary btn-xs"
                       @click.stop
                     >
                       Détails
diff --git a/app/pages/machine/[id].vue b/app/pages/machine/[id].vue
index a813edf..521e756 100644
--- a/app/pages/machine/[id].vue
+++ b/app/pages/machine/[id].vue
@@ -53,6 +53,9 @@
         :is-edit-mode="d.isEditMode.value"
         :machine-name="d.machineName.value"
         :machine-reference="d.machineReference.value"
+        :machine-site-id="d.machineSiteId.value"
+        :machine-site-name="d.machine.value?.site?.name ?? ''"
+        :sites="d.sites.value"
         :machine-constructeur-ids="d.machineConstructeurIds.value"
         :machine-constructeurs-display="d.machineConstructeursDisplay.value"
         :has-machine-constructeur="d.hasMachineConstructeur.value"
@@ -62,6 +65,7 @@
         :machine-custom-field-defs="d.machine.value?.customFields ?? []"
         @update:machine-name="d.machineName.value = $event"
         @update:machine-reference="d.machineReference.value = $event"
+        @update:machine-site-id="d.machineSiteId.value = $event"
         @update:constructeur-ids="d.handleMachineConstructeurChange"
         @blur-field="d.updateMachineInfo"
         @set-custom-field-value="d.setMachineCustomFieldValue"
diff --git a/app/pages/machines/index.vue b/app/pages/machines/index.vue
index 85cbb3e..1afe900 100644
--- a/app/pages/machines/index.vue
+++ b/app/pages/machines/index.vue
@@ -68,7 +68,7 @@
           class="card bg-base-100 shadow-sm hover:shadow-xl transition-shadow cursor-pointer"
           @click="viewMachineDetails(machine)"
         >
-          <div class="card-body">
+          <div class="card-body flex flex-col">
             <div class="flex items-center justify-between mb-2">
               <h3 class="card-title text-lg">
                 {{ machine.name }}
@@ -87,15 +87,15 @@
               </div>
             </div>
 
-            <div class="card-actions justify-end mt-4">
-              <button class="btn btn-sm btn-outline" @click.stop="editMachine(machine)">
+            <div class="mt-auto pt-3 flex items-center justify-end gap-2">
+              <button v-if="canEdit" class="btn btn-ghost btn-xs" @click.stop="editMachine(machine)">
                 Modifier
               </button>
-              <button v-if="canEdit" class="btn btn-sm btn-error" @click.stop="confirmDeleteMachine(machine)">
+              <button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click.stop="confirmDeleteMachine(machine)">
                 Supprimer
               </button>
-              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-sm btn-primary">
-                Voir détails
+              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-xs">
+                Détails
               </NuxtLink>
             </div>
           </div>