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:
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>
|
||||
Reference in New Issue
Block a user