fix : page de modification reception qui crash en prod

2026-02-26 10:28:00 +01:00
parent c48cc477da
commit 59d76c5f14
4 changed files with 236 additions and 57 deletions
@@ -48,8 +48,38 @@ const emit = defineEmits<{
 const bovineTypes = ref<BovineTypeData[]>([])
 const localQuantities = reactive<Record<string, number | null>>({})
 const localOtherQuantity = ref<number | null>(props.otherQuantity ?? 0)
+// Verrou pour éviter les boucles props -> local -> emit -> props.
 const isSyncing = ref(false)

+function entriesEqualByTypeAndQuantity(
+    left: ReceptionBovineTypeData[],
+    right: ReceptionBovineTypeData[]
+): boolean {
+    const toMap = (entries: ReceptionBovineTypeData[]) => {
+        const map = new Map<number, number>()
+        for (const entry of entries) {
+            const typeId = entry.bovineType?.id ?? 0
+            map.set(typeId, entry.quantity ?? 0)
+        }
+
+        return map
+    }
+
+    const a = toMap(left)
+    const b = toMap(right)
+    if (a.size !== b.size) {
+        return false
+    }
+
+    for (const [typeId, quantity] of a.entries()) {
+        if ((b.get(typeId) ?? 0) !== quantity) {
+            return false
+        }
+    }
+
+    return true
+}
+
 function buildEntriesFromLocal(): ReceptionBovineTypeData[] {
    return bovineTypes.value.map((type) => {
        const existing = props.modelValue.find((entry) => entry.bovineType.id === type.id)
@@ -80,20 +110,33 @@ function syncLocalFromProps() {
 watch(
    () => props.otherQuantity,
    (value) => {
-        localOtherQuantity.value = value ?? 0
+        if (isSyncing.value) {
+            return
+        }
+
+        const next = value ?? 0
+        isSyncing.value = true
+        localOtherQuantity.value = next
+        isSyncing.value = false
    }
 )

 watch(localOtherQuantity, (value) => {
-    emit('update:otherQuantity', value ?? 0)
+    if (isSyncing.value) {
+        return
+    }
+
+    const next = value ?? 0
+    emit('update:otherQuantity', next)
 })

 watch(
    () => props.modelValue,
    () => {
+        // Hydratation locale uniquement quand le parent change.
        syncLocalFromProps()
    },
-    { deep: true }
+    { immediate: true }
 )

 watch(
@@ -102,7 +145,11 @@ watch(
        if (isSyncing.value) {
            return
        }
-        emit('update:modelValue', buildEntriesFromLocal())
+        // N'émet que si les quantités diffèrent réellement du parent.
+        const nextEntries = buildEntriesFromLocal()
+        if (!entriesEqualByTypeAndQuantity(nextEntries, props.modelValue)) {
+            emit('update:modelValue', nextEntries)
+        }
    },
    { deep: true }
 )
@@ -110,6 +157,5 @@ watch(
 onMounted(async () => {
    bovineTypes.value = await getBovineTypeList()
    syncLocalFromProps()
-    emit('update:modelValue', buildEntriesFromLocal())
 })
 </script>
@@ -109,7 +109,8 @@ const selectedMerchandiseTypeId = ref('')
 const selectedBuildingIds = ref<string[]>([])
 const selectedPelletBuildingIds = ref<Record<string, string[]>>({})
 const merchandiseDetail = ref('')
-const isHydrating = ref(false)
+// Verrou de synchro pour empêcher les aller-retours infinis entre parent et composant.
+const isSyncing = ref(false)
 const isReady = ref(false)

 const selectedMerchandiseType = computed(() =>
@@ -130,6 +131,39 @@ function clonePelletSelections(value: Record<string, string[]>) {
    return clone
 }

+function sorted(values: string[]): string[] {
+    return [...values].sort()
+}
+
+function normalizeModel(value: MerchandiseEntryData): MerchandiseEntryData {
+    // Normalisation stable pour comparer deux modèles sans faux positifs (ordre des tableaux).
+    const pellet: Record<string, string[]> = {}
+    const pelletKeys = Object.keys(value.selectedPelletBuildingIds ?? {}).sort()
+    for (const key of pelletKeys) {
+        pellet[key] = sorted(value.selectedPelletBuildingIds[key] ?? [])
+    }
+
+    return {
+        merchandiseTypeId: value.merchandiseTypeId ?? '',
+        merchandiseDetail: value.merchandiseDetail ?? '',
+        selectedBuildingIds: sorted(value.selectedBuildingIds ?? []),
+        selectedPelletBuildingIds: pellet
+    }
+}
+
+function buildCurrentModel(): MerchandiseEntryData {
+    return {
+        merchandiseTypeId: selectedMerchandiseTypeId.value,
+        merchandiseDetail: merchandiseDetail.value,
+        selectedBuildingIds: [...selectedBuildingIds.value],
+        selectedPelletBuildingIds: clonePelletSelections(selectedPelletBuildingIds.value)
+    }
+}
+
+function isSameModel(left: MerchandiseEntryData, right: MerchandiseEntryData): boolean {
+    return JSON.stringify(normalizeModel(left)) === JSON.stringify(normalizeModel(right))
+}
+
 function ensurePelletKeys() {
    for (const pelletType of pelletTypes.value) {
        const key = String(pelletType.id)
@@ -140,7 +174,7 @@ function ensurePelletKeys() {
 }

 function hydrateFromModelValue(value: MerchandiseEntryData) {
-    isHydrating.value = true
+    isSyncing.value = true
    try {
        selectedMerchandiseTypeId.value = value.merchandiseTypeId ?? ''
        merchandiseDetail.value = value.merchandiseDetail ?? ''
@@ -150,51 +184,71 @@ function hydrateFromModelValue(value: MerchandiseEntryData) {
        )
        ensurePelletKeys()
    } finally {
-        isHydrating.value = false
+        isSyncing.value = false
    }
 }

-function emitModelValue() {
-    emit('update:modelValue', {
-        merchandiseTypeId: selectedMerchandiseTypeId.value,
-        merchandiseDetail: merchandiseDetail.value,
-        selectedBuildingIds: [...selectedBuildingIds.value],
-        selectedPelletBuildingIds: clonePelletSelections(selectedPelletBuildingIds.value)
-    })
+function sanitizeLocalState() {
+    if (isGranule.value) {
+        if (selectedBuildingIds.value.length > 0) {
+            selectedBuildingIds.value = []
+        }
+    } else {
+        for (const key of Object.keys(selectedPelletBuildingIds.value)) {
+            if (selectedPelletBuildingIds.value[key].length > 0) {
+                selectedPelletBuildingIds.value[key] = []
+            }
+        }
+    }
+
+    if (!isAutres.value && merchandiseDetail.value !== '') {
+        merchandiseDetail.value = ''
+    }
+}
+
+function emitCurrentModel() {
+    const currentModel = buildCurrentModel()
+    // Ne pas réémettre si rien n'a changé côté métier.
+    if (isSameModel(currentModel, props.modelValue)) {
+        return
+    }
+
+    emit('update:modelValue', currentModel)
 }

 watch(
    () => props.modelValue,
    (value) => {
+        const currentModel = buildCurrentModel()
+        // Si local == parent, on ignore pour éviter la boucle de réhydratation.
+        if (isSameModel(currentModel, value)) {
+            return
+        }
        hydrateFromModelValue(value)
    },
-    { deep: true }
+    { immediate: true }
 )

 watch(
    [selectedMerchandiseTypeId, selectedBuildingIds, selectedPelletBuildingIds, merchandiseDetail],
    () => {
-        if (isHydrating.value || !isReady.value) {
+        if (isSyncing.value || !isReady.value) {
            return
        }

-        if (isGranule.value) {
-            if (selectedBuildingIds.value.length > 0) {
-                selectedBuildingIds.value = []
-            }
-        } else {
-            for (const key of Object.keys(selectedPelletBuildingIds.value)) {
-                if (selectedPelletBuildingIds.value[key].length > 0) {
-                    selectedPelletBuildingIds.value[key] = []
-                }
-            }
+        const beforeSanitize = buildCurrentModel()
+        isSyncing.value = true
+        // Applique les règles métier (granulé / autres) avant émission.
+        sanitizeLocalState()
+        isSyncing.value = false
+
+        const afterSanitize = buildCurrentModel()
+        // Si la sanitation a modifié l'état, on laisse le watcher repasser proprement.
+        if (!isSameModel(beforeSanitize, afterSanitize)) {
+            return
        }

-        if (!isAutres.value && merchandiseDetail.value !== '') {
-            merchandiseDetail.value = ''
-        }
-
-        emitModelValue()
+        emitCurrentModel()
    },
    { deep: true }
 )
@@ -211,6 +265,5 @@ onMounted(async () => {

    hydrateFromModelValue(props.modelValue)
    isReady.value = true
-    emitModelValue()
 })
 </script>