feat(catalog): add description column with hover popover + skeleton edit guard

- Add description column to pieces and component catalog tables
- Show full text in a popover on hover for truncated descriptions
- Block skeleton editing when machines are linked (warning alert)

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

app/components/sites/SiteEditModal.vue

@@ -116,7 +116,7 @@
 </template>
 
 <script setup>
-import { computed, toRefs } from 'vue'
+import { computed } from 'vue'
 import { isImageDocument } from '~/utils/documentPreview'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
@@ -173,8 +173,6 @@ const emit = defineEmits([
   'update:selectedFiles'
 ])
 
-const form = toRefs(props.form)
-
 const selectedFilesModel = computed({
   get: () => props.selectedFiles,
   set: value => emit('update:selectedFiles', value)

app/pages/component-catalog.vue

@@ -116,6 +116,7 @@
                   <th class="w-24">Aperçu</th>
                   <th>Nom</th>
                   <th>Référence</th>
+                  <th>Description</th>
                   <th>Type de composant</th>
                   <th>Actions</th>
                 </tr>
@@ -130,6 +131,15 @@
                   </td>
                   <td>{{ component.name || 'Composant sans nom' }}</td>
                   <td>{{ component.reference || '—' }}</td>
+                  <td class="max-w-xs">
+                    <div v-if="component.description" class="group relative">
+                      <span class="block cursor-help truncate">{{ component.description }}</span>
+                      <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-lg group-hover:pointer-events-auto group-hover:visible">
+                        <p class="break-words whitespace-pre-wrap">{{ component.description }}</p>
+                      </div>
+                    </div>
+                    <span v-else>—</span>
+                  </td>
                   <td>
                     <NuxtLink
                       v-if="component.typeComposant?.id"

app/pages/component/[id]/edit.vue

@@ -79,6 +79,19 @@
           </div>
         </div>
 
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Description</span>
+          </label>
+          <textarea
+            v-model="editionForm.description"
+            class="textarea textarea-bordered textarea-sm md:textarea-md"
+            :disabled="!canEdit || saving"
+            placeholder="Description du composant (optionnel)"
+            rows="3"
+          />
+        </div>
+
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div class="form-control">
             <label class="label">
@@ -625,6 +638,7 @@ const historyDiffEntries = (entry: ComponentHistoryEntry) =>
 const selectedTypeId = ref<string>('')
 const editionForm = reactive({
   name: '' as string,
+  description: '' as string,
   reference: '' as string,
   constructeurIds: [] as string[],
   prix: '' as string,
@@ -805,6 +819,7 @@ watch(
     selectedTypeId.value = resolvedTypeId
 
     editionForm.name = currentComponent.name || ''
+    editionForm.description = currentComponent.description || ''
     editionForm.reference = currentComponent.reference || ''
     editionForm.constructeurIds = uniqueConstructeurIds(
       currentComponent,
@@ -845,6 +860,7 @@ const submitEdition = async () => {
 
   const payload: Record<string, any> = {
     name: editionForm.name.trim(),
+    description: editionForm.description.trim() || null,
   }
 
   const reference = editionForm.reference.trim()

app/pages/component/create.vue

@@ -52,6 +52,19 @@
           </div>
         </div>
 
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Description</span>
+          </label>
+          <textarea
+            v-model="creationForm.description"
+            class="textarea textarea-bordered textarea-sm md:textarea-md"
+            :disabled="!canEdit || submitting || !selectedType"
+            placeholder="Description du composant (optionnel)"
+            rows="3"
+          />
+        </div>
+
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div class="form-control">
             <label class="label">
@@ -408,6 +421,7 @@ const selectedTypeId = ref<string>(initialTypeId.value)
 const submitting = ref(false)
 const creationForm = reactive({
   name: '' as string,
+  description: '' as string,
   reference: '' as string,
   constructeurIds: [] as string[],
   prix: '' as string,
@@ -889,6 +903,7 @@ const resolveSubcomponentLabel = (node: Record<string, any>) => {
 
 const clearCreationForm = () => {
   creationForm.name = ''
+  creationForm.description = ''
   creationForm.reference = ''
   creationForm.constructeurIds = []
   creationForm.prix = ''
@@ -906,6 +921,11 @@ const submitCreation = async () => {
     typeComposantId: selectedType.value.id,
   }
 
+  const description = creationForm.description.trim()
+  if (description) {
+    payload.description = description
+  }
+
   const reference = creationForm.reference.trim()
   if (reference) {
     payload.reference = reference

app/pages/pieces-catalog.vue

@@ -115,6 +115,7 @@
                   <th class="w-24">Aperçu</th>
                   <th>Nom</th>
                   <th>Référence</th>
+                  <th>Description</th>
                   <th>Fournisseurs</th>
                   <th>Type de pièce</th>
                   <th>Actions</th>
@@ -130,6 +131,15 @@
                   </td>
                   <td>{{ row.piece.name || 'Pièce sans nom' }}</td>
                   <td>{{ row.piece.reference || '—' }}</td>
+                  <td class="max-w-xs">
+                    <div v-if="row.piece.description" class="group relative">
+                      <span class="block cursor-help truncate">{{ row.piece.description }}</span>
+                      <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-lg group-hover:pointer-events-auto group-hover:visible">
+                        <p class="break-words whitespace-pre-wrap">{{ row.piece.description }}</p>
+                      </div>
+                    </div>
+                    <span v-else>—</span>
+                  </td>
                   <td>
                     <div
                       v-if="row.suppliers.visible.length"

app/pages/pieces/[id]/edit.vue

@@ -79,6 +79,19 @@
           </div>
         </div>
 
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Description</span>
+          </label>
+          <textarea
+            v-model="editionForm.description"
+            class="textarea textarea-bordered textarea-sm md:textarea-md"
+            :disabled="!canEdit || saving"
+            placeholder="Description de la pièce (optionnel)"
+            rows="3"
+          />
+        </div>
+
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div class="form-control">
             <label class="label">
@@ -568,6 +581,7 @@ const selectedTypeId = ref<string>('')
 const pieceTypeDetails = ref<any | null>(null)
 const editionForm = reactive({
   name: '' as string,
+  description: '' as string,
   reference: '' as string,
   constructeurIds: [] as string[],
   prix: '' as string,
@@ -823,6 +837,7 @@ watch(
     selectedTypeId.value = resolvedTypeId
 
     editionForm.name = currentPiece.name || ''
+    editionForm.description = currentPiece.description || ''
     editionForm.reference = currentPiece.reference || ''
     editionForm.constructeurIds = uniqueConstructeurIds(
       currentPiece,
@@ -895,6 +910,7 @@ const submitEdition = async () => {
 
   const payload: Record<string, any> = {
     name: editionForm.name.trim(),
+    description: editionForm.description.trim() || null,
     constructeurIds,
   }
 

app/pages/pieces/create.vue

@@ -52,6 +52,19 @@
           </div>
         </div>
 
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Description</span>
+          </label>
+          <textarea
+            v-model="creationForm.description"
+            class="textarea textarea-bordered textarea-sm md:textarea-md"
+            :disabled="!canEdit || submitting || !selectedType"
+            placeholder="Description de la pièce (optionnel)"
+            rows="3"
+          />
+        </div>
+
         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div class="form-control">
             <label class="label">
@@ -336,6 +349,7 @@ const selectedTypeId = ref<string>(initialTypeId.value)
 const submitting = ref(false)
 const creationForm = reactive({
   name: '' as string,
+  description: '' as string,
   reference: '' as string,
   constructeurIds: [] as string[],
   prix: '' as string,
@@ -490,6 +504,7 @@ const canSubmit = computed(() =>
 
 const clearCreationForm = () => {
   creationForm.name = ''
+  creationForm.description = ''
   creationForm.reference = ''
   creationForm.constructeurIds = []
   creationForm.prix = ''
@@ -513,6 +528,11 @@ const submitCreation = async () => {
     typePieceId: selectedType.value.id,
   }
 
+  const description = creationForm.description.trim()
+  if (description) {
+    payload.description = description
+  }
+
   const reference = creationForm.reference.trim()
   if (reference) {
     payload.reference = reference

app/pages/type/edit/[id].vue

@@ -8,6 +8,26 @@
       </p>
     </div>
 
+    <!-- Locked: machines linked -->
+    <div v-else-if="type && hasMachines" class="my-8">
+      <div class="card bg-base-100 shadow-xl">
+        <div class="card-body">
+          <div class="flex items-center justify-between mb-6">
+            <h2 class="card-title text-2xl">
+              {{ type.name }}
+            </h2>
+            <NuxtLink to="/machine-skeleton" class="btn btn-outline">
+              Retour
+            </NuxtLink>
+          </div>
+          <div class="alert alert-warning">
+            <IconLucideTriangleAlert class="w-5 h-5" />
+            <span>Ce squelette ne peut pas être modifié car des machines y sont rattachées.</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- Edit Form -->
     <div v-else-if="type" class="my-8">
       <div class="card bg-base-100 shadow-xl">
@@ -48,11 +68,12 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
 import { useToast } from '~/composables/useToast'
 import { extractRelationId } from '~/shared/apiRelations'
+import IconLucideTriangleAlert from '~icons/lucide/triangle-alert'
 
 const { canEdit } = usePermissions()
 const route = useRoute()
@@ -63,6 +84,10 @@ const { showSuccess, showError } = useToast()
 const type = ref(null)
 const loading = ref(true)
 const saving = ref(false)
+const hasMachines = computed(() => {
+  const machines = type.value?.machines
+  return Array.isArray(machines) && machines.length > 0
+})
 
 // Données éditées du type
 const editedType = ref({