crewli/apps/app/src/components/persons/EditPersonDialog.vue

<script setup lang="ts">
import { VForm } from 'vuetify/components/VForm'
import { useUpdatePerson } from '@/composables/api/usePersons'
import { useCrowdTypeList } from '@/composables/api/useCrowdTypes'
import { useCompanies } from '@/composables/api/useCompanies'
import { requiredValidator, emailValidator } from '@core/utils/validators'
import type { Person, PersonStatus } from '@/types/person'

const props = defineProps<{
  person: Person
  eventId: string
  orgId: string
}>()

const modelValue = defineModel<boolean>({ required: true })

const eventIdRef = computed(() => props.eventId)
const orgIdRef = computed(() => props.orgId)

const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
const { data: companies } = useCompanies(orgIdRef)
const { mutate: updatePerson, isPending } = useUpdatePerson(eventIdRef)

const form = ref({
  crowd_type_id: '',
  first_name: '',
  last_name: '',
  email: '',
  phone: '',
  company_id: '',
  status: 'pending' as PersonStatus,
  admin_notes: '',
  is_blacklisted: false,
})

const errors = ref<Record<string, string>>({})
const refVForm = ref<VForm>()
const showSuccess = ref(false)

watch(() => props.person, (p) => {
  form.value = {
    crowd_type_id: p.crowd_type?.id ?? '',
    first_name: p.first_name,
    last_name: p.last_name,
    email: p.email,
    phone: p.phone ?? '',
    company_id: p.company?.id ?? '',
    status: p.status,
    admin_notes: p.admin_notes ?? '',
    is_blacklisted: p.is_blacklisted,
  }
}, { immediate: true })

const crowdTypeItems = computed(() =>
  crowdTypes.value
    ?.filter(ct => ct.is_active)
    .map(ct => ({
      title: ct.name,
      value: ct.id,
    })) ?? [],
)

const typeLabel: Record<string, string> = {
  supplier: 'Leverancier',
  partner: 'Partner',
  agency: 'Bureau',
  venue: 'Locatie',
  other: 'Overig',
}

const companyItems = computed(() =>
  companies.value?.map(c => ({
    title: c.name,
    value: c.id,
    subtitle: typeLabel[c.type] ?? c.type,
  })) ?? [],
)

const statusOptions: { title: string; value: PersonStatus }[] = [
  { title: 'Pending', value: 'pending' },
  { title: 'Uitgenodigd', value: 'invited' },
  { title: 'Aangemeld', value: 'applied' },
  { title: 'Goedgekeurd', value: 'approved' },
  { title: 'Afgewezen', value: 'rejected' },
  { title: 'No-show', value: 'no_show' },
]

function onSubmit() {
  refVForm.value?.validate().then(({ valid }) => {
    if (!valid) return

    errors.value = {}

    updatePerson({
      id: props.person.id,
      crowd_type_id: form.value.crowd_type_id,
      first_name: form.value.first_name,
      last_name: form.value.last_name,
      email: form.value.email,
      phone: form.value.phone || undefined,
      company_id: form.value.company_id || undefined,
      status: form.value.status,
      admin_notes: form.value.admin_notes || undefined,
      is_blacklisted: form.value.is_blacklisted,
    }, {
      onSuccess: () => {
        modelValue.value = false
        showSuccess.value = true
      },
      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 = { first_name: data.message }
        }
      },
    })
  })
}
</script>

<template>
  <VDialog
    v-model="modelValue"
    max-width="550"
  >
    <VCard title="Persoon bewerken">
      <VForm
        ref="refVForm"
        @submit.prevent="onSubmit"
      >
        <VCardText>
          <VRow>
            <VCol cols="12">
              <AppSelect
                v-model="form.crowd_type_id"
                label="Crowd Type"
                :items="crowdTypeItems"
                :rules="[requiredValidator]"
                :error-messages="errors.crowd_type_id"
              />
            </VCol>
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                v-model="form.first_name"
                label="Voornaam"
                :rules="[requiredValidator]"
                :error-messages="errors.first_name"
                autofocus
              />
            </VCol>
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                v-model="form.last_name"
                label="Achternaam"
                :rules="[requiredValidator]"
                :error-messages="errors.last_name"
              />
            </VCol>
            <VCol cols="12">
              <AppTextField
                v-model="form.email"
                label="E-mailadres"
                type="email"
                :rules="[requiredValidator, emailValidator]"
                :error-messages="errors.email"
              />
            </VCol>
            <VCol cols="12">
              <AppTextField
                v-model="form.phone"
                label="Telefoonnummer"
                :error-messages="errors.phone"
              />
            </VCol>
            <VCol cols="12">
              <AppSelect
                v-model="form.company_id"
                label="Bedrijf"
                :items="companyItems"
                clearable
                :no-data-text="'Nog geen bedrijven'"
              />
            </VCol>
            <VCol
              cols="12"
              md="6"
            >
              <AppSelect
                v-model="form.status"
                label="Status"
                :items="statusOptions"
                :error-messages="errors.status"
              />
            </VCol>
            <VCol
              cols="12"
              md="6"
            >
              <VSwitch
                v-model="form.is_blacklisted"
                label="Geblokkeerd"
                color="error"
              />
            </VCol>
            <VCol cols="12">
              <VTextarea
                v-model="form.admin_notes"
                label="Admin notities"
                variant="outlined"
                rows="3"
                :error-messages="errors.admin_notes"
                autocomplete="one-time-code"
              />
            </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>

  <VSnackbar
    v-model="showSuccess"
    color="success"
    :timeout="3000"
  >
    Persoon bijgewerkt
  </VSnackbar>
</template>