From 23caeddf9ee6bb34fbbd7e75d18069bfc3ab4637 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 14 Jan 2026 14:10:50 +0100
Subject: [PATCH] fix(accidentForm): improve member sorting and add key for
 reactivity

- Added a unique key to the member selection dropdown to enhance reactivity.
- Updated the sorting logic in availableMembers to trim whitespace and use locale-sensitive comparison, ensuring accurate alphabetical ordering of members.
---
 .../src/components/AccidentFormDialog.vue     | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/AccidentFormDialog.vue b/frontend/src/components/AccidentFormDialog.vue
index 998c109..bb2b312 100644
--- a/frontend/src/components/AccidentFormDialog.vue
+++ b/frontend/src/components/AccidentFormDialog.vue
@@ -11,6 +11,7 @@
         <label for="memberId">{{ $t('accident.member') }}:</label>
         <select 
           id="memberId" 
+          :key="`member-select-${availableMembers.length}-${availableMembers.map(m => m.id).join('-')}`"
           :value="localAccident.memberId" 
           @change="handleMemberIdChange"
           class="form-select"
@@ -104,23 +105,28 @@ export default {
       const participantSet = new Set(participantIds);
       console.log('[AccidentFormDialog] participantIds:', participantIds);
       
+      if (!Array.isArray(this.members) || this.members.length === 0) {
+        return [];
+      }
+      
       const filtered = this.members.filter(m => participantSet.has(m.id));
       console.log('[AccidentFormDialog] filtered.length:', filtered.length);
       
       // Alphabetisch sortieren nach Nachname, dann Vorname
       // Erstelle ein neues Array, um Reaktivitätsprobleme zu vermeiden
-      const sorted = [...filtered].sort((a, b) => {
-        const lastNameA = (a.lastName || '').toLowerCase();
-        const lastNameB = (b.lastName || '').toLowerCase();
+      const sorted = filtered.slice().sort((a, b) => {
+        const lastNameA = (a.lastName || '').trim().toLowerCase();
+        const lastNameB = (b.lastName || '').trim().toLowerCase();
         if (lastNameA !== lastNameB) {
-          return lastNameA.localeCompare(lastNameB, 'de');
+          return lastNameA.localeCompare(lastNameB, 'de', { sensitivity: 'base' });
         }
-        const firstNameA = (a.firstName || '').toLowerCase();
-        const firstNameB = (b.firstName || '').toLowerCase();
-        return firstNameA.localeCompare(firstNameB, 'de');
+        const firstNameA = (a.firstName || '').trim().toLowerCase();
+        const firstNameB = (b.firstName || '').trim().toLowerCase();
+        return firstNameA.localeCompare(firstNameB, 'de', { sensitivity: 'base' });
       });
       
       console.log('[AccidentFormDialog] availableMembers computed - end, result.length:', sorted.length);
+      console.log('[AccidentFormDialog] First 3 sorted:', sorted.slice(0, 3).map(m => `${m.lastName}, ${m.firstName}`));
       return sorted;
     },
     isValid() {