feat: frontend fase 2 sessies 1-3
- Member management pagina + invite flow - Persons module met filters, KPI tiles, detail panel - Event horizontale tabs navigatie (EventTabsNav component) - Route conflict opgelost - OrganisationSwitcher verbeterd (collapsed staat WIP)
This commit is contained in:
4
apps/app/components.d.ts
vendored
4
apps/app/components.d.ts
vendored
@@ -30,6 +30,7 @@ declare module 'vue' {
|
||||
ConfirmDialog: typeof import('./src/components/dialogs/ConfirmDialog.vue')['default']
|
||||
CreateAppDialog: typeof import('./src/components/dialogs/CreateAppDialog.vue')['default']
|
||||
CreateEventDialog: typeof import('./src/components/events/CreateEventDialog.vue')['default']
|
||||
CreatePersonDialog: typeof import('./src/components/persons/CreatePersonDialog.vue')['default']
|
||||
CustomCheckboxes: typeof import('./src/@core/components/app-form-elements/CustomCheckboxes.vue')['default']
|
||||
CustomCheckboxesWithIcon: typeof import('./src/@core/components/app-form-elements/CustomCheckboxesWithIcon.vue')['default']
|
||||
CustomCheckboxesWithImage: typeof import('./src/@core/components/app-form-elements/CustomCheckboxesWithImage.vue')['default']
|
||||
@@ -42,14 +43,17 @@ declare module 'vue' {
|
||||
EditEventDialog: typeof import('./src/components/events/EditEventDialog.vue')['default']
|
||||
EditMemberRoleDialog: typeof import('./src/components/members/EditMemberRoleDialog.vue')['default']
|
||||
EditOrganisationDialog: typeof import('./src/components/organisations/EditOrganisationDialog.vue')['default']
|
||||
EditPersonDialog: typeof import('./src/components/persons/EditPersonDialog.vue')['default']
|
||||
EnableOneTimePasswordDialog: typeof import('./src/components/dialogs/EnableOneTimePasswordDialog.vue')['default']
|
||||
ErrorHeader: typeof import('./src/components/ErrorHeader.vue')['default']
|
||||
EventTabsNav: typeof import('./src/components/events/EventTabsNav.vue')['default']
|
||||
I18n: typeof import('./src/@core/components/I18n.vue')['default']
|
||||
InviteMemberDialog: typeof import('./src/components/members/InviteMemberDialog.vue')['default']
|
||||
MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
|
||||
Notifications: typeof import('./src/@core/components/Notifications.vue')['default']
|
||||
OrganisationSwitcher: typeof import('./src/components/layout/OrganisationSwitcher.vue')['default']
|
||||
PaymentProvidersDialog: typeof import('./src/components/dialogs/PaymentProvidersDialog.vue')['default']
|
||||
PersonDetailPanel: typeof import('./src/components/persons/PersonDetailPanel.vue')['default']
|
||||
ProductDescriptionEditor: typeof import('./src/@core/components/ProductDescriptionEditor.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
|
||||
140
apps/app/src/components/events/EventTabsNav.vue
Normal file
140
apps/app/src/components/events/EventTabsNav.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<script setup lang="ts">
|
||||
import { useEventDetail } from '@/composables/api/useEvents'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import { useOrganisationStore } from '@/stores/useOrganisationStore'
|
||||
import EditEventDialog from '@/components/events/EditEventDialog.vue'
|
||||
import type { EventStatus } from '@/types/event'
|
||||
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
const orgStore = useOrganisationStore()
|
||||
|
||||
const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
|
||||
const eventId = computed(() => String((route.params as { id: string }).id))
|
||||
|
||||
const { data: event, isLoading, isError, refetch } = useEventDetail(orgId, eventId)
|
||||
|
||||
// Set active event in store
|
||||
watch(eventId, (id) => {
|
||||
if (id) orgStore.setActiveEvent(id)
|
||||
}, { immediate: true })
|
||||
|
||||
const isEditDialogOpen = ref(false)
|
||||
|
||||
const statusColor: Record<EventStatus, string> = {
|
||||
draft: 'default',
|
||||
published: 'info',
|
||||
registration_open: 'cyan',
|
||||
buildup: 'warning',
|
||||
showday: 'success',
|
||||
teardown: 'warning',
|
||||
closed: 'error',
|
||||
}
|
||||
|
||||
const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return dateFormatter.format(new Date(iso))
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ label: 'Overzicht', icon: 'tabler-layout-dashboard', route: 'events-id' },
|
||||
{ label: 'Personen', icon: 'tabler-users', route: 'events-id-persons' },
|
||||
{ label: 'Secties & Shifts', icon: 'tabler-layout-grid', route: 'events-id-sections' },
|
||||
{ label: 'Artiesten', icon: 'tabler-music', route: 'events-id-artists' },
|
||||
{ label: 'Briefings', icon: 'tabler-mail', route: 'events-id-briefings' },
|
||||
{ label: 'Instellingen', icon: 'tabler-settings', route: 'events-id-settings' },
|
||||
]
|
||||
|
||||
const activeTab = computed(() => {
|
||||
const name = route.name as string
|
||||
return tabs.find(t => name === t.route || name?.startsWith(`${t.route}-`))?.route ?? 'events-id'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="isLoading"
|
||||
type="card"
|
||||
/>
|
||||
|
||||
<!-- Error -->
|
||||
<VAlert
|
||||
v-else-if="isError"
|
||||
type="error"
|
||||
class="mb-4"
|
||||
>
|
||||
Kon evenement niet laden.
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="refetch()"
|
||||
>
|
||||
Opnieuw proberen
|
||||
</VBtn>
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<template v-else-if="event">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-space-between align-center mb-6">
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<VBtn
|
||||
icon="tabler-arrow-left"
|
||||
variant="text"
|
||||
:to="{ name: 'events' }"
|
||||
/>
|
||||
<h4 class="text-h4">
|
||||
{{ event.name }}
|
||||
</h4>
|
||||
<VChip
|
||||
:color="statusColor[event.status]"
|
||||
size="small"
|
||||
>
|
||||
{{ event.status }}
|
||||
</VChip>
|
||||
<span class="text-body-1 text-disabled">
|
||||
{{ formatDate(event.start_date) }} – {{ formatDate(event.end_date) }}
|
||||
</span>
|
||||
</div>
|
||||
<VBtn
|
||||
prepend-icon="tabler-edit"
|
||||
@click="isEditDialogOpen = true"
|
||||
>
|
||||
Bewerken
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal tabs -->
|
||||
<VTabs
|
||||
:model-value="activeTab"
|
||||
class="mb-6"
|
||||
>
|
||||
<VTab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.route"
|
||||
:value="tab.route"
|
||||
:prepend-icon="tab.icon"
|
||||
:to="{ name: tab.route, params: { id: eventId } }"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<!-- Tab content -->
|
||||
<slot :event="event" />
|
||||
|
||||
<EditEventDialog
|
||||
v-model="isEditDialogOpen"
|
||||
:event="event"
|
||||
:org-id="orgId"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,64 +1,111 @@
|
||||
<script setup lang="ts">
|
||||
import { layoutConfig } from '@layouts'
|
||||
import { useLayoutConfigStore } from '@layouts/stores/config'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const configStore = useLayoutConfigStore()
|
||||
const hideTitleAndBadge = configStore.isVerticalNavMini()
|
||||
|
||||
const hasMultipleOrgs = computed(() => authStore.organisations.length > 1)
|
||||
const currentOrgName = computed(() => authStore.currentOrganisation?.name ?? 'Geen organisatie')
|
||||
const organisations = computed(() => authStore.organisations)
|
||||
const activeOrg = computed(() => authStore.currentOrganisation)
|
||||
const hasMultiple = computed(() => organisations.value.length > 1)
|
||||
|
||||
const activeOrgName = computed(() => {
|
||||
const name = activeOrg.value?.name ?? 'Geen organisatie'
|
||||
return name.length > 18 ? `${name.slice(0, 18)}…` : name
|
||||
})
|
||||
|
||||
const isMenuOpen = ref(false)
|
||||
|
||||
const roleColor = (role: string) => ({
|
||||
org_admin: 'primary',
|
||||
org_member: 'info',
|
||||
event_manager: 'success',
|
||||
staff_coordinator: 'warning',
|
||||
volunteer_coordinator: 'secondary',
|
||||
}[role] ?? 'default')
|
||||
|
||||
function toggleMenu() {
|
||||
if (hasMultiple.value)
|
||||
isMenuOpen.value = !isMenuOpen.value
|
||||
}
|
||||
|
||||
function selectOrg(id: string) {
|
||||
authStore.setActiveOrganisation(id)
|
||||
isMenuOpen.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="organisation-switcher mx-4 mb-2">
|
||||
<!-- Single org: just show the name -->
|
||||
<div
|
||||
v-if="!hasMultipleOrgs"
|
||||
class="d-flex align-center gap-x-2 pa-2"
|
||||
<li
|
||||
class="nav-link"
|
||||
style="margin-block-end: 8px;"
|
||||
>
|
||||
<VMenu
|
||||
v-model="isMenuOpen"
|
||||
:location="hideTitleAndBadge ? 'end' : 'bottom'"
|
||||
:offset="hideTitleAndBadge ? 8 : 0"
|
||||
:width="hideTitleAndBadge ? undefined : 260"
|
||||
:min-width="hideTitleAndBadge ? 220 : undefined"
|
||||
:disabled="!hasMultiple"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-building"
|
||||
size="20"
|
||||
color="primary"
|
||||
/>
|
||||
<span class="text-body-2 font-weight-medium text-truncate">
|
||||
{{ currentOrgName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Multiple orgs: dropdown -->
|
||||
<VBtn
|
||||
v-else
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
block
|
||||
class="text-none justify-start"
|
||||
prepend-icon="tabler-building"
|
||||
>
|
||||
<span class="text-truncate">{{ currentOrgName }}</span>
|
||||
|
||||
<VMenu
|
||||
activator="parent"
|
||||
width="250"
|
||||
location="bottom start"
|
||||
>
|
||||
<VList density="compact">
|
||||
<VListItem
|
||||
v-for="org in authStore.organisations"
|
||||
:key="org.id"
|
||||
:active="org.id === authStore.currentOrganisation?.id"
|
||||
@click="authStore.setActiveOrganisation(org.id)"
|
||||
>
|
||||
<VListItemTitle>{{ org.name }}</VListItemTitle>
|
||||
<template #append>
|
||||
<VChip
|
||||
size="x-small"
|
||||
variant="text"
|
||||
>
|
||||
{{ org.role }}
|
||||
</VChip>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</VBtn>
|
||||
</div>
|
||||
<template #activator="{ props: menuProps }">
|
||||
<a
|
||||
v-bind="hasMultiple ? menuProps : undefined"
|
||||
:class="{ 'cursor-pointer': hasMultiple }"
|
||||
>
|
||||
<Component
|
||||
:is="layoutConfig.app.iconRenderer || 'div'"
|
||||
v-bind="{ icon: 'tabler-building' }"
|
||||
class="nav-item-icon"
|
||||
/>
|
||||
<TransitionGroup name="transition-slide-x">
|
||||
<span
|
||||
v-show="!hideTitleAndBadge"
|
||||
key="title"
|
||||
class="nav-item-title"
|
||||
>
|
||||
{{ activeOrgName }}
|
||||
</span>
|
||||
<Component
|
||||
v-if="hasMultiple"
|
||||
v-show="!hideTitleAndBadge"
|
||||
:is="layoutConfig.app.iconRenderer || 'div'"
|
||||
v-bind="{ icon: 'tabler-chevron-down' }"
|
||||
key="chevron"
|
||||
class="nav-item-badge"
|
||||
:style="{
|
||||
transition: 'transform 0.2s ease',
|
||||
transform: isMenuOpen ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
'font-size': '18px',
|
||||
'margin-inline-start': 'auto',
|
||||
}"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</a>
|
||||
</template>
|
||||
<VList density="compact">
|
||||
<VListItem
|
||||
v-for="org in organisations"
|
||||
:key="org.id"
|
||||
:active="org.id === activeOrg?.id"
|
||||
active-color="primary"
|
||||
@click="selectOrg(org.id)"
|
||||
>
|
||||
<VListItemTitle>{{ org.name }}</VListItemTitle>
|
||||
<template #append>
|
||||
<VChip
|
||||
:color="roleColor(org.role)"
|
||||
size="x-small"
|
||||
variant="tonal"
|
||||
label
|
||||
>
|
||||
{{ org.role }}
|
||||
</VChip>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
199
apps/app/src/components/persons/CreatePersonDialog.vue
Normal file
199
apps/app/src/components/persons/CreatePersonDialog.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useCreatePerson } from '@/composables/api/usePersons'
|
||||
import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
|
||||
import { requiredValidator, emailValidator } from '@core/utils/validators'
|
||||
import type { PersonStatus } from '@/types/person'
|
||||
|
||||
const props = defineProps<{
|
||||
eventId: string
|
||||
orgId: string
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const eventIdRef = computed(() => props.eventId)
|
||||
const orgIdRef = computed(() => props.orgId)
|
||||
|
||||
const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
|
||||
|
||||
const form = ref({
|
||||
crowd_type_id: '',
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
company_id: '',
|
||||
status: 'pending' as PersonStatus,
|
||||
})
|
||||
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
const showSuccess = ref(false)
|
||||
const successName = ref('')
|
||||
|
||||
const { mutate: createPerson, isPending } = useCreatePerson(eventIdRef)
|
||||
|
||||
const crowdTypeItems = computed(() =>
|
||||
crowdTypes.value?.map(ct => ({
|
||||
title: ct.name,
|
||||
value: ct.id,
|
||||
})) ?? [],
|
||||
)
|
||||
|
||||
const statusOptions: { title: string; value: PersonStatus }[] = [
|
||||
{ title: 'Pending', value: 'pending' },
|
||||
{ title: 'Uitgenodigd', value: 'invited' },
|
||||
{ title: 'Aangemeld', value: 'applied' },
|
||||
]
|
||||
|
||||
function resetForm() {
|
||||
form.value = {
|
||||
crowd_type_id: '',
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
company_id: '',
|
||||
status: 'pending',
|
||||
}
|
||||
errors.value = {}
|
||||
refVForm.value?.resetValidation()
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
const payload = {
|
||||
crowd_type_id: form.value.crowd_type_id,
|
||||
name: form.value.name,
|
||||
email: form.value.email,
|
||||
...(form.value.phone ? { phone: form.value.phone } : {}),
|
||||
...(form.value.company_id ? { company_id: form.value.company_id } : {}),
|
||||
status: form.value.status,
|
||||
}
|
||||
|
||||
createPerson(payload, {
|
||||
onSuccess: () => {
|
||||
successName.value = form.value.name
|
||||
modelValue.value = false
|
||||
showSuccess.value = true
|
||||
resetForm()
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const data = err.response?.data
|
||||
if (data?.errors) {
|
||||
errors.value = Object.fromEntries(
|
||||
Object.entries(data.errors).map(([k, v]) => [k, (v as string[])[0]]),
|
||||
)
|
||||
}
|
||||
else if (data?.message) {
|
||||
errors.value = { name: data.message }
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="550"
|
||||
@after-leave="resetForm"
|
||||
>
|
||||
<VCard title="Persoon toevoegen">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="form.crowd_type_id"
|
||||
label="Crowd Type"
|
||||
:items="crowdTypeItems"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.crowd_type_id"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.name"
|
||||
label="Naam"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
autofocus
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.email"
|
||||
label="E-mailadres"
|
||||
type="email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
:error-messages="errors.email"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.phone"
|
||||
label="Telefoonnummer"
|
||||
:error-messages="errors.phone"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VTooltip location="top">
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<div v-bind="tooltipProps">
|
||||
<AppSelect
|
||||
model-value=""
|
||||
label="Bedrijf"
|
||||
:items="[]"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Komt beschikbaar zodra bedrijven zijn aangemaakt
|
||||
</VTooltip>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="form.status"
|
||||
label="Status"
|
||||
:items="statusOptions"
|
||||
:error-messages="errors.status"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Toevoegen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
{{ successName }} toegevoegd
|
||||
</VSnackbar>
|
||||
</template>
|
||||
205
apps/app/src/components/persons/EditPersonDialog.vue
Normal file
205
apps/app/src/components/persons/EditPersonDialog.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useUpdatePerson } from '@/composables/api/usePersons'
|
||||
import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
|
||||
import { requiredValidator, emailValidator } from '@core/utils/validators'
|
||||
import type { Person, PersonStatus } from '@/types/person'
|
||||
|
||||
const props = defineProps<{
|
||||
person: Person
|
||||
eventId: string
|
||||
orgId: string
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const eventIdRef = computed(() => props.eventId)
|
||||
const orgIdRef = computed(() => props.orgId)
|
||||
|
||||
const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
|
||||
const { mutate: updatePerson, isPending } = useUpdatePerson(eventIdRef)
|
||||
|
||||
const form = ref({
|
||||
crowd_type_id: '',
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
status: 'pending' as PersonStatus,
|
||||
admin_notes: '',
|
||||
is_blacklisted: false,
|
||||
})
|
||||
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
const showSuccess = ref(false)
|
||||
|
||||
watch(() => props.person, (p) => {
|
||||
form.value = {
|
||||
crowd_type_id: p.crowd_type?.id ?? '',
|
||||
name: p.name,
|
||||
email: p.email,
|
||||
phone: p.phone ?? '',
|
||||
status: p.status,
|
||||
admin_notes: p.admin_notes ?? '',
|
||||
is_blacklisted: p.is_blacklisted,
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
const crowdTypeItems = computed(() =>
|
||||
crowdTypes.value?.map(ct => ({
|
||||
title: ct.name,
|
||||
value: ct.id,
|
||||
})) ?? [],
|
||||
)
|
||||
|
||||
const statusOptions: { title: string; value: PersonStatus }[] = [
|
||||
{ title: 'Pending', value: 'pending' },
|
||||
{ title: 'Uitgenodigd', value: 'invited' },
|
||||
{ title: 'Aangemeld', value: 'applied' },
|
||||
{ title: 'Goedgekeurd', value: 'approved' },
|
||||
{ title: 'Afgewezen', value: 'rejected' },
|
||||
{ title: 'No-show', value: 'no_show' },
|
||||
]
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
updatePerson({
|
||||
id: props.person.id,
|
||||
crowd_type_id: form.value.crowd_type_id,
|
||||
name: form.value.name,
|
||||
email: form.value.email,
|
||||
phone: form.value.phone || undefined,
|
||||
status: form.value.status,
|
||||
admin_notes: form.value.admin_notes || undefined,
|
||||
is_blacklisted: form.value.is_blacklisted,
|
||||
}, {
|
||||
onSuccess: () => {
|
||||
modelValue.value = false
|
||||
showSuccess.value = true
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const data = err.response?.data
|
||||
if (data?.errors) {
|
||||
errors.value = Object.fromEntries(
|
||||
Object.entries(data.errors).map(([k, v]) => [k, (v as string[])[0]]),
|
||||
)
|
||||
}
|
||||
else if (data?.message) {
|
||||
errors.value = { name: data.message }
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="550"
|
||||
>
|
||||
<VCard title="Persoon bewerken">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="form.crowd_type_id"
|
||||
label="Crowd Type"
|
||||
:items="crowdTypeItems"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.crowd_type_id"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.name"
|
||||
label="Naam"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
autofocus
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.email"
|
||||
label="E-mailadres"
|
||||
type="email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
:error-messages="errors.email"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.phone"
|
||||
label="Telefoonnummer"
|
||||
:error-messages="errors.phone"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppSelect
|
||||
v-model="form.status"
|
||||
label="Status"
|
||||
:items="statusOptions"
|
||||
:error-messages="errors.status"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSwitch
|
||||
v-model="form.is_blacklisted"
|
||||
label="Geblokkeerd"
|
||||
color="error"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VTextarea
|
||||
v-model="form.admin_notes"
|
||||
label="Admin notities"
|
||||
variant="outlined"
|
||||
rows="3"
|
||||
:error-messages="errors.admin_notes"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Opslaan
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
Persoon bijgewerkt
|
||||
</VSnackbar>
|
||||
</template>
|
||||
273
apps/app/src/components/persons/PersonDetailPanel.vue
Normal file
273
apps/app/src/components/persons/PersonDetailPanel.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<script setup lang="ts">
|
||||
import { usePersonDetail, useUpdatePerson } from '@/composables/api/usePersons'
|
||||
import type { Person, PersonStatus } from '@/types/person'
|
||||
|
||||
const props = defineProps<{
|
||||
eventId: string
|
||||
orgId: string
|
||||
personId: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
edit: [person: Person]
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const eventIdRef = computed(() => props.eventId)
|
||||
const personIdRef = computed(() => props.personId ?? '')
|
||||
|
||||
const { data: person, isLoading } = usePersonDetail(eventIdRef, personIdRef)
|
||||
const { mutate: updatePerson } = useUpdatePerson(eventIdRef)
|
||||
|
||||
const activeTab = ref('info')
|
||||
|
||||
const statusColor: Record<PersonStatus, string> = {
|
||||
pending: 'default',
|
||||
applied: 'info',
|
||||
invited: 'cyan',
|
||||
approved: 'success',
|
||||
rejected: 'error',
|
||||
no_show: 'warning',
|
||||
}
|
||||
|
||||
const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return dateFormatter.format(new Date(iso))
|
||||
}
|
||||
|
||||
function getInitials(name: string) {
|
||||
return name
|
||||
.split(' ')
|
||||
.map(p => p[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
}
|
||||
|
||||
// Admin notes inline edit
|
||||
const adminNotes = ref('')
|
||||
|
||||
watch(() => person.value?.admin_notes, (val) => {
|
||||
adminNotes.value = val ?? ''
|
||||
}, { immediate: true })
|
||||
|
||||
function onAdminNotesBlur() {
|
||||
if (!person.value) return
|
||||
if (adminNotes.value === (person.value.admin_notes ?? '')) return
|
||||
|
||||
updatePerson({
|
||||
id: person.value.id,
|
||||
admin_notes: adminNotes.value || undefined,
|
||||
})
|
||||
}
|
||||
|
||||
// Blacklisted toggle
|
||||
function onBlacklistToggle(val: boolean | null) {
|
||||
if (!person.value) return
|
||||
|
||||
updatePerson({
|
||||
id: person.value.id,
|
||||
is_blacklisted: !!val,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VNavigationDrawer
|
||||
v-model="modelValue"
|
||||
location="end"
|
||||
temporary
|
||||
:width="480"
|
||||
>
|
||||
<!-- Loading -->
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="pa-6"
|
||||
>
|
||||
<VSkeletonLoader type="article" />
|
||||
</div>
|
||||
|
||||
<template v-else-if="person">
|
||||
<!-- Header -->
|
||||
<div class="pa-6">
|
||||
<div class="d-flex justify-space-between align-start mb-4">
|
||||
<div class="d-flex align-center gap-x-4">
|
||||
<VAvatar
|
||||
size="56"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<span class="text-h6">{{ getInitials(person.name) }}</span>
|
||||
</VAvatar>
|
||||
<div>
|
||||
<h5 class="text-h5 mb-1">
|
||||
{{ person.name }}
|
||||
</h5>
|
||||
<p class="text-body-2 text-disabled mb-2">
|
||||
{{ person.email }}
|
||||
</p>
|
||||
<div class="d-flex gap-x-2">
|
||||
<VChip
|
||||
:color="statusColor[person.status]"
|
||||
size="small"
|
||||
>
|
||||
{{ person.status }}
|
||||
</VChip>
|
||||
<VChip
|
||||
v-if="person.crowd_type"
|
||||
:color="person.crowd_type.color"
|
||||
size="small"
|
||||
>
|
||||
{{ person.crowd_type.name }}
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-x-1">
|
||||
<VBtn
|
||||
icon="tabler-edit"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="Bewerken"
|
||||
@click="emit('edit', person)"
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-x"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="Sluiten"
|
||||
@click="modelValue = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- Tabs -->
|
||||
<VTabs
|
||||
v-model="activeTab"
|
||||
class="px-6"
|
||||
>
|
||||
<VTab value="info">
|
||||
Informatie
|
||||
</VTab>
|
||||
<VTab value="shifts">
|
||||
Shifts
|
||||
</VTab>
|
||||
<VTab value="accreditation">
|
||||
Accreditatie
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VTabsWindow
|
||||
v-model="activeTab"
|
||||
class="pa-6"
|
||||
>
|
||||
<!-- Tab: Informatie -->
|
||||
<VTabsWindowItem value="info">
|
||||
<VList class="pa-0">
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
icon="tabler-phone"
|
||||
class="me-3"
|
||||
/>
|
||||
</template>
|
||||
<VListItemTitle>Telefoonnummer</VListItemTitle>
|
||||
<VListItemSubtitle>{{ person.phone ?? 'Niet opgegeven' }}</VListItemSubtitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
icon="tabler-building"
|
||||
class="me-3"
|
||||
/>
|
||||
</template>
|
||||
<VListItemTitle>Bedrijf</VListItemTitle>
|
||||
<VListItemSubtitle>{{ person.company?.name ?? 'Geen bedrijf' }}</VListItemSubtitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VIcon
|
||||
icon="tabler-calendar"
|
||||
class="me-3"
|
||||
/>
|
||||
</template>
|
||||
<VListItemTitle>Aangemaakt op</VListItemTitle>
|
||||
<VListItemSubtitle>{{ formatDate(person.created_at) }}</VListItemSubtitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<!-- Admin notes -->
|
||||
<h6 class="text-h6 mb-2">
|
||||
Admin notities
|
||||
</h6>
|
||||
<VTextarea
|
||||
v-model="adminNotes"
|
||||
variant="outlined"
|
||||
rows="3"
|
||||
placeholder="Notities over deze persoon..."
|
||||
@blur="onAdminNotesBlur"
|
||||
/>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<!-- Blacklisted toggle -->
|
||||
<VSwitch
|
||||
:model-value="person.is_blacklisted"
|
||||
label="Geblokkeerd"
|
||||
color="error"
|
||||
@update:model-value="onBlacklistToggle"
|
||||
/>
|
||||
</VTabsWindowItem>
|
||||
|
||||
<!-- Tab: Shifts (placeholder) -->
|
||||
<VTabsWindowItem value="shifts">
|
||||
<VCard
|
||||
variant="outlined"
|
||||
class="text-center pa-8"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-clock"
|
||||
size="48"
|
||||
class="mb-4 text-disabled"
|
||||
/>
|
||||
<p class="text-body-1 text-disabled">
|
||||
Shift toewijzingen worden hier getoond zodra de shift planning module beschikbaar is.
|
||||
</p>
|
||||
</VCard>
|
||||
</VTabsWindowItem>
|
||||
|
||||
<!-- Tab: Accreditatie (placeholder) -->
|
||||
<VTabsWindowItem value="accreditation">
|
||||
<VCard
|
||||
variant="outlined"
|
||||
class="text-center pa-8"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-id-badge-2"
|
||||
size="48"
|
||||
class="mb-4 text-disabled"
|
||||
/>
|
||||
<p class="text-body-1 text-disabled">
|
||||
Accreditatie wordt hier getoond zodra de accreditatie module beschikbaar is.
|
||||
</p>
|
||||
</VCard>
|
||||
</VTabsWindowItem>
|
||||
</VTabsWindow>
|
||||
</template>
|
||||
</VNavigationDrawer>
|
||||
</template>
|
||||
30
apps/app/src/composables/api/useCrowdTypes.ts
Normal file
30
apps/app/src/composables/api/useCrowdTypes.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
import type { Ref } from 'vue'
|
||||
import { apiClient } from '@/lib/axios'
|
||||
import type { CrowdType } from '@/types/organisation'
|
||||
|
||||
interface PaginatedResponse<T> {
|
||||
data: T[]
|
||||
links: Record<string, string | null>
|
||||
meta: {
|
||||
current_page: number
|
||||
per_page: number
|
||||
total: number
|
||||
last_page: number
|
||||
}
|
||||
}
|
||||
|
||||
export function useCrowdTypeList(orgId: Ref<string>) {
|
||||
return useQuery({
|
||||
queryKey: ['crowd-types', orgId],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<PaginatedResponse<CrowdType>>(
|
||||
`/organisations/${orgId.value}/crowd-types`,
|
||||
)
|
||||
|
||||
return data.data
|
||||
},
|
||||
enabled: () => !!orgId.value,
|
||||
staleTime: Infinity,
|
||||
})
|
||||
}
|
||||
129
apps/app/src/composables/api/usePersons.ts
Normal file
129
apps/app/src/composables/api/usePersons.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
import type { Ref } from 'vue'
|
||||
import { apiClient } from '@/lib/axios'
|
||||
import type { CreatePersonPayload, Person, UpdatePersonPayload } from '@/types/person'
|
||||
|
||||
interface ApiResponse<T> {
|
||||
success: boolean
|
||||
data: T
|
||||
message?: string
|
||||
}
|
||||
|
||||
interface PaginatedResponse<T> {
|
||||
data: T[]
|
||||
links: Record<string, string | null>
|
||||
meta: {
|
||||
current_page: number
|
||||
per_page: number
|
||||
total: number
|
||||
last_page: number
|
||||
total_approved: number
|
||||
total_pending: number
|
||||
total_rejected: number
|
||||
}
|
||||
}
|
||||
|
||||
export function usePersonList(
|
||||
eventId: Ref<string>,
|
||||
filters?: Ref<{ crowd_type_id?: string; status?: string }>,
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: ['persons', eventId, filters],
|
||||
queryFn: async () => {
|
||||
const params: Record<string, string> = {}
|
||||
if (filters?.value?.crowd_type_id)
|
||||
params.crowd_type_id = filters.value.crowd_type_id
|
||||
if (filters?.value?.status)
|
||||
params.status = filters.value.status
|
||||
|
||||
const { data } = await apiClient.get<PaginatedResponse<Person>>(
|
||||
`/events/${eventId.value}/persons`,
|
||||
{ params },
|
||||
)
|
||||
|
||||
return data
|
||||
},
|
||||
enabled: () => !!eventId.value,
|
||||
})
|
||||
}
|
||||
|
||||
export function usePersonDetail(eventId: Ref<string>, id: Ref<string>) {
|
||||
return useQuery({
|
||||
queryKey: ['persons', eventId, 'detail', id],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<ApiResponse<Person>>(
|
||||
`/events/${eventId.value}/persons/${id.value}`,
|
||||
)
|
||||
|
||||
return data.data
|
||||
},
|
||||
enabled: () => !!eventId.value && !!id.value,
|
||||
})
|
||||
}
|
||||
|
||||
export function useCreatePerson(eventId: Ref<string>) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload: CreatePersonPayload) => {
|
||||
const { data } = await apiClient.post<ApiResponse<Person>>(
|
||||
`/events/${eventId.value}/persons`,
|
||||
payload,
|
||||
)
|
||||
|
||||
return data.data
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['persons', eventId.value] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpdatePerson(eventId: Ref<string>) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, ...payload }: UpdatePersonPayload & { id: string }) => {
|
||||
const { data } = await apiClient.put<ApiResponse<Person>>(
|
||||
`/events/${eventId.value}/persons/${id}`,
|
||||
payload,
|
||||
)
|
||||
|
||||
return data.data
|
||||
},
|
||||
onSuccess: (_data, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['persons', eventId.value] })
|
||||
queryClient.invalidateQueries({ queryKey: ['persons', eventId.value, 'detail', variables.id] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useApprovePerson(eventId: Ref<string>) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (id: string) => {
|
||||
const { data } = await apiClient.post<ApiResponse<Person>>(
|
||||
`/events/${eventId.value}/persons/${id}/approve`,
|
||||
)
|
||||
|
||||
return data.data
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['persons', eventId.value] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useDeletePerson(eventId: Ref<string>) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (id: string) => {
|
||||
await apiClient.delete(`/events/${eventId.value}/persons/${id}`)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['persons', eventId.value] })
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -1,27 +1,27 @@
|
||||
export default [
|
||||
{
|
||||
title: "Dashboard",
|
||||
to: { name: "dashboard" },
|
||||
icon: { icon: "tabler-smart-home" },
|
||||
title: 'Dashboard',
|
||||
to: { name: 'dashboard' },
|
||||
icon: { icon: 'tabler-smart-home' },
|
||||
},
|
||||
{
|
||||
title: "Events",
|
||||
to: { name: "events" },
|
||||
icon: { icon: "tabler-calendar-event" },
|
||||
title: 'Events',
|
||||
to: { name: 'events' },
|
||||
icon: { icon: 'tabler-calendar-event' },
|
||||
},
|
||||
{
|
||||
heading: "Beheer",
|
||||
heading: 'Beheer',
|
||||
},
|
||||
{
|
||||
title: "Mijn Organisatie",
|
||||
to: { name: "organisation" },
|
||||
icon: { icon: "tabler-building" },
|
||||
title: 'Mijn Organisatie',
|
||||
to: { name: 'organisation' },
|
||||
icon: { icon: 'tabler-building' },
|
||||
},
|
||||
{
|
||||
title: "Leden",
|
||||
to: { name: "organisation-members" },
|
||||
icon: { icon: "tabler-users-group" },
|
||||
action: "read",
|
||||
subject: "members",
|
||||
title: 'Leden',
|
||||
to: { name: 'organisation-members' },
|
||||
icon: { icon: 'tabler-users-group' },
|
||||
action: 'read',
|
||||
subject: 'members',
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
@@ -1,241 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useEventDetail } from '@/composables/api/useEvents'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import { useOrganisationStore } from '@/stores/useOrganisationStore'
|
||||
import EditEventDialog from '@/components/events/EditEventDialog.vue'
|
||||
import type { EventStatus } from '@/types/event'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
navActiveLink: 'events',
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
const orgStore = useOrganisationStore()
|
||||
|
||||
const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
|
||||
const eventId = computed(() => String((route.params as { id: string }).id))
|
||||
|
||||
const { data: event, isLoading, isError, refetch } = useEventDetail(orgId, eventId)
|
||||
|
||||
const isEditDialogOpen = ref(false)
|
||||
const activeTab = ref('details')
|
||||
|
||||
// Set active event in store
|
||||
watch(eventId, (id) => {
|
||||
if (id) orgStore.setActiveEvent(id)
|
||||
}, { immediate: true })
|
||||
|
||||
const statusColor: Record<EventStatus, string> = {
|
||||
draft: 'default',
|
||||
published: 'info',
|
||||
registration_open: 'cyan',
|
||||
buildup: 'warning',
|
||||
showday: 'success',
|
||||
teardown: 'warning',
|
||||
closed: 'error',
|
||||
}
|
||||
|
||||
const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return dateFormatter.format(new Date(iso))
|
||||
}
|
||||
|
||||
const tiles = [
|
||||
{ title: 'Secties & Shifts', value: 0, icon: 'tabler-layout-grid', color: 'primary' },
|
||||
{ title: 'Personen', value: 0, icon: 'tabler-users', color: 'success' },
|
||||
{ title: 'Artiesten', value: 0, icon: 'tabler-music', color: 'warning' },
|
||||
{ title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'info' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="isLoading"
|
||||
type="card"
|
||||
/>
|
||||
|
||||
<!-- Error -->
|
||||
<VAlert
|
||||
v-else-if="isError"
|
||||
type="error"
|
||||
class="mb-4"
|
||||
>
|
||||
Kon evenement niet laden.
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="refetch()"
|
||||
>
|
||||
Opnieuw proberen
|
||||
</VBtn>
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<template v-else-if="event">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-space-between align-center mb-6">
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<VBtn
|
||||
icon="tabler-arrow-left"
|
||||
variant="text"
|
||||
:to="{ name: 'events' }"
|
||||
/>
|
||||
<h4 class="text-h4">
|
||||
{{ event.name }}
|
||||
</h4>
|
||||
<VChip
|
||||
:color="statusColor[event.status]"
|
||||
size="small"
|
||||
>
|
||||
{{ event.status }}
|
||||
</VChip>
|
||||
<span class="text-body-1 text-disabled">
|
||||
{{ formatDate(event.start_date) }} – {{ formatDate(event.end_date) }}
|
||||
</span>
|
||||
</div>
|
||||
<VBtn
|
||||
prepend-icon="tabler-edit"
|
||||
@click="isEditDialogOpen = true"
|
||||
>
|
||||
Bewerken
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- Stat tiles -->
|
||||
<VRow class="mb-6">
|
||||
<VCol
|
||||
v-for="tile in tiles"
|
||||
:key="tile.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center gap-x-4">
|
||||
<VAvatar
|
||||
:color="tile.color"
|
||||
variant="tonal"
|
||||
size="44"
|
||||
rounded
|
||||
>
|
||||
<VIcon
|
||||
:icon="tile.icon"
|
||||
size="28"
|
||||
/>
|
||||
</VAvatar>
|
||||
<div>
|
||||
<p class="text-body-1 mb-0">
|
||||
{{ tile.title }}
|
||||
</p>
|
||||
<h4 class="text-h4">
|
||||
{{ tile.value }}
|
||||
</h4>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- Tabs -->
|
||||
<VTabs
|
||||
v-model="activeTab"
|
||||
class="mb-6"
|
||||
>
|
||||
<VTab value="details">
|
||||
Details
|
||||
</VTab>
|
||||
<VTab value="settings">
|
||||
Instellingen
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VTabsWindow v-model="activeTab">
|
||||
<!-- Tab: Details -->
|
||||
<VTabsWindowItem value="details">
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Slug
|
||||
</h6>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ event.slug }}
|
||||
</p>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Tijdzone
|
||||
</h6>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ event.timezone }}
|
||||
</p>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Organisatie
|
||||
</h6>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ authStore.currentOrganisation?.name ?? '–' }}
|
||||
</p>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Aangemaakt op
|
||||
</h6>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ formatDate(event.created_at) }}
|
||||
</p>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VTabsWindowItem>
|
||||
|
||||
<!-- Tab: Instellingen -->
|
||||
<VTabsWindowItem value="settings">
|
||||
<VCard>
|
||||
<VCardText class="text-center pa-8">
|
||||
<VIcon
|
||||
icon="tabler-settings"
|
||||
size="48"
|
||||
class="mb-4 text-disabled"
|
||||
/>
|
||||
<p class="text-body-1 text-disabled">
|
||||
Komt in een volgende fase
|
||||
</p>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VTabsWindowItem>
|
||||
</VTabsWindow>
|
||||
|
||||
<EditEventDialog
|
||||
v-model="isEditDialogOpen"
|
||||
:event="event"
|
||||
:org-id="orgId"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
19
apps/app/src/pages/events/[id]/artists/index.vue
Normal file
19
apps/app/src/pages/events/[id]/artists/index.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import EventTabsNav from '@/components/events/EventTabsNav.vue'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
navActiveLink: 'events',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EventTabsNav>
|
||||
<VCard class="ma-4">
|
||||
<VCardText>
|
||||
Deze module is binnenkort beschikbaar.
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</EventTabsNav>
|
||||
</template>
|
||||
19
apps/app/src/pages/events/[id]/briefings/index.vue
Normal file
19
apps/app/src/pages/events/[id]/briefings/index.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import EventTabsNav from '@/components/events/EventTabsNav.vue'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
navActiveLink: 'events',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EventTabsNav>
|
||||
<VCard class="ma-4">
|
||||
<VCardText>
|
||||
Deze module is binnenkort beschikbaar.
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</EventTabsNav>
|
||||
</template>
|
||||
68
apps/app/src/pages/events/[id]/index.vue
Normal file
68
apps/app/src/pages/events/[id]/index.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import EventTabsNav from '@/components/events/EventTabsNav.vue'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
navActiveLink: 'events',
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const eventId = computed(() => String((route.params as { id: string }).id))
|
||||
|
||||
const tiles = [
|
||||
{ title: 'Personen', value: 0, icon: 'tabler-users', color: 'success', route: 'events-id-persons', enabled: true },
|
||||
{ title: 'Secties & Shifts', value: 0, icon: 'tabler-layout-grid', color: 'primary', route: null, enabled: false },
|
||||
{ title: 'Artiesten', value: 0, icon: 'tabler-music', color: 'warning', route: null, enabled: false },
|
||||
{ title: 'Briefings', value: 0, icon: 'tabler-mail', color: 'info', route: null, enabled: false },
|
||||
]
|
||||
|
||||
function onTileClick(tile: typeof tiles[number]) {
|
||||
if (tile.enabled && tile.route)
|
||||
router.push({ name: tile.route as 'events-id-persons', params: { id: eventId.value } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EventTabsNav>
|
||||
<VRow class="mb-6">
|
||||
<VCol
|
||||
v-for="tile in tiles"
|
||||
:key="tile.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<VCard
|
||||
:class="{ 'cursor-pointer': tile.enabled }"
|
||||
:style="!tile.enabled ? 'opacity: 0.5' : ''"
|
||||
@click="onTileClick(tile)"
|
||||
>
|
||||
<VCardText class="d-flex align-center gap-x-4">
|
||||
<VAvatar
|
||||
:color="tile.color"
|
||||
variant="tonal"
|
||||
size="44"
|
||||
rounded
|
||||
>
|
||||
<VIcon
|
||||
:icon="tile.icon"
|
||||
size="28"
|
||||
/>
|
||||
</VAvatar>
|
||||
<div>
|
||||
<p class="text-body-1 mb-0">
|
||||
{{ tile.title }}
|
||||
</p>
|
||||
<h4 class="text-h4">
|
||||
{{ tile.value }}
|
||||
</h4>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</EventTabsNav>
|
||||
</template>
|
||||
420
apps/app/src/pages/events/[id]/persons/index.vue
Normal file
420
apps/app/src/pages/events/[id]/persons/index.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<script setup lang="ts">
|
||||
import { usePersonList, useApprovePerson, useDeletePerson } from '@/composables/api/usePersons'
|
||||
import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import EventTabsNav from '@/components/events/EventTabsNav.vue'
|
||||
import CreatePersonDialog from '@/components/persons/CreatePersonDialog.vue'
|
||||
import EditPersonDialog from '@/components/persons/EditPersonDialog.vue'
|
||||
import PersonDetailPanel from '@/components/persons/PersonDetailPanel.vue'
|
||||
import type { Person, PersonStatus } from '@/types/person'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
navActiveLink: 'events',
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
|
||||
const eventId = computed(() => String((route.params as { id: string }).id))
|
||||
|
||||
// Filters
|
||||
const filterCrowdTypeId = ref<string>('')
|
||||
const filterStatus = ref<string>('')
|
||||
|
||||
const filters = computed(() => ({
|
||||
crowd_type_id: filterCrowdTypeId.value || undefined,
|
||||
status: filterStatus.value || undefined,
|
||||
}))
|
||||
|
||||
const { data: personsResponse, isLoading, isError, refetch } = usePersonList(eventId, filters)
|
||||
const { data: crowdTypes } = useCrowdTypeList(orgId)
|
||||
|
||||
const persons = computed(() => personsResponse.value?.data ?? [])
|
||||
const meta = computed(() => personsResponse.value?.meta)
|
||||
|
||||
// KPI tiles
|
||||
const tiles = computed(() => [
|
||||
{
|
||||
title: 'Totaal personen',
|
||||
value: meta.value?.total ?? 0,
|
||||
icon: 'tabler-users',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Goedgekeurd',
|
||||
value: meta.value?.total_approved ?? 0,
|
||||
icon: 'tabler-circle-check',
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'In behandeling',
|
||||
value: meta.value?.total_pending ?? 0,
|
||||
icon: 'tabler-clock',
|
||||
color: 'warning',
|
||||
},
|
||||
{
|
||||
title: 'Afgewezen / No-show',
|
||||
value: meta.value?.total_rejected ?? 0,
|
||||
icon: 'tabler-circle-x',
|
||||
color: 'error',
|
||||
},
|
||||
])
|
||||
|
||||
// Status options
|
||||
const statusOptions = [
|
||||
{ title: 'Alle statussen', value: '' },
|
||||
{ title: 'Pending', value: 'pending' },
|
||||
{ title: 'Goedgekeurd', value: 'approved' },
|
||||
{ title: 'Uitgenodigd', value: 'invited' },
|
||||
{ title: 'Aangemeld', value: 'applied' },
|
||||
{ title: 'Afgewezen', value: 'rejected' },
|
||||
{ title: 'No-show', value: 'no_show' },
|
||||
]
|
||||
|
||||
const statusColor: Record<PersonStatus, string> = {
|
||||
pending: 'default',
|
||||
applied: 'info',
|
||||
invited: 'cyan',
|
||||
approved: 'success',
|
||||
rejected: 'error',
|
||||
no_show: 'warning',
|
||||
}
|
||||
|
||||
const headers = [
|
||||
{ title: 'Naam', key: 'name' },
|
||||
{ title: 'E-mail', key: 'email' },
|
||||
{ title: 'Crowd Type', key: 'crowd_type' },
|
||||
{ title: 'Status', key: 'status' },
|
||||
{ title: 'Aangemaakt op', key: 'created_at' },
|
||||
{ title: 'Acties', key: 'actions', sortable: false, align: 'end' as const },
|
||||
]
|
||||
|
||||
const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return dateFormatter.format(new Date(iso))
|
||||
}
|
||||
|
||||
function getInitials(name: string) {
|
||||
return name
|
||||
.split(' ')
|
||||
.map(p => p[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
}
|
||||
|
||||
// Dialogs & panel
|
||||
const isCreateDialogOpen = ref(false)
|
||||
const isEditDialogOpen = ref(false)
|
||||
const editingPerson = ref<Person | null>(null)
|
||||
const selectedPersonId = ref<string | null>(null)
|
||||
const isDetailPanelOpen = ref(false)
|
||||
|
||||
// Delete confirmation
|
||||
const isDeleteDialogOpen = ref(false)
|
||||
const deletingPerson = ref<Person | null>(null)
|
||||
|
||||
// Mutations
|
||||
const { mutate: approvePerson } = useApprovePerson(eventId)
|
||||
const { mutate: deletePerson, isPending: isDeleting } = useDeletePerson(eventId)
|
||||
|
||||
const showSuccess = ref(false)
|
||||
const successMessage = ref('')
|
||||
|
||||
function onRowClick(_event: Event, row: { item: Person }) {
|
||||
selectedPersonId.value = row.item.id
|
||||
isDetailPanelOpen.value = true
|
||||
}
|
||||
|
||||
function onApprove(person: Person) {
|
||||
approvePerson(person.id, {
|
||||
onSuccess: () => {
|
||||
successMessage.value = `${person.name} goedgekeurd`
|
||||
showSuccess.value = true
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function onEdit(person: Person) {
|
||||
editingPerson.value = person
|
||||
isEditDialogOpen.value = true
|
||||
}
|
||||
|
||||
function onDeleteConfirm(person: Person) {
|
||||
deletingPerson.value = person
|
||||
isDeleteDialogOpen.value = true
|
||||
}
|
||||
|
||||
function onDeleteExecute() {
|
||||
if (!deletingPerson.value) return
|
||||
const name = deletingPerson.value.name
|
||||
|
||||
deletePerson(deletingPerson.value.id, {
|
||||
onSuccess: () => {
|
||||
isDeleteDialogOpen.value = false
|
||||
deletingPerson.value = null
|
||||
successMessage.value = `${name} verwijderd`
|
||||
showSuccess.value = true
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// Crowd type filter options
|
||||
const crowdTypeOptions = computed(() => [
|
||||
{ title: 'Alle types', value: '' },
|
||||
...(crowdTypes.value?.map(ct => ({ title: ct.name, value: ct.id })) ?? []),
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EventTabsNav>
|
||||
<!-- Action bar -->
|
||||
<div class="d-flex justify-space-between align-center mb-4">
|
||||
<div class="d-flex gap-x-4">
|
||||
<AppSelect
|
||||
v-model="filterCrowdTypeId"
|
||||
label="Crowd Type"
|
||||
:items="crowdTypeOptions"
|
||||
clearable
|
||||
style="min-inline-size: 180px;"
|
||||
/>
|
||||
<AppSelect
|
||||
v-model="filterStatus"
|
||||
label="Status"
|
||||
:items="statusOptions"
|
||||
clearable
|
||||
style="min-inline-size: 180px;"
|
||||
/>
|
||||
</div>
|
||||
<VBtn
|
||||
prepend-icon="tabler-plus"
|
||||
@click="isCreateDialogOpen = true"
|
||||
>
|
||||
Persoon toevoegen
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- KPI Tiles -->
|
||||
<VRow class="mb-6">
|
||||
<VCol
|
||||
v-for="tile in tiles"
|
||||
:key="tile.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center gap-x-4">
|
||||
<VAvatar
|
||||
:color="tile.color"
|
||||
variant="tonal"
|
||||
size="44"
|
||||
rounded
|
||||
>
|
||||
<VIcon
|
||||
:icon="tile.icon"
|
||||
size="28"
|
||||
/>
|
||||
</VAvatar>
|
||||
<div>
|
||||
<p class="text-body-1 mb-0">
|
||||
{{ tile.title }}
|
||||
</p>
|
||||
<h4 class="text-h4">
|
||||
{{ tile.value }}
|
||||
</h4>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="isLoading"
|
||||
type="table"
|
||||
/>
|
||||
|
||||
<!-- Error -->
|
||||
<VAlert
|
||||
v-else-if="isError"
|
||||
type="error"
|
||||
class="mb-4"
|
||||
>
|
||||
Kon personen niet laden.
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="refetch()"
|
||||
>
|
||||
Opnieuw proberen
|
||||
</VBtn>
|
||||
</template>
|
||||
</VAlert>
|
||||
|
||||
<!-- Empty -->
|
||||
<VCard
|
||||
v-else-if="!persons.length"
|
||||
class="text-center pa-8"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-users"
|
||||
size="48"
|
||||
class="mb-4 text-disabled"
|
||||
/>
|
||||
<p class="text-body-1 text-disabled">
|
||||
Nog geen personen voor dit evenement
|
||||
</p>
|
||||
</VCard>
|
||||
|
||||
<!-- Data table -->
|
||||
<VCard v-else>
|
||||
<VDataTable
|
||||
:headers="headers"
|
||||
:items="persons"
|
||||
item-value="id"
|
||||
hover
|
||||
@click:row="onRowClick"
|
||||
>
|
||||
<template #item.name="{ item }">
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<VAvatar
|
||||
size="32"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<span class="text-caption">{{ getInitials(item.name) }}</span>
|
||||
</VAvatar>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item.crowd_type="{ item }">
|
||||
<VChip
|
||||
v-if="item.crowd_type"
|
||||
:color="item.crowd_type.color"
|
||||
size="small"
|
||||
>
|
||||
{{ item.crowd_type.name }}
|
||||
</VChip>
|
||||
<span
|
||||
v-else
|
||||
class="text-disabled"
|
||||
>-</span>
|
||||
</template>
|
||||
|
||||
<template #item.status="{ item }">
|
||||
<VChip
|
||||
:color="statusColor[item.status]"
|
||||
size="small"
|
||||
>
|
||||
{{ item.status }}
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<template #item.created_at="{ item }">
|
||||
{{ formatDate(item.created_at) }}
|
||||
</template>
|
||||
|
||||
<template #item.actions="{ item }">
|
||||
<div class="d-flex justify-end gap-x-1">
|
||||
<VBtn
|
||||
v-if="item.status === 'pending' || item.status === 'applied'"
|
||||
icon="tabler-circle-check"
|
||||
variant="text"
|
||||
size="small"
|
||||
color="success"
|
||||
title="Goedkeuren"
|
||||
@click.stop="onApprove(item)"
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-edit"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="Bewerken"
|
||||
@click.stop="onEdit(item)"
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-trash"
|
||||
variant="text"
|
||||
size="small"
|
||||
color="error"
|
||||
title="Verwijderen"
|
||||
@click.stop="onDeleteConfirm(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VDataTable>
|
||||
</VCard>
|
||||
|
||||
<!-- Create dialog -->
|
||||
<CreatePersonDialog
|
||||
v-model="isCreateDialogOpen"
|
||||
:event-id="eventId"
|
||||
:org-id="orgId"
|
||||
/>
|
||||
|
||||
<!-- Edit dialog -->
|
||||
<EditPersonDialog
|
||||
v-if="editingPerson"
|
||||
v-model="isEditDialogOpen"
|
||||
:person="editingPerson"
|
||||
:event-id="eventId"
|
||||
:org-id="orgId"
|
||||
/>
|
||||
|
||||
<!-- Detail panel -->
|
||||
<PersonDetailPanel
|
||||
v-model="isDetailPanelOpen"
|
||||
:event-id="eventId"
|
||||
:org-id="orgId"
|
||||
:person-id="selectedPersonId"
|
||||
@edit="(p: Person) => onEdit(p)"
|
||||
/>
|
||||
|
||||
<!-- Delete confirmation -->
|
||||
<VDialog
|
||||
v-model="isDeleteDialogOpen"
|
||||
max-width="400"
|
||||
>
|
||||
<VCard title="Persoon verwijderen">
|
||||
<VCardText>
|
||||
Weet je zeker dat je <strong>{{ deletingPerson?.name }}</strong> wilt verwijderen?
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="isDeleteDialogOpen = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
:loading="isDeleting"
|
||||
@click="onDeleteExecute"
|
||||
>
|
||||
Verwijderen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- Success snackbar -->
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
{{ successMessage }}
|
||||
</VSnackbar>
|
||||
</EventTabsNav>
|
||||
</template>
|
||||
19
apps/app/src/pages/events/[id]/sections/index.vue
Normal file
19
apps/app/src/pages/events/[id]/sections/index.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import EventTabsNav from '@/components/events/EventTabsNav.vue'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
navActiveLink: 'events',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EventTabsNav>
|
||||
<VCard class="ma-4">
|
||||
<VCardText>
|
||||
Deze module is binnenkort beschikbaar.
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</EventTabsNav>
|
||||
</template>
|
||||
19
apps/app/src/pages/events/[id]/settings/index.vue
Normal file
19
apps/app/src/pages/events/[id]/settings/index.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import EventTabsNav from '@/components/events/EventTabsNav.vue'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
navActiveLink: 'events',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EventTabsNav>
|
||||
<VCard class="ma-4">
|
||||
<VCardText>
|
||||
Deze module is binnenkort beschikbaar.
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</EventTabsNav>
|
||||
</template>
|
||||
@@ -20,3 +20,20 @@ export interface UpdateOrganisationPayload {
|
||||
billing_status?: Organisation['billing_status']
|
||||
settings?: Record<string, unknown>
|
||||
}
|
||||
|
||||
export interface CrowdType {
|
||||
id: string
|
||||
name: string
|
||||
system_type: string
|
||||
color: string
|
||||
icon: string | null
|
||||
is_active: boolean
|
||||
}
|
||||
|
||||
export interface Company {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
contact_name: string | null
|
||||
contact_email: string | null
|
||||
}
|
||||
|
||||
39
apps/app/src/types/person.ts
Normal file
39
apps/app/src/types/person.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import type { Company, CrowdType } from '@/types/organisation'
|
||||
|
||||
export type PersonStatus =
|
||||
| 'invited'
|
||||
| 'applied'
|
||||
| 'pending'
|
||||
| 'approved'
|
||||
| 'rejected'
|
||||
| 'no_show'
|
||||
|
||||
export interface Person {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
phone: string | null
|
||||
status: PersonStatus
|
||||
is_blacklisted: boolean
|
||||
admin_notes: string | null
|
||||
custom_fields: Record<string, unknown> | null
|
||||
event_id: string
|
||||
created_at: string
|
||||
crowd_type: CrowdType | null
|
||||
company: Company | null
|
||||
}
|
||||
|
||||
export interface CreatePersonPayload {
|
||||
crowd_type_id: string
|
||||
name: string
|
||||
email: string
|
||||
phone?: string
|
||||
company_id?: string
|
||||
status?: PersonStatus
|
||||
}
|
||||
|
||||
export interface UpdatePersonPayload extends Partial<CreatePersonPayload> {
|
||||
status?: PersonStatus
|
||||
is_blacklisted?: boolean
|
||||
admin_notes?: string
|
||||
}
|
||||
5
apps/app/typed-router.d.ts
vendored
5
apps/app/typed-router.d.ts
vendored
@@ -23,6 +23,11 @@ declare module 'vue-router/auto-routes' {
|
||||
'dashboard': RouteRecordInfo<'dashboard', '/dashboard', Record<never, never>, Record<never, never>>,
|
||||
'events': RouteRecordInfo<'events', '/events', Record<never, never>, Record<never, never>>,
|
||||
'events-id': RouteRecordInfo<'events-id', '/events/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'events-id-artists': RouteRecordInfo<'events-id-artists', '/events/:id/artists', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'events-id-briefings': RouteRecordInfo<'events-id-briefings', '/events/:id/briefings', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'events-id-persons': RouteRecordInfo<'events-id-persons', '/events/:id/persons', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'events-id-sections': RouteRecordInfo<'events-id-sections', '/events/:id/sections', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'events-id-settings': RouteRecordInfo<'events-id-settings', '/events/:id/settings', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'invitations-token': RouteRecordInfo<'invitations-token', '/invitations/:token', { token: ParamValue<true> }, { token: ParamValue<false> }>,
|
||||
'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
|
||||
'organisation': RouteRecordInfo<'organisation', '/organisation', Record<never, never>, Record<never, never>>,
|
||||
|
||||
Reference in New Issue
Block a user