From eb9748dd89742f80105307dec84d891e1016f847 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 12 Nov 2025 16:21:08 +0100
Subject: [PATCH] Enhance group assignment functionality in DiaryView with
 improved reactivity

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.
---
 frontend/src/views/DiaryView.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 3df6adf..f18a90a 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -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');
             }
         },