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

feat(accidentForm): enhance member selection and update handling

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

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

@@ -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 });
});
}
}
}
};