feat: local sections in sub-events can use festival-level time slots

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/app/src/components/sections/CreateShiftDialog.vue

@@ -5,10 +5,17 @@ import { useTimeSlotList } from '@/composables/api/useTimeSlots'
 import { requiredValidator } from '@core/utils/validators'
 import type { Shift, ShiftStatus } from '@/types/section'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   eventId: string
   sectionId: string
   shift?: Shift | null
+  isSubEvent?: boolean
+}>(), {
+  isSubEvent: false,
+})
+
+const emit = defineEmits<{
+  openTimeSlots: []
 }>()
 
 const modelValue = defineModel<boolean>({ required: true })
@@ -17,8 +24,9 @@ const eventIdRef = computed(() => props.eventId)
 const sectionIdRef = computed(() => props.sectionId)
 
 const isEditing = computed(() => !!props.shift)
+const isSubEventRef = computed(() => props.isSubEvent)
 
-const { data: timeSlots } = useTimeSlotList(eventIdRef)
+const { data: timeSlots } = useTimeSlotList(eventIdRef, { includeParent: isSubEventRef })
 const { mutate: createShift, isPending: isCreating } = useCreateShift(eventIdRef, sectionIdRef)
 const { mutate: updateShift, isPending: isUpdating } = useUpdateShift(eventIdRef, sectionIdRef)
 
@@ -64,12 +72,39 @@ watch(
   { immediate: true },
 )
 
-const timeSlotItems = computed(() =>
-  timeSlots.value?.map(ts => ({
-    title: `${ts.name} — ${ts.date} ${ts.start_time}–${ts.end_time}`,
-    value: ts.id,
-  })) ?? [],
-)
+const timeSlotItems = computed(() => {
+  if (!timeSlots.value?.length) return []
+
+  const hasFestival = timeSlots.value.some(ts => ts.source === 'festival')
+  if (!hasFestival) {
+    return timeSlots.value.map(ts => ({
+      title: `${ts.name} — ${ts.date} ${ts.start_time}–${ts.end_time}`,
+      value: ts.id,
+    }))
+  }
+
+  const subEventSlots = timeSlots.value.filter(ts => ts.source !== 'festival')
+  const festivalSlots = timeSlots.value.filter(ts => ts.source === 'festival')
+  const items: Array<{ title: string; value?: string; type?: string }> = []
+
+  if (subEventSlots.length) {
+    items.push({ title: subEventSlots[0]?.event_name ?? 'Programma', type: 'subheader' })
+    items.push(...subEventSlots.map(ts => ({
+      title: `${ts.name} — ${ts.date} ${ts.start_time}–${ts.end_time}`,
+      value: ts.id,
+    })))
+  }
+
+  if (festivalSlots.length) {
+    items.push({ title: festivalSlots[0]?.event_name ?? 'Festival', type: 'subheader' })
+    items.push(...festivalSlots.map(ts => ({
+      title: `${ts.name} — ${ts.date} ${ts.start_time}–${ts.end_time}`,
+      value: ts.id,
+    })))
+  }
+
+  return items
+})
 
 const statusOptions = [
   { title: 'Concept', value: 'draft' },
@@ -148,20 +183,39 @@ function onSubmit() {
     @after-leave="!isEditing && resetForm()"
   >
     <VCard :title="isEditing ? 'Shift bewerken' : 'Shift toevoegen'">
-      <VCardText>
-        <VForm
-          ref="refVForm"
-          @submit.prevent="onSubmit"
-        >
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
           <VRow>
             <VCol cols="12">
               <AppSelect
+                v-if="timeSlotItems.length"
                 v-model="form.time_slot_id"
                 label="Time Slot"
                 :items="timeSlotItems"
                 :rules="[requiredValidator]"
                 :error-messages="errors.time_slot_id"
               />
+              <VAlert
+                v-else
+                type="info"
+                variant="tonal"
+              >
+                <div class="d-flex align-center justify-space-between flex-wrap gap-2">
+                  <span>Maak eerst een time slot aan</span>
+                  <VBtn
+                    size="small"
+                    variant="text"
+                    color="primary"
+                    prepend-icon="tabler-clock"
+                    @click="emit('openTimeSlots'); modelValue = false"
+                  >
+                    Time Slots beheren
+                  </VBtn>
+                </div>
+              </VAlert>
             </VCol>
             <VCol cols="12">
               <AppTextField
@@ -169,6 +223,7 @@ function onSubmit() {
                 label="Titel / Rol"
                 placeholder="Tapper, Barhoofd, Stage Manager..."
                 :error-messages="errors.title"
+                autocomplete="one-time-code"
               />
             </VCol>
             <VCol
@@ -253,6 +308,7 @@ function onSubmit() {
                 label="Instructies"
                 rows="3"
                 :error-messages="errors.instructions"
+                autocomplete="one-time-code"
               />
             </VCol>
             <VCol cols="12">
@@ -264,24 +320,24 @@ function onSubmit() {
               />
             </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>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            type="submit"
+            color="primary"
+            :loading="isPending"
+          >
+            {{ isEditing ? 'Opslaan' : 'Toevoegen' }}
+          </VBtn>
+        </VCardActions>
+      </VForm>
     </VCard>
   </VDialog>
 </template>

apps/app/src/composables/api/useTimeSlots.ts

@@ -13,12 +13,16 @@ interface PaginatedResponse<T> {
   data: T[]
 }
 
-export function useTimeSlotList(eventId: Ref<string>) {
+export function useTimeSlotList(eventId: Ref<string>, options?: { includeParent?: Ref<boolean> }) {
+  const includeParent = options?.includeParent
+
   return useQuery({
-    queryKey: ['time-slots', eventId],
+    queryKey: ['time-slots', eventId, includeParent],
     queryFn: async () => {
+      const params = includeParent?.value ? { include_parent: 'true' } : {}
       const { data } = await apiClient.get<PaginatedResponse<TimeSlot>>(
         `/events/${eventId.value}/time-slots`,
+        { params },
       )
 
       return data.data