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

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

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