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

Refactor participant list in DiaryView for improved layout and interaction

Browse Source 
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.
This commit is contained in:
Torsten Schulz (local)
2025-11-04 16:37:09 +01:00
parent d40eea5e46
commit 8db827adeb
1 changed files with 61 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;