From 03a5d05a2c6abc449560d7aa9c2b130aa29d18c2 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Wed, 13 May 2026 10:23:30 +0200
Subject: [PATCH] feat(machine) : champs perso machine en badges plus gros dans
 entete composants et pieces

Affiche les champs perso machine entre Row 1 (titre/prix) et Row 2 (fournisseur/catalogue) de l'entete ComponentItem et PieceItem.
Badges plus gros (text-sm), visibles en lecture ET en edition. Edition complete reste dans la section depliee.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/app/components/ComponentItem.vue | 29 +++++++++++++----------
 frontend/app/components/PieceItem.vue     | 29 +++++++++++++----------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/frontend/app/components/ComponentItem.vue b/frontend/app/components/ComponentItem.vue
index 16cfc0f..9ecd413 100644
--- a/frontend/app/components/ComponentItem.vue
+++ b/frontend/app/components/ComponentItem.vue
@@ -69,9 +69,25 @@
           <span v-if="component.prix" class="text-[0.65rem] font-bold text-primary bg-primary/20 px-1.5 py-0.5 rounded border border-primary/30">{{ component.prix }}€</span>
         </div>
 
+        <!-- Row 1.5: Machine context fields (badges plus gros, visibles en lecture ET en edition) -->
+        <div
+          v-if="visibleContextFieldTags.length"
+          class="flex flex-wrap items-center gap-2"
+        >
+          <span
+            v-for="field in visibleContextFieldTags"
+            :key="field.name"
+            class="inline-flex items-baseline gap-1.5 px-2.5 py-1 rounded-md"
+            :class="contextFieldBadgeClass(field)"
+          >
+            <span class="text-[0.65rem] font-semibold uppercase tracking-wide opacity-70">{{ field.name }}</span>
+            <span class="text-sm font-bold">{{ field.value }}</span>
+          </span>
+        </div>
+
         <!-- Row 2: Metadata tags -->
         <div
-          v-if="componentConstructeursDisplay.length || displayProductName || (!isEditMode && visibleContextFieldTags.length)"
+          v-if="componentConstructeursDisplay.length || displayProductName"
           class="flex flex-wrap items-center gap-1.5"
         >
           <span
@@ -85,17 +101,6 @@
           <span v-if="displayProductName" class="text-[0.65rem] font-semibold text-info bg-info/20 px-1.5 py-0.5 rounded border border-info/30">
             {{ displayProductName }}
           </span>
-          <!-- Context field tags (consultation only) -->
-          <template v-if="!isEditMode">
-            <span
-              v-for="field in visibleContextFieldTags"
-              :key="field.name"
-              class="text-[0.65rem] font-semibold px-1.5 py-0.5 rounded"
-              :class="contextFieldBadgeClass(field)"
-            >
-              {{ field.name }} : {{ field.value }}
-            </span>
-          </template>
         </div>
       </div>
 
diff --git a/frontend/app/components/PieceItem.vue b/frontend/app/components/PieceItem.vue
index 38b865b..fae9cdd 100644
--- a/frontend/app/components/PieceItem.vue
+++ b/frontend/app/components/PieceItem.vue
@@ -71,9 +71,25 @@
           <span v-if="pieceData.prix" class="text-[0.65rem] font-bold text-primary bg-primary/20 px-1.5 py-0.5 rounded border border-primary/30">{{ pieceData.prix }}€</span>
         </div>
 
+        <!-- Row 1.5: Machine context fields (badges plus gros, visibles en lecture ET en edition) -->
+        <div
+          v-if="visibleContextFieldTags.length"
+          class="flex flex-wrap items-center gap-2"
+        >
+          <span
+            v-for="field in visibleContextFieldTags"
+            :key="field.name"
+            class="inline-flex items-baseline gap-1.5 px-2.5 py-1 rounded-md"
+            :class="contextFieldBadgeClass(field)"
+          >
+            <span class="text-[0.65rem] font-semibold uppercase tracking-wide opacity-70">{{ field.name }}</span>
+            <span class="text-sm font-bold">{{ field.value }}</span>
+          </span>
+        </div>
+
         <!-- Row 2: Metadata tags -->
         <div
-          v-if="piece.parentComponentName || pieceConstructeursDisplay.length || displayProductName || (!isEditMode && visibleContextFieldTags.length)"
+          v-if="piece.parentComponentName || pieceConstructeursDisplay.length || displayProductName"
           class="flex flex-wrap items-center gap-1.5"
         >
           <span v-if="piece.parentComponentName" class="text-[0.65rem] text-base-content/40 bg-base-300/20 px-1.5 py-0.5 rounded">
@@ -90,17 +106,6 @@
           <span v-if="displayProductName" class="text-[0.65rem] font-semibold text-info bg-info/20 px-1.5 py-0.5 rounded border border-info/30">
             {{ displayProductName }}
           </span>
-          <!-- Context field tags (consultation only) -->
-          <template v-if="!isEditMode">
-            <span
-              v-for="field in visibleContextFieldTags"
-              :key="field.name"
-              class="text-[0.65rem] font-semibold px-1.5 py-0.5 rounded"
-              :class="contextFieldBadgeClass(field)"
-            >
-              {{ field.name }} : {{ field.value }}
-            </span>
-          </template>
         </div>
       </div>