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

Implement toggle functionality for Mannschaftsspieler status in Mitgliederbereich. Add button for editing status and update local state upon toggling. Enhance API response handling to include isMannschaftsspieler attribute for user data retrieval.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-12-19 10:14:41 +01:00
parent 5a85c3d31a
commit 6b24ac0071
3 changed files with 174 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
pages/mitgliederbereich/mitglieder.vue
View File

@@ -81,13 +81,30 @@
<span v-else class="text-sm text-gray-400">Nur für Vorstand</span>
</td>
<td class="px-4 py-3 whitespace-nowrap">
<span
v-if="member.isMannschaftsspieler"
class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full"
<button
v-if="canEdit"
@click="toggleMannschaftsspieler(member)"
:class="[
'px-2 py-1 text-xs font-medium rounded-full transition-colors',
member.isMannschaftsspieler
? 'bg-blue-100 text-blue-800 hover:bg-blue-200'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
]"
title="Klicken zum Umschalten"
>
Ja
{{ member.isMannschaftsspieler ? 'Ja' : 'Nein' }}
</button>
<span
v-else
:class="[
'px-2 py-1 text-xs font-medium rounded-full',
member.isMannschaftsspieler
? 'bg-blue-100 text-blue-800'
: 'bg-gray-100 text-gray-600'
]"
>
{{ member.isMannschaftsspieler ? 'Ja' : 'Nein' }}
</span>
<span v-else class="text-sm text-gray-400">-</span>
</td>
<td class="px-4 py-3 whitespace-nowrap">
<div class="flex items-center space-x-2">
@@ -163,11 +180,29 @@
>
Aus Login-System
</span>
<span
v-if="member.isMannschaftsspieler"
class="ml-2 px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full"
<button
v-if="canEdit"
@click="toggleMannschaftsspieler(member)"
:class="[
'ml-2 px-2 py-1 text-xs font-medium rounded-full transition-colors',
member.isMannschaftsspieler
? 'bg-blue-100 text-blue-800 hover:bg-blue-200'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
]"
title="Klicken zum Umschalten"
>
Mannschaftsspieler
Mannschaftsspieler: {{ member.isMannschaftsspieler ? 'Ja' : 'Nein' }}
</button>
<span
v-else
:class="[
'ml-2 px-2 py-1 text-xs font-medium rounded-full',
member.isMannschaftsspieler
? 'bg-blue-100 text-blue-800'
: 'bg-gray-100 text-gray-600'
]"
>
Mannschaftsspieler: {{ member.isMannschaftsspieler ? 'Ja' : 'Nein' }}
</span>
</div>
@@ -618,6 +653,27 @@ const saveMember = async () => {
}
}
const toggleMannschaftsspieler = async (member) => {
try {
const response = await $fetch('/api/members/toggle-mannschaftsspieler', {
method: 'POST',
body: { memberId: member.id }
})
// Update local state immediately
member.isMannschaftsspieler = response.isMannschaftsspieler
// Reload to ensure consistency
await loadMembers()
} catch (error) {
console.error('Fehler beim Umschalten des Mannschaftsspieler-Status:', error)
const errorMsg = error.data?.message || error.message || 'Fehler beim Umschalten des Status.'
if (window.showErrorModal) {
window.showErrorModal('Fehler', errorMsg)
}
}
}
const confirmDelete = async (member) => {
window.showConfirmModal('Mitglied löschen', `Möchten Sie "${member.name}" wirklich löschen?`, async () => {
try {