bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): dedicated Tijdsloten tab with grouped view and fill rates

Browse Source 
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:
bert.hausmans
2026-04-10 15:47:36 +02:00
parent d9f99a4cf1
commit e70904741d
10 changed files with 525 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/app/src/components/events/EventTabsNav.vue
View File

@@ -54,6 +54,7 @@ const baseTabs = [
{ label: 'Overzicht', icon: 'tabler-layout-dashboard', route: 'events-id' },
{ label: 'Personen', icon: 'tabler-users', route: 'events-id-persons' },
{ label: 'Publiekslijsten', icon: 'tabler-list', route: 'events-id-crowd-lists' },
{ label: 'Tijdsloten', icon: 'tabler-clock', route: 'events-id-time-slots' },
{ 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' },
@@ -71,7 +72,7 @@ const programmaonderdelenLabel = computed(() => {
const tabs = computed(() => {
if (!event.value?.is_festival) return baseTabs
// Festival tab order: Overzicht | Programmaonderdelen | Secties & Shifts | Personen | Publiekslijsten | Artiesten | Briefings | Instellingen
// Festival tab order: Overzicht | Programmaonderdelen | Tijdsloten | Secties & Shifts | Personen | Publiekslijsten | Artiesten | Briefings | Instellingen
const festivalTab = {
label: programmaonderdelenLabel.value,
icon: 'tabler-calendar-event',
@@ -81,12 +82,13 @@ const tabs = computed(() => {
return [
baseTabs[0], // Overzicht
festivalTab,
baseTabs[3], // Secties & Shifts
baseTabs[3], // Tijdsloten
baseTabs[4], // Secties & Shifts
baseTabs[1], // Personen
baseTabs[2], // Publiekslijsten
baseTabs[4], // Artiesten
baseTabs[5], // Briefings
baseTabs[6], // Instellingen
baseTabs[5], // Artiesten
baseTabs[6], // Briefings
baseTabs[7], // Instellingen
]
})

9
apps/app/src/components/sections/CreateShiftDialog.vue
View File

@@ -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>

476
apps/app/src/components/sections/SectionsShiftsPanel.vue
View File

@@ -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"
>
&middot; {{ 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) }} &middot; {{ formatTime(ts.start_time) }}&ndash;{{ 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) }} &middot; {{ formatTime(ts.start_time) }}&ndash;{{ 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) }} &middot; {{ formatTime(ts.start_time) }}&ndash;{{ 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"