68 lines
3.0 KiB
Vue
68 lines
3.0 KiB
Vue
<script setup>
|
||
const { $api } = useNuxtApp()
|
||
const auth = useAuthStore()
|
||
const events = ref([])
|
||
const loading = ref(true)
|
||
const saving = ref(false)
|
||
const error = ref('')
|
||
const success = ref('')
|
||
let generation = 0
|
||
watch(() => auth.activeTenant, async () => {
|
||
const current = ++generation
|
||
events.value = []
|
||
loading.value = true
|
||
error.value = ''
|
||
success.value = ''
|
||
try {
|
||
const result = await $api('/api/notifications/preferences')
|
||
if (current === generation) events.value = result.events
|
||
} catch (err) {
|
||
if (current === generation) error.value = err?.data?.error || err.message || 'Einstellungen konnten nicht geladen werden.'
|
||
} finally {
|
||
if (current === generation) loading.value = false
|
||
}
|
||
}, { immediate: true })
|
||
async function save() {
|
||
const current = generation
|
||
saving.value = true
|
||
error.value = ''
|
||
success.value = ''
|
||
try {
|
||
await $api('/api/notifications/preferences', { method: 'PUT', body: events.value.flatMap(event =>
|
||
Object.entries(event.channels).map(([channel, enabled]) => ({ eventType: event.eventKey, channel, enabled }))) })
|
||
if (current === generation) success.value = 'Einstellungen gespeichert.'
|
||
} catch (err) {
|
||
if (current === generation) error.value = err?.data?.error || err.message || 'Speichern fehlgeschlagen.'
|
||
} finally { saving.value = false }
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="space-y-4">
|
||
<h2 class="text-lg font-semibold">Meine Benachrichtigungen</h2>
|
||
<p>Diese Einstellungen gelten nur für dein Profil im aktuellen Mandanten {{ auth.activeTenantData?.name || '' }}. Für andere Mandanten wechsle zuerst das Profil.</p>
|
||
<p class="text-sm text-gray-500">E-Mail geht an deine Konto-Adresse. Push erreicht deine registrierten Geräte und Browser. Testnachrichten bleiben unabhängig davon möglich.</p>
|
||
<p v-if="loading" role="status">Einstellungen werden geladen …</p>
|
||
<p v-if="error" role="alert" class="text-red-600">{{ error }}</p>
|
||
<p v-if="success" role="status" class="text-green-600">{{ success }}</p>
|
||
<template v-if="!loading && events.length">
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-left">
|
||
<thead><tr><th class="p-2">Auslöser</th><th class="p-2">E-Mail</th><th class="p-2">Push</th></tr></thead>
|
||
<tbody>
|
||
<tr v-for="event in events" :key="event.eventKey" class="border-t border-gray-200">
|
||
<td class="p-2"><strong>{{ event.displayName }}</strong><p class="text-sm text-gray-500">{{ event.description }}</p></td>
|
||
<td v-for="channel in ['email', 'push']" :key="channel" class="p-2">
|
||
<input v-if="channel in event.channels" v-model="event.channels[channel]" type="checkbox" :disabled="saving"
|
||
:aria-label="`${event.displayName}: ${channel === 'email' ? 'E-Mail' : 'Push'}`" class="h-5 w-5" />
|
||
<span v-else>–</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<UButton :loading="saving" :disabled="saving" @click="save">Speichern</UButton>
|
||
</template>
|
||
</section>
|
||
</template>
|