fix : page de modification reception qui crash en prod

frontend/components/reception/update-merchandise.vue

@@ -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>