bert.hausmans
63bc351c59
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>
133 lines
3.2 KiB
Vue
133 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { useMyOrganisation } from '@/composables/api/useOrganisations'
|
|
import { useAuthStore } from '@/stores/useAuthStore'
|
|
import EditOrganisationDialog from '@/components/organisations/EditOrganisationDialog.vue'
|
|
import type { Organisation } from '@/types/organisation'
|
|
|
|
const authStore = useAuthStore()
|
|
|
|
const { data: organisation, isLoading, isError, refetch } = useMyOrganisation()
|
|
|
|
const isEditDialogOpen = ref(false)
|
|
|
|
const isOrgAdmin = computed(() => {
|
|
const role = authStore.currentOrganisation?.role
|
|
return role === 'org_admin' || authStore.isSuperAdmin
|
|
})
|
|
|
|
const statusColor: Record<Organisation['billing_status'], string> = {
|
|
trial: 'info',
|
|
active: 'success',
|
|
suspended: 'warning',
|
|
cancelled: 'error',
|
|
}
|
|
|
|
function formatDate(iso: string) {
|
|
return new Date(iso).toLocaleDateString('nl-NL', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- Loading -->
|
|
<VSkeletonLoader
|
|
v-if="isLoading"
|
|
type="card"
|
|
/>
|
|
|
|
<!-- Error -->
|
|
<VAlert
|
|
v-else-if="isError"
|
|
type="error"
|
|
class="mb-4"
|
|
>
|
|
Kon organisatie niet laden.
|
|
<template #append>
|
|
<VBtn
|
|
variant="text"
|
|
@click="refetch()"
|
|
>
|
|
Opnieuw proberen
|
|
</VBtn>
|
|
</template>
|
|
</VAlert>
|
|
|
|
<template v-else-if="organisation">
|
|
<!-- Header -->
|
|
<div class="d-flex justify-space-between align-center mb-6">
|
|
<div class="d-flex align-center gap-x-3">
|
|
<h4 class="text-h4">
|
|
{{ organisation.name }}
|
|
</h4>
|
|
<VChip
|
|
:color="statusColor[organisation.billing_status]"
|
|
size="small"
|
|
>
|
|
{{ organisation.billing_status }}
|
|
</VChip>
|
|
</div>
|
|
<VBtn
|
|
v-if="isOrgAdmin"
|
|
prepend-icon="tabler-edit"
|
|
@click="isEditDialogOpen = true"
|
|
>
|
|
Naam bewerken
|
|
</VBtn>
|
|
</div>
|
|
|
|
<!-- Info card -->
|
|
<VCard>
|
|
<VCardText>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
md="4"
|
|
>
|
|
<h6 class="text-h6 mb-1">
|
|
Slug
|
|
</h6>
|
|
<p class="text-body-1 text-disabled mb-0">
|
|
{{ organisation.slug }}
|
|
</p>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
md="4"
|
|
>
|
|
<h6 class="text-h6 mb-1">
|
|
Aangemaakt op
|
|
</h6>
|
|
<p class="text-body-1 text-disabled mb-0">
|
|
{{ formatDate(organisation.created_at) }}
|
|
</p>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
md="4"
|
|
>
|
|
<h6 class="text-h6 mb-1">
|
|
Status
|
|
</h6>
|
|
<VChip
|
|
:color="statusColor[organisation.billing_status]"
|
|
size="small"
|
|
>
|
|
{{ organisation.billing_status }}
|
|
</VChip>
|
|
</VCol>
|
|
</VRow>
|
|
</VCardText>
|
|
</VCard>
|
|
|
|
<EditOrganisationDialog
|
|
v-model="isEditDialogOpen"
|
|
:organisation="organisation"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|