feat: enrich piece assignment labels and document previews

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

@@ -311,13 +311,22 @@
               class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
             >
               <div class="flex items-center gap-3 text-sm">
-                <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center">
+                <div
+                  class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+                  :class="documentThumbnailClass(document)"
+                >
                   <img
                     v-if="isImageDocument(document) && document.path"
                     :src="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"
@@ -398,7 +407,7 @@ import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/mo
 import type { ComponentModelStructure } from '~/shared/types/inventory'
 import type { ModelType } from '~/services/modelTypes'
 import { getFileIcon } from '~/utils/fileIcons'
-import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import { canPreviewDocument, isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 
 interface ComponentCatalogType extends ModelType {
   structure: ComponentModelStructure | null
@@ -458,6 +467,40 @@ const formatSize = (size: number | null | undefined) => {
   const formatted = size / Math.pow(1024, index)
   return `${formatted.toFixed(1)} ${units[index]}`
 }
+const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024
+const shouldInlinePdf = (document: any) => {
+  if (!document || !isPdfDocument(document) || !document.path) {
+    return false
+  }
+  if (typeof document.size === 'number' && document.size > PDF_PREVIEW_MAX_BYTES) {
+    return false
+  }
+  return true
+}
+const appendPdfViewerParams = (src: string) => {
+  if (!src || src.startsWith('data:')) {
+    return src || ''
+  }
+  if (src.includes('#')) {
+    return `${src}&toolbar=0&navpanes=0`
+  }
+  return `${src}#toolbar=0&navpanes=0`
+}
+const documentPreviewSrc = (document: any) => {
+  if (!document?.path) {
+    return ''
+  }
+  if (isPdfDocument(document)) {
+    return appendPdfViewerParams(document.path)
+  }
+  return document.path
+}
+const documentThumbnailClass = (document: any) => {
+  if (shouldInlinePdf(document) || (isImageDocument(document) && document?.path)) {
+    return 'h-24 w-20'
+  }
+  return 'h-16 w-16'
+}
 const openPreview = (doc: any) => {
   if (!doc || !canPreviewDocument(doc)) {
     return
@@ -944,8 +987,10 @@ const resolvePieceLabel = (piece: Record<string, any>) => {
     parts.push(piece.typePiece.name)
   } else if (piece.typePieceLabel) {
     parts.push(piece.typePieceLabel)
+  } else if (piece.typePiece?.code) {
+    parts.push(`Famille ${piece.typePiece.code}`)
   } else if (piece.familyCode) {
-    parts.push(piece.familyCode)
+    parts.push(`Famille ${piece.familyCode}`)
   } else if (piece.typePieceId) {
     parts.push(`#${piece.typePieceId}`)
   }

app/pages/component/create.vue

@@ -584,6 +584,7 @@ const sanitizePieceDefinition = (definition: ComponentModelPiece) =>
     typePieceId: definition.typePieceId ?? null,
     typePieceLabel: definition.typePieceLabel ?? null,
     reference: definition.reference ?? null,
+    familyCode: (definition as any).familyCode ?? null,
   })
 
 const serializeStructureAssignments = (
@@ -697,8 +698,10 @@ const resolvePieceLabel = (piece: Record<string, any>) => {
     parts.push(piece.typePiece.name)
   } else if (piece.typePieceLabel) {
     parts.push(piece.typePieceLabel)
+  } else if (piece.typePiece?.code) {
+    parts.push(`Famille ${piece.typePiece.code}`)
   } else if (piece.familyCode) {
-    parts.push(piece.familyCode)
+    parts.push(`Famille ${piece.familyCode}`)
   } else if (piece.typePieceId) {
     parts.push(`#${piece.typePieceId}`)
   }