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

Refactor error and confirmation handling in membership application management; replace alerts with modal dialogs for improved user experience. Update application status to 'approved' for a new member and add corresponding data to JSON files.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-23 15:32:20 +02:00
parent 9524a29b67
commit 6763b15487
13 changed files with 321 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app.vue
View File

@@ -5,10 +5,12 @@
<NuxtPage />
</main>
<Footer />
<ModalDialog />
</div>
</template>
<script setup>
import Navigation from '~/components/Navigation.vue'
import Footer from '~/components/Footer.vue'
import ModalDialog from '~/components/ModalDialog.vue'
</script>

165
components/ModalDialog.vue Normal file
View File

@@ -0,0 +1,165 @@
<template>
<!-- Success Modal -->
<div
v-if="showSuccess"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
@click.self="closeSuccess"
>
<div class="bg-white rounded-lg max-w-md w-full p-6">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 w-10 h-10 mx-auto bg-green-100 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
<div class="text-center">
<h3 class="text-lg font-medium text-gray-900 mb-2">{{ successTitle }}</h3>
<p class="text-sm text-gray-600 mb-6">{{ successMessage }}</p>
<div class="flex justify-center">
<button
@click="closeSuccess"
class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors"
>
OK
</button>
</div>
</div>
</div>
</div>
<!-- Error Modal -->
<div
v-if="showError"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
@click.self="closeError"
>
<div class="bg-white rounded-lg max-w-md w-full p-6">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 w-10 h-10 mx-auto bg-red-100 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
</div>
<div class="text-center">
<h3 class="text-lg font-medium text-gray-900 mb-2">{{ errorTitle }}</h3>
<p class="text-sm text-gray-600 mb-6">{{ errorMessage }}</p>
<div class="flex justify-center">
<button
@click="closeError"
class="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors"
>
OK
</button>
</div>
</div>
</div>
</div>
<!-- Confirm Modal -->
<div
v-if="showConfirm"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
@click.self="closeConfirm"
>
<div class="bg-white rounded-lg max-w-md w-full p-6">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 w-10 h-10 mx-auto bg-yellow-100 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
</svg>
</div>
</div>
<div class="text-center">
<h3 class="text-lg font-medium text-gray-900 mb-2">{{ confirmTitle }}</h3>
<p class="text-sm text-gray-600 mb-6">{{ confirmMessage }}</p>
<div class="flex space-x-3 justify-center">
<button
@click="closeConfirm"
class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
>
Abbrechen
</button>
<button
@click="executeConfirm"
class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors"
>
Bestätigen
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
// Modal States
const showSuccess = ref(false)
const showError = ref(false)
const showConfirm = ref(false)
// Modal Content
const successTitle = ref('')
const successMessage = ref('')
const errorTitle = ref('')
const errorMessage = ref('')
const confirmTitle = ref('')
const confirmMessage = ref('')
const confirmAction = ref(null)
// Modal Functions
const showSuccessModal = (title, message) => {
successTitle.value = title
successMessage.value = message
showSuccess.value = true
}
const showErrorModal = (title, message) => {
errorTitle.value = title
errorMessage.value = message
showError.value = true
}
const showConfirmModal = (title, message, action) => {
confirmTitle.value = title
confirmMessage.value = message
confirmAction.value = action
showConfirm.value = true
}
const closeSuccess = () => {
showSuccess.value = false
}
const closeError = () => {
showError.value = false
}
const closeConfirm = () => {
showConfirm.value = false
confirmAction.value = null
}
const executeConfirm = async () => {
showConfirm.value = false
if (confirmAction.value) {
await confirmAction.value()
}
confirmAction.value = null
}
// Expose functions globally
provide('showSuccessModal', showSuccessModal)
provide('showErrorModal', showErrorModal)
provide('showConfirmModal', showConfirmModal)
// Also expose on window for vanilla JS usage
if (typeof window !== 'undefined') {
window.showSuccessModal = showSuccessModal
window.showErrorModal = showErrorModal
window.showConfirmModal = showConfirmModal
}
</script>

