From 09ffd1db3d30a84c05caabc5bbfd2572fa6392e5 Mon Sep 17 00:00:00 2001 From: "Torsten Schulz (local)" Date: Sun, 21 Sep 2025 19:25:30 +0200 Subject: [PATCH] =?UTF-8?q?F=C3=BCgt=20die=20Funktionalit=C3=A4t=20zum=20s?= =?UTF-8?q?chnellen=20Hinzuf=C3=BCgen=20von=20Mitgliedern=20in=20DiaryView?= =?UTF-8?q?.vue=20hinzu.=20Implementiert=20einen=20Dialog=20zur=20Eingabe?= =?UTF-8?q?=20von=20Mitgliedsdaten,=20einschlie=C3=9Flich=20Vorname,=20Nac?= =?UTF-8?q?hname,=20Geburtsdatum=20und=20Geschlecht.=20Aktualisiert=20die?= =?UTF-8?q?=20Logik=20zur=20Validierung=20neuer=20Mitglieder=20und=20zur?= =?UTF-8?q?=20Integration=20in=20die=20Mitgliederliste.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/DiaryView.vue | 287 +++++++++++++++++++++++++++++++ 1 file changed, 287 insertions(+) diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue index 0b975d9..7d24f50 100644 --- a/frontend/src/views/DiaryView.vue +++ b/frontend/src/views/DiaryView.vue @@ -263,6 +263,9 @@ ℹ️ +
+ +
@@ -343,6 +346,48 @@ + + +
+
+
+

Neues Mitglied hinzufügen

+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+
@@ -433,6 +478,14 @@ export default { // Aktivitäts-Teilnehmer activityMembersOpenId: null, activityMembersMap: {}, // key: activityId, value: Set(participantIds) + // Schnell hinzufügen Dialog + showQuickAddDialog: false, + newMember: { + firstName: '', + lastName: '', + birthDate: '', + gender: '' + } }; }, watch: { @@ -465,6 +518,12 @@ export default { const presentSet = new Set(this.participants); return this.members.filter(m => presentSet.has(m.id)); }, + + isNewMemberValid() { + return this.newMember.firstName.trim() !== '' && + this.newMember.lastName.trim() !== '' && + (this.newMember.gender === 'male' || this.newMember.gender === 'female' || this.newMember.gender === 'diverse'); + }, }, methods: { async init() { @@ -1458,6 +1517,80 @@ export default { alert('Fehler beim Aktualisieren der Aktivitäts-Teilnehmer'); } }, + + // Schnell hinzufügen Dialog Methoden + openQuickAddDialog() { + this.showQuickAddDialog = true; + this.newMember = { + firstName: '', + lastName: '', + birthDate: '', + gender: '' + }; + }, + + closeQuickAddDialog() { + this.showQuickAddDialog = false; + this.newMember = { + firstName: '', + lastName: '', + birthDate: '', + gender: '' + }; + }, + + async createAndAddMember() { + if (!this.isNewMemberValid) return; + + try { + // Erstelle neues Mitglied + const memberData = { + firstName: this.newMember.firstName.trim(), + lastName: this.newMember.lastName.trim(), + birthDate: this.newMember.birthDate || null, + gender: this.newMember.gender + }; + + const response = await apiClient.post(`/clubmembers/set/${this.currentClub}`, { + id: null, // null für neues Mitglied + firstname: memberData.firstName, + lastname: memberData.lastName, + street: '', + city: '', + birthdate: memberData.birthDate, + phone: '', + email: '', + active: true, + testMembership: false, + picsInInternetAllowed: false, + gender: memberData.gender + }); + + if (response.data.result === 'success') { + // Lade die aktualisierte Mitgliederliste + const membersResponse = await apiClient.get(`/clubmembers/get/${this.currentClub}/false`); + this.members = membersResponse.data; + + // Finde das neu erstellte Mitglied (das letzte in der Liste) + const newMember = this.members[this.members.length - 1]; + + // Füge das neue Mitglied als Teilnehmer hinzu + await this.toggleParticipant(newMember.id); + + // Schließe den Dialog + this.closeQuickAddDialog(); + + // Zeige Erfolgsmeldung + alert(`Mitglied "${newMember.firstName} ${newMember.lastName}" wurde erfolgreich erstellt und hinzugefügt!`); + } else { + throw new Error('Fehler beim Erstellen des Mitglieds'); + } + + } catch (error) { + console.error('Fehler beim Erstellen des Mitglieds:', error); + alert('Fehler beim Erstellen des Mitglieds: ' + (error.response?.data?.error || error.message)); + } + }, }, async mounted() { await this.init(); @@ -1856,4 +1989,158 @@ img { .image-icon:hover { opacity: 1; } + +/* Schnell hinzufügen Button */ +.add-participant { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid #dee2e6; +} + +.quick-add-btn { + background-color: #17a2b8; + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 4px; + cursor: pointer; + font-size: 0.9em; + transition: background-color 0.2s ease; + white-space: nowrap; +} + +.quick-add-btn:hover { + background-color: #138496; +} + +.quick-add-btn:active { + background-color: #117a8b; +} + +/* Modal Dialog Styles */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal { + background: white; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + max-width: 500px; + width: 90%; + max-height: 90vh; + overflow-y: auto; + display: flex; + flex-direction: column; +} + +.modal-header { + padding: 1rem 1.5rem; + border-bottom: 1px solid #dee2e6; +} + +.modal-header h3 { + margin: 0; + color: #495057; +} + +.modal-body { + padding: 1.5rem; + flex: 1; + display: flex; + flex-direction: column; +} + + +.modal-body .form-row { + display: flex !important; + gap: 1rem; + margin-bottom: 1rem; + flex-wrap: nowrap; +} + +.modal-body .form-row .form-group { + flex: 1; + margin-bottom: 0; + min-width: 0; +} + +.modal-body .form-row:last-child { + justify-content: flex-end; + gap: 0.5rem; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid #dee2e6; + flex-wrap: nowrap; +} + +.form-group { + margin-bottom: 1rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: #495057; +} + +.form-group input, +.form-group select { + width: 100%; + padding: 0.5rem; + border: 1px solid #ced4da; + border-radius: 4px; + font-size: 1rem; +} + +.form-group input:focus, +.form-group select:focus { + outline: none; + border-color: #80bdff; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} + +.modal .btn-secondary { + background-color: #6c757d !important; + color: white !important; + border: none !important; + padding: 0.5rem 1rem !important; + border-radius: 4px !important; + cursor: pointer !important; + font-size: 0.9rem !important; +} + +.modal .btn-secondary:hover { + background-color: #5a6268 !important; +} + +.modal .btn-primary { + background-color: #007bff !important; + color: white !important; + border: none !important; + padding: 0.5rem 1rem !important; + border-radius: 4px !important; + cursor: pointer !important; + font-size: 0.9rem !important; +} + +.modal .btn-primary:hover { + background-color: #0056b3 !important; +} + +.modal .btn-primary:disabled { + background-color: #6c757d !important; + cursor: not-allowed !important; + opacity: 0.6 !important; +}