From 67fc5d45e11d97269900da472f1f904302aeee2c Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 14 Jan 2026 13:46:13 +0100
Subject: [PATCH] feat(accidentForm): enhance member selection and update
 handling

- Updated the member selection dropdown to use v-model for better data binding and added a change handler for memberId updates.
- Improved the availableMembers computed property with additional logging for debugging and ensured it returns sorted members.
- Enhanced watchers for localAccident to emit updates only on relevant changes, optimizing performance and preventing unnecessary emissions.
- Added logging to various methods for better traceability during form interactions.
---
 .../src/components/AccidentFormDialog.vue     | 58 ++++++++++++++++---
 1 file changed, 50 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/AccidentFormDialog.vue b/frontend/src/components/AccidentFormDialog.vue
index 4b962e4..00b1be5 100644
--- a/frontend/src/components/AccidentFormDialog.vue
+++ b/frontend/src/components/AccidentFormDialog.vue
@@ -9,7 +9,12 @@
     <form @submit.prevent="handleSubmit" class="accident-form">
       <div class="form-group">
         <label for="memberId">{{ $t('accident.member') }}:</label>
-        <select id="memberId" v-model="localAccident.memberId" class="form-select">
+        <select 
+          id="memberId" 
+          :value="localAccident.memberId" 
+          @change="handleMemberIdChange"
+          class="form-select"
+        >
           <option value="">{{ $t('accident.pleaseSelect') }}</option>
           <option 
             v-for="member in availableMembers" 
@@ -86,6 +91,10 @@ export default {
   },
   computed: {
     availableMembers() {
+      console.log('[AccidentFormDialog] availableMembers computed - start');
+      console.log('[AccidentFormDialog] participants:', this.participants);
+      console.log('[AccidentFormDialog] members.length:', this.members?.length);
+      
       // participants ist ein Array von IDs, nicht von Objekten
       const participantIds = Array.isArray(this.participants) 
         ? (this.participants.length > 0 && typeof this.participants[0] === 'object' 
@@ -93,9 +102,13 @@ export default {
             : this.participants)
         : [];
       const participantSet = new Set(participantIds);
+      console.log('[AccidentFormDialog] participantIds:', participantIds);
+      
       const filtered = this.members.filter(m => participantSet.has(m.id));
+      console.log('[AccidentFormDialog] filtered.length:', filtered.length);
+      
       // Alphabetisch sortieren nach Nachname, dann Vorname
-      return filtered.sort((a, b) => {
+      const sorted = filtered.sort((a, b) => {
         const lastNameA = (a.lastName || '').toLowerCase();
         const lastNameB = (b.lastName || '').toLowerCase();
         if (lastNameA !== lastNameB) {
@@ -105,6 +118,9 @@ export default {
         const firstNameB = (b.firstName || '').toLowerCase();
         return firstNameA.localeCompare(firstNameB, 'de');
       });
+      
+      console.log('[AccidentFormDialog] availableMembers computed - end, result.length:', sorted.length);
+      return sorted;
     },
     isValid() {
       return this.localAccident.memberId && this.localAccident.accident && this.localAccident.accident.trim() !== '';
@@ -113,31 +129,57 @@ export default {
   watch: {
     accident: {
       handler(newVal) {
+        console.log('[AccidentFormDialog] accident watch triggered:', newVal);
         // Nur aktualisieren, wenn sich wirklich etwas geändert hat (verhindert Endlosschleife)
         if (newVal && (newVal.memberId !== this.localAccident.memberId || newVal.accident !== this.localAccident.accident)) {
+          console.log('[AccidentFormDialog] Updating localAccident from prop');
           this.localAccident = { ...newVal };
+        } else {
+          console.log('[AccidentFormDialog] No update needed (values match)');
         }
       },
       immediate: true
     },
-    'localAccident.memberId'() {
-      // Emit nur bei Änderung der memberId, nicht bei jeder tiefen Änderung
-      this.$emit('update:accident', { ...this.localAccident });
+    'localAccident.memberId'(newVal, oldVal) {
+      console.log('[AccidentFormDialog] localAccident.memberId changed:', oldVal, '->', newVal);
+      if (newVal !== oldVal) {
+        // Emit nur bei Änderung der memberId, nicht bei jeder tiefen Änderung
+        console.log('[AccidentFormDialog] Emitting update:accident for memberId change');
+        this.$emit('update:accident', { ...this.localAccident });
+      }
     },
-    'localAccident.accident'() {
-      // Emit nur bei Änderung des accident-Textes
-      this.$emit('update:accident', { ...this.localAccident });
+    'localAccident.accident'(newVal, oldVal) {
+      console.log('[AccidentFormDialog] localAccident.accident changed:', oldVal?.substring(0, 20), '->', newVal?.substring(0, 20));
+      if (newVal !== oldVal) {
+        // Emit nur bei Änderung des accident-Textes
+        console.log('[AccidentFormDialog] Emitting update:accident for accident text change');
+        this.$emit('update:accident', { ...this.localAccident });
+      }
     }
   },
   methods: {
     handleClose() {
+      console.log('[AccidentFormDialog] handleClose called');
       this.$emit('update:modelValue', false);
       this.$emit('close');
     },
     handleSubmit() {
+      console.log('[AccidentFormDialog] handleSubmit called, isValid:', this.isValid);
       if (this.isValid) {
         this.$emit('submit', this.localAccident);
       }
+    },
+    handleMemberIdChange(event) {
+      const newMemberId = event.target.value || '';
+      console.log('[AccidentFormDialog] handleMemberIdChange:', this.localAccident.memberId, '->', newMemberId);
+      if (newMemberId !== this.localAccident.memberId) {
+        this.localAccident.memberId = newMemberId;
+        // Emit manuell, ohne Watch zu triggern
+        this.$nextTick(() => {
+          console.log('[AccidentFormDialog] Emitting update:accident after memberId change');
+          this.$emit('update:accident', { ...this.localAccident });
+        });
+      }
     }
   }
 };