feat(app): dedicated Tijdsloten tab with grouped view and fill rates
Extract time slots from Secties & Shifts into a dedicated Tijdsloten tab. New tab groups time slots by date with Dutch date headers, person type filter pills, fill rate progress bars, and sections count. Includes duplicate, edit, and delete actions with confirmation dialog. - Create types/timeSlot.ts with enriched TimeSlot interface - Add Tijdsloten tab to EventTabsNav between Publiekslijsten and Secties - Create time-slots page with loading, error, and empty states - Remove time slots panel from SectionsShiftsPanel - Update CreateShiftDialog to navigate to time slots tab Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -14,12 +14,11 @@ const props = withDefaults(defineProps<{
|
||||
isSubEvent: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
openTimeSlots: []
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const eventIdRef = computed(() => props.eventId)
|
||||
const sectionIdRef = computed(() => props.sectionId)
|
||||
|
||||
@@ -209,7 +208,7 @@ function onSubmit() {
|
||||
variant="text"
|
||||
color="primary"
|
||||
prepend-icon="tabler-clock"
|
||||
@click="emit('openTimeSlots'); modelValue = false"
|
||||
@click="modelValue = false; router.push({ name: 'events-id-time-slots', params: { id: (route.params as { id: string }).id } })"
|
||||
>
|
||||
Time Slots beheren
|
||||
</VBtn>
|
||||
|
||||
@@ -2,126 +2,18 @@
|
||||
import draggable from 'vuedraggable'
|
||||
import { useSectionList, useDeleteSection, useReorderSections } from '@/composables/api/useSections'
|
||||
import { useShiftList, useDeleteShift } from '@/composables/api/useShifts'
|
||||
import { useTimeSlotList, useDeleteTimeSlot } from '@/composables/api/useTimeSlots'
|
||||
import { useSectionsUiStore } from '@/stores/useSectionsUiStore'
|
||||
import CreateSectionDialog from '@/components/sections/CreateSectionDialog.vue'
|
||||
import EditSectionDialog from '@/components/sections/EditSectionDialog.vue'
|
||||
import CreateTimeSlotDialog from '@/components/sections/CreateTimeSlotDialog.vue'
|
||||
import CreateShiftDialog from '@/components/sections/CreateShiftDialog.vue'
|
||||
import AssignShiftDialog from '@/components/sections/AssignShiftDialog.vue'
|
||||
import type { FestivalSection, Shift, ShiftStatus, TimeSlot, PersonType } from '@/types/section'
|
||||
import type { EventItem } from '@/types/event'
|
||||
import type { FestivalSection, Shift, ShiftStatus } from '@/types/section'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const props = defineProps<{
|
||||
eventId: string
|
||||
children?: EventItem[]
|
||||
isSubEvent?: boolean
|
||||
}>(), {
|
||||
children: () => [],
|
||||
isSubEvent: false,
|
||||
})
|
||||
}>()
|
||||
|
||||
const eventIdRef = computed(() => props.eventId)
|
||||
const isSubEventRef = computed(() => props.isSubEvent)
|
||||
|
||||
// --- Time Slots ---
|
||||
const { data: timeSlots, isLoading: timeSlotsLoading } = useTimeSlotList(eventIdRef, { includeParent: isSubEventRef })
|
||||
const { mutate: deleteTimeSlotMutation, isPending: isDeletingTimeSlot } = useDeleteTimeSlot(eventIdRef)
|
||||
|
||||
const personTypeLabel: Record<PersonType, string> = {
|
||||
VOLUNTEER: 'Vrijwilliger',
|
||||
CREW: 'Crew',
|
||||
PRESS: 'Pers',
|
||||
PHOTO: 'Fotograaf',
|
||||
PARTNER: 'Partner',
|
||||
}
|
||||
|
||||
const personTypeColor: Record<PersonType, string> = {
|
||||
VOLUNTEER: 'success',
|
||||
CREW: 'primary',
|
||||
PRESS: 'warning',
|
||||
PHOTO: 'info',
|
||||
PARTNER: 'secondary',
|
||||
}
|
||||
|
||||
// Group time slots by source when on a sub-event with parent time slots included
|
||||
const hasFestivalTimeSlots = computed(() =>
|
||||
timeSlots.value?.some(ts => ts.source === 'festival') ?? false,
|
||||
)
|
||||
|
||||
const subEventTimeSlots = computed(() =>
|
||||
timeSlots.value?.filter(ts => ts.source !== 'festival') ?? [],
|
||||
)
|
||||
|
||||
const festivalTimeSlots = computed(() =>
|
||||
timeSlots.value?.filter(ts => ts.source === 'festival') ?? [],
|
||||
)
|
||||
|
||||
const timeSlotsSummary = computed(() => {
|
||||
const slots = timeSlots.value
|
||||
if (!slots?.length) return ''
|
||||
|
||||
const count = slots.length
|
||||
const dates = slots.map(ts => ts.date).sort()
|
||||
const minDate = dates[0]
|
||||
const maxDate = dates[dates.length - 1]
|
||||
|
||||
const fmt = new Intl.DateTimeFormat('nl-NL', { day: 'numeric', month: 'short' })
|
||||
const fmtYear = new Intl.DateTimeFormat('nl-NL', { day: 'numeric', month: 'short', year: 'numeric' })
|
||||
|
||||
if (minDate === maxDate) {
|
||||
return `${count} time slot${count > 1 ? 's' : ''} \u00b7 ${fmtYear.format(new Date(minDate))}`
|
||||
}
|
||||
|
||||
return `${count} time slots \u00b7 ${fmt.format(new Date(minDate))} \u2013 ${fmtYear.format(new Date(maxDate))}`
|
||||
})
|
||||
|
||||
function formatTimeSlotDate(iso: string) {
|
||||
if (!iso) return ''
|
||||
return new Intl.DateTimeFormat('nl-NL', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' }).format(new Date(iso))
|
||||
}
|
||||
|
||||
function formatTime(time: string) {
|
||||
return time?.slice(0, 5) ?? ''
|
||||
}
|
||||
|
||||
// --- Time slot context labels (Opbouw / Afbraak / Transitie) ---
|
||||
const hasChildren = computed(() => props.children.length > 0)
|
||||
|
||||
const childDateRange = computed(() => {
|
||||
if (!hasChildren.value) return null
|
||||
|
||||
const starts = props.children.map(c => c.start_date).sort()
|
||||
const ends = props.children.map(c => c.end_date).sort()
|
||||
|
||||
return {
|
||||
firstStart: starts[0],
|
||||
lastEnd: ends[ends.length - 1],
|
||||
dates: props.children.map(c => ({ start: c.start_date, end: c.end_date })),
|
||||
}
|
||||
})
|
||||
|
||||
function getTimeSlotContext(ts: TimeSlot): { label: string; color: string } | null {
|
||||
if (!childDateRange.value) return null
|
||||
|
||||
const tsDate = ts.date
|
||||
const { firstStart, lastEnd, dates } = childDateRange.value
|
||||
|
||||
if (tsDate < firstStart) return { label: 'Opbouw', color: 'warning' }
|
||||
if (tsDate > lastEnd) return { label: 'Afbraak', color: 'error' }
|
||||
|
||||
// Check if this date falls between two sub-events (transition)
|
||||
const sorted = [...dates].sort((a, b) => a.start.localeCompare(b.start))
|
||||
for (let i = 0; i < sorted.length - 1; i++) {
|
||||
const currentEnd = sorted[i].end
|
||||
const nextStart = sorted[i + 1].start
|
||||
if (tsDate > currentEnd && tsDate < nextStart) {
|
||||
return { label: 'Transitie', color: 'info' }
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
// --- Section list ---
|
||||
const { data: sectionsQuery, isLoading: sectionsLoading } = useSectionList(eventIdRef)
|
||||
@@ -199,18 +91,14 @@ const shiftsByTimeSlot = computed(() => {
|
||||
})
|
||||
|
||||
// --- Dialogs ---
|
||||
const sectionsUiStore = useSectionsUiStore()
|
||||
|
||||
const isCreateSectionOpen = ref(false)
|
||||
const isEditSectionOpen = ref(false)
|
||||
const isCreateTimeSlotOpen = ref(false)
|
||||
const isCreateShiftOpen = ref(false)
|
||||
const isAssignShiftOpen = ref(false)
|
||||
|
||||
const editingShift = ref<Shift | null>(null)
|
||||
const assigningShift = ref<Shift | null>(null)
|
||||
const editingTimeSlot = ref<TimeSlot | null>(null)
|
||||
const duplicatingTimeSlot = ref<TimeSlot | null>(null)
|
||||
|
||||
// Delete section
|
||||
const isDeleteSectionOpen = ref(false)
|
||||
@@ -234,43 +122,6 @@ function onDeleteSectionExecute() {
|
||||
})
|
||||
}
|
||||
|
||||
// Delete time slot
|
||||
const isDeleteTimeSlotOpen = ref(false)
|
||||
const deletingTimeSlotId = ref<string | null>(null)
|
||||
|
||||
function onDeleteTimeSlotConfirm(ts: TimeSlot) {
|
||||
deletingTimeSlotId.value = ts.id
|
||||
isDeleteTimeSlotOpen.value = true
|
||||
}
|
||||
|
||||
function onDeleteTimeSlotExecute() {
|
||||
if (!deletingTimeSlotId.value) return
|
||||
deleteTimeSlotMutation(deletingTimeSlotId.value, {
|
||||
onSuccess: () => {
|
||||
isDeleteTimeSlotOpen.value = false
|
||||
deletingTimeSlotId.value = null
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function onEditTimeSlot(ts: TimeSlot) {
|
||||
editingTimeSlot.value = ts
|
||||
duplicatingTimeSlot.value = null
|
||||
isCreateTimeSlotOpen.value = true
|
||||
}
|
||||
|
||||
function onDuplicateTimeSlot(ts: TimeSlot) {
|
||||
editingTimeSlot.value = null
|
||||
duplicatingTimeSlot.value = ts
|
||||
isCreateTimeSlotOpen.value = true
|
||||
}
|
||||
|
||||
function onAddTimeSlot() {
|
||||
editingTimeSlot.value = null
|
||||
duplicatingTimeSlot.value = null
|
||||
isCreateTimeSlotOpen.value = true
|
||||
}
|
||||
|
||||
// Delete shift
|
||||
const isDeleteShiftOpen = ref(false)
|
||||
const deletingShiftId = ref<string | null>(null)
|
||||
@@ -309,15 +160,6 @@ function onEditSection() {
|
||||
isEditSectionOpen.value = true
|
||||
}
|
||||
|
||||
watch(isCreateTimeSlotOpen, (open) => {
|
||||
if (!open) duplicatingTimeSlot.value = null
|
||||
})
|
||||
|
||||
function onOpenTimeSlotsFromShiftDialog() {
|
||||
isCreateShiftOpen.value = false
|
||||
sectionsUiStore.expandTimeSlots()
|
||||
}
|
||||
|
||||
// Status styling
|
||||
const statusColor: Record<ShiftStatus, string> = {
|
||||
draft: 'default',
|
||||
@@ -380,282 +222,6 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- ═══════════════════════════════════════════════════════════ -->
|
||||
<!-- TIME SLOTS PANEL (collapsible, event-scoped) -->
|
||||
<!-- ═══════════════════════════════════════════════════════════ -->
|
||||
<VCard class="mb-4">
|
||||
<!-- Header — clickable to toggle -->
|
||||
<VCardTitle
|
||||
class="d-flex align-center justify-space-between cursor-pointer"
|
||||
@click="sectionsUiStore.toggleTimeSlots()"
|
||||
>
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<span>Time Slots</span>
|
||||
|
||||
<!-- Contextual help tooltip -->
|
||||
<VTooltip
|
||||
location="bottom"
|
||||
max-width="300"
|
||||
>
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<VIcon
|
||||
v-bind="tooltipProps"
|
||||
icon="tabler-info-circle"
|
||||
size="18"
|
||||
class="text-disabled"
|
||||
@click.stop
|
||||
/>
|
||||
</template>
|
||||
Time Slots zijn de tijdblokken van je evenement (bijv. 'Opbouw dag 1', 'Afbraak'). Ze gelden voor het hele evenement. Alle secties delen dezelfde Time Slots.
|
||||
</VTooltip>
|
||||
|
||||
<!-- Collapsed summary -->
|
||||
<span
|
||||
v-if="!sectionsUiStore.timeSlotsExpanded && timeSlotsSummary"
|
||||
class="text-body-2 text-disabled"
|
||||
>
|
||||
· {{ timeSlotsSummary }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center gap-x-1">
|
||||
<VBtn
|
||||
icon="tabler-plus"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="Time Slot toevoegen"
|
||||
@click.stop="onAddTimeSlot"
|
||||
/>
|
||||
<VIcon
|
||||
:icon="sectionsUiStore.timeSlotsExpanded ? 'tabler-chevron-up' : 'tabler-chevron-down'"
|
||||
size="20"
|
||||
/>
|
||||
</div>
|
||||
</VCardTitle>
|
||||
|
||||
<!-- Expanded content -->
|
||||
<VExpandTransition>
|
||||
<div v-show="sectionsUiStore.timeSlotsExpanded">
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="timeSlotsLoading"
|
||||
type="chip@4"
|
||||
/>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div
|
||||
v-else-if="!timeSlots?.length"
|
||||
class="text-center py-4"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-clock"
|
||||
size="40"
|
||||
class="mb-3 text-disabled"
|
||||
/>
|
||||
<p class="text-body-1 text-disabled mb-4">
|
||||
Nog geen time slots. Maak eerst time slots aan voordat je shifts kunt plannen.
|
||||
</p>
|
||||
<VBtn
|
||||
prepend-icon="tabler-plus"
|
||||
@click="onAddTimeSlot"
|
||||
>
|
||||
Time Slot aanmaken
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- Time Slot cards -->
|
||||
<template v-else>
|
||||
<!-- Grouped view when parent festival time slots are included -->
|
||||
<template v-if="hasFestivalTimeSlots">
|
||||
<!-- Sub-event's own time slots -->
|
||||
<div
|
||||
v-if="subEventTimeSlots.length"
|
||||
class="mb-4"
|
||||
>
|
||||
<div class="text-caption text-uppercase font-weight-medium text-disabled mb-2">
|
||||
{{ subEventTimeSlots[0]?.event_name ?? 'Programma' }}
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<VCard
|
||||
v-for="ts in subEventTimeSlots"
|
||||
:key="ts.id"
|
||||
variant="outlined"
|
||||
class="pa-3"
|
||||
style="min-inline-size: 180px; max-inline-size: 220px;"
|
||||
>
|
||||
<div class="d-flex align-center justify-space-between mb-1">
|
||||
<span class="text-body-1 font-weight-medium text-truncate">
|
||||
{{ ts.name }}
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<VBtn
|
||||
icon="tabler-copy"
|
||||
variant="text"
|
||||
size="x-small"
|
||||
title="Dupliceren"
|
||||
@click="onDuplicateTimeSlot(ts)"
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-edit"
|
||||
variant="text"
|
||||
size="x-small"
|
||||
title="Bewerken"
|
||||
@click="onEditTimeSlot(ts)"
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-trash"
|
||||
variant="text"
|
||||
size="x-small"
|
||||
color="error"
|
||||
title="Verwijderen"
|
||||
@click="onDeleteTimeSlotConfirm(ts)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-body-2 text-disabled">
|
||||
{{ formatTimeSlotDate(ts.date) }} · {{ formatTime(ts.start_time) }}–{{ formatTime(ts.end_time) }}
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center gap-x-1 mt-1">
|
||||
<VChip
|
||||
size="x-small"
|
||||
:color="personTypeColor[ts.person_type]"
|
||||
>
|
||||
{{ personTypeLabel[ts.person_type] }}
|
||||
</VChip>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Festival-level time slots (read-only view) -->
|
||||
<div v-if="festivalTimeSlots.length">
|
||||
<div class="text-caption text-uppercase font-weight-medium text-disabled mb-2">
|
||||
{{ festivalTimeSlots[0]?.event_name ?? 'Festival' }}
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<VCard
|
||||
v-for="ts in festivalTimeSlots"
|
||||
:key="ts.id"
|
||||
variant="outlined"
|
||||
class="pa-3"
|
||||
style="min-inline-size: 180px; max-inline-size: 220px; opacity: 0.75;"
|
||||
>
|
||||
<div class="d-flex align-center justify-space-between mb-1">
|
||||
<span class="text-body-1 font-weight-medium text-truncate">
|
||||
{{ ts.name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-body-2 text-disabled">
|
||||
{{ formatTimeSlotDate(ts.date) }} · {{ formatTime(ts.start_time) }}–{{ formatTime(ts.end_time) }}
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center gap-x-1 mt-1">
|
||||
<VChip
|
||||
size="x-small"
|
||||
:color="personTypeColor[ts.person_type]"
|
||||
>
|
||||
{{ personTypeLabel[ts.person_type] }}
|
||||
</VChip>
|
||||
|
||||
<VChip
|
||||
v-if="getTimeSlotContext(ts)"
|
||||
size="x-small"
|
||||
:color="getTimeSlotContext(ts)!.color"
|
||||
variant="outlined"
|
||||
>
|
||||
{{ getTimeSlotContext(ts)!.label }}
|
||||
</VChip>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Flat view (default, for non-sub-events) -->
|
||||
<div
|
||||
v-else
|
||||
class="d-flex flex-wrap gap-3"
|
||||
>
|
||||
<VCard
|
||||
v-for="ts in timeSlots"
|
||||
:key="ts.id"
|
||||
variant="outlined"
|
||||
class="pa-3"
|
||||
style="min-inline-size: 180px; max-inline-size: 220px;"
|
||||
>
|
||||
<div class="d-flex align-center justify-space-between mb-1">
|
||||
<span class="text-body-1 font-weight-medium text-truncate">
|
||||
{{ ts.name }}
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<VBtn
|
||||
icon="tabler-copy"
|
||||
variant="text"
|
||||
size="x-small"
|
||||
title="Dupliceren"
|
||||
@click="onDuplicateTimeSlot(ts)"
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-edit"
|
||||
variant="text"
|
||||
size="x-small"
|
||||
title="Bewerken"
|
||||
@click="onEditTimeSlot(ts)"
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-trash"
|
||||
variant="text"
|
||||
size="x-small"
|
||||
color="error"
|
||||
title="Verwijderen"
|
||||
@click="onDeleteTimeSlotConfirm(ts)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-body-2 text-disabled">
|
||||
{{ formatTimeSlotDate(ts.date) }} · {{ formatTime(ts.start_time) }}–{{ formatTime(ts.end_time) }}
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center gap-x-1 mt-1">
|
||||
<VChip
|
||||
size="x-small"
|
||||
:color="personTypeColor[ts.person_type]"
|
||||
>
|
||||
{{ personTypeLabel[ts.person_type] }}
|
||||
</VChip>
|
||||
|
||||
<!-- Context label (Opbouw / Afbraak / Transitie) -->
|
||||
<VChip
|
||||
v-if="getTimeSlotContext(ts)"
|
||||
size="x-small"
|
||||
:color="getTimeSlotContext(ts)!.color"
|
||||
variant="outlined"
|
||||
>
|
||||
{{ getTimeSlotContext(ts)!.label }}
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="ts.shifts_count != null"
|
||||
class="text-caption text-disabled mt-1"
|
||||
>
|
||||
{{ ts.shifts_count }} shift{{ ts.shifts_count === 1 ? '' : 's' }}
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
</template>
|
||||
</VCardText>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</VCard>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════ -->
|
||||
<!-- SECTIONS + SHIFTS (two-column layout) -->
|
||||
<!-- ═══════════════════════════════════════════════════════════ -->
|
||||
@@ -988,13 +554,6 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
|
||||
@updated="onSectionUpdated"
|
||||
/>
|
||||
|
||||
<CreateTimeSlotDialog
|
||||
v-model="isCreateTimeSlotOpen"
|
||||
:event-id="eventId"
|
||||
:time-slot="editingTimeSlot"
|
||||
:duplicate-from="duplicatingTimeSlot"
|
||||
/>
|
||||
|
||||
<CreateShiftDialog
|
||||
v-if="activeSection"
|
||||
v-model="isCreateShiftOpen"
|
||||
@@ -1002,7 +561,6 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
|
||||
:section-id="activeSection.id"
|
||||
:shift="editingShift"
|
||||
:is-sub-event="isSubEvent"
|
||||
@open-time-slots="onOpenTimeSlotsFromShiftDialog"
|
||||
/>
|
||||
|
||||
<AssignShiftDialog
|
||||
@@ -1040,34 +598,6 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- Delete time slot confirmation -->
|
||||
<VDialog
|
||||
v-model="isDeleteTimeSlotOpen"
|
||||
max-width="400"
|
||||
>
|
||||
<VCard title="Time Slot verwijderen">
|
||||
<VCardText>
|
||||
Weet je zeker dat je dit time slot wilt verwijderen? Alle shifts die dit time slot gebruiken worden ook verwijderd.
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="isDeleteTimeSlotOpen = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
:loading="isDeletingTimeSlot"
|
||||
@click="onDeleteTimeSlotExecute"
|
||||
>
|
||||
Verwijderen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- Delete shift confirmation -->
|
||||
<VDialog
|
||||
v-model="isDeleteShiftOpen"
|
||||
|
||||
Reference in New Issue
Block a user