refactor(app): unify settings tab design for tags, templates & crowd types
Move crowd types management to organisation settings as a new tab and align all three settings tabs (Tags, Registration Field Templates, Crowd Types) to the same layout pattern: header with title/subtitle, VDataTable for active items, and a separate inactive section with VList. Also fix the API to return inactive records for person tags and registration field templates so the frontend can display them. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -25,12 +25,14 @@ const { mutate: deleteTemplate, isPending: isDeleting } = useDeleteRegistrationF
|
||||
|
||||
const fieldTypeOptions = Object.entries(FIELD_TYPE_LABELS).map(([value, title]) => ({ title, value }))
|
||||
|
||||
const activeTemplates = computed(() => templates.value?.filter(t => t.is_active) ?? [])
|
||||
const inactiveTemplates = computed(() => templates.value?.filter(t => !t.is_active) ?? [])
|
||||
|
||||
const headers = [
|
||||
{ title: 'Label', key: 'label' },
|
||||
{ title: 'Type', key: 'field_type' },
|
||||
{ title: 'Sectie', key: 'section' },
|
||||
{ title: 'Systeem', key: 'is_system', sortable: false },
|
||||
{ title: 'Status', key: 'is_active', sortable: false },
|
||||
{ title: 'Acties', key: 'actions', sortable: false, align: 'end' as const },
|
||||
]
|
||||
|
||||
@@ -199,29 +201,25 @@ function onDeleteExecute() {
|
||||
})
|
||||
}
|
||||
|
||||
function toggleActive(template: RegistrationFieldTemplate) {
|
||||
if (template.is_system) {
|
||||
// System templates: toggle via DELETE (deactivate) or UPDATE (activate)
|
||||
if (template.is_active) {
|
||||
deleteTemplate(template.id, {
|
||||
onSuccess: () => {
|
||||
successMessage.value = `${template.label} gedeactiveerd`
|
||||
showSuccess.value = true
|
||||
},
|
||||
})
|
||||
}
|
||||
else {
|
||||
updateTemplate(
|
||||
{ id: template.id, is_active: true },
|
||||
{
|
||||
onSuccess: () => {
|
||||
successMessage.value = `${template.label} geactiveerd`
|
||||
showSuccess.value = true
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
function deactivate(template: RegistrationFieldTemplate) {
|
||||
deleteTemplate(template.id, {
|
||||
onSuccess: () => {
|
||||
successMessage.value = `${template.label} gedeactiveerd`
|
||||
showSuccess.value = true
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function activate(template: RegistrationFieldTemplate) {
|
||||
updateTemplate(
|
||||
{ id: template.id, is_active: true },
|
||||
{
|
||||
onSuccess: () => {
|
||||
successMessage.value = `${template.label} geactiveerd`
|
||||
showSuccess.value = true
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -267,11 +265,11 @@ function toggleActive(template: RegistrationFieldTemplate) {
|
||||
</p>
|
||||
</VCard>
|
||||
|
||||
<!-- Data table -->
|
||||
<VCard v-else>
|
||||
<!-- Active templates table -->
|
||||
<VCard v-else-if="activeTemplates.length">
|
||||
<VDataTable
|
||||
:headers="headers"
|
||||
:items="templates"
|
||||
:items="activeTemplates"
|
||||
item-value="id"
|
||||
:items-per-page="-1"
|
||||
hide-default-footer
|
||||
@@ -308,16 +306,6 @@ function toggleActive(template: RegistrationFieldTemplate) {
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<template #item.is_active="{ item }">
|
||||
<VChip
|
||||
:color="item.is_active ? 'success' : 'default'"
|
||||
size="small"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ item.is_active ? 'Actief' : 'Inactief' }}
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<template #item.actions="{ item }">
|
||||
<div class="d-flex justify-end gap-x-1">
|
||||
<VBtn
|
||||
@@ -329,12 +317,12 @@ function toggleActive(template: RegistrationFieldTemplate) {
|
||||
/>
|
||||
<VBtn
|
||||
v-if="item.is_system"
|
||||
:icon="item.is_active ? 'tabler-eye-off' : 'tabler-eye'"
|
||||
icon="tabler-eye-off"
|
||||
variant="text"
|
||||
size="small"
|
||||
:color="item.is_active ? 'warning' : 'success'"
|
||||
:title="item.is_active ? 'Deactiveren' : 'Activeren'"
|
||||
@click="toggleActive(item)"
|
||||
color="warning"
|
||||
title="Deactiveren"
|
||||
@click="deactivate(item)"
|
||||
/>
|
||||
<VBtn
|
||||
v-else
|
||||
@@ -349,6 +337,39 @@ function toggleActive(template: RegistrationFieldTemplate) {
|
||||
</template>
|
||||
</VDataTable>
|
||||
</VCard>
|
||||
|
||||
<!-- Inactive templates -->
|
||||
<template v-if="inactiveTemplates.length">
|
||||
<p class="text-body-2 text-disabled mt-6 mb-2">
|
||||
Inactief
|
||||
</p>
|
||||
<VCard class="opacity-60">
|
||||
<VList lines="one">
|
||||
<VListItem
|
||||
v-for="template in inactiveTemplates"
|
||||
:key="template.id"
|
||||
>
|
||||
<VListItemTitle class="text-disabled">
|
||||
{{ template.label }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
{{ FIELD_TYPE_LABELS[template.field_type] ?? template.field_type }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
size="small"
|
||||
color="success"
|
||||
@click="activate(template)"
|
||||
>
|
||||
Activeren
|
||||
</VBtn>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCard>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- Create / Edit dialog -->
|
||||
|
||||
@@ -57,6 +57,14 @@ const inactiveCrowdTypes = computed(() =>
|
||||
crowdTypes.value?.filter(ct => !ct.is_active) ?? [],
|
||||
)
|
||||
|
||||
const headers = [
|
||||
{ title: 'Naam', key: 'name' },
|
||||
{ title: 'Systeemtype', key: 'system_type' },
|
||||
{ title: 'Icoon', key: 'icon', sortable: false },
|
||||
{ title: 'Kleur', key: 'color', sortable: false },
|
||||
{ title: 'Acties', key: 'actions', sortable: false, align: 'end' as const },
|
||||
]
|
||||
|
||||
const dialogTitle = computed(() =>
|
||||
editingCrowdType.value ? 'Crowd type bewerken' : 'Crowd type aanmaken',
|
||||
)
|
||||
@@ -155,130 +163,139 @@ function activate(ct: CrowdType) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>Crowd types</VCardTitle>
|
||||
<VCardSubtitle>Definieer de deelnemertypes voor je organisatie</VCardSubtitle>
|
||||
<template #append>
|
||||
<div>
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="isLoading"
|
||||
type="card"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-space-between align-center mb-6">
|
||||
<div>
|
||||
<h5 class="text-h5">
|
||||
Crowd types
|
||||
</h5>
|
||||
<p class="text-body-2 text-disabled mb-0">
|
||||
Definieer de deelnemertypes voor je organisatie
|
||||
</p>
|
||||
</div>
|
||||
<VBtn
|
||||
prepend-icon="tabler-plus"
|
||||
@click="openCreateDialog"
|
||||
>
|
||||
Crowd type toevoegen
|
||||
</VBtn>
|
||||
</template>
|
||||
</VCardItem>
|
||||
</div>
|
||||
|
||||
<VCardText>
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="isLoading"
|
||||
type="list-item@3"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<!-- Empty state -->
|
||||
<VAlert
|
||||
v-if="!crowdTypes?.length"
|
||||
type="info"
|
||||
variant="tonal"
|
||||
>
|
||||
<!-- Empty state -->
|
||||
<VCard
|
||||
v-if="!crowdTypes?.length"
|
||||
class="text-center pa-8"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-users-group"
|
||||
size="48"
|
||||
class="mb-4 text-disabled"
|
||||
/>
|
||||
<p class="text-body-1 text-disabled">
|
||||
Nog geen crowd types aangemaakt. Maak er een aan om personen te categoriseren.
|
||||
</VAlert>
|
||||
</p>
|
||||
</VCard>
|
||||
|
||||
<!-- Active crowd types -->
|
||||
<VList
|
||||
v-if="activeCrowdTypes.length"
|
||||
lines="one"
|
||||
<!-- Active crowd types table -->
|
||||
<VCard v-else-if="activeCrowdTypes.length">
|
||||
<VDataTable
|
||||
:headers="headers"
|
||||
:items="activeCrowdTypes"
|
||||
item-value="id"
|
||||
:items-per-page="-1"
|
||||
hide-default-footer
|
||||
hover
|
||||
>
|
||||
<VListItem
|
||||
v-for="ct in activeCrowdTypes"
|
||||
:key="ct.id"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
:color="ct.color"
|
||||
size="32"
|
||||
variant="flat"
|
||||
>
|
||||
<VIcon
|
||||
v-if="ct.icon"
|
||||
:icon="ct.icon"
|
||||
size="18"
|
||||
color="white"
|
||||
/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
<template #item.name="{ item }">
|
||||
<span class="font-weight-medium">{{ item.name }}</span>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>{{ ct.name }}</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
<VChip
|
||||
size="x-small"
|
||||
variant="tonal"
|
||||
class="mt-1"
|
||||
>
|
||||
{{ systemTypeLabels[ct.system_type] ?? ct.system_type }}
|
||||
</VChip>
|
||||
</VListItemSubtitle>
|
||||
<template #item.system_type="{ item }">
|
||||
<VChip
|
||||
size="small"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ systemTypeLabels[item.system_type] ?? item.system_type }}
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<template #item.icon="{ item }">
|
||||
<VIcon
|
||||
v-if="item.icon"
|
||||
:icon="item.icon"
|
||||
size="20"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="text-disabled"
|
||||
>-</span>
|
||||
</template>
|
||||
|
||||
<template #item.color="{ item }">
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<div
|
||||
class="rounded-circle"
|
||||
:style="{ backgroundColor: item.color, width: '20px', height: '20px' }"
|
||||
/>
|
||||
<span class="text-body-2 text-disabled">{{ item.color }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item.actions="{ item }">
|
||||
<div class="d-flex justify-end gap-x-1">
|
||||
<VBtn
|
||||
icon="tabler-edit"
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="openEditDialog(ct)"
|
||||
title="Bewerken"
|
||||
@click="openEditDialog(item)"
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-eye-off"
|
||||
variant="text"
|
||||
size="small"
|
||||
color="warning"
|
||||
@click="deactivate(ct)"
|
||||
title="Deactiveren"
|
||||
@click="deactivate(item)"
|
||||
/>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</div>
|
||||
</template>
|
||||
</VDataTable>
|
||||
</VCard>
|
||||
|
||||
<!-- Inactive crowd types -->
|
||||
<template v-if="inactiveCrowdTypes.length">
|
||||
<VDivider class="my-4" />
|
||||
<p class="text-body-2 text-disabled mb-2">
|
||||
Inactief
|
||||
</p>
|
||||
<VList
|
||||
lines="one"
|
||||
class="opacity-60"
|
||||
>
|
||||
<!-- Inactive crowd types -->
|
||||
<template v-if="inactiveCrowdTypes.length">
|
||||
<p class="text-body-2 text-disabled mt-6 mb-2">
|
||||
Inactief
|
||||
</p>
|
||||
<VCard class="opacity-60">
|
||||
<VList lines="one">
|
||||
<VListItem
|
||||
v-for="ct in inactiveCrowdTypes"
|
||||
:key="ct.id"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
:color="ct.color"
|
||||
size="32"
|
||||
variant="flat"
|
||||
>
|
||||
<VIcon
|
||||
v-if="ct.icon"
|
||||
:icon="ct.icon"
|
||||
size="18"
|
||||
color="white"
|
||||
/>
|
||||
</VAvatar>
|
||||
<VIcon
|
||||
v-if="ct.icon"
|
||||
:icon="ct.icon"
|
||||
size="20"
|
||||
class="me-2"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="text-disabled">
|
||||
{{ ct.name }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
<VChip
|
||||
size="x-small"
|
||||
variant="tonal"
|
||||
class="mt-1"
|
||||
>
|
||||
{{ systemTypeLabels[ct.system_type] ?? ct.system_type }}
|
||||
</VChip>
|
||||
{{ systemTypeLabels[ct.system_type] ?? ct.system_type }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
@@ -293,101 +310,101 @@ function activate(ct: CrowdType) {
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</template>
|
||||
</VCard>
|
||||
</template>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<!-- Create / Edit dialog -->
|
||||
<VDialog
|
||||
v-model="isDialogOpen"
|
||||
max-width="500"
|
||||
>
|
||||
<VCard :title="dialogTitle">
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.name"
|
||||
label="Naam"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
autofocus
|
||||
autocomplete="one-time-code"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="form.system_type"
|
||||
label="Systeemtype"
|
||||
:items="systemTypeOptions"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.system_type"
|
||||
:disabled="!!editingCrowdType"
|
||||
hint="Bepaalt hoe dit type wordt gebruikt in het systeem"
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<label class="text-body-2 mb-1 d-block">Kleur</label>
|
||||
<input
|
||||
v-model="form.color"
|
||||
type="color"
|
||||
class="w-100 rounded cursor-pointer"
|
||||
style="block-size: 40px; border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));"
|
||||
<!-- Create / Edit dialog -->
|
||||
<VDialog
|
||||
v-model="isDialogOpen"
|
||||
max-width="500"
|
||||
>
|
||||
<VCard :title="dialogTitle">
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.name"
|
||||
label="Naam"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
autofocus
|
||||
autocomplete="one-time-code"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="form.system_type"
|
||||
label="Systeemtype"
|
||||
:items="systemTypeOptions"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.system_type"
|
||||
:disabled="!!editingCrowdType"
|
||||
hint="Bepaalt hoe dit type wordt gebruikt in het systeem"
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<p
|
||||
v-if="errors.color"
|
||||
class="text-error text-caption mt-1"
|
||||
<label class="text-body-2 mb-1 d-block">Kleur</label>
|
||||
<input
|
||||
v-model="form.color"
|
||||
type="color"
|
||||
class="w-100 rounded cursor-pointer"
|
||||
style="block-size: 40px; border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));"
|
||||
>
|
||||
<p
|
||||
v-if="errors.color"
|
||||
class="text-error text-caption mt-1"
|
||||
>
|
||||
{{ errors.color }}
|
||||
</p>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
{{ errors.color }}
|
||||
</p>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
<AppTextField
|
||||
v-model="form.icon"
|
||||
label="Icoon"
|
||||
placeholder="tabler-users"
|
||||
:error-messages="errors.icon"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="isDialogOpen = false"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.icon"
|
||||
label="Icoon"
|
||||
placeholder="tabler-users"
|
||||
:error-messages="errors.icon"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="isDialogOpen = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
type="submit"
|
||||
color="primary"
|
||||
:loading="isSaving"
|
||||
>
|
||||
Opslaan
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VForm>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
type="submit"
|
||||
color="primary"
|
||||
:loading="isSaving"
|
||||
>
|
||||
Opslaan
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VForm>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
{{ successMessage }}
|
||||
</VSnackbar>
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
{{ successMessage }}
|
||||
</VSnackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import { useMyOrganisation } from '@/composables/api/useOrganisations'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import EditOrganisationDialog from '@/components/organisations/EditOrganisationDialog.vue'
|
||||
import CrowdTypesManager from '@/components/organisations/CrowdTypesManager.vue'
|
||||
import type { Organisation } from '@/types/organisation'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
@@ -124,13 +123,6 @@ function formatDate(iso: string) {
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- Crowd Types -->
|
||||
<CrowdTypesManager
|
||||
v-if="isOrgAdmin"
|
||||
:org-id="organisation.id"
|
||||
class="mt-6"
|
||||
/>
|
||||
|
||||
<EditOrganisationDialog
|
||||
v-model="isEditDialogOpen"
|
||||
:organisation="organisation"
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { useOrganisationStore } from '@/stores/useOrganisationStore'
|
||||
import PersonTagsTab from '@/components/organisation/PersonTagsTab.vue'
|
||||
import RegistrationFieldTemplatesTab from '@/components/organisation/RegistrationFieldTemplatesTab.vue'
|
||||
import CrowdTypesManager from '@/components/organisations/CrowdTypesManager.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -12,6 +13,7 @@ const orgId = computed(() => orgStore.activeOrganisationId ?? '')
|
||||
const tabs = [
|
||||
{ value: 'tags', label: 'Tags & Vaardigheden', icon: 'tabler-tag' },
|
||||
{ value: 'templates', label: 'Registratieveld-templates', icon: 'tabler-forms' },
|
||||
{ value: 'crowd-types', label: 'Crowd types', icon: 'tabler-users-group' },
|
||||
]
|
||||
|
||||
const activeTab = computed({
|
||||
@@ -62,6 +64,9 @@ const activeTab = computed({
|
||||
<VWindowItem value="templates">
|
||||
<RegistrationFieldTemplatesTab :org-id="orgId" />
|
||||
</VWindowItem>
|
||||
<VWindowItem value="crowd-types">
|
||||
<CrowdTypesManager :org-id="orgId" />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user