feat: companies CRUD with person dialog integration and navigation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
190
apps/app/src/components/organisation/CompanyDialog.vue
Normal file
190
apps/app/src/components/organisation/CompanyDialog.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useCreateCompany, useUpdateCompany } from '@/composables/api/useCompanies'
|
||||
import { requiredValidator, emailValidator } from '@core/utils/validators'
|
||||
import type { Company } from '@/types/organisation'
|
||||
|
||||
const props = defineProps<{
|
||||
orgId: string
|
||||
company?: Company | null
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const orgIdRef = computed(() => props.orgId)
|
||||
|
||||
const isEdit = computed(() => !!props.company)
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
type: 'supplier' as Company['type'],
|
||||
contact_name: '',
|
||||
contact_email: '',
|
||||
contact_phone: '',
|
||||
})
|
||||
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
|
||||
const { mutate: createCompany, isPending: isCreating } = useCreateCompany(orgIdRef)
|
||||
const { mutate: updateCompany, isPending: isUpdating } = useUpdateCompany(orgIdRef)
|
||||
|
||||
const isPending = computed(() => isCreating.value || isUpdating.value)
|
||||
|
||||
const typeOptions = [
|
||||
{ title: 'Leverancier', value: 'supplier' },
|
||||
{ title: 'Partner', value: 'partner' },
|
||||
{ title: 'Bureau', value: 'agency' },
|
||||
{ title: 'Locatie', value: 'venue' },
|
||||
{ title: 'Overig', value: 'other' },
|
||||
]
|
||||
|
||||
watch(() => props.company, (c) => {
|
||||
if (c) {
|
||||
form.value = {
|
||||
name: c.name,
|
||||
type: c.type,
|
||||
contact_name: c.contact_name ?? '',
|
||||
contact_email: c.contact_email ?? '',
|
||||
contact_phone: c.contact_phone ?? '',
|
||||
}
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
function resetForm() {
|
||||
form.value = {
|
||||
name: '',
|
||||
type: 'supplier',
|
||||
contact_name: '',
|
||||
contact_email: '',
|
||||
contact_phone: '',
|
||||
}
|
||||
errors.value = {}
|
||||
refVForm.value?.resetValidation()
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
saved: []
|
||||
}>()
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
const payload = {
|
||||
name: form.value.name,
|
||||
type: form.value.type,
|
||||
contact_name: form.value.contact_name || null,
|
||||
contact_email: form.value.contact_email || null,
|
||||
contact_phone: form.value.contact_phone || null,
|
||||
}
|
||||
|
||||
const onSuccess = () => {
|
||||
modelValue.value = false
|
||||
emit('saved')
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const 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 }
|
||||
}
|
||||
}
|
||||
|
||||
if (isEdit.value && props.company) {
|
||||
updateCompany({ id: props.company.id, ...payload }, { onSuccess, onError })
|
||||
}
|
||||
else {
|
||||
createCompany(payload, { onSuccess, onError })
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="550"
|
||||
@after-leave="resetForm"
|
||||
>
|
||||
<VCard :title="isEdit ? 'Bedrijf bewerken' : 'Bedrijf toevoegen'">
|
||||
<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">
|
||||
<AppSelect
|
||||
v-model="form.type"
|
||||
label="Type"
|
||||
:items="typeOptions"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.type"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.contact_name"
|
||||
label="Contactpersoon"
|
||||
:error-messages="errors.contact_name"
|
||||
autocomplete="one-time-code"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.contact_email"
|
||||
label="E-mail"
|
||||
type="email"
|
||||
:rules="form.contact_email ? [emailValidator] : []"
|
||||
:error-messages="errors.contact_email"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="form.contact_phone"
|
||||
label="Telefoon"
|
||||
type="tel"
|
||||
:error-messages="errors.contact_phone"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
type="submit"
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
>
|
||||
{{ isEdit ? 'Opslaan' : 'Toevoegen' }}
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VForm>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
@@ -2,6 +2,7 @@
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useCreatePerson } 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 { PersonStatus } from '@/types/person'
|
||||
|
||||
@@ -16,6 +17,7 @@ const eventIdRef = computed(() => props.eventId)
|
||||
const orgIdRef = computed(() => props.orgId)
|
||||
|
||||
const { data: crowdTypes } = useCrowdTypeList(orgIdRef)
|
||||
const { data: companies } = useCompanies(orgIdRef)
|
||||
|
||||
const form = ref({
|
||||
crowd_type_id: '',
|
||||
@@ -34,9 +36,27 @@ const successName = ref('')
|
||||
const { mutate: createPerson, isPending } = useCreatePerson(eventIdRef)
|
||||
|
||||
const crowdTypeItems = computed(() =>
|
||||
crowdTypes.value?.map(ct => ({
|
||||
title: ct.name,
|
||||
value: ct.id,
|
||||
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,
|
||||
})) ?? [],
|
||||
)
|
||||
|
||||
@@ -104,11 +124,11 @@ function onSubmit() {
|
||||
@after-leave="resetForm"
|
||||
>
|
||||
<VCard title="Persoon toevoegen">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
@@ -145,19 +165,13 @@ function onSubmit() {
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VTooltip location="top">
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<div v-bind="tooltipProps">
|
||||
<AppSelect
|
||||
model-value=""
|
||||
label="Bedrijf"
|
||||
:items="[]"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Komt beschikbaar zodra bedrijven zijn aangemaakt
|
||||
</VTooltip>
|
||||
<AppSelect
|
||||
v-model="form.company_id"
|
||||
label="Bedrijf"
|
||||
:items="companyItems"
|
||||
clearable
|
||||
:no-data-text="'Nog geen bedrijven'"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
@@ -168,24 +182,24 @@ function onSubmit() {
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Toevoegen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
type="submit"
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
>
|
||||
Toevoegen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VForm>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
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'
|
||||
|
||||
@@ -17,6 +18,7 @@ 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({
|
||||
@@ -24,6 +26,7 @@ const form = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
company_id: '',
|
||||
status: 'pending' as PersonStatus,
|
||||
admin_notes: '',
|
||||
is_blacklisted: false,
|
||||
@@ -39,6 +42,7 @@ watch(() => props.person, (p) => {
|
||||
name: p.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,
|
||||
@@ -46,9 +50,27 @@ watch(() => props.person, (p) => {
|
||||
}, { immediate: true })
|
||||
|
||||
const crowdTypeItems = computed(() =>
|
||||
crowdTypes.value?.map(ct => ({
|
||||
title: ct.name,
|
||||
value: ct.id,
|
||||
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,
|
||||
})) ?? [],
|
||||
)
|
||||
|
||||
@@ -73,6 +95,7 @@ function onSubmit() {
|
||||
name: form.value.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,
|
||||
@@ -103,11 +126,11 @@ function onSubmit() {
|
||||
max-width="550"
|
||||
>
|
||||
<VCard title="Persoon bewerken">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
@@ -143,6 +166,15 @@ function onSubmit() {
|
||||
: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"
|
||||
@@ -171,27 +203,28 @@ function onSubmit() {
|
||||
variant="outlined"
|
||||
rows="3"
|
||||
:error-messages="errors.admin_notes"
|
||||
autocomplete="one-time-code"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user