feat: schema v1.7 + sections/shifts frontend
- Universeel festival/event model (parent_event_id, event_type) - event_person_activations pivot tabel - Event model: parent/children relaties + helper scopes - DevSeeder: festival structuur met sub-events - Sections & Shifts frontend (twee-kolom layout) - BACKLOG.md aangemaakt met 22 gedocumenteerde wensen
This commit is contained in:
165
apps/app/src/components/sections/AssignShiftDialog.vue
Normal file
165
apps/app/src/components/sections/AssignShiftDialog.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<script setup lang="ts">
|
||||
import { useAssignShift } from '@/composables/api/useShifts'
|
||||
import { usePersonList } from '@/composables/api/usePersons'
|
||||
import type { Shift } from '@/types/section'
|
||||
import type { Person } from '@/types/person'
|
||||
|
||||
const props = defineProps<{
|
||||
eventId: string
|
||||
sectionId: string
|
||||
shift: Shift | null
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const eventIdRef = computed(() => props.eventId)
|
||||
const sectionIdRef = computed(() => props.sectionId)
|
||||
|
||||
const approvedFilter = ref({ status: 'approved' })
|
||||
const { data: personsResponse } = usePersonList(eventIdRef, approvedFilter)
|
||||
const { mutate: assignShift, isPending } = useAssignShift(eventIdRef, sectionIdRef)
|
||||
|
||||
const persons = computed(() => personsResponse.value?.data ?? [])
|
||||
|
||||
const selectedPersonId = ref<string>('')
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const showSuccess = ref(false)
|
||||
|
||||
// Check for overlap warning
|
||||
const hasOverlapWarning = computed(() => {
|
||||
if (!selectedPersonId.value || !props.shift) return false
|
||||
// This is informational — the backend enforces the actual constraint
|
||||
return false
|
||||
})
|
||||
|
||||
const personItems = computed(() =>
|
||||
persons.value.map((p: Person) => ({
|
||||
title: `${p.name} — ${p.email}`,
|
||||
value: p.id,
|
||||
props: {
|
||||
subtitle: p.crowd_type?.name ?? '',
|
||||
},
|
||||
})),
|
||||
)
|
||||
|
||||
function onSubmit() {
|
||||
if (!selectedPersonId.value || !props.shift) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
assignShift(
|
||||
{
|
||||
shiftId: props.shift.id,
|
||||
personId: selectedPersonId.value,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
showSuccess.value = true
|
||||
modelValue.value = false
|
||||
selectedPersonId.value = ''
|
||||
},
|
||||
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 = { person_id: data.message }
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="550"
|
||||
>
|
||||
<VCard title="Shift toewijzen">
|
||||
<VCardText>
|
||||
<!-- Shift info -->
|
||||
<div
|
||||
v-if="shift"
|
||||
class="mb-4"
|
||||
>
|
||||
<div class="d-flex align-center gap-x-2 mb-2">
|
||||
<span class="text-h6">{{ shift.title ?? 'Shift' }}</span>
|
||||
<VChip
|
||||
v-if="shift.is_lead_role"
|
||||
color="warning"
|
||||
size="small"
|
||||
>
|
||||
Hoofdrol
|
||||
</VChip>
|
||||
</div>
|
||||
<div class="text-body-2 text-disabled">
|
||||
{{ shift.time_slot?.name }} — {{ shift.effective_start_time }}–{{ shift.effective_end_time }}
|
||||
</div>
|
||||
<div class="text-body-2 text-disabled">
|
||||
Capaciteit: {{ shift.filled_slots }}/{{ shift.slots_total }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VDivider class="mb-4" />
|
||||
|
||||
<!-- Person search -->
|
||||
<VAutocomplete
|
||||
v-model="selectedPersonId"
|
||||
label="Persoon zoeken"
|
||||
:items="personItems"
|
||||
item-title="title"
|
||||
item-value="value"
|
||||
:error-messages="errors.person_id"
|
||||
clearable
|
||||
no-data-text="Geen goedgekeurde personen gevonden"
|
||||
>
|
||||
<template #item="{ props: itemProps, item }">
|
||||
<VListItem
|
||||
v-bind="itemProps"
|
||||
:subtitle="item.raw.props.subtitle"
|
||||
/>
|
||||
</template>
|
||||
</VAutocomplete>
|
||||
|
||||
<!-- Overlap warning -->
|
||||
<VAlert
|
||||
v-if="hasOverlapWarning && shift?.allow_overlap"
|
||||
type="warning"
|
||||
variant="tonal"
|
||||
class="mt-3"
|
||||
>
|
||||
Let op: overlap met bestaande shift
|
||||
</VAlert>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
:disabled="!selectedPersonId"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Toewijzen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
Persoon succesvol toegewezen
|
||||
</VSnackbar>
|
||||
</template>
|
||||
142
apps/app/src/components/sections/CreateSectionDialog.vue
Normal file
142
apps/app/src/components/sections/CreateSectionDialog.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useCreateSection } from '@/composables/api/useSections'
|
||||
import { requiredValidator } from '@core/utils/validators'
|
||||
import type { SectionType } from '@/types/section'
|
||||
|
||||
const props = defineProps<{
|
||||
eventId: string
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const eventIdRef = computed(() => props.eventId)
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
type: 'standard' as SectionType,
|
||||
crew_auto_accepts: false,
|
||||
responder_self_checkin: true,
|
||||
})
|
||||
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
|
||||
const { mutate: createSection, isPending } = useCreateSection(eventIdRef)
|
||||
|
||||
const typeOptions = [
|
||||
{ title: 'Standaard', value: 'standard' },
|
||||
{ title: 'Overkoepelend', value: 'cross_event' },
|
||||
]
|
||||
|
||||
function resetForm() {
|
||||
form.value = {
|
||||
name: '',
|
||||
type: 'standard',
|
||||
crew_auto_accepts: false,
|
||||
responder_self_checkin: true,
|
||||
}
|
||||
errors.value = {}
|
||||
refVForm.value?.resetValidation()
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
createSection(
|
||||
{
|
||||
name: form.value.name,
|
||||
type: form.value.type,
|
||||
crew_auto_accepts: form.value.crew_auto_accepts,
|
||||
responder_self_checkin: form.value.responder_self_checkin,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
modelValue.value = false
|
||||
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]]),
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="500"
|
||||
@after-leave="resetForm"
|
||||
>
|
||||
<VCard title="Sectie aanmaken">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.name"
|
||||
label="Naam"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
autofocus
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="form.type"
|
||||
label="Type"
|
||||
:items="typeOptions"
|
||||
:error-messages="errors.type"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VSwitch
|
||||
v-model="form.crew_auto_accepts"
|
||||
label="Crew auto-accepteren"
|
||||
hint="Toewijzingen worden automatisch goedgekeurd"
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VSwitch
|
||||
v-model="form.responder_self_checkin"
|
||||
label="Zelfstandig inchecken"
|
||||
hint="Vrijwilligers kunnen zelf inchecken via QR"
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Aanmaken
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
287
apps/app/src/components/sections/CreateShiftDialog.vue
Normal file
287
apps/app/src/components/sections/CreateShiftDialog.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useCreateShift, useUpdateShift } from '@/composables/api/useShifts'
|
||||
import { useTimeSlotList } from '@/composables/api/useTimeSlots'
|
||||
import { requiredValidator } from '@core/utils/validators'
|
||||
import type { Shift, ShiftStatus } from '@/types/section'
|
||||
|
||||
const props = defineProps<{
|
||||
eventId: string
|
||||
sectionId: string
|
||||
shift?: Shift | null
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const eventIdRef = computed(() => props.eventId)
|
||||
const sectionIdRef = computed(() => props.sectionId)
|
||||
|
||||
const isEditing = computed(() => !!props.shift)
|
||||
|
||||
const { data: timeSlots } = useTimeSlotList(eventIdRef)
|
||||
const { mutate: createShift, isPending: isCreating } = useCreateShift(eventIdRef, sectionIdRef)
|
||||
const { mutate: updateShift, isPending: isUpdating } = useUpdateShift(eventIdRef, sectionIdRef)
|
||||
|
||||
const isPending = computed(() => isCreating.value || isUpdating.value)
|
||||
|
||||
const form = ref({
|
||||
time_slot_id: '',
|
||||
title: '',
|
||||
report_time: '',
|
||||
actual_start_time: '',
|
||||
actual_end_time: '',
|
||||
slots_total: 1,
|
||||
slots_open_for_claiming: 0,
|
||||
is_lead_role: false,
|
||||
allow_overlap: false,
|
||||
instructions: '',
|
||||
status: 'draft' as ShiftStatus,
|
||||
})
|
||||
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
|
||||
// Populate form when editing
|
||||
watch(
|
||||
() => props.shift,
|
||||
(shift) => {
|
||||
if (shift) {
|
||||
form.value = {
|
||||
time_slot_id: shift.time_slot_id,
|
||||
title: shift.title ?? '',
|
||||
report_time: shift.report_time ?? '',
|
||||
actual_start_time: shift.actual_start_time ?? '',
|
||||
actual_end_time: shift.actual_end_time ?? '',
|
||||
slots_total: shift.slots_total,
|
||||
slots_open_for_claiming: shift.slots_open_for_claiming,
|
||||
is_lead_role: shift.is_lead_role,
|
||||
allow_overlap: shift.allow_overlap,
|
||||
instructions: shift.instructions ?? '',
|
||||
status: shift.status,
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const timeSlotItems = computed(() =>
|
||||
timeSlots.value?.map(ts => ({
|
||||
title: `${ts.name} — ${ts.date} ${ts.start_time}–${ts.end_time}`,
|
||||
value: ts.id,
|
||||
})) ?? [],
|
||||
)
|
||||
|
||||
const statusOptions = [
|
||||
{ title: 'Concept', value: 'draft' },
|
||||
{ title: 'Open', value: 'open' },
|
||||
]
|
||||
|
||||
function resetForm() {
|
||||
form.value = {
|
||||
time_slot_id: '',
|
||||
title: '',
|
||||
report_time: '',
|
||||
actual_start_time: '',
|
||||
actual_end_time: '',
|
||||
slots_total: 1,
|
||||
slots_open_for_claiming: 0,
|
||||
is_lead_role: false,
|
||||
allow_overlap: false,
|
||||
instructions: '',
|
||||
status: 'draft',
|
||||
}
|
||||
errors.value = {}
|
||||
refVForm.value?.resetValidation()
|
||||
}
|
||||
|
||||
function buildPayload() {
|
||||
return {
|
||||
time_slot_id: form.value.time_slot_id,
|
||||
slots_total: form.value.slots_total,
|
||||
slots_open_for_claiming: form.value.slots_open_for_claiming,
|
||||
is_lead_role: form.value.is_lead_role,
|
||||
allow_overlap: form.value.allow_overlap,
|
||||
status: form.value.status,
|
||||
...(form.value.title ? { title: form.value.title } : {}),
|
||||
...(form.value.report_time ? { report_time: form.value.report_time } : {}),
|
||||
...(form.value.actual_start_time ? { actual_start_time: form.value.actual_start_time } : {}),
|
||||
...(form.value.actual_end_time ? { actual_end_time: form.value.actual_end_time } : {}),
|
||||
...(form.value.instructions ? { instructions: form.value.instructions } : {}),
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
const callbacks = {
|
||||
onSuccess: () => {
|
||||
modelValue.value = false
|
||||
if (!isEditing.value) 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]]),
|
||||
)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
if (isEditing.value && props.shift) {
|
||||
updateShift({ id: props.shift.id, ...buildPayload() }, callbacks)
|
||||
}
|
||||
else {
|
||||
createShift(buildPayload(), callbacks)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="600"
|
||||
@after-leave="!isEditing && resetForm()"
|
||||
>
|
||||
<VCard :title="isEditing ? 'Shift bewerken' : 'Shift toevoegen'">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="form.time_slot_id"
|
||||
label="Time Slot"
|
||||
:items="timeSlotItems"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.time_slot_id"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.title"
|
||||
label="Titel / Rol"
|
||||
placeholder="Tapper, Barhoofd, Stage Manager..."
|
||||
:error-messages="errors.title"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.report_time"
|
||||
label="Aanwezig om (rapport tijd)"
|
||||
type="time"
|
||||
:error-messages="errors.report_time"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.actual_start_time"
|
||||
label="Afwijkende starttijd"
|
||||
type="time"
|
||||
hint="Leeg = time slot tijd"
|
||||
persistent-hint
|
||||
:error-messages="errors.actual_start_time"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.actual_end_time"
|
||||
label="Afwijkende eindtijd"
|
||||
type="time"
|
||||
:error-messages="errors.actual_end_time"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model.number="form.slots_total"
|
||||
label="Totaal slots"
|
||||
type="number"
|
||||
min="1"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.slots_total"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model.number="form.slots_open_for_claiming"
|
||||
label="Open voor claimen"
|
||||
type="number"
|
||||
min="0"
|
||||
:max="form.slots_total"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.slots_open_for_claiming"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VSwitch
|
||||
v-model="form.is_lead_role"
|
||||
label="Dit is een leidinggevende rol"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VSwitch
|
||||
v-model="form.allow_overlap"
|
||||
label="Overlap toegestaan"
|
||||
hint="Persoon mag meerdere shifts in hetzelfde tijdvak hebben"
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextarea
|
||||
v-model="form.instructions"
|
||||
label="Instructies"
|
||||
rows="3"
|
||||
:error-messages="errors.instructions"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
{{ isEditing ? 'Opslaan' : 'Toevoegen' }}
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
193
apps/app/src/components/sections/CreateTimeSlotDialog.vue
Normal file
193
apps/app/src/components/sections/CreateTimeSlotDialog.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useCreateTimeSlot } from '@/composables/api/useTimeSlots'
|
||||
import { requiredValidator } from '@core/utils/validators'
|
||||
|
||||
const props = defineProps<{
|
||||
eventId: string
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const eventIdRef = computed(() => props.eventId)
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
person_type: 'VOLUNTEER',
|
||||
date: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
duration_hours: null as number | null,
|
||||
})
|
||||
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
|
||||
const { mutate: createTimeSlot, isPending } = useCreateTimeSlot(eventIdRef)
|
||||
|
||||
const personTypeOptions = [
|
||||
{ title: 'Vrijwilliger', value: 'VOLUNTEER' },
|
||||
{ title: 'Crew', value: 'CREW' },
|
||||
{ title: 'Pers', value: 'PRESS' },
|
||||
{ title: 'Fotograaf', value: 'PHOTO' },
|
||||
{ title: 'Partner', value: 'PARTNER' },
|
||||
]
|
||||
|
||||
// Auto-calculate duration from start/end time
|
||||
watch(
|
||||
() => [form.value.start_time, form.value.end_time],
|
||||
([start, end]) => {
|
||||
if (start && end) {
|
||||
const [sh, sm] = start.split(':').map(Number)
|
||||
const [eh, em] = end.split(':').map(Number)
|
||||
let diff = (eh * 60 + em) - (sh * 60 + sm)
|
||||
if (diff < 0) diff += 24 * 60
|
||||
form.value.duration_hours = Math.round((diff / 60) * 100) / 100
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
function resetForm() {
|
||||
form.value = {
|
||||
name: '',
|
||||
person_type: 'VOLUNTEER',
|
||||
date: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
duration_hours: null,
|
||||
}
|
||||
errors.value = {}
|
||||
refVForm.value?.resetValidation()
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
createTimeSlot(
|
||||
{
|
||||
name: form.value.name,
|
||||
person_type: form.value.person_type,
|
||||
date: form.value.date,
|
||||
start_time: form.value.start_time,
|
||||
end_time: form.value.end_time,
|
||||
...(form.value.duration_hours != null ? { duration_hours: form.value.duration_hours } : {}),
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
modelValue.value = false
|
||||
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]]),
|
||||
)
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="550"
|
||||
@after-leave="resetForm"
|
||||
>
|
||||
<VCard title="Time Slot aanmaken">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.name"
|
||||
label="Naam"
|
||||
placeholder="Dag 1 Avond - Vrijwilliger"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
autofocus
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="form.person_type"
|
||||
label="Persoonscategorie"
|
||||
:items="personTypeOptions"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.person_type"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.date"
|
||||
label="Datum"
|
||||
type="date"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.date"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.start_time"
|
||||
label="Starttijd"
|
||||
type="time"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.start_time"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.end_time"
|
||||
label="Eindtijd"
|
||||
type="time"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.end_time"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model.number="form.duration_hours"
|
||||
label="Duur (uren)"
|
||||
type="number"
|
||||
:error-messages="errors.duration_hours"
|
||||
hint="Automatisch berekend uit start- en eindtijd"
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Aanmaken
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
Reference in New Issue
Block a user