From 2b06a8dd10c0485ffe49914bc4be320bcbfd8f04 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 13 Nov 2025 18:18:31 +0100
Subject: [PATCH] Enhance participant update handling and UI responsiveness in
 DiaryView

This commit improves the participant update process by ensuring the latest participant data is fetched from the database before emitting socket events. It also refines the DiaryView component's UI, adding better handling for dropdowns and member group selections, enhancing user experience. Additionally, new CSS styles are introduced for member group select elements to ensure consistent appearance across browsers.
---
 backend/controllers/participantController.js |  22 ++-
 backend/services/socketService.js            |   1 +
 frontend/src/services/socketService.js       |   7 +-
 frontend/src/views/DiaryView.vue             | 188 ++++++++++++++-----
 4 files changed, 166 insertions(+), 52 deletions(-)

diff --git a/backend/controllers/participantController.js b/backend/controllers/participantController.js
index 0469a78..c06d1e9 100644
--- a/backend/controllers/participantController.js
+++ b/backend/controllers/participantController.js
@@ -40,12 +40,26 @@ export const updateParticipantGroup = async (req, res) => {
         participant.groupId = groupId || null;
         await participant.save();
         
-        // Emit Socket-Event
-        if (participant.diaryDate?.clubId) {
-            emitParticipantUpdated(participant.diaryDate.clubId, dateId, participant);
+        // Lade den Participant erneut aus der DB, um sicherzustellen, dass wir den aktuellen Wert haben
+        const updatedParticipant = await Participant.findOne({
+            where: { 
+                diaryDateId: dateId,
+                memberId: memberId
+            },
+            include: [{
+                model: DiaryDates,
+                as: 'diaryDate',
+                attributes: ['clubId']
+            }]
+        });
+        
+        // Emit Socket-Event mit dem aktualisierten Participant
+        if (updatedParticipant?.diaryDate?.clubId) {
+            console.log('📡 [Backend] Emit participant:updated mit groupId:', updatedParticipant.groupId);
+            emitParticipantUpdated(updatedParticipant.diaryDate.clubId, dateId, updatedParticipant);
         }
         
-        res.status(200).json(participant);
+        res.status(200).json(updatedParticipant || participant);
     } catch (error) {
         devLog(error);
         res.status(500).json({ error: 'Fehler beim Aktualisieren der Teilnehmer-Gruppenzuordnung' });
diff --git a/backend/services/socketService.js b/backend/services/socketService.js
index a1e0238..0defb3b 100644
--- a/backend/services/socketService.js
+++ b/backend/services/socketService.js
@@ -64,6 +64,7 @@ export const emitParticipantRemoved = (clubId, dateId, participantId) => {
 };
 
 export const emitParticipantUpdated = (clubId, dateId, participant) => {
+  console.log('📡 [Socket] Emit participant:updated für Club', clubId, 'Date', dateId, 'Participant:', participant);
   emitToClub(clubId, 'participant:updated', { dateId, participant });
 };
 
diff --git a/frontend/src/services/socketService.js b/frontend/src/services/socketService.js
index 2a3574a..f6fea2a 100644
--- a/frontend/src/services/socketService.js
+++ b/frontend/src/services/socketService.js
@@ -77,7 +77,12 @@ export const onParticipantRemoved = (callback) => {
 
 export const onParticipantUpdated = (callback) => {
   if (socket) {
-    socket.on('participant:updated', callback);
+    socket.on('participant:updated', (data) => {
+      console.log('📡 [Socket] participant:updated empfangen:', data);
+      callback(data);
+    });
+  } else {
+    console.warn('⚠️ [Socket] onParticipantUpdated: Socket nicht verbunden');
   }
 };
 
diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index fba8e7e..d96c54b 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -189,37 +189,39 @@
                                             </span>
                                         </td>
                                         <td>
-                                            <button v-if="!item.isTimeblock" @click="toggleActivityMembers(item)" title="Teilnehmer zuordnen"
-                                                class="person-btn">👤</button>
-                                            <button v-if="item.isTimeblock" @click="addGroupActivityToTimeblock(item.id)" title="Gruppen-Aktivität hinzufügen"
-                                                class="btn-primary" style="font-size: 12px; padding: 2px 6px;">+ Gruppe</button>
-                                            <button @click="removePlanItem(item.id)" class="trash-btn">🗑️</button>
-                                            <div v-if="activityMembersOpenId === item.id" class="dropdown"
-                                                style="max-height: 12em; padding: 0.25rem;">
-                                                <div style="margin-bottom: 0.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;">
-                                                    <span>Teilnehmer zuordnen</span>
-                                                    <button @click="assignAllMembersToActivity(item.id)" 
-                                                        style="font-size: 10px; padding: 1px 4px; background: #28a745; color: white; border: none; border-radius: 2px;">
-                                                        Alle
-                                                    </button>
-                                                    <select v-if="groups.length > 0" 
-                                                        @change="assignGroupToActivity(item.id, $event.target.value)"
-                                                        style="font-size: 10px; width: 80px;">
-                                                        <option value="">Gruppe...</option>
-                                                        <option v-for="group in groups" :key="group.id" :value="String(group.id)">
-                                                            {{ group.name }}
-                                                        </option>
-                                                    </select>
-                                                </div>
-                                                
-                                                <div style="max-height: 9.5em; overflow-y: auto;">
-                                                    <label v-for="m in presentMembers" :key="m.id"
-                                                        style="display:flex; align-items:center; gap:0.5rem;">
-                                                        <input type="checkbox"
-                                                            :checked="isAssignedToActivity(item.id, m.id)"
-                                                            @change="toggleMemberForActivity(item.id, m.id, $event.target.checked)">
-                                                        <span>{{ m.firstName }} {{ m.lastName }}</span>
-                                                    </label>
+                                            <div style="position: relative; display: inline-block;">
+                                                <button v-if="!item.isTimeblock" @click="toggleActivityMembers(item)" title="Teilnehmer zuordnen"
+                                                    class="person-btn">👤</button>
+                                                <button v-if="item.isTimeblock" @click="addGroupActivityToTimeblock(item.id)" title="Gruppen-Aktivität hinzufügen"
+                                                    class="btn-primary" style="font-size: 12px; padding: 2px 6px;">+ Gruppe</button>
+                                                <button @click="removePlanItem(item.id)" class="trash-btn">🗑️</button>
+                                                <div v-if="activityMembersOpenId === item.id" class="dropdown"
+                                                    style="max-height: 12em; padding: 0.25rem;">
+                                                    <div style="margin-bottom: 0.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;">
+                                                        <span>Teilnehmer zuordnen</span>
+                                                        <button @click="assignAllMembersToActivity(item.id)" 
+                                                            style="font-size: 10px; padding: 1px 4px; background: #28a745; color: white; border: none; border-radius: 2px;">
+                                                            Alle
+                                                        </button>
+                                                        <select v-if="groups.length > 0" 
+                                                            @change="assignGroupToActivity(item.id, $event.target.value)"
+                                                            style="font-size: 10px; width: 80px;">
+                                                            <option value="">Gruppe...</option>
+                                                            <option v-for="group in groups" :key="group.id" :value="String(group.id)">
+                                                                {{ group.name }}
+                                                            </option>
+                                                        </select>
+                                                    </div>
+                                                    
+                                                    <div style="max-height: 9.5em; overflow-y: auto;">
+                                                        <label v-for="m in presentMembers" :key="m.id"
+                                                            style="display:flex; align-items:center; gap:0.5rem;">
+                                                            <input type="checkbox"
+                                                                :checked="isAssignedToActivity(item.id, m.id)"
+                                                                @change="toggleMemberForActivity(item.id, m.id, $event.target.checked)">
+                                                            <span>{{ m.firstName }} {{ m.lastName }}</span>
+                                                        </label>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </td>
@@ -277,11 +279,12 @@
                                             <td>{{ groupItem.groupsGroupActivity.name }}</td>
                                             <td></td>
                                             <td>
-                                                <button @click="toggleGroupActivityMembers(groupItem)" title="Teilnehmer zuordnen"
-                                                    class="person-btn">👤</button>
-                                                <button @click="removeGroupActivity(groupItem.id)" class="trash-btn" title="Löschen">🗑️</button>
-                                                <div v-if="groupActivityMembersOpenId === groupItem.id" class="dropdown"
-                                                    style="max-height: 12em; padding: 0.25rem;">
+                                                <div style="position: relative; display: inline-block;">
+                                                    <button @click="toggleGroupActivityMembers(groupItem)" title="Teilnehmer zuordnen"
+                                                        class="person-btn">👤</button>
+                                                    <button @click="removeGroupActivity(groupItem.id)" class="trash-btn" title="Löschen">🗑️</button>
+                                                    <div v-if="groupActivityMembersOpenId === groupItem.id" class="dropdown"
+                                                        style="max-height: 12em; padding: 0.25rem;">
                                                     <div style="margin-bottom: 0.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;">
                                                         <span>Teilnehmer zuordnen</span>
                                                         <button @click="assignAllMembersToGroupActivity(groupItem.id)" 
@@ -307,6 +310,7 @@
                                                             <span>{{ m.firstName }} {{ m.lastName }}</span>
                                                         </label>
                                                     </div>
+                                                    </div>
                                                 </div>
                                             </td>
                                         </tr>
@@ -424,10 +428,11 @@
                             <div class="participant-actions">
                                 <!-- Gruppenzuordnung für aktive Teilnehmer -->
                                 <select v-if="isParticipant(member.id) && groups.length > 0"
+                                    :key="`group-select-${member.id}-${getMemberGroup(member.id)}`"
                                     :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;">
+                                    class="member-group-select"
+                                    style="margin-left: 10px; font-size: 10px; width: 5em; padding: 2px 4px; border: 1px solid #ccc; border-radius: 3px; background-color: white; color: #333;">
                                     <option value="">-</option>
                                     <option v-for="group in groups" :key="group.id" :value="String(group.id)">
                                         {{ group.name }}
@@ -513,10 +518,11 @@
                                 <div class="participant-actions">
                                     <!-- Gruppenzuordnung für aktive Teilnehmer -->
                                     <select v-if="isParticipant(member.id) && groups.length > 0"
+                                        :key="`group-select-${member.id}-${getMemberGroup(member.id)}`"
                                         :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;">
+                                        class="member-group-select"
+                                        style="margin-left: 10px; font-size: 10px; width: 5em; padding: 2px 4px; border: 1px solid #ccc; border-radius: 3px; background-color: white; color: #333;">
                                         <option value="">-</option>
                                         <option v-for="group in groups" :key="group.id" :value="String(group.id)">
                                             {{ group.name }}
@@ -2198,12 +2204,29 @@ export default {
         },
 
         async toggleActivityMembers(item) {
+            console.log('🔍 [toggleActivityMembers] Aufgerufen für item.id:', item.id);
+            console.log('🔍 [toggleActivityMembers] Aktuelle activityMembersOpenId:', this.activityMembersOpenId);
+            
             if (this.activityMembersOpenId === item.id) {
+                console.log('🔍 [toggleActivityMembers] Schließe Dropdown');
                 this.activityMembersOpenId = null;
                 return;
             }
+            
+            console.log('🔍 [toggleActivityMembers] Öffne Dropdown für item.id:', item.id);
             this.activityMembersOpenId = item.id;
+            
+            // Verwende $set für Vue 2 Reaktivität
+            if (this.$set) {
+                this.$set(this, 'activityMembersOpenId', item.id);
+            }
+            
             await this.ensureActivityMembersLoaded(item.id);
+            
+            // Force update um sicherzustellen, dass das Dropdown angezeigt wird
+            await this.$nextTick();
+            this.$forceUpdate();
+            console.log('🔍 [toggleActivityMembers] Dropdown sollte jetzt sichtbar sein');
         },
 
         async ensureActivityMembersLoaded(activityId) {
@@ -2327,12 +2350,29 @@ export default {
 
         // Group Activity Members Methods
         async toggleGroupActivityMembers(groupItem) {
+            console.log('🔍 [toggleGroupActivityMembers] Aufgerufen für groupItem.id:', groupItem.id);
+            console.log('🔍 [toggleGroupActivityMembers] Aktuelle groupActivityMembersOpenId:', this.groupActivityMembersOpenId);
+            
             if (this.groupActivityMembersOpenId === groupItem.id) {
+                console.log('🔍 [toggleGroupActivityMembers] Schließe Dropdown');
                 this.groupActivityMembersOpenId = null;
                 return;
             }
+            
+            console.log('🔍 [toggleGroupActivityMembers] Öffne Dropdown für groupItem.id:', groupItem.id);
             this.groupActivityMembersOpenId = groupItem.id;
+            
+            // Verwende $set für Vue 2 Reaktivität
+            if (this.$set) {
+                this.$set(this, 'groupActivityMembersOpenId', groupItem.id);
+            }
+            
             await this.ensureGroupActivityMembersLoaded(groupItem.id);
+            
+            // Force update um sicherzustellen, dass das Dropdown angezeigt wird
+            await this.$nextTick();
+            this.$forceUpdate();
+            console.log('🔍 [toggleGroupActivityMembers] Dropdown sollte jetzt sichtbar sein');
         },
 
         async ensureGroupActivityMembersLoaded(groupActivityId) {
@@ -2425,8 +2465,14 @@ export default {
 
         // Gruppenzuordnung für Teilnehmer
         getMemberGroup(memberId) {
-            const value = this.memberGroupsMap ? this.memberGroupsMap[memberId] : undefined;
-            return value !== undefined && value !== null ? String(value) : '';
+            if (!this.memberGroupsMap) {
+                return '';
+            }
+            const value = this.memberGroupsMap[memberId];
+            if (value === undefined || value === null) {
+                return '';
+            }
+            return String(value);
         },
 
         async updateMemberGroup(memberId, groupId) {
@@ -2605,16 +2651,41 @@ export default {
         
         async handleParticipantUpdated(data) {
             // Nur aktualisieren, wenn das aktuelle Datum betroffen ist
-            if (this.date && this.date !== 'new' && this.date.id === data.dateId) {
+            if (this.date && this.date !== 'new' && String(this.date.id) === String(data.dateId)) {
                 console.log('📡 Teilnehmer aktualisiert (Socket):', data);
+                console.log('📡 [DiaryView] Aktuelle memberGroupsMap vor Update:', JSON.parse(JSON.stringify(this.memberGroupsMap)));
+                
                 // Aktualisiere groupId in memberGroupsMap
                 const groupValue = (data.participant.groupId !== null && data.participant.groupId !== undefined) 
                     ? String(data.participant.groupId) 
                     : '';
-                this.memberGroupsMap = {
-                    ...this.memberGroupsMap,
-                    [data.participant.memberId]: groupValue
-                };
+                
+                console.log('📡 [DiaryView] Setze groupValue für memberId', data.participant.memberId, 'auf:', groupValue);
+                console.log('📡 [DiaryView] data.participant:', JSON.parse(JSON.stringify(data.participant)));
+                
+                // Verwende $set für Vue 2 - das ist wichtig für Reaktivität
+                if (this.$set) {
+                    this.$set(this.memberGroupsMap, data.participant.memberId, groupValue);
+                    console.log('📡 [DiaryView] Verwendet $set für Vue 2');
+                } else {
+                    // Vue 3: Erstelle neues Objekt für Reaktivität
+                    this.memberGroupsMap = {
+                        ...this.memberGroupsMap,
+                        [data.participant.memberId]: groupValue
+                    };
+                    console.log('📡 [DiaryView] Verwendet Spread-Operator für Vue 3');
+                }
+                
+                // Warte auf Vue-Update und force dann ein Re-Render
+                await this.$nextTick();
+                console.log('📡 [DiaryView] memberGroupsMap nach Update:', JSON.parse(JSON.stringify(this.memberGroupsMap)));
+                console.log('📡 [DiaryView] getMemberGroup für memberId', data.participant.memberId, ':', this.getMemberGroup(data.participant.memberId));
+                
+                // Force Vue update um sicherzustellen, dass die UI aktualisiert wird
+                this.$forceUpdate();
+                console.log('✅ [DiaryView] UI-Update erzwungen');
+            } else {
+                console.log('⚠️ [DiaryView] Datum stimmt nicht überein - Event dateId:', data.dateId, 'Aktuelles Datum:', this.date?.id);
             }
         },
         
@@ -3718,6 +3789,29 @@ img {
     }
 }
 
+/* Member Group Select - Chrome Fix */
+.member-group-select {
+    font-size: 10px !important;
+    padding: 2px 4px !important;
+    border: 1px solid #ccc !important;
+    border-radius: 3px !important;
+    background-color: white !important;
+    color: #333 !important;
+    -webkit-appearance: menulist !important;
+    appearance: menulist !important;
+}
+
+.member-group-select option {
+    background-color: white !important;
+    color: #333 !important;
+    padding: 4px !important;
+}
+
+.member-group-select:focus {
+    outline: 2px solid #007bff !important;
+    outline-offset: 2px !important;
+}
+
 /* Render Container */
 .render-container {
     display: flex;