refactor(settings): restructure sidebar and move danger zone to its own tab

Drop the Algemeen tab together with the Organisatie subheader — organisatie-
gegevens verhuizen naar /organisation. Voeg een GEVAARLIJK-subheader toe met
een Gevaarlijke acties tab, die de bestaande platform-beheerder-notitie bevat
(self-delete blijft buiten scope). Legacy ?tab=algemeen/general redirects
door naar /organisation; default tab valt terug op Crowd Types.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-17 10:27:45 +02:00
parent 671e0c9889
commit 80f0b535f5
4 changed files with 55 additions and 335 deletions

View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import { useOrganisationStore } from '@/stores/useOrganisationStore'
import SettingsGeneral from '@/components/organisation/settings/SettingsGeneral.vue'
import SettingsCrowdTypes from '@/components/organisation/settings/SettingsCrowdTypes.vue'
import SettingsTags from '@/components/organisation/settings/SettingsTags.vue'
import SettingsRegistrationFields from '@/components/organisation/settings/SettingsRegistrationFields.vue'
import SettingsEmailBranding from '@/components/organisation/settings/SettingsEmailBranding.vue'
import SettingsEmailTemplates from '@/components/organisation/settings/SettingsEmailTemplates.vue'
import SettingsEmailLog from '@/components/organisation/settings/SettingsEmailLog.vue'
import DangerZoneTab from '@/components/organisation/settings/DangerZoneTab.vue'
const route = useRoute()
const router = useRouter()
@@ -26,12 +26,6 @@ interface SettingsGroup {
}
const settingsGroups: SettingsGroup[] = [
{
label: 'Organisatie',
items: [
{ icon: 'tabler-building', title: 'Algemeen', key: 'general' },
],
},
{
label: 'Configuratie',
items: [
@@ -53,14 +47,34 @@ const settingsGroups: SettingsGroup[] = [
{ icon: 'tabler-mail-forward', title: 'Verzendlog', key: 'email-log' },
],
},
{
label: 'Gevaarlijk',
items: [
{ icon: 'tabler-alert-triangle', title: 'Gevaarlijke acties', key: 'danger-zone' },
],
},
]
const allKeys = settingsGroups.flatMap(g => g.items.map(i => i.key))
const defaultKey = 'crowd-types'
const legacyGeneralKeys = ['general', 'algemeen', 'gevaarlijke-acties']
onMounted(() => {
const tab = route.query.tab as string | undefined
if (tab === 'general' || tab === 'algemeen') {
router.replace({ path: '/organisation' })
}
else if (tab === 'gevaarlijke-acties') {
router.replace({ query: { tab: 'danger-zone' } })
}
})
const activeKey = computed({
get: () => {
const tab = route.query.tab as string
return allKeys.includes(tab) ? tab : 'general'
const tab = route.query.tab as string | undefined
if (!tab || legacyGeneralKeys.includes(tab))
return defaultKey
return allKeys.includes(tab) ? tab : defaultKey
},
set: (key: string) => {
router.replace({ query: { tab: key } })
@@ -68,16 +82,16 @@ const activeKey = computed({
})
const componentMap: Record<string, Component> = {
'general': SettingsGeneral,
'crowd-types': SettingsCrowdTypes,
'tags': SettingsTags,
'registration-fields': SettingsRegistrationFields,
'email-branding': SettingsEmailBranding,
'email-templates': SettingsEmailTemplates,
'email-log': SettingsEmailLog,
'danger-zone': DangerZoneTab,
}
const activeComponent = computed(() => componentMap[activeKey.value] ?? SettingsGeneral)
const activeComponent = computed(() => componentMap[activeKey.value] ?? SettingsCrowdTypes)
</script>
<template>