refactor(components): extract shared entity utilities and simplify item components (F1.3, F1.4)

Extract 3 entity composables (useEntityCustomFields, useEntityDocuments, useEntityProductDisplay) and entityCustomFieldLogic utility shared across ComponentItem (1336→585 LOC) and PieceItem (1588→740 LOC). Improve type safety in edit/create pages with explicit casts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 11:19:40 +01:00
parent e1594cab76
commit 519fa3a8f4
15 changed files with 1047 additions and 1883 deletions
--- a/app/composables/useEntityCustomFields.ts
+++ b/app/composables/useEntityCustomFields.ts
@@ -0,0 +1,181 @@
+/**
+ * Reactive custom field management for entity items (ComponentItem, PieceItem).
+ *
+ * Wraps the pure logic from entityCustomFieldLogic.ts with Vue reactivity,
+ * watchers, and API calls for updating/upserting custom field values.
+ */
+
+import { computed, watch } from 'vue'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
+import {
+  buildDefinitionSources,
+  buildCandidateCustomFields,
+  mergeFieldDefinitionsWithValues,
+  dedupeMergedFields,
+  ensureCustomFieldId,
+  resolveFieldId,
+  resolveFieldName,
+  resolveFieldType,
+  resolveFieldReadOnly,
+  resolveCustomFieldId,
+  buildCustomFieldMetadata,
+} from '~/shared/utils/entityCustomFieldLogic'
+
+export interface EntityCustomFieldsDeps {
+  entity: () => any
+  entityType: 'composant' | 'piece'
+}
+
+export function useEntityCustomFields(deps: EntityCustomFieldsDeps) {
+  const { entity, entityType } = deps
+  const {
+    updateCustomFieldValue: updateCustomFieldValueApi,
+    upsertCustomFieldValue,
+  } = useCustomFields()
+  const { showSuccess, showError } = useToast()
+
+  const definitionSources = computed(() =>
+    buildDefinitionSources(entity(), entityType),
+  )
+
+  const displayedCustomFields = computed(() =>
+    dedupeMergedFields(
+      mergeFieldDefinitionsWithValues(
+        definitionSources.value,
+        entity().customFieldValues,
+      ),
+    ),
+  )
+
+  const candidateCustomFields = computed(() =>
+    buildCandidateCustomFields(entity(), definitionSources.value),
+  )
+
+  // Watchers to ensure field IDs are resolved
+  watch(
+    candidateCustomFields,
+    () => {
+      const candidates = candidateCustomFields.value
+      ;(displayedCustomFields.value || []).forEach((field: any) => {
+        if (field) ensureCustomFieldId(field, candidates)
+      })
+    },
+    { immediate: true, deep: true },
+  )
+
+  watch(
+    displayedCustomFields,
+    (fields) => {
+      const candidates = candidateCustomFields.value
+      ;(fields || []).forEach((field: any) => {
+        if (field) ensureCustomFieldId(field, candidates)
+      })
+    },
+    { immediate: true, deep: true },
+  )
+
+  const updateCustomField = async (field: any) => {
+    if (!field || resolveFieldReadOnly(field)) return
+
+    const e = entity()
+    const fieldValueId = resolveFieldId(field)
+
+    // Update existing field value
+    if (fieldValueId) {
+      const result: any = await updateCustomFieldValueApi(fieldValueId, { value: field.value ?? '' })
+      if (result.success) {
+        const existingValue = e.customFieldValues?.find((v: any) => v.id === fieldValueId)
+        if (existingValue?.customField?.id) {
+          field.customFieldId = existingValue.customField.id
+          field.customField = existingValue.customField
+        }
+        showSuccess(`Champ "${resolveFieldName(field)}" mis à jour avec succès`)
+      } else {
+        showError(`Erreur lors de la mise à jour du champ "${resolveFieldName(field)}"`)
+      }
+      return
+    }
+
+    // Create new field value
+    const customFieldId = ensureCustomFieldId(field, candidateCustomFields.value)
+    const fieldName = resolveFieldName(field)
+    if (!e?.id) {
+      showError(`Impossible de créer la valeur pour ce champ`)
+      return
+    }
+    if (!customFieldId && (!fieldName || fieldName === 'Champ')) {
+      showError(`Impossible de créer la valeur pour ce champ`)
+      return
+    }
+
+    const metadata = customFieldId ? undefined : buildCustomFieldMetadata(field)
+    const result: any = await upsertCustomFieldValue(
+      customFieldId,
+      entityType,
+      e.id,
+      field.value ?? '',
+      metadata,
+    )
+
+    if (result.success) {
+      const newValue = result.data
+      if (newValue?.id) {
+        field.customFieldValueId = newValue.id
+        field.value = newValue.value ?? field.value ?? ''
+        if (newValue.customField?.id) {
+          field.customFieldId = newValue.customField.id
+          field.customField = newValue.customField
+        }
+
+        if (Array.isArray(e.customFieldValues)) {
+          const index = e.customFieldValues.findIndex((v: any) => v.id === newValue.id)
+          if (index !== -1) {
+            e.customFieldValues.splice(index, 1, newValue)
+          } else {
+            e.customFieldValues.push(newValue)
+          }
+        } else {
+          e.customFieldValues = [newValue]
+        }
+      }
+      showSuccess(`Champ "${resolveFieldName(field)}" créé avec succès`)
+
+      // Update definitions list
+      const definitions = Array.isArray(e.customFields) ? [...e.customFields] : []
+      const fieldIdentifier = ensureCustomFieldId(field, candidateCustomFields.value)
+      const existingIndex = definitions.findIndex((definition: any) => {
+        const definitionId = resolveCustomFieldId(definition)
+        if (fieldIdentifier && definitionId) return definitionId === fieldIdentifier
+        return definition?.name === resolveFieldName(field)
+      })
+
+      const updatedDefinition = {
+        ...(existingIndex !== -1 ? definitions[existingIndex] : {}),
+        customFieldValueId: field.customFieldValueId,
+        customFieldId: fieldIdentifier,
+        name: resolveFieldName(field),
+        type: resolveFieldType(field),
+        required: field.required ?? false,
+        options: field.options ?? [],
+        value: field.value ?? '',
+        customField: field.customField ?? null,
+      }
+
+      if (existingIndex !== -1) {
+        definitions.splice(existingIndex, 1, updatedDefinition)
+      } else {
+        definitions.push(updatedDefinition)
+      }
+      e.customFields = definitions
+    } else {
+      showError(`Erreur lors de la sauvegarde du champ "${resolveFieldName(field)}"`)
+    }
+  }
+
+  return {
+    displayedCustomFields,
+    candidateCustomFields,
+    updateCustomField,
+  }
+}
--- a/app/composables/useEntityDocuments.ts
+++ b/app/composables/useEntityDocuments.ts
@@ -0,0 +1,122 @@
+/**
+ * Reactive document management for entity items (ComponentItem, PieceItem).
+ *
+ * Handles document CRUD operations, preview modal state, and lazy loading.
+ * Display helpers (formatSize, shouldInlinePdf, etc.) are imported from
+ * shared/utils/documentDisplayUtils.ts.
+ */
+
+import { ref, computed, watch } from 'vue'
+import { useDocuments } from '~/composables/useDocuments'
+import { canPreviewDocument } from '~/utils/documentPreview'
+
+export interface EntityDocumentsDeps {
+  entity: () => any
+  entityType: 'composant' | 'piece'
+}
+
+export function useEntityDocuments(deps: EntityDocumentsDeps) {
+  const { entity, entityType } = deps
+  const { uploadDocuments, deleteDocument } = useDocuments()
+
+  const loadDocumentsFn = entityType === 'composant'
+    ? useDocuments().loadDocumentsByComponent
+    : useDocuments().loadDocumentsByPiece
+
+  const selectedFiles = ref<File[]>([])
+  const uploadingDocuments = ref(false)
+  const loadingDocuments = ref(false)
+  const documentsLoaded = ref(!!(entity().documents && entity().documents.length))
+
+  const documents = computed(() => entity().documents || [])
+
+  // Preview modal state
+  const previewDocument = ref<any>(null)
+  const previewVisible = ref(false)
+
+  const openPreview = (doc: any) => {
+    if (!canPreviewDocument(doc)) return
+    previewDocument.value = doc
+    previewVisible.value = true
+  }
+
+  const closePreview = () => {
+    previewVisible.value = false
+    previewDocument.value = null
+  }
+
+  // Document watchers
+  watch(
+    () => entity().documents,
+    (docs: any) => {
+      documentsLoaded.value = !!(docs && docs.length)
+    },
+  )
+
+  // CRUD operations
+  const refreshDocuments = async () => {
+    const e = entity()
+    if (!e?.id) return
+    loadingDocuments.value = true
+    try {
+      const result: any = await loadDocumentsFn(e.id, { updateStore: false })
+      if (result.success) {
+        e.documents = result.data || []
+        documentsLoaded.value = true
+      }
+    } finally {
+      loadingDocuments.value = false
+    }
+  }
+
+  const ensureDocumentsLoaded = async () => {
+    if (documentsLoaded.value || !entity()?.id) return
+    await refreshDocuments()
+  }
+
+  const handleFilesAdded = async (files: File[]) => {
+    const e = entity()
+    if (!files.length || !e?.id) return
+    uploadingDocuments.value = true
+    try {
+      const contextKey = entityType === 'composant' ? 'composantId' : 'pieceId'
+      const result: any = await uploadDocuments(
+        { files, context: { [contextKey]: e.id } } as any,
+        { updateStore: false } as any,
+      )
+      if (result.success) {
+        const newDocs = result.data || []
+        e.documents = [...newDocs, ...(e.documents || [])]
+        documentsLoaded.value = true
+        selectedFiles.value = []
+      }
+    } finally {
+      uploadingDocuments.value = false
+    }
+  }
+
+  const removeDocument = async (documentId: string) => {
+    if (!documentId) return
+    const result: any = await deleteDocument(documentId, { updateStore: false } as any)
+    if (result.success) {
+      const e = entity()
+      e.documents = (e.documents || []).filter((doc: any) => doc.id !== documentId)
+    }
+  }
+
+  return {
+    documents,
+    selectedFiles,
+    uploadingDocuments,
+    loadingDocuments,
+    documentsLoaded,
+    previewDocument,
+    previewVisible,
+    openPreview,
+    closePreview,
+    refreshDocuments,
+    ensureDocumentsLoaded,
+    handleFilesAdded,
+    removeDocument,
+  }
+}
--- a/app/composables/useEntityProductDisplay.ts
+++ b/app/composables/useEntityProductDisplay.ts
@@ -0,0 +1,103 @@
+/**
+ * Reactive product display for entity items (ComponentItem, PieceItem).
+ *
+ * Resolves product information from entity.product, entity.__productDisplay,
+ * or a selectedProduct ref, and produces display-ready computed properties.
+ */
+
+import { computed, type Ref } from 'vue'
+
+const currencyFormatter = new Intl.NumberFormat('fr-FR', {
+  style: 'currency',
+  currency: 'EUR',
+  currencyDisplay: 'narrowSymbol',
+})
+
+function buildProductDisplay(product: any) {
+  if (!product || typeof product !== 'object') return null
+
+  const suppliers = Array.isArray(product.constructeurs)
+    ? product.constructeurs
+        .map((c: any) => c?.name)
+        .filter((name: any) => typeof name === 'string' && name.trim().length > 0)
+        .join(', ')
+    : product.supplierLabel || null
+
+  const priceValue = product.supplierPrice ?? product.price ?? product.priceLabel ?? product.priceDisplay ?? null
+  let price: string | null = null
+  if (priceValue !== null && priceValue !== undefined) {
+    const parsed = Number(priceValue)
+    if (!Number.isNaN(parsed)) {
+      price = currencyFormatter.format(parsed)
+    } else if (typeof priceValue === 'string' && priceValue.trim().length > 0) {
+      price = priceValue
+    }
+  }
+
+  return {
+    name: product.name || product.label || product.reference || product.productName || null,
+    reference: product.reference || null,
+    category: product.typeProduct?.name || product.category || null,
+    suppliers,
+    price,
+  }
+}
+
+export interface EntityProductDisplayDeps {
+  entity: () => any
+  selectedProduct?: Ref<any>
+}
+
+export function useEntityProductDisplay(deps: EntityProductDisplayDeps) {
+  const { entity, selectedProduct } = deps
+
+  const displayProduct = computed(() => {
+    // Priority: selectedProduct (for PieceItem) → entity.product → entity.__productDisplay
+    if (selectedProduct?.value) {
+      const normalized = buildProductDisplay(selectedProduct.value)
+      if (normalized) return normalized
+    }
+    const explicit = entity().product || null
+    const normalized = buildProductDisplay(explicit)
+    if (normalized) return normalized
+    const fallback = entity().__productDisplay
+    if (fallback) {
+      return {
+        name: fallback.name || null,
+        reference: fallback.reference || null,
+        category: fallback.category || null,
+        suppliers: fallback.suppliers || null,
+        price: fallback.price || null,
+      }
+    }
+    return null
+  })
+
+  const displayProductName = computed(() => {
+    if (displayProduct.value?.name) return displayProduct.value.name
+    const e = entity()
+    return e.product?.name || e.productName || e.productLabel || null
+  })
+
+  const productInfoRows = computed(() => {
+    if (!displayProduct.value) return []
+    const rows: { label: string; value: string }[] = []
+    if (displayProduct.value.reference) rows.push({ label: 'Référence', value: displayProduct.value.reference })
+    if (displayProduct.value.price) rows.push({ label: 'Prix indicatif', value: displayProduct.value.price })
+    if (displayProduct.value.suppliers) rows.push({ label: 'Fournisseur(s)', value: displayProduct.value.suppliers })
+    if (displayProduct.value.category) rows.push({ label: 'Catégorie', value: displayProduct.value.category })
+    return rows
+  })
+
+  const productDocuments = computed(() => {
+    const product = selectedProduct?.value || entity().product || null
+    return Array.isArray(product?.documents) ? product.documents : []
+  })
+
+  return {
+    displayProduct,
+    displayProductName,
+    productInfoRows,
+    productDocuments,
+  }
+}