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

"Updated MembersView.vue: fixed checkbox syntax, added showInactiveMembers feature, and reformatted HTML structure"

Browse Source
This commit is contained in:
Torsten Schulz
2024-11-07 09:04:17 +01:00
parent 22b1d5b045
commit 638f750f26
1 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/views/MembersView.vue
View File

@@ -21,19 +21,22 @@
<label><span>Telefon-Nr.:</span> <input type="text" v-model="newPhone"></label>
<label><span>Email-Adresse:</span> <input type="email" v-model="newEmail"></label>
<label><span>Aktiv:</span> <input type="checkbox" v-model="newActive"></label>
<label><span>Testmitgliedschaft:</span> <input type="checkbox" v-model="testMembership"</label>
<label><span>Bild:</span> <input type="file" @change="onFileSelected"></label>
<div v-if="memberImagePreview">
<img :src="memberImagePreview" alt="Vorschau des Mitgliedsbildes"
style="max-width: 200px; max-height: 200px;">
</div>
<div>
<button @click="addNewMember">{{ memberToEdit ? 'Ändern' : 'Anlegen' }}</button>
<button @click="resetNewMember" v-if="memberToEdit === null" class="cancel-action">Felder
leeren</button>
</div>
<label><span>Testmitgliedschaft:</span> <input type="checkbox" v-model="testMembership" </label>
<label><span>Bild:</span> <input type="file" @change="onFileSelected"></label>
<div v-if="memberImagePreview">
<img :src="memberImagePreview" alt="Vorschau des Mitgliedsbildes"
style="max-width: 200px; max-height: 200px;">
</div>
<div>
<button @click="addNewMember">{{ memberToEdit ? 'Ändern' : 'Anlegen' }}</button>
<button @click="resetNewMember" v-if="memberToEdit === null" class="cancel-action">Felder
leeren</button>
</div>
</div>
</div>
<div>
<input type="checkbox" v-model="showInactiveMembers"> Inaktive Mitglieder anzeigen
</div>
<div>
<table>
<thead>
@@ -48,21 +51,23 @@
</tr>
</thead>
<tbody>
<tr v-for="member in members" :key="member.id" @click="editMember(member)">
<td>
<img v-if="member.imageUrl" :src="member.imageUrl" alt="Mitgliedsbild"
style="max-width: 50px; max-height: 50px;"
@click.stop="openImageModal(member.imageUrl)">
</td>
<td>{{ member.lastName }}, {{ member.firstName }}</td>
<td>{{ member.street }}, {{ member.city }}</td>
<td>{{ getFormattedBirthdate(member.birthDate) }}</td>
<td>{{ member.phone }}</td>
<td>{{ member.email }}</td>
<td>
<button @click.stop="openNotesModal(member)">Notizen</button>
</td>
</tr>
<template v-for="member in members" :key="member.id">
<tr v-if="member.active || showInactiveMembers" class="member-row" @click="editMember(member)">
<td>
<img v-if="member.imageUrl" :src="member.imageUrl" alt="Mitgliedsbild"
style="max-width: 50px; max-height: 50px;"
@click.stop="openImageModal(member.imageUrl)">
</td>
<td>{{ member.lastName }}, {{ member.firstName }}</td>
<td>{{ member.street }}, {{ member.city }}</td>
<td>{{ getFormattedBirthdate(member.birthDate) }}</td>
<td>{{ member.phone }}</td>
<td>{{ member.email }}</td>
<td>
<button @click.stop="openNotesModal(member)">Notizen</button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
@@ -124,6 +129,7 @@ export default {
showImageModal: false,
selectedImageUrl: null,
testMembership: false,
showInactiveMembers: false,
}
},
async mounted() {
@@ -306,7 +312,7 @@ export default {
getFormattedBirthdate(birthDate) {
const date = new Date(birthDate);
return `${String(date.getDate()).padStart(2, '0')}.${String(date.getMonth() + 1).padStart(2, '0')}.${date.getFullYear()}`;
}
},
}
}
</script>
@@ -365,7 +371,7 @@ table td {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
position: fixed;toggleNewMember() {}
z-index: 1000;
left: 0;
top: 0;