fix(custom-fields) : context fields display, batch save, hierarchy propagation and UniqueEntity fix

- ComponentItem/PieceItem: DaisyUI divider, emit context-field-update for batch save - CustomFieldDisplay: support editable/emit-blur/title/show-header props - MachineComponentsCard/MachinePiecesCard: propagate custom-field-update events - useMachineDetailCustomFields: pendingContextFieldUpdates + saveAllContextCustomFields - useMachineDetailData: wire context field save into submitEdition - useMachineDetailUpdates: only PATCH changed machine fields - useMachineHierarchy: propagate contextCustomFields/Values from link to nodes - componentStructure: include machineContextOnly in normalizeStructureForEditor - Machine entity: convert empty reference to null, ignoreNull on UniqueEntity Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 13:46:39 +02:00
parent c54e5c33f2
commit 0049638e3c
14 changed files with 217 additions and 91 deletions
--- a/frontend/app/components/ComponentItem.vue
+++ b/frontend/app/components/ComponentItem.vue
@@ -200,21 +200,26 @@
        :fields="displayedCustomFields"
        :is-edit-mode="isEditMode"
        :columns="2"
+        title="Champs personnalisés item"
+        :editable="false"
        @field-blur="updateComponentCustomField"
      />

-        <!-- Context custom fields (machine-specific) -->
-        <div v-if="mergedContextFields.length" class="mt-4">
-          <h4 class="text-xs font-semibold text-base-content/70 mb-2">
-            Champs contextuels
-          </h4>
-          <CustomFieldDisplay
-            :fields="mergedContextFields"
-            :is-edit-mode="isEditMode"
-            :columns="2"
-            @field-blur="updateContextCustomField"
-          />
+      <template v-if="mergedContextFields.length">
+        <div class="divider my-4 text-xs text-base-content/50">
+          Champs personnalisés machine
        </div>
+        <CustomFieldDisplay
+          :fields="mergedContextFields"
+          :is-edit-mode="isEditMode"
+          :columns="2"
+          :show-header="false"
+          :with-top-border="false"
+          :editable="true"
+          :emit-blur="false"
+          @field-input="queueContextCustomFieldUpdate"
+        />
+      </template>

      <!-- Documents -->
      <div class="space-y-2">
