feat: split name into first_name + last_name across users, persons, and companies

Cross-cutting migration affecting the entire stack: - Database: 3 migrations splitting name columns with data migration - Models: first_name/last_name on User, Person; contact_first_name/contact_last_name on Company; backward-compatible name accessors - API: all resources return first_name, last_name, full_name; assignablePersons endpoint updated - Requests: validation rules updated for all person/user/company forms - Services: VolunteerRegistrationService, ShiftAssignmentService, InvitationService updated - Frontend: TypeScript types, Zod schemas, all forms split into Voornaam/Achternaam fields - Display: all person/user name references use full_name; initials use first_name[0]+last_name[0] - Tests: all 371 tests passing - Docs: SCHEMA.md and API.md updated Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-10 23:04:55 +02:00
parent bd4297f891
commit d2f282eb4c
66 changed files with 654 additions and 220 deletions
--- a/apps/app/src/components/crowd-lists/AddPersonToCrowdListDialog.vue
+++ b/apps/app/src/components/crowd-lists/AddPersonToCrowdListDialog.vue
@@ -23,7 +23,7 @@ const errorMessage = ref('')

 const personItems = computed(() =>
  (personsResponse.value?.data ?? []).map((p: Person) => ({
-    title: p.name,
+    title: p.full_name,
    value: p.id,
    subtitle: p.email,
  })),
--- a/apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
+++ b/apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
@@ -68,7 +68,7 @@ const filteredPersons = computed(() => {
  if (searchQuery.value) {
    const q = searchQuery.value.toLowerCase()
    result = result.filter(
-      (p: Person) => p.name.toLowerCase().includes(q) || p.email.toLowerCase().includes(q),
+      (p: Person) => p.full_name.toLowerCase().includes(q) || p.email.toLowerCase().includes(q),
    )
  }

@@ -181,7 +181,7 @@ function getInitials(name: string) {
 function onApprove(person: Person) {
  approvePerson(person.id, {
    onSuccess: () => {
-      successMessage.value = `${person.name} goedgekeurd`
+      successMessage.value = `${person.full_name} goedgekeurd`
      showSuccess.value = true
      refetchPersons()
    },
@@ -195,7 +195,7 @@ function onRemoveConfirm(person: Person) {

 function onRemoveExecute() {
  if (!removingPerson.value || !props.crowdList) return
-  const name = removingPerson.value.name
+  const name = removingPerson.value.full_name

  removePerson(
    { listId: props.crowdList.id, personId: removingPerson.value.id },
@@ -613,11 +613,11 @@ function onApproveAllExecute() {
                    color="primary"
                    variant="tonal"
                  >
-                    <span class="text-caption">{{ getInitials(person.name) }}</span>
+                    <span class="text-caption">{{ getInitials(person.full_name) }}</span>
                  </VAvatar>
                  <div style="min-width: 0;">
                    <p class="text-body-1 font-weight-medium mb-0 text-truncate">
-                      {{ person.name }}
+                      {{ person.full_name }}
                    </p>
                    <p class="text-body-2 text-medium-emphasis mb-1 text-truncate">
                      {{ person.email }}
@@ -715,7 +715,7 @@ function onApproveAllExecute() {
    >
      <VCard title="Persoon verwijderen van lijst">
        <VCardText>
-          Weet je zeker dat je <strong>{{ removingPerson?.name }}</strong> van de lijst
+          Weet je zeker dat je <strong>{{ removingPerson?.full_name }}</strong> van de lijst
          <strong>{{ crowdList?.name }}</strong> wilt verwijderen?
          <br><br>
          <span class="text-medium-emphasis">
--- a/apps/app/src/components/events/EventTabsNav.vue
+++ b/apps/app/src/components/events/EventTabsNav.vue
@@ -4,6 +4,7 @@ import { dutchPlural } from '@/lib/dutch-plural'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { useOrganisationStore } from '@/stores/useOrganisationStore'
 import EditEventDialog from '@/components/events/EditEventDialog.vue'
+import RegistrationLinkCard from '@/components/events/RegistrationLinkCard.vue'
 import type { EventStatus } from '@/types/event'

 const route = useRoute()
@@ -177,6 +178,12 @@ const backRoute = computed(() => {
        </VBtn>
      </div>

+      <!-- Registration link (top-level events only) -->
+      <RegistrationLinkCard
+        v-if="!event.parent_event_id"
+        :event="event"
+      />
+
      <!-- Horizontal tabs -->
      <VTabs
        :model-value="activeTab"
--- a/apps/app/src/components/events/RegistrationLinkCard.vue
+++ b/apps/app/src/components/events/RegistrationLinkCard.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { EventItem } from '@/types/event'
+
+const props = defineProps<{
+  event: EventItem
+}>()
+
+const portalBaseUrl = import.meta.env.VITE_PORTAL_URL || 'https://portal.crewli.app'
+
+const registrationUrl = computed(() =>
+  `${portalBaseUrl}/register/${props.event.slug}`,
+)
+
+const isRegistrationOpen = computed(() =>
+  props.event.status === 'registration_open',
+)
+
+const copied = ref(false)
+
+async function copyLink() {
+  await navigator.clipboard.writeText(registrationUrl.value)
+  copied.value = true
+  setTimeout(() => { copied.value = false }, 2000)
+}
+</script>
+
+<template>
+  <VCard
+    v-if="event"
+    variant="outlined"
+    class="mb-4"
+  >
+    <VCardText>
+      <div class="d-flex align-center justify-space-between flex-wrap ga-2">
+        <div>
+          <div class="text-subtitle-2 text-medium-emphasis mb-1">
+            Vrijwilligersregistratie
+          </div>
+          <template v-if="isRegistrationOpen">
+            <code class="text-body-2">{{ registrationUrl }}</code>
+          </template>
+          <template v-else>
+            <span class="text-body-2 text-medium-emphasis">
+              Zet de status op 'Registratie open' om het formulier te activeren.
+            </span>
+          </template>
+        </div>
+        <div
+          v-if="isRegistrationOpen"
+          class="d-flex ga-2"
+        >
+          <VBtn
+            size="small"
+            variant="outlined"
+            prepend-icon="tabler-copy"
+            @click="copyLink"
+          >
+            {{ copied ? 'Gekopieerd!' : 'Kopieer link' }}
+          </VBtn>
+          <VBtn
+            size="small"
+            variant="outlined"
+            prepend-icon="tabler-external-link"
+            :href="registrationUrl"
+            target="_blank"
+          >
+            Open formulier
+          </VBtn>
+        </div>
+      </div>
+    </VCardText>
+  </VCard>
+</template>
--- a/apps/app/src/components/members/EditMemberRoleDialog.vue
+++ b/apps/app/src/components/members/EditMemberRoleDialog.vue
@@ -80,7 +80,7 @@ function onSubmit() {
          <VRow class="mb-4">
            <VCol cols="12">
              <div class="text-body-1">
-                <strong>{{ member.name }}</strong>
+                <strong>{{ member.full_name }}</strong>
              </div>
              <div class="text-body-2 text-disabled">
                {{ member.email }}
--- a/apps/app/src/components/organisation/CompanyDialog.vue
+++ b/apps/app/src/components/organisation/CompanyDialog.vue
@@ -18,7 +18,8 @@ const isEdit = computed(() => !!props.company)
 const form = ref({
  name: '',
  type: 'supplier' as Company['type'],
-  contact_name: '',
+  contact_first_name: '',
+  contact_last_name: '',
  contact_email: '',
  contact_phone: '',
 })
@@ -44,7 +45,8 @@ watch(() => props.company, (c) => {
    form.value = {
      name: c.name,
      type: c.type,
-      contact_name: c.contact_name ?? '',
+      contact_first_name: c.contact_first_name ?? '',
+      contact_last_name: c.contact_last_name ?? '',
      contact_email: c.contact_email ?? '',
      contact_phone: c.contact_phone ?? '',
    }
@@ -55,7 +57,8 @@ function resetForm() {
  form.value = {
    name: '',
    type: 'supplier',
-    contact_name: '',
+    contact_first_name: '',
+    contact_last_name: '',
    contact_email: '',
    contact_phone: '',
  }
@@ -76,7 +79,8 @@ function onSubmit() {
    const payload = {
      name: form.value.name,
      type: form.value.type,
-      contact_name: form.value.contact_name || null,
+      contact_first_name: form.value.contact_first_name || null,
+      contact_last_name: form.value.contact_last_name || null,
      contact_email: form.value.contact_email || null,
      contact_phone: form.value.contact_phone || null,
    }
@@ -140,11 +144,25 @@ function onSubmit() {
                :error-messages="errors.type"
              />
            </VCol>
-            <VCol cols="12">
+            <VCol
+              cols="12"
+              md="6"
+            >
              <AppTextField
-                v-model="form.contact_name"
-                label="Contactpersoon"
-                :error-messages="errors.contact_name"
+                v-model="form.contact_first_name"
+                label="Voornaam contactpersoon"
+                :error-messages="errors.contact_first_name"
+                autocomplete="one-time-code"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-model="form.contact_last_name"
+                label="Achternaam contactpersoon"
+                :error-messages="errors.contact_last_name"
                autocomplete="one-time-code"
              />
            </VCol>
--- a/apps/app/src/components/persons/CreatePersonDialog.vue
+++ b/apps/app/src/components/persons/CreatePersonDialog.vue
@@ -21,7 +21,8 @@ const { data: companies } = useCompanies(orgIdRef)

 const form = ref({
  crowd_type_id: '',
-  name: '',
+  first_name: '',
+  last_name: '',
  email: '',
  phone: '',
  company_id: '',
@@ -69,7 +70,8 @@ const statusOptions: { title: string; value: PersonStatus }[] = [
 function resetForm() {
  form.value = {
    crowd_type_id: '',
-    name: '',
+    first_name: '',
+    last_name: '',
    email: '',
    phone: '',
    company_id: '',
@@ -87,7 +89,8 @@ function onSubmit() {

    const payload = {
      crowd_type_id: form.value.crowd_type_id,
-      name: form.value.name,
+      first_name: form.value.first_name,
+      last_name: form.value.last_name,
      email: form.value.email,
      ...(form.value.phone ? { phone: form.value.phone } : {}),
      ...(form.value.company_id ? { company_id: form.value.company_id } : {}),
@@ -96,7 +99,7 @@ function onSubmit() {

    createPerson(payload, {
      onSuccess: () => {
-        successName.value = form.value.name
+        successName.value = `${form.value.first_name} ${form.value.last_name}`.trim()
        modelValue.value = false
        showSuccess.value = true
      },
@@ -108,7 +111,7 @@ function onSubmit() {
          )
        }
        else if (data?.message) {
-          errors.value = { name: data.message }
+          errors.value = { first_name: data.message }
        }
      },
    })
@@ -138,15 +141,29 @@ function onSubmit() {
                :error-messages="errors.crowd_type_id"
              />
            </VCol>
-            <VCol cols="12">
+            <VCol
+              cols="12"
+              md="6"
+            >
              <AppTextField
-                v-model="form.name"
-                label="Naam"
+                v-model="form.first_name"
+                label="Voornaam"
                :rules="[requiredValidator]"
-                :error-messages="errors.name"
+                :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"
--- a/apps/app/src/components/persons/EditPersonDialog.vue
+++ b/apps/app/src/components/persons/EditPersonDialog.vue
@@ -23,7 +23,8 @@ const { mutate: updatePerson, isPending } = useUpdatePerson(eventIdRef)

 const form = ref({
  crowd_type_id: '',
-  name: '',
+  first_name: '',
+  last_name: '',
  email: '',
  phone: '',
  company_id: '',
@@ -39,7 +40,8 @@ const showSuccess = ref(false)
 watch(() => props.person, (p) => {
  form.value = {
    crowd_type_id: p.crowd_type?.id ?? '',
-    name: p.name,
+    first_name: p.first_name,
+    last_name: p.last_name,
    email: p.email,
    phone: p.phone ?? '',
    company_id: p.company?.id ?? '',
@@ -92,7 +94,8 @@ function onSubmit() {
    updatePerson({
      id: props.person.id,
      crowd_type_id: form.value.crowd_type_id,
-      name: form.value.name,
+      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,
@@ -112,7 +115,7 @@ function onSubmit() {
          )
        }
        else if (data?.message) {
-          errors.value = { name: data.message }
+          errors.value = { first_name: data.message }
        }
      },
    })
@@ -141,15 +144,29 @@ function onSubmit() {
                :error-messages="errors.crowd_type_id"
              />
            </VCol>
-            <VCol cols="12">
+            <VCol
+              cols="12"
+              md="6"
+            >
              <AppTextField
-                v-model="form.name"
-                label="Naam"
+                v-model="form.first_name"
+                label="Voornaam"
                :rules="[requiredValidator]"
-                :error-messages="errors.name"
+                :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"
--- a/apps/app/src/components/persons/PersonDetailPanel.vue
+++ b/apps/app/src/components/persons/PersonDetailPanel.vue
@@ -103,11 +103,11 @@ function onBlacklistToggle(val: boolean | null) {
              color="primary"
              variant="tonal"
            >
-              <span class="text-h6">{{ getInitials(person.name) }}</span>
+              <span class="text-h6">{{ getInitials(person.full_name) }}</span>
            </VAvatar>
            <div>
              <h5 class="text-h5 mb-1">
-                {{ person.name }}
+                {{ person.full_name }}
              </h5>
              <p class="text-body-2 text-disabled mb-2">
                {{ person.email }}
--- a/apps/app/src/components/sections/AssignShiftDialog.vue
+++ b/apps/app/src/components/sections/AssignShiftDialog.vue
@@ -25,6 +25,11 @@ const selectedPersonId = ref<string>('')
 const errors = ref<Record<string, string>>({})
 const showSuccess = ref(false)

+const generalError = computed(() => {
+  const keys = Object.keys(errors.value).filter(k => k !== 'person_id')
+  return keys.length ? errors.value[keys[0]] : ''
+})
+
 // Check for overlap warning
 const hasOverlapWarning = computed(() => {
  if (!selectedPersonId.value || !props.shift) return false
@@ -34,7 +39,7 @@ const hasOverlapWarning = computed(() => {

 const personItems = computed(() =>
  persons.value.map((p: Person) => ({
-    title: `${p.name} — ${p.email}`,
+    title: `${p.full_name} — ${p.email}`,
    value: p.id,
    props: {
      subtitle: p.crowd_type?.name ?? '',
@@ -106,6 +111,15 @@ function onSubmit() {

        <VDivider class="mb-4" />

+        <VAlert
+          v-if="generalError"
+          type="error"
+          variant="tonal"
+          class="mb-4"
+        >
+          {{ generalError }}
+        </VAlert>
+
        <!-- Person search -->
        <VAutocomplete
          v-model="selectedPersonId"
--- a/apps/app/src/components/shifts/AssignPersonDialog.vue
+++ b/apps/app/src/components/shifts/AssignPersonDialog.vue
@@ -105,7 +105,7 @@ const filteredPersons = computed(() => {
  return assignableData.value.persons.filter((person) => {
    if (searchQuery.value) {
      const q = searchQuery.value.toLowerCase()
-      if (!person.name.toLowerCase().includes(q) && !person.email.toLowerCase().includes(q)) {
+      if (!person.full_name.toLowerCase().includes(q) && !person.email.toLowerCase().includes(q)) {
        return false
      }
    }
@@ -145,7 +145,7 @@ const sortedPersons = computed(() => {
    if (a.has_availability !== b.has_availability) return a.has_availability ? -1 : 1
    if (a.tags.length !== b.tags.length) return b.tags.length - a.tags.length

-    return a.name.localeCompare(b.name)
+    return a.full_name.localeCompare(b.full_name)
  })
 })

@@ -258,7 +258,7 @@ async function executeAssign(person: AssignablePerson) {
      personId: person.id,
    })
    emit('assigned')
-    successName.value = person.name
+    successName.value = person.full_name
    showSuccess.value = true
  }
  catch (error: any) {
@@ -412,12 +412,12 @@ async function executeAssign(person: AssignablePerson) {
                :color="person.is_available ? 'primary' : 'grey'"
                variant="tonal"
              >
-                <span class="text-caption">{{ getInitials(person.name) }}</span>
+                <span class="text-caption">{{ getInitials(person.full_name) }}</span>
              </VAvatar>
            </template>

            <VListItemTitle class="d-flex align-center ga-2">
-              {{ person.name }}
+              {{ person.full_name }}
              <VTooltip
                v-if="getRecommendationReasons(person).length"
                location="top"
@@ -641,7 +641,7 @@ async function executeAssign(person: AssignablePerson) {
      <VCardText class="px-5">
        Deze shift heeft {{ shift?.slots_total }} plekken en
        {{ shift?.filled_slots }} zijn bezet. Wil je
-        <strong>{{ pendingPerson?.name }}</strong> toch toewijzen?
+        <strong>{{ pendingPerson?.full_name }}</strong> toch toewijzen?
      </VCardText>
      <VCardActions class="px-5 pb-5">
        <VSpacer />
@@ -673,7 +673,7 @@ async function executeAssign(person: AssignablePerson) {
        Vrijwilliger opnieuw toewijzen?
      </VCardTitle>
      <VCardText class="px-5">
-        <strong>{{ pendingPerson?.name }}</strong> heeft zichzelf afgemeld
+        <strong>{{ pendingPerson?.full_name }}</strong> heeft zichzelf afgemeld
        voor deze shift. Weet je zeker dat je deze persoon opnieuw wilt toewijzen?
      </VCardText>
      <VCardActions class="px-5 pb-5">
--- a/apps/app/src/components/shifts/ShiftDetailPanel.vue
+++ b/apps/app/src/components/shifts/ShiftDetailPanel.vue
@@ -75,7 +75,7 @@ async function executeReassign(assignment: ShiftAssignment) {
      shiftId: assignment.shift_id,
      personId: assignment.person_id,
    })
-    successMessage.value = `${assignment.person?.name ?? 'Persoon'} opnieuw toegewezen`
+    successMessage.value = `${assignment.person?.full_name ?? 'Persoon'} opnieuw toegewezen`
    showSuccess.value = true
  }
  catch {
@@ -186,7 +186,7 @@ const successMessage = ref('')
 function onApprove(assignment: ShiftAssignment) {
  approveAssignment(assignment.id, {
    onSuccess: () => {
-      successMessage.value = `${assignment.person?.name ?? 'Toewijzing'} goedgekeurd`
+      successMessage.value = `${assignment.person?.full_name ?? 'Toewijzing'} goedgekeurd`
      showSuccess.value = true
    },
  })
@@ -199,7 +199,7 @@ function onCancel(assignment: ShiftAssignment) {

 function onCancelExecute() {
  if (!cancellingAssignment.value) return
-  const name = cancellingAssignment.value.person?.name ?? 'Toewijzing'
+  const name = cancellingAssignment.value.person?.full_name ?? 'Toewijzing'

  cancelAssignment(cancellingAssignment.value.id, {
    onSuccess: () => {
@@ -224,7 +224,7 @@ function onReject(assignment: ShiftAssignment) {

 function onRejectExecute() {
  if (!rejectingAssignment.value) return
-  const name = rejectingAssignment.value.person?.name ?? 'Toewijzing'
+  const name = rejectingAssignment.value.person?.full_name ?? 'Toewijzing'

  rejectAssignment(
    {
@@ -644,14 +644,14 @@ function fillRateColor(): string {
                      variant="tonal"
                    >
                      <span class="text-caption">
-                        {{ assignment.person ? getInitials(assignment.person.name) : '?' }}
+                        {{ assignment.person ? getInitials(assignment.person.full_name) : '?' }}
                      </span>
                    </VAvatar>

                    <div style="min-width: 0;" class="flex-grow-1">
                      <div class="d-flex align-center gap-x-2 flex-wrap">
                        <span class="text-body-2 font-weight-medium text-truncate">
-                          {{ assignment.person?.name ?? 'Onbekend' }}
+                          {{ assignment.person?.full_name ?? 'Onbekend' }}
                        </span>
                        <VChip
                          v-if="assignment.status === ShiftAssignmentStatus.REJECTED"
@@ -775,7 +775,7 @@ function fillRateColor(): string {
      <VCard title="Toewijzing afwijzen">
        <VCardText>
          Weet je zeker dat je de toewijzing van
-          <strong>{{ rejectingAssignment?.person?.name ?? 'deze persoon' }}</strong>
+          <strong>{{ rejectingAssignment?.person?.full_name ?? 'deze persoon' }}</strong>
          wilt afwijzen?

          <VTextarea
@@ -814,7 +814,7 @@ function fillRateColor(): string {
      <VCard title="Toewijzing annuleren">
        <VCardText>
          Weet je zeker dat je de toewijzing van
-          <strong>{{ cancellingAssignment?.person?.name ?? 'deze persoon' }}</strong>
+          <strong>{{ cancellingAssignment?.person?.full_name ?? 'deze persoon' }}</strong>
          wilt annuleren?
        </VCardText>
        <VCardActions>
@@ -877,7 +877,7 @@ function fillRateColor(): string {
          Vrijwilliger opnieuw toewijzen?
        </VCardTitle>
        <VCardText class="px-5">
-          <strong>{{ reassigningAssignment?.person?.name ?? 'Deze persoon' }}</strong>
+          <strong>{{ reassigningAssignment?.person?.full_name ?? 'Deze persoon' }}</strong>
          heeft zichzelf afgemeld voor deze shift. Weet je zeker dat je deze
          persoon opnieuw wilt toewijzen?
        </VCardText>