refactor(frontend) : extract ProductDocumentsInline to reduce PieceItem under 500 lines

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

app/components/PieceItem.vue

@@ -165,65 +165,10 @@
               <span class="font-semibold">{{ info.label }} :</span>
               <span class="ml-1">{{ info.value }}</span>
             </p>
-            <div
+            <ProductDocumentsInline
-              v-if="productDocuments.length"
+              :documents="productDocuments"
-              class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
+              @preview="openPreview"
-            >
+            />
-              <h5 class="font-medium text-base-content">Documents du produit</h5>
-              <div
-                v-for="document in productDocuments"
-                :key="document.id || document.path || document.name"
-                class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
-              >
-                <div class="flex items-center gap-3">
-                  <div
-                    class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
-                  >
-                    <img
-                      v-if="isImageDocument(document) && (document.fileUrl || document.path)"
-                      :src="document.fileUrl || document.path"
-                      class="h-full w-full object-cover"
-                      :alt="`Aperçu de ${document.name}`"
-                    >
-                    <iframe
-                      v-else-if="shouldInlinePdf(document)"
-                      :src="documentPreviewSrc(document)"
-                      class="h-full w-full border-0 bg-white"
-                      title="Aperçu PDF"
-                    />
-                    <component
-                      v-else
-                      :is="documentIcon(document).component"
-                      class="h-5 w-5"
-                      :class="documentIcon(document).colorClass"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div>
-                    <div class="font-medium text-base-content">
-                      {{ document.name }}
-                    </div>
-                    <div class="text-xs text-base-content/70">
-                      {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
-                    </div>
-                  </div>
-                </div>
-                <div class="flex items-center gap-2 text-xs">
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-xs"
-                    :disabled="!canPreviewDocument(document)"
-                    :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
-                    @click="openPreview(document)"
-                  >
-                    Consulter
-                  </button>
-                  <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
-                    Télécharger
-                  </button>
-                </div>
-              </div>
-            </div>
           </div>
           <span v-else class="font-medium">
             Non défini
@@ -287,7 +232,6 @@ import ProductSelect from '~/components/ProductSelect.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
-import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
 import { useConstructeurs } from '~/composables/useConstructeurs'
 import { useProducts } from '~/composables/useProducts'
 import {
@@ -295,13 +239,6 @@ import {
   resolveConstructeurs,
   uniqueConstructeurIds,
 } from '~/shared/constructeurUtils'
-import {
-  formatSize,
-  shouldInlinePdf,
-  documentPreviewSrc,
-  documentIcon,
-  downloadDocument,
-} from '~/shared/utils/documentDisplayUtils'
 import {
   resolveFieldId,
   resolveFieldReadOnly,

app/components/ProductDocumentsInline.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    v-if="documents.length"
+    class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
+  >
+    <h5 class="font-medium text-base-content">Documents du produit</h5>
+    <div
+      v-for="document in documents"
+      :key="document.id || document.path || document.name"
+      class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
+    >
+      <div class="flex items-center gap-3">
+        <div
+          class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
+        >
+          <img
+            v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+            :src="document.fileUrl || document.path"
+            class="h-full w-full object-cover"
+            :alt="`Aperçu de ${document.name}`"
+          >
+          <iframe
+            v-else-if="shouldInlinePdf(document)"
+            :src="documentPreviewSrc(document)"
+            class="h-full w-full border-0 bg-white"
+            title="Aperçu PDF"
+          />
+          <component
+            v-else
+            :is="documentIcon(document).component"
+            class="h-5 w-5"
+            :class="documentIcon(document).colorClass"
+            aria-hidden="true"
+          />
+        </div>
+        <div>
+          <div class="font-medium text-base-content">
+            {{ document.name }}
+          </div>
+          <div class="text-xs text-base-content/70">
+            {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2 text-xs">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs"
+          :disabled="!canPreviewDocument(document)"
+          :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
+          @click="$emit('preview', document)"
+        >
+          Consulter
+        </button>
+        <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+          Télécharger
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import {
+  formatSize,
+  shouldInlinePdf,
+  documentPreviewSrc,
+  documentIcon,
+  downloadDocument,
+} from '~/shared/utils/documentDisplayUtils'
+
+defineProps({
+  documents: { type: Array, required: true },
+})
+
+defineEmits(['preview'])
+</script>