@@ -323,7 +328,6 @@ import {
  parseConstructeurLinksFromApi,
 } from '~/shared/constructeurUtils'
 import {
-  formatSize,
  shouldInlinePdf,
  documentPreviewSrc,
  documentIcon,
@@ -332,9 +336,12 @@ import {
 import { useEntityDocuments } from '~/composables/useEntityDocuments'
 import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
 import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
-import { mergeFieldDefinitionsWithValues, dedupeMergedFields } from '~/shared/utils/entityCustomFieldLogic'
-import { useCustomFields } from '~/composables/useCustomFields'
-import { useToast } from '~/composables/useToast'
+import {
+  mergeFieldDefinitionsWithValues,
+  dedupeMergedFields,
+  resolveCustomFieldId,
+  resolveFieldId,
+} from '~/shared/utils/entityCustomFieldLogic'

 const props = defineProps({
  component: { type: Object, required: true },
@@ -374,9 +381,6 @@ const {
  updateCustomField: updateComponentCustomField,
 } = useEntityCustomFields({ entity: () => props.component, entityType: 'composant' })

-const { upsertCustomFieldValue } = useCustomFields()
-const { showSuccess, showError } = useToast()
-
 const mergedContextFields = computed(() => {
  const definitions = props.component?.contextCustomFields ?? []
  const values = props.component?.contextCustomFieldValues ?? []
@@ -386,26 +390,23 @@ const mergedContextFields = computed(() => {
  )
 })

-const updateContextCustomField = async (field) => {
+const queueContextCustomFieldUpdate = (field, value) => {
  const linkId = props.component?.linkId
  if (!linkId || !field) return

-  const customFieldId = field.customFieldId || field.customField?.id
-  if (!customFieldId) return
+  const customFieldId = resolveCustomFieldId(field)
+  const customFieldValueId = resolveFieldId(field)
+  if (!customFieldId && !customFieldValueId) return

-  const result = await upsertCustomFieldValue(
-    customFieldId,
-    'machineComponentLink',
-    linkId,
-    field.value ?? '',
-  )
-
-  if (result.success) {
-    showSuccess(`Champ contextuel "${field.name || field.customField?.name}" mis à jour`)
-  }
-  else {
-    showError(`Erreur lors de la mise à jour du champ contextuel`)
-  }
+  field.value = value
+  emit('custom-field-update', {
+    entityType: 'machineComponentLink',
+    entityId: linkId,
+    fieldId: customFieldId,
+    customFieldValueId,
+    value: value ?? '',
+    fieldName: field.name || field.customField?.name || 'Champ contextuel',
+  })
 }

 // --- Document edit modal ---
--- a/frontend/app/components/PieceItem.vue
+++ b/frontend/app/components/PieceItem.vue
@@ -241,22 +241,27 @@
    <CustomFieldDisplay
      :fields="displayedCustomFields"
      :is-edit-mode="isEditMode"
+      title="Champs personnalisés item"
+      :editable="false"
      @field-input="handleCustomFieldInput"
      @field-blur="handleCustomFieldBlur"
    />

-        <!-- Context custom fields (machine-specific) -->
-        <div v-if="mergedContextFields.length" class="mt-4">
-          <h4 class="text-xs font-semibold text-base-content/70 mb-2">
-            Champs contextuels
-          </h4>
-          <CustomFieldDisplay
-            :fields="mergedContextFields"
-            :is-edit-mode="isEditMode"
-            :columns="2"
-            @field-blur="updateContextCustomField"
-          />
-        </div>
+    <template v-if="mergedContextFields.length">
+      <div class="divider my-4 text-xs text-base-content/50">
+        Champs personnalisés machine
+      </div>
+      <CustomFieldDisplay
+        :fields="mergedContextFields"
+        :is-edit-mode="isEditMode"
+        :columns="2"
+        :show-header="false"
+        :with-top-border="false"
+        :editable="true"
+        :emit-blur="false"
+        @field-input="queueContextCustomFieldUpdate"
+      />
+    </template>

    <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
      <div class="flex items-center justify-between">
@@ -316,13 +321,14 @@ import {
 } from '~/shared/constructeurUtils'
 import {
  resolveFieldId,
-  resolveFieldReadOnly, mergeFieldDefinitionsWithValues, dedupeMergedFields 
+  resolveFieldReadOnly,
+  resolveCustomFieldId,
+  mergeFieldDefinitionsWithValues,
+  dedupeMergedFields,
 } from '~/shared/utils/entityCustomFieldLogic'
 import { useEntityDocuments } from '~/composables/useEntityDocuments'
 import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
 import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
-import { useCustomFields } from '~/composables/useCustomFields'
-import { useToast } from '~/composables/useToast'

 const props = defineProps({
  piece: { type: Object, required: true },
@@ -390,9 +396,6 @@ const {
  updateCustomField,
 } = useEntityCustomFields({ entity: () => props.piece, entityType: 'piece' })

-const { upsertCustomFieldValue } = useCustomFields()
-const { showSuccess, showError } = useToast()
-
 const mergedContextFields = computed(() => {
  const definitions = props.piece?.contextCustomFields ?? []
  const values = props.piece?.contextCustomFieldValues ?? []
@@ -402,26 +405,23 @@ const mergedContextFields = computed(() => {
  )
 })

-const updateContextCustomField = async (field) => {
+const queueContextCustomFieldUpdate = (field, value) => {
  const linkId = props.piece?.linkId
  if (!linkId || !field) return

-  const customFieldId = field.customFieldId || field.customField?.id
-  if (!customFieldId) return
+  const customFieldId = resolveCustomFieldId(field)
+  const customFieldValueId = resolveFieldId(field)
+  if (!customFieldId && !customFieldValueId) return

-  const result = await upsertCustomFieldValue(
-    customFieldId,
-    'machinePieceLink',
-    linkId,
-    field.value ?? '',
-  )
-
-  if (result.success) {
-    showSuccess(`Champ contextuel "${field.name || field.customField?.name}" mis à jour`)
-  }
-  else {
-    showError(`Erreur lors de la mise à jour du champ contextuel`)
-  }
+  field.value = value
+  emit('custom-field-update', {
+    entityType: 'machinePieceLink',
+    entityId: linkId,
+    fieldId: customFieldId,
+    customFieldValueId,
+    value: value ?? '',
+    fieldName: field.name || field.customField?.name || 'Champ contextuel',
+  })
 }

 // --- Document edit modal ---
--- a/frontend/app/components/common/CustomFieldDisplay.vue
+++ b/frontend/app/components/common/CustomFieldDisplay.vue
@@ -1,10 +1,10 @@
 <template>
  <div
    v-if="fields.length"
-    class="mt-4 pt-4 border-t border-base-200"
+    :class="containerClass"
  >
-    <h5 class="text-sm font-medium text-base-content/80 mb-3">
-      Champs personnalisés
+    <h5 v-if="showHeader" class="text-sm font-medium text-base-content/80 mb-3">
+      {{ title }}
    </h5>
    <div :class="layoutClass">
      <div
@@ -23,7 +23,7 @@
        </label>

        <!-- Mode édition -->
-        <template v-if="isEditMode && !resolveFieldReadOnly(field)">
+        <template v-if="isFieldEditable(field)">
          <!-- Champ de type TEXT -->
          <input
            v-if="resolveFieldType(field) === 'text'"
@@ -142,6 +142,11 @@ const props = defineProps<{
  fields: any[]
  isEditMode: boolean
  columns?: 1 | 2
+  title?: string
+  showHeader?: boolean
+  withTopBorder?: boolean
+  editable?: boolean
+  emitBlur?: boolean
 }>()

 const emit = defineEmits<{
@@ -155,6 +160,20 @@ const layoutClass = computed(() =>
    : 'space-y-3',
 )

+const title = computed(() => props.title ?? 'Champs personnalisés')
+const showHeader = computed(() => props.showHeader ?? true)
+const containerClass = computed(() =>
+  props.withTopBorder === false
+    ? ''
+    : 'mt-4 pt-4 border-t border-base-200',
+)
+const editable = computed(() => props.editable ?? true)
+const emitBlur = computed(() => props.emitBlur ?? true)
+
+function isFieldEditable(field: any) {
+  return props.isEditMode && editable.value && !resolveFieldReadOnly(field)
+}
+
 function onInput(field: any, value: string) {
  field.value = value
  emit('field-input', field, value)
@@ -164,10 +183,14 @@ function onBooleanChange(field: any, checked: boolean) {
  const value = checked ? 'true' : 'false'
  field.value = value
  emit('field-input', field, value)
-  emit('field-blur', field)
+  if (emitBlur.value) {
+    emit('field-blur', field)
+  }
 }

 function onBlur(field: any) {
-  emit('field-blur', field)
+  if (emitBlur.value) {
+    emit('field-blur', field)
+  }
 }
 </script>
--- a/frontend/app/components/machine/MachineComponentsCard.vue
+++ b/frontend/app/components/machine/MachineComponentsCard.vue
@@ -28,11 +28,13 @@
        <div v-for="component in components" :key="component.id">
          <ComponentHierarchy
            :components="[component]"
-            :is-edit-mode="false"
+            :is-edit-mode="isEditMode"
            :show-delete="isEditMode"
            :collapse-all="collapsed"
            :toggle-token="collapseToggleToken"
+            @update="$emit('update-component', $event)"
            @edit-piece="$emit('edit-piece', $event)"
+            @custom-field-update="$emit('custom-field-update', $event)"
            @delete="$emit('remove-component', component.linkId || component.id)"
            @fill-entity="(linkId, typeId) => $emit('fill-entity', linkId, typeId)"
          />
--- a/frontend/app/components/machine/MachinePiecesCard.vue
+++ b/frontend/app/components/machine/MachinePiecesCard.vue
@@ -34,6 +34,7 @@
            :toggle-token="collapseToggleToken"
            @update="$emit('update-piece', $event)"
            @edit="$emit('edit-piece', $event)"
+            @custom-field-update="$emit('custom-field-update', $event)"
            @delete="$emit('remove-piece', piece.linkId || piece.id)"
            @fill-entity="(linkId, typeId) => $emit('fill-entity', linkId, typeId)"
          />
@@ -66,6 +67,7 @@ defineEmits<{
  'toggle-collapse': []
  'update-piece': [piece: any]
  'edit-piece': [piece: any]
+  'custom-field-update': [fieldUpdate: any]
  'add-piece': []
  'remove-piece': [linkId: string]
  'fill-entity': [linkId: string, modelTypeId: string]