fix: auth race condition on refresh, section edit dialog, time slot duplicate, autocomplete disable

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

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

@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import { VForm } from 'vuetify/components/VForm'
-import { useCreateTimeSlot } from '@/composables/api/useTimeSlots'
+import { useCreateTimeSlot, useUpdateTimeSlot } from '@/composables/api/useTimeSlots'
 import { requiredValidator } from '@core/utils/validators'
+import type { TimeSlot } from '@/types/section'
 
 const props = defineProps<{
   eventId: string
+  timeSlot?: TimeSlot | null
+  duplicateFrom?: TimeSlot | null
 }>()
 
 const modelValue = defineModel<boolean>({ required: true })
 
 const eventIdRef = computed(() => props.eventId)
 
+const isEditing = computed(() => !!props.timeSlot)
+
 const form = ref({
   name: '',
   person_type: 'VOLUNTEER',
@@ -23,7 +28,10 @@ const form = ref({
 const errors = ref<Record<string, string>>({})
 const refVForm = ref<VForm>()
 
-const { mutate: createTimeSlot, isPending } = useCreateTimeSlot(eventIdRef)
+const { mutate: createTimeSlot, isPending: isCreating } = useCreateTimeSlot(eventIdRef)
+const { mutate: updateTimeSlot, isPending: isUpdating } = useUpdateTimeSlot(eventIdRef)
+
+const isPending = computed(() => isCreating.value || isUpdating.value)
 
 const personTypeOptions = [
   { title: 'Vrijwilliger', value: 'VOLUNTEER' },
@@ -33,6 +41,41 @@ const personTypeOptions = [
   { title: 'Partner', value: 'PARTNER' },
 ]
 
+// Populate form when editing
+watch(
+  () => props.timeSlot,
+  (ts) => {
+    if (ts) {
+      form.value = {
+        name: ts.name,
+        person_type: ts.person_type,
+        date: ts.date,
+        start_time: ts.start_time,
+        end_time: ts.end_time,
+        duration_hours: ts.duration_hours,
+      }
+    }
+  },
+  { immediate: true },
+)
+
+// Populate form when duplicating
+watch(
+  () => props.duplicateFrom,
+  (ts) => {
+    if (ts) {
+      form.value = {
+        name: `${ts.name} (kopie)`,
+        person_type: ts.person_type,
+        date: ts.date,
+        start_time: ts.start_time,
+        end_time: ts.end_time,
+        duration_hours: ts.duration_hours,
+      }
+    }
+  },
+)
+
 // Auto-calculate duration from start/end time
 watch(
   () => [form.value.start_time, form.value.end_time],
@@ -60,36 +103,44 @@ function resetForm() {
   refVForm.value?.resetValidation()
 }
 
+function buildPayload() {
+  return {
+    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 } : {}),
+  }
+}
+
 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 } : {}),
+    const callbacks = {
+      onSuccess: () => {
+        modelValue.value = false
+        if (!isEditing.value) resetForm()
       },
-      {
-        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]]),
-            )
-          }
-        },
+      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.timeSlot) {
+      updateTimeSlot({ id: props.timeSlot.id, ...buildPayload() }, callbacks)
+    }
+    else {
+      createTimeSlot(buildPayload(), callbacks)
+    }
   })
 }
 </script>
@@ -98,14 +149,14 @@ function onSubmit() {
   <VDialog
     v-model="modelValue"
     max-width="550"
-    @after-leave="resetForm"
+    @after-leave="(!isEditing) && resetForm()"
   >
-    <VCard title="Time Slot aanmaken">
-      <VCardText>
-        <VForm
-          ref="refVForm"
-          @submit.prevent="onSubmit"
-        >
+    <VCard :title="isEditing ? 'Time Slot bewerken' : 'Time Slot aanmaken'">
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
           <VRow>
             <VCol cols="12">
               <AppTextField
@@ -115,6 +166,7 @@ function onSubmit() {
                 :rules="[requiredValidator]"
                 :error-messages="errors.name"
                 autofocus
+                autocomplete="one-time-code"
               />
             </VCol>
             <VCol cols="12">
@@ -170,24 +222,24 @@ function onSubmit() {
               />
             </VCol>
           </VRow>
-        </VForm>
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="text"
-          @click="modelValue = false"
-        >
-          Annuleren
-        </VBtn>
-        <VBtn
-          color="primary"
-          :loading="isPending"
-          @click="onSubmit"
-        >
-          Aanmaken
-        </VBtn>
-      </VCardActions>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            type="submit"
+            color="primary"
+            :loading="isPending"
+          >
+            {{ isEditing ? 'Opslaan' : 'Aanmaken' }}
+          </VBtn>
+        </VCardActions>
+      </VForm>
     </VCard>
   </VDialog>
 </template>