From 8db827adebe70563715c3b5a52be9714ebe02d3a Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Tue, 4 Nov 2025 16:37:09 +0100
Subject: [PATCH] Refactor participant list in DiaryView for improved layout
 and interaction

Updated the participant list in DiaryView to enhance the layout and user interaction. Introduced new CSS classes for better styling of participant rows, including flexbox for alignment and spacing. Improved the checkbox label structure and added a dedicated actions section for each participant, streamlining the user experience when managing participants. Additionally, modified the selectMember method to automatically open the notes modal for the selected participant.
---
 frontend/src/views/DiaryView.vue | 88 ++++++++++++++++++++++----------
 1 file changed, 61 insertions(+), 27 deletions(-)

diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 828da4e..44db960 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -374,41 +374,42 @@
                     </div>
                     <h3>Teilnehmer ({{ participants.length }})</h3>
                     <ul>
-                        <li v-for="member in sortedMembers()" :key="member.id" class="checkbox-item" 
+                        <li v-for="member in sortedMembers()" :key="member.id" class="checkbox-item participant-row" 
                             :class="{ 
                                 'row-inactive': !member.active, 
                                 'row-test': member.testMembership && !member.memberFormHandedOver, 
                                 'row-test-form': member.testMembership && member.memberFormHandedOver 
                             }">
-                            <label class="checkbox-item">
+                            <label class="checkbox-label">
                                 <input type="checkbox" :value="member.id" @change="toggleParticipant(member.id)"
                                     :checked="isParticipant(member.id)">
-                                <span class="clickable" @click="selectMember(member)"
-                                    :class="{ highlighted: selectedMember && selectedMember.id === member.id }">{{
-                                        member ? member.firstName : ''
-                                    }} {{
-                                        member ? member.lastName : ''
-                                    }}</span>
                             </label>
-                            <!-- Gruppenzuordnung für aktive Teilnehmer -->
-                            <select v-if="isParticipant(member.id) && groups.length > 0"
-                                :value="getMemberGroup(member.id)"
-                                @change="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="group.id">
-                                    {{ group.name }}
-                                </option>
-                            </select>
-                            <span v-if="false" @click="openNotesModal(member)" class="clickable">📝</span>
-                            <span @click="showPic(member)" class="img-icon" v-if="member.hasImage">&#x1F5BC;</span>
-                            <span v-if="member.testMembership === true && member.memberFormHandedOver !== true" 
-                                  @click.stop="markFormHandedOver(member)" 
-                                  class="pointer form-handover-icon" 
-                                  title="Mitgliedsformular ausgehändigt">
-                                📄
-                            </span>
-                            <span class="pointer" @click="openTagInfos(member)">ℹ️</span>
+                            <span class="clickable participant-name" @click.stop="openNotesModal(member)">{{
+                                    member ? member.firstName : ''
+                                }} {{
+                                    member ? member.lastName : ''
+                                }}</span>
+                            <div class="participant-actions">
+                                <!-- Gruppenzuordnung für aktive Teilnehmer -->
+                                <select v-if="isParticipant(member.id) && groups.length > 0"
+                                    :value="getMemberGroup(member.id)"
+                                    @change="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="group.id">
+                                        {{ group.name }}
+                                    </option>
+                                </select>
+                                <span v-if="false" @click="openNotesModal(member)" class="clickable">📝</span>
+                                <span @click="showPic(member)" class="img-icon" v-if="member.hasImage">&#x1F5BC;</span>
+                                <span v-if="member.testMembership === true && member.memberFormHandedOver !== true" 
+                                      @click.stop="markFormHandedOver(member)" 
+                                      class="pointer form-handover-icon" 
+                                      title="Mitgliedsformular ausgehändigt">
+                                    📄
+                                </span>
+                                <span class="pointer" @click="openTagInfos(member)">ℹ️</span>
+                            </div>
                         </li>
                     </ul>
                     <div class="add-participant">
@@ -1092,6 +1093,8 @@ export default {
 
         async selectMember(member) {
             this.selectedMember = member;
+            // Öffne das Notizen-Modal für den ausgewählten Teilnehmer
+            await this.openNotesModal(member);
         },
 
         async openNotesModal(member) {
@@ -2472,6 +2475,37 @@ li {
     margin-bottom: 5px;
 }
 
+li.participant-row {
+    display: flex !important;
+    align-items: center;
+    gap: 0.5rem;
+    flex-direction: row;
+}
+
+li.participant-row .checkbox-label {
+    margin: 0 !important;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    flex: 0 0 auto !important;
+}
+
+li.participant-row .participant-name {
+    flex: 0 1 auto;
+    min-width: 0;
+    order: 1;
+}
+
+li.participant-row .participant-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-left: auto;
+    flex-shrink: 0;
+    order: 2;
+}
+
 /* Teilnehmer-Farben (wie in MembersView) */
 .row-inactive {
     opacity: .6;