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

Add quick deactivate member functionality and update routes and UI

Browse Source 
Implemented a new quickDeactivateMember function in MemberService to handle member deactivation. Updated member routes to include a new endpoint for quick deactivation. Enhanced the MembersView component to support quick deactivation actions with updated UI elements, improving user experience for managing member statuses.
This commit is contained in:
Torsten Schulz (local)
2025-11-06 14:46:16 +01:00
parent f1a29e4111
commit f6b8388819
4 changed files with 94 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -161,15 +161,22 @@
<span v-else>-</span>
</td>
<td>
<div class="action-buttons-row">
<button v-if="member.testMembership" @click.stop="quickRemoveTestMembership(member)" class="btn-quick-action" title="Keine Testmitgliedschaft mehr">
Keine Testmitgliedschaft
</button>
<button v-if="!member.memberFormHandedOver" @click.stop="quickMarkFormHandedOver(member)" class="btn-quick-action" title="Mitgliedsformular ausgehändigt">
Formular ausgehändigt
</button>
<button @click.stop="openNotesModal(member)">Notizen</button>
<button @click.stop="openActivitiesModal(member)" class="btn-activities">Übungen</button>
<div class="action-icons-row">
<span v-if="member.testMembership" @click.stop="quickRemoveTestMembership(member)" class="action-icon" title="Keine Testmitgliedschaft mehr">
✅
</span>
<span v-if="member.testMembership && !member.memberFormHandedOver" @click.stop="quickMarkFormHandedOver(member)" class="action-icon" title="Mitgliedsformular ausgehändigt">
📄
</span>
<span v-if="member.active" @click.stop="quickDeactivateMember(member)" class="action-icon action-icon-deactivate" title="Mitglied deaktivieren">
⛔
</span>
<span @click.stop="openNotesModal(member)" class="action-icon" title="Notizen">
📝
</span>
<span @click.stop="openActivitiesModal(member)" class="action-icon" title="Übungen">
🏃
</span>
</div>
</td>
</tr>
@@ -496,6 +503,26 @@ export default {
this.showInfo('Fehler', errorMessage, '', 'error');
}
},
async quickDeactivateMember(member) {
if (!confirm(`Möchten Sie "${member.firstName} ${member.lastName}" wirklich deaktivieren?`)) {
return;
}
try {
const response = await apiClient.post(`/clubmembers/quick-deactivate/${this.currentClub}/${member.id}`);
if (response.data.success) {
member.active = false;
this.showInfo('Erfolg', response.data.message || 'Mitglied deaktiviert', '', 'success');
} else {
this.showInfo('Fehler', response.data.error || 'Fehler beim Deaktivieren des Mitglieds', '', 'error');
}
} catch (error) {
console.error('Fehler beim Deaktivieren des Mitglieds:', error);
const errorMessage = error.response?.data?.error || error.message || 'Fehler beim Deaktivieren des Mitglieds';
this.showInfo('Fehler', errorMessage, '', 'error');
}
},
toggleNewMember() {
this.memberFormIsOpen = !this.memberFormIsOpen;
},
@@ -1272,28 +1299,32 @@ table td {
background-color: #138496;
}
.action-buttons-row {
.action-icons-row {
display: flex;
gap: 0.5rem;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
}
.btn-quick-action {
background-color: #ffc107;
color: #000;
border: none;
padding: 0.4rem 0.8rem;
border-radius: 4px;
.action-icon {
font-size: 1.2em;
cursor: pointer;
font-size: 0.85em;
font-weight: 500;
transition: background-color 0.2s ease;
white-space: nowrap;
transition: transform 0.2s ease, opacity 0.2s ease;
display: inline-block;
line-height: 1;
}
.btn-quick-action:hover {
background-color: #e0a800;
.action-icon:hover {
transform: scale(1.2);
opacity: 0.8;
}
.action-icon-deactivate {
filter: grayscale(0.3);
}
.action-icon-deactivate:hover {
filter: grayscale(0);
}
.warning-icon {