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/members/EditMemberRoleDialog.vue

@@ -72,22 +72,22 @@ function onSubmit() {
     max-width="500"
   >
     <VCard title="Rol wijzigen">
-      <VCardText>
-        <VRow class="mb-4">
-          <VCol cols="12">
-            <div class="text-body-1">
-              <strong>{{ member.name }}</strong>
-            </div>
-            <div class="text-body-2 text-disabled">
-              {{ member.email }}
-            </div>
-          </VCol>
-        </VRow>
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
+          <VRow class="mb-4">
+            <VCol cols="12">
+              <div class="text-body-1">
+                <strong>{{ member.name }}</strong>
+              </div>
+              <div class="text-body-2 text-disabled">
+                {{ member.email }}
+              </div>
+            </VCol>
+          </VRow>
 
-        <VForm
-          ref="refVForm"
-          @submit.prevent="onSubmit"
-        >
           <VSelect
             v-model="role"
             label="Rol"
@@ -95,40 +95,40 @@ function onSubmit() {
             :rules="[requiredValidator]"
             :error-messages="errors.role"
           />
-        </VForm>
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="text"
-          @click="modelValue = false"
-        >
-          Annuleren
-        </VBtn>
-        <VTooltip
-          v-if="isSelf"
-          text="Je kunt je eigen rol niet wijzigen"
-        >
-          <template #activator="{ props: tooltipProps }">
-            <div v-bind="tooltipProps">
-              <VBtn
-                color="primary"
-                disabled
-              >
-                Opslaan
-              </VBtn>
-            </div>
-          </template>
-        </VTooltip>
-        <VBtn
-          v-else
-          color="primary"
-          :loading="isPending"
-          @click="onSubmit"
-        >
-          Opslaan
-        </VBtn>
-      </VCardActions>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VTooltip
+            v-if="isSelf"
+            text="Je kunt je eigen rol niet wijzigen"
+          >
+            <template #activator="{ props: tooltipProps }">
+              <div v-bind="tooltipProps">
+                <VBtn
+                  color="primary"
+                  disabled
+                >
+                  Opslaan
+                </VBtn>
+              </div>
+            </template>
+          </VTooltip>
+          <VBtn
+            v-else
+            type="submit"
+            color="primary"
+            :loading="isPending"
+          >
+            Opslaan
+          </VBtn>
+        </VCardActions>
+      </VForm>
     </VCard>
   </VDialog>
 

apps/app/src/components/members/InviteMemberDialog.vue

@@ -76,11 +76,11 @@ function onSubmit() {
     @after-leave="resetForm"
   >
     <VCard title="Lid uitnodigen">
-      <VCardText>
-        <VForm
-          ref="refVForm"
-          @submit.prevent="onSubmit"
-        >
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
           <VRow>
             <VCol cols="12">
               <AppTextField
@@ -102,24 +102,24 @@ function onSubmit() {
               />
             </VCol>
           </VRow>
-        </VForm>
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="text"
-          @click="modelValue = false"
-        >
-          Annuleren
-        </VBtn>
-        <VBtn
-          color="primary"
-          :loading="isPending"
-          @click="onSubmit"
-        >
-          Uitnodigen
-        </VBtn>
-      </VCardActions>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            type="submit"
+            color="primary"
+            :loading="isPending"
+          >
+            Uitnodigen
+          </VBtn>
+        </VCardActions>
+      </VForm>
     </VCard>
   </VDialog>
 

apps/app/src/components/organisations/EditOrganisationDialog.vue

@@ -55,36 +55,37 @@ function onSubmit() {
     max-width="450"
   >
     <VCard title="Naam bewerken">
-      <VCardText>
-        <VForm
-          ref="refVForm"
-          @submit.prevent="onSubmit"
-        >
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
           <AppTextField
             v-model="name"
             label="Organisatienaam"
             :rules="[requiredValidator]"
             :error-messages="errors.name"
             autofocus
+            autocomplete="one-time-code"
           />
-        </VForm>
-      </VCardText>
-      <VCardActions>
-        <VSpacer />
-        <VBtn
-          variant="text"
-          @click="modelValue = false"
-        >
-          Annuleren
-        </VBtn>
-        <VBtn
-          color="primary"
-          :loading="isPending"
-          @click="onSubmit"
-        >
-          Opslaan
-        </VBtn>
-      </VCardActions>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            type="submit"
+            color="primary"
+            :loading="isPending"
+          >
+            Opslaan
+          </VBtn>
+        </VCardActions>
+      </VForm>
     </VCard>
   </VDialog>
 

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

@@ -116,6 +116,7 @@ function onSubmit() {
           :error-messages="errors.person_id"
           clearable
           no-data-text="Geen goedgekeurde personen gevonden"
+          autocomplete="one-time-code"
         >
           <template #item="{ props: itemProps, item }">
             <VListItem

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>

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

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { VForm } from 'vuetify/components/VForm'
+import { useUpdateSection, useSectionCategories } from '@/composables/api/useSections'
+import { useAuthStore } from '@/stores/useAuthStore'
+import { requiredValidator } from '@core/utils/validators'
+import type { FestivalSection, SectionType } from '@/types/section'
+
+const props = defineProps<{
+  eventId: string
+  section: FestivalSection | null
+}>()
+
+const emit = defineEmits<{
+  updated: []
+}>()
+
+const modelValue = defineModel<boolean>({ required: true })
+
+const eventIdRef = computed(() => props.eventId)
+const authStore = useAuthStore()
+const orgId = computed(() => authStore.currentOrganisation?.id ?? '')
+const { data: categorySuggestions } = useSectionCategories(orgId)
+
+const form = ref({
+  name: '',
+  category: null as string | null,
+  icon: null as string | null,
+  type: 'standard' as SectionType,
+  crew_auto_accepts: false,
+  responder_self_checkin: true,
+})
+
+const errors = ref<Record<string, string>>({})
+const refVForm = ref<VForm>()
+
+const { mutate: updateSection, isPending } = useUpdateSection(eventIdRef)
+
+const typeOptions = [
+  { title: 'Standaard', value: 'standard' },
+  { title: 'Overkoepelend', value: 'cross_event' },
+]
+
+// Pre-fill form when section changes or dialog opens
+watch(
+  () => props.section,
+  (section) => {
+    if (section) {
+      form.value = {
+        name: section.name,
+        category: section.category,
+        icon: section.icon,
+        type: section.type,
+        crew_auto_accepts: section.crew_auto_accepts,
+        responder_self_checkin: section.responder_self_checkin,
+      }
+    }
+  },
+  { immediate: true },
+)
+
+function resetForm() {
+  errors.value = {}
+  refVForm.value?.resetValidation()
+}
+
+function onSubmit() {
+  if (!props.section) return
+
+  refVForm.value?.validate().then(({ valid }) => {
+    if (!valid) return
+
+    errors.value = {}
+
+    updateSection(
+      {
+        id: props.section!.id,
+        name: form.value.name,
+        category: form.value.category || null,
+        icon: form.value.icon || null,
+        crew_auto_accepts: form.value.crew_auto_accepts,
+        responder_self_checkin: form.value.responder_self_checkin,
+      },
+      {
+        onSuccess: () => {
+          modelValue.value = false
+          emit('updated')
+          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]]),
+            )
+          }
+          else if (data?.message) {
+            errors.value = { name: data.message }
+          }
+        },
+      },
+    )
+  })
+}
+</script>
+
+<template>
+  <VDialog
+    v-model="modelValue"
+    max-width="500"
+    @after-leave="resetForm"
+  >
+    <VCard title="Sectie bewerken">
+      <VForm
+        ref="refVForm"
+        @submit.prevent="onSubmit"
+      >
+        <VCardText>
+          <VRow>
+            <VCol cols="12">
+              <AppTextField
+                v-model="form.name"
+                label="Naam"
+                :rules="[requiredValidator]"
+                :error-messages="errors.name"
+                autofocus
+                autocomplete="one-time-code"
+              />
+            </VCol>
+            <VCol cols="12">
+              <VCombobox
+                v-model="form.category"
+                label="Categorie"
+                :items="categorySuggestions ?? []"
+                placeholder="Bijv. Bar, Podium, Operationeel..."
+                clearable
+                :error-messages="errors.category"
+                autocomplete="one-time-code"
+              />
+            </VCol>
+            <VCol cols="12">
+              <div class="d-flex align-center gap-x-2">
+                <AppTextField
+                  v-model="form.icon"
+                  label="Icoon"
+                  placeholder="tabler-beer"
+                  clearable
+                  :error-messages="errors.icon"
+                  class="flex-grow-1"
+                  autocomplete="one-time-code"
+                />
+                <VIcon
+                  v-if="form.icon"
+                  :icon="form.icon"
+                  size="24"
+                />
+              </div>
+            </VCol>
+            <VCol cols="12">
+              <AppSelect
+                v-model="form.type"
+                label="Type"
+                :items="typeOptions"
+                disabled
+                hint="Type kan niet worden gewijzigd na aanmaken"
+                persistent-hint
+              />
+            </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>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn
+            variant="text"
+            @click="modelValue = false"
+          >
+            Annuleren
+          </VBtn>
+          <VBtn
+            type="submit"
+            color="primary"
+            :loading="isPending"
+          >
+            Opslaan
+          </VBtn>
+        </VCardActions>
+      </VForm>
+    </VCard>
+  </VDialog>
+</template>