torsten/trainingstagebuch
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(accidentForm): improve member sorting and add key for reactivity

Browse Source 
- 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.
This commit is contained in:
Torsten Schulz (local)
2026-01-14 14:10:50 +01:00
parent 663125670e
commit 23caeddf9e
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/AccidentFormDialog.vue
View File

@@ -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() {