60
pages/cms/benutzer.vue
View File

@@ -225,24 +225,20 @@ const approveUser = async (user) => {
}
const rejectUser = async (user) => {
if (!confirm(`Möchten Sie die Registrierung von ${user.name} wirklich ablehnen?`)) {
return
}
window.showConfirmModal('Registrierung ablehnen', `Möchten Sie die Registrierung von ${user.name} wirklich ablehnen?`, async () => {
try {
await $fetch('/api/cms/users/reject', {
method: 'POST',
body: { userId: user.id }
})
try {
await $fetch('/api/cms/users/reject', {
method: 'POST',
body: { userId: user.id }
})
successMessage.value = `Registrierung von ${user.name} wurde abgelehnt`
setTimeout(() => successMessage.value = '', 3000)
await loadUsers()
} catch (error) {
errorMessage.value = 'Fehler beim Ablehnen der Registrierung'
setTimeout(() => errorMessage.value = '', 3000)
}
await loadUsers()
window.showSuccessModal('Erfolg', `Registrierung von ${user.name} wurde abgelehnt`)
} catch (error) {
console.error('Fehler beim Ablehnen:', error)
window.showErrorModal('Fehler', 'Fehler beim Ablehnen der Registrierung')
}
})
}
const updateUserRole = async (user) => {
@@ -265,24 +261,20 @@ const updateUserRole = async (user) => {
}
const deactivateUser = async (user) => {
if (!confirm(`Möchten Sie ${user.name} wirklich deaktivieren?`)) {
return
}
window.showConfirmModal('Benutzer deaktivieren', `Möchten Sie ${user.name} wirklich deaktivieren?`, async () => {
try {
await $fetch('/api/cms/users/deactivate', {
method: 'POST',
body: { userId: user.id }
})
try {
await $fetch('/api/cms/users/deactivate', {
method: 'POST',
body: { userId: user.id }
})
successMessage.value = `Benutzer ${user.name} wurde deaktiviert`
setTimeout(() => successMessage.value = '', 3000)
await loadUsers()
} catch (error) {
errorMessage.value = 'Fehler beim Deaktivieren des Benutzers'
setTimeout(() => errorMessage.value = '', 3000)
}
await loadUsers()
window.showSuccessModal('Erfolg', `Benutzer ${user.name} wurde deaktiviert`)
} catch (error) {
console.error('Fehler beim Deaktivieren:', error)
window.showErrorModal('Fehler', 'Fehler beim Deaktivieren des Benutzers')
}
})
}
onMounted(async () => {

22
pages/cms/mitgliedschaftsantraege.vue
View File

@@ -238,7 +238,7 @@ const loadApplications = async () => {
applications.value = response
} catch (error) {
console.error('Fehler beim Laden der Anträge:', error)
alert('Fehler beim Laden der Anträge')
window.showErrorModal('Fehler', 'Fehler beim Laden der Anträge')
} finally {
loading.value = false
}
@@ -257,35 +257,35 @@ const closeModal = () => {
}
const approveApplication = async (id) => {
if (confirm('Antrag genehmigen?')) {
window.showConfirmModal('Bestätigung erforderlich', 'Möchten Sie diesen Antrag wirklich genehmigen?', async () => {
try {
await $fetch('/api/membership/update-status', {
method: 'PUT',
body: { id, status: 'approved' }
})
await loadApplications()
alert('Antrag wurde genehmigt')
window.showSuccessModal('Erfolg', 'Antrag wurde erfolgreich genehmigt')
} catch (error) {
console.error('Fehler beim Genehmigen:', error)
alert('Fehler beim Genehmigen des Antrags')
window.showErrorModal('Fehler', 'Fehler beim Genehmigen des Antrags')
}
}
})
}
const rejectApplication = async (id) => {
if (confirm('Antrag ablehnen?')) {
window.showConfirmModal('Bestätigung erforderlich', 'Möchten Sie diesen Antrag wirklich ablehnen?', async () => {
try {
await $fetch('/api/membership/update-status', {
method: 'PUT',
body: { id, status: 'rejected' }
})
await loadApplications()
alert('Antrag wurde abgelehnt')
window.showSuccessModal('Erfolg', 'Antrag wurde erfolgreich abgelehnt')
} catch (error) {
console.error('Fehler beim Ablehnen:', error)
alert('Fehler beim Ablehnen des Antrags')
window.showErrorModal('Fehler', 'Fehler beim Ablehnen des Antrags')
}
}
})
}
const downloadPDF = async (id) => {
@@ -308,9 +308,11 @@ const downloadPDF = async (id) => {
a.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(a)
window.showSuccessModal('Erfolg', 'PDF wurde erfolgreich heruntergeladen')
} catch (error) {
console.error('Fehler beim Herunterladen:', error)
alert('Fehler beim Herunterladen des PDFs')
window.showErrorModal('Fehler', 'Fehler beim Herunterladen des PDFs')
}
}

36
pages/cms/termine.vue
View File

@@ -238,26 +238,26 @@ const saveTermin = async () => {
}
const confirmDelete = async (termin) => {
if (!confirm(`Möchten Sie den Termin "${termin.titel}" wirklich löschen?`)) {
return
}
window.showConfirmModal('Termin löschen', `Möchten Sie den Termin "${termin.titel}" wirklich löschen?`, async () => {
try {
const params = new URLSearchParams({
datum: termin.datum,
titel: termin.titel,
beschreibung: termin.beschreibung || '',
kategorie: termin.kategorie || 'Sonstiges'
})
try {
const params = new URLSearchParams({
datum: termin.datum,
titel: termin.titel,
beschreibung: termin.beschreibung || '',
kategorie: termin.kategorie || 'Sonstiges'
})
await $fetch(`/api/termine-manage?${params.toString()}`, {
method: 'DELETE'
})
await $fetch(`/api/termine-manage?${params.toString()}`, {
method: 'DELETE'
})
await loadTermine()
} catch (error) {
alert('Fehler beim Löschen des Termins.')
}
await loadTermine()
window.showSuccessModal('Erfolg', 'Termin wurde erfolgreich gelöscht')
} catch (error) {
console.error('Fehler beim Löschen:', error)
window.showErrorModal('Fehler', 'Fehler beim Löschen des Termins')
}
})
}
const formatDate = (dateString) => {

26
pages/mitgliederbereich/mitglieder.vue
View File

@@ -407,20 +407,20 @@ const saveMember = async () => {
}
const confirmDelete = async (member) => {
if (!confirm(`Möchten Sie "${member.name}" wirklich löschen?`)) {
return
}
window.showConfirmModal('Mitglied löschen', `Möchten Sie "${member.name}" wirklich löschen?`, async () => {
try {
await $fetch('/api/members', {
method: 'DELETE',
body: { id: member.id }
})
try {
await $fetch('/api/members', {
method: 'DELETE',
body: { id: member.id }
})
await loadMembers()
} catch (error) {
alert('Fehler beim Löschen des Mitglieds.')
}
await loadMembers()
window.showSuccessModal('Erfolg', 'Mitglied wurde erfolgreich gelöscht')
} catch (error) {
console.error('Fehler beim Löschen:', error)
window.showErrorModal('Fehler', 'Fehler beim Löschen des Mitglieds')
}
})
}
const formatDate = (dateString) => {

35
pages/mitgliederbereich/news.vue
View File

@@ -264,26 +264,25 @@ const confirmDelete = async (item) => {
console.log('Delete item:', item)
console.log('Delete item.id:', item.id)
if (!confirm(`Möchten Sie die News "${item.title}" wirklich löschen?`)) {
return
}
window.showConfirmModal('News löschen', `Möchten Sie die News "${item.title}" wirklich löschen?`, async () => {
if (!item.id) {
window.showErrorModal('Fehler', 'News-ID fehlt!')
return
}
if (!item.id) {
alert('Fehler: News-ID fehlt!')
return
}
try {
console.log('Deleting with ID:', item.id)
await $fetch(`/api/news?id=${encodeURIComponent(item.id)}`, {
method: 'DELETE'
})
try {
console.log('Deleting with ID:', item.id)
await $fetch(`/api/news?id=${encodeURIComponent(item.id)}`, {
method: 'DELETE'
})
await loadNews()
} catch (error) {
console.error('Delete error:', error)
alert('Fehler beim Löschen der News: ' + (error.data?.message || error.message))
}
await loadNews()
window.showSuccessModal('Erfolg', 'News wurde erfolgreich gelöscht')
} catch (error) {
console.error('Delete error:', error)
window.showErrorModal('Fehler', 'Fehler beim Löschen der News: ' + (error.data?.message || error.message))
}
})
}
const formatDate = (dateString) => {

7
pages/mitgliedschaft.vue
View File

@@ -482,13 +482,14 @@ onMounted(() => {
window.URL.revokeObjectURL(url)
document.body.removeChild(a)
alert('Beitrittsformular erfolgreich erstellt und heruntergeladen!')
// Globale Modal-Funktionen verwenden
window.showSuccessModal('Beitrittsformular erfolgreich erstellt!', 'Das Formular wurde heruntergeladen und Ihre Daten wurden an den Vereinsvorstand weitergeleitet.')
} else {
alert('Fehler beim Erstellen des Formulars: ' + (result.error || 'Unbekannter Fehler'))
window.showErrorModal('Fehler beim Erstellen des Formulars', result.error || 'Unbekannter Fehler')
}
} catch (error) {
console.error('Fehler:', error)
alert('Fehler beim Senden des Formulars: ' + error.message)
window.showErrorModal('Fehler beim Senden des Formulars', error.message)
} finally {
submitBtn.disabled = false
submitBtn.textContent = 'Beitrittsformular erstellen'

11
server/data/members.json
View File

@@ -27,5 +27,16 @@
"source": "membership_application",
"applicationId": "1761225361334",
"id": "c209cb36-3aca-4ab2-b463-061e41f97d6d"
},
{
"firstName": "Final",
"lastName": "Test",
"email": "final@test.de",
"phone": "",
"address": "Finalstr 1, 60437 Frankfurt",
"notes": "Mitgliedschaftsart: aktiv | Genehmigt: 23.10.2025",
"source": "membership_application",
"applicationId": "1761225630365",
"id": "952c3d3f-c73a-43ed-ae21-76387948c030"
}
]

5
server/data/membership-applications/1761225630365.json
View File

@@ -1,11 +1,12 @@
{
"id": "1761225630365",
"timestamp": "2025-10-23T13:20:30.435Z",
"status": "pending",
"status": "approved",
"metadata": {
"mitgliedschaftsart": "aktiv",
"isVolljaehrig": true,
"pdfGenerated": true
},
"encryptedData": "7/HlHstjzGZ1wJtrtCxa7B3gfqBxm19LkzNAItSM9rMGDvRoiQNrHIpxdlUSTOTkeYwfW3cvKhrBsXHZxU4P64HdFzVdK255kgN1Yqy2ZqS6oZ6mp8xwHVIUypfbwEZI22gWbxue9Y+29rn9VYSBuKjtZd2pi/8Qjohps4wchzXdP5fiRJxx3vwDHPQ08i+qAcxatIwYLt4Iu46pFSAEQkUhDbdki7OWgzeU4YW8L9UufPMMv01m2rG48GnnM/GglIkz2VchqQsNqsDmm35OUmg6LoETGs6TSgBiLr0LV+ZFO29D9W7WIP+hZDVmhfii8PNcAGvvKpJvpJSbNeswaSF4zV7k3+gxkcGZBy+hG+ta3pXhzzuaGqQUvyg+jx5YkMTVRh0kcQlmNME8/7UW5vrC+Qe/pU5K2t0URwxxHTYnLyTk0FLMrs6nCtaSSoDC+t26j8GarAGGF9AvKDaVxkFq4B9B0uw6mQPhETX8IeAynihKkk/ZMzIXB0LaO+hxW2YEKrKfFMSAVcFrVOjVJtz4k+5ZTRlKnjkunl2P45h+Fjt69OQNffg2F0Fa1Or9nrPOrbake7g+NEtAgohdQd7qddvpSBfJC3vDQv5TG2CONFIoSBHnpR3io7uuiI6Ct/mu/LBLfDa9d0/TjkOWdDVYnb+V+beh/At+oMUGKI8="
"encryptedData": "7/HlHstjzGZ1wJtrtCxa7B3gfqBxm19LkzNAItSM9rMGDvRoiQNrHIpxdlUSTOTkeYwfW3cvKhrBsXHZxU4P64HdFzVdK255kgN1Yqy2ZqS6oZ6mp8xwHVIUypfbwEZI22gWbxue9Y+29rn9VYSBuKjtZd2pi/8Qjohps4wchzXdP5fiRJxx3vwDHPQ08i+qAcxatIwYLt4Iu46pFSAEQkUhDbdki7OWgzeU4YW8L9UufPMMv01m2rG48GnnM/GglIkz2VchqQsNqsDmm35OUmg6LoETGs6TSgBiLr0LV+ZFO29D9W7WIP+hZDVmhfii8PNcAGvvKpJvpJSbNeswaSF4zV7k3+gxkcGZBy+hG+ta3pXhzzuaGqQUvyg+jx5YkMTVRh0kcQlmNME8/7UW5vrC+Qe/pU5K2t0URwxxHTYnLyTk0FLMrs6nCtaSSoDC+t26j8GarAGGF9AvKDaVxkFq4B9B0uw6mQPhETX8IeAynihKkk/ZMzIXB0LaO+hxW2YEKrKfFMSAVcFrVOjVJtz4k+5ZTRlKnjkunl2P45h+Fjt69OQNffg2F0Fa1Or9nrPOrbake7g+NEtAgohdQd7qddvpSBfJC3vDQv5TG2CONFIoSBHnpR3io7uuiI6Ct/mu/LBLfDa9d0/TjkOWdDVYnb+V+beh/At+oMUGKI8=",
"updatedAt": "2025-10-23T13:23:26.963Z"
}

17
server/data/membership-applications/1761225852269.json Normal file
View File

@@ -0,0 +1,17 @@
{
"id": "1761225852269",
"timestamp": "2025-10-23T13:24:12.319Z",
"status": "pending",
"metadata": {
"mitgliedschaftsart": "aktiv",
"isVolljaehrig": true,
"pdfGenerated": true
},
"personalData": {
"nachname": "A",
"vorname": "B",
"email": "tsschulz@gmx.net",
"telefon_privat": "01795094148",
"telefon_mobil": "0179 5094148"
}
}

15
server/data/membership-applications/1761225990109.json Normal file
View File

@@ -0,0 +1,15 @@
{
"id": "1761225990109",
"timestamp": "2025-10-23T13:26:30.166Z",
"status": "pending",
"metadata": {
"mitgliedschaftsart": "aktiv",
"isVolljaehrig": true,
"pdfGenerated": true
},
"personalData": {
"nachname": "Test",
"vorname": "Modal",
"email": "modal@test.de"
}
}

15
server/data/membership-applications/1761226071296.json Normal file
View File

@@ -0,0 +1,15 @@
{
"id": "1761226071296",
"timestamp": "2025-10-23T13:27:51.339Z",
"status": "pending",
"metadata": {
"mitgliedschaftsart": "aktiv",
"isVolljaehrig": true,
"pdfGenerated": true
},
"personalData": {
"nachname": "Modal",
"vorname": "Global",
"email": "global@modal.de"
}
}