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

Enhance group assignment functionality in DiaryView with improved reactivity

Browse Source 
This commit updates the DiaryView component to enhance the group assignment feature for participants. It adds an @input event listener to the group selection dropdown for immediate UI updates and refines the logic for updating the memberGroupsMap to ensure reactivity in Vue 3. Additionally, it includes error handling improvements to reload participant data upon failure, ensuring data consistency and a better user experience.
This commit is contained in:
Torsten Schulz (local)
2025-11-12 16:21:08 +01:00
parent e295657621
commit eb9748dd89
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/views/DiaryView.vue
View File

@@ -399,6 +399,7 @@
<select v-if="isParticipant(member.id) && groups.length > 0"
:value="getMemberGroup(member.id)"
@change="updateMemberGroup(member.id, $event.target.value)"
@input="updateMemberGroup(member.id, $event.target.value)"
style="margin-left: 10px; font-size: 8px; width: 5em;">
<option value="">-</option>
<option v-for="group in groups" :key="group.id" :value="String(group.id)">
@@ -1014,12 +1015,18 @@ export default {
// Map für memberId -> participantId speichern
this.participantMapByMemberId = response.data.reduce((map, p) => { map[p.memberId] = p.id; return map; }, {});
// Map für memberId -> groupId speichern und mit Reaktivität initialisieren
const newMemberGroups = {};
response.data.forEach(p => {
const groupValue = (p.groupId !== null && p.groupId !== undefined) ? String(p.groupId) : '';
newMemberGroups[p.memberId] = groupValue;
if (this.$set) {
this.$set(this.memberGroupsMap, p.memberId, groupValue);
} else {
// Vue 3: Reaktivität wird automatisch gewährleistet
this.memberGroupsMap = {
...this.memberGroupsMap,
[p.memberId]: groupValue
};
}
});
this.memberGroupsMap = newMemberGroups;
},
async loadActivities(dateId) {
@@ -2270,23 +2277,30 @@ export default {
try {
const selectedGroupId = groupId ? String(groupId) : '';
// Sofortige UI-Aktualisierung für bessere Reaktivität
if (this.$set) {
this.$set(this.memberGroupsMap, memberId, selectedGroupId);
} else {
// Vue 3: Reaktivität wird automatisch gewährleistet
this.memberGroupsMap = {
...this.memberGroupsMap,
[memberId]: selectedGroupId
};
}
// API-Call im Hintergrund
await apiClient.put(`/participants/${this.date.id}/${memberId}/group`, {
groupId: selectedGroupId ? Number(selectedGroupId) : null
});
// Synchronisiere die Teilnehmerliste, damit Anzeige und Datenlage übereinstimmen
// Verwende $nextTick, um sicherzustellen, dass die UI-Aktualisierung zuerst erfolgt
await this.$nextTick();
await this.loadParticipants(this.date.id);
} catch (error) {
console.error('Fehler beim Aktualisieren der Teilnehmer-Gruppenzuordnung:', error);
// Bei Fehler: Lade die Daten neu, um den korrekten Zustand wiederherzustellen
await this.loadParticipants(this.date.id);
this.showInfo('Fehler', 'Fehler beim Aktualisieren der Teilnehmer-Gruppenzuordnung', '', 'error');
}
},