bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: companies CRUD with person dialog integration and navigation

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
bert.hausmans
2026-04-10 11:16:01 +02:00
parent 169a078a92
commit 4388811be9
14 changed files with 984 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
api/app/Http/Controllers/Api/V1/CompanyController.php
View File

@@ -20,7 +20,10 @@ final class CompanyController extends Controller
{
Gate::authorize('viewAny', [Company::class, $organisation]);
$companies = $organisation->companies()->get();
$companies = $organisation->companies()
->withCount('persons')
->ordered()
->get();
return CompanyResource::collection($companies);
}
@@ -34,6 +37,15 @@ final class CompanyController extends Controller
return $this->created(new CompanyResource($company));
}
public function show(Organisation $organisation, Company $company): JsonResponse
{
Gate::authorize('view', [$company, $organisation]);
$company->loadCount('persons');
return $this->success(new CompanyResource($company));
}
public function update(UpdateCompanyRequest $request, Organisation $organisation, Company $company): JsonResponse
{
Gate::authorize('update', [$company, $organisation]);

6
api/app/Http/Requests/Api/V1/StoreCompanyRequest.php
View File

@@ -17,10 +17,10 @@ final class StoreCompanyRequest extends FormRequest
public function rules(): array
{
return [
'name' => ['required', 'string', 'max:255'],
'name' => ['required', 'string', 'max:100'],
'type' => ['required', 'in:supplier,partner,agency,venue,other'],
'contact_name' => ['nullable', 'string', 'max:255'],
'contact_email' => ['nullable', 'email', 'max:255'],
'contact_name' => ['nullable', 'string', 'max:100'],
'contact_email' => ['nullable', 'email', 'max:100'],
'contact_phone' => ['nullable', 'string', 'max:30'],
];
}

6
api/app/Http/Requests/Api/V1/UpdateCompanyRequest.php
View File

@@ -17,10 +17,10 @@ final class UpdateCompanyRequest extends FormRequest
public function rules(): array
{
return [
'name' => ['sometimes', 'string', 'max:255'],
'name' => ['sometimes', 'string', 'max:100'],
'type' => ['sometimes', 'in:supplier,partner,agency,venue,other'],
'contact_name' => ['nullable', 'string', 'max:255'],
'contact_email' => ['nullable', 'email', 'max:255'],
'contact_name' => ['nullable', 'string', 'max:100'],
'contact_email' => ['nullable', 'email', 'max:100'],
'contact_phone' => ['nullable', 'string', 'max:30'],
];
}

1
api/app/Http/Resources/Api/V1/CompanyResource.php
View File

@@ -19,6 +19,7 @@ final class CompanyResource extends JsonResource
'contact_name' => $this->contact_name,
'contact_email' => $this->contact_email,
'contact_phone' => $this->contact_phone,
'persons_count' => $this->whenCounted('persons'),
'created_at' => $this->created_at->toIso8601String(),
];
}

7
api/app/Models/Company.php
View File

@@ -7,6 +7,7 @@ namespace App\Models;
use Illuminate\Database\Eloquent\Concerns\HasUlids;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\HasMany;
use Illuminate\Database\Eloquent\SoftDeletes;
@@ -35,4 +36,10 @@ final class Company extends Model
{
return $this->hasMany(Person::class);
}
/** @param Builder<self> $query */
public function scopeOrdered(Builder $query): Builder
{
return $query->orderBy('name');
}
}

10
api/app/Policies/CompanyPolicy.php
View File

@@ -16,6 +16,16 @@ final class CompanyPolicy
|| $organisation->users()->where('user_id', $user->id)->exists();
}
public function view(User $user, Company $company, Organisation $organisation): bool
{
if ($company->organisation_id !== $organisation->id) {
return false;
}
return $user->hasRole('super_admin')
|| $organisation->users()->where('user_id', $user->id)->exists();
}
public function create(User $user, Organisation $organisation): bool
{
return $this->canManageOrganisation($user, $organisation);

252
api/tests/Feature/Company/CompanyTest.php Normal file
View File

@@ -0,0 +1,252 @@
<?php
declare(strict_types=1);
namespace Tests\Feature\Company;
use App\Models\Company;
use App\Models\Organisation;
use App\Models\User;
use Database\Seeders\RoleSeeder;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Laravel\Sanctum\Sanctum;
use Tests\TestCase;
class CompanyTest extends TestCase
{
use RefreshDatabase;
private User $orgAdmin;
private User $outsider;
private Organisation $organisation;
private Organisation $otherOrganisation;
protected function setUp(): void
{
parent::setUp();
$this->seed(RoleSeeder::class);
$this->organisation = Organisation::factory()->create();
$this->otherOrganisation = Organisation::factory()->create();
$this->orgAdmin = User::factory()->create();
$this->organisation->users()->attach($this->orgAdmin, ['role' => 'org_admin']);
$this->outsider = User::factory()->create();
$this->otherOrganisation->users()->attach($this->outsider, ['role' => 'org_admin']);
}
public function test_index_returns_companies_for_organisation(): void
{
Company::factory()->count(3)->create(['organisation_id' => $this->organisation->id]);
// Company on other org should not appear
Company::factory()->create(['organisation_id' => $this->otherOrganisation->id]);
Sanctum::actingAs($this->orgAdmin);
$response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies");
$response->assertOk();
$this->assertCount(3, $response->json('data'));
}
public function test_index_returns_companies_ordered_by_name(): void
{
Company::factory()->create(['organisation_id' => $this->organisation->id, 'name' => 'Zebra BV']);
Company::factory()->create(['organisation_id' => $this->organisation->id, 'name' => 'Alpha BV']);
Sanctum::actingAs($this->orgAdmin);
$response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies");
$response->assertOk();
$names = collect($response->json('data'))->pluck('name')->all();
$this->assertSame(['Alpha BV', 'Zebra BV'], $names);
}
public function test_index_includes_persons_count(): void
{
$company = Company::factory()->create(['organisation_id' => $this->organisation->id]);
Sanctum::actingAs($this->orgAdmin);
$response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies");
$response->assertOk();
$this->assertArrayHasKey('persons_count', $response->json('data.0'));
}
public function test_index_unauthenticated_returns_401(): void
{
$response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies");
$response->assertUnauthorized();
}
public function test_index_cross_org_returns_403(): void
{
Sanctum::actingAs($this->outsider);
$response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies");
$response->assertForbidden();
}
public function test_store_creates_company(): void
{
Sanctum::actingAs($this->orgAdmin);
$response = $this->postJson("/api/v1/organisations/{$this->organisation->id}/companies", [
'name' => 'Catering Janssen',
'type' => 'supplier',
'contact_name' => 'Jan Janssen',
'contact_email' => 'jan@janssen.nl',
'contact_phone' => '+31612345678',
]);
$response->assertCreated()
->assertJson(['data' => ['name' => 'Catering Janssen', 'type' => 'supplier']]);
$this->assertDatabaseHas('companies', [
'organisation_id' => $this->organisation->id,
'name' => 'Catering Janssen',
'type' => 'supplier',
]);
}
public function test_store_unauthenticated_returns_401(): void
{
$response = $this->postJson("/api/v1/organisations/{$this->organisation->id}/companies", [
'name' => 'Test BV',
'type' => 'supplier',
]);
$response->assertUnauthorized();
}
public function test_store_cross_org_returns_403(): void
{
Sanctum::actingAs($this->outsider);
$response = $this->postJson("/api/v1/organisations/{$this->organisation->id}/companies", [
'name' => 'Test BV',
'type' => 'supplier',
]);
$response->assertForbidden();
}
public function test_store_missing_name_returns_422(): void
{
Sanctum::actingAs($this->orgAdmin);
$response = $this->postJson("/api/v1/organisations/{$this->organisation->id}/companies", [
'type' => 'supplier',
]);
$response->assertUnprocessable()
->assertJsonValidationErrors('name');
}
public function test_store_invalid_type_returns_422(): void
{
Sanctum::actingAs($this->orgAdmin);
$response = $this->postJson("/api/v1/organisations/{$this->organisation->id}/companies", [
'name' => 'Test BV',
'type' => 'invalid_type',
]);
$response->assertUnprocessable()
->assertJsonValidationErrors('type');
}
public function test_show_returns_company(): void
{
$company = Company::factory()->create([
'organisation_id' => $this->organisation->id,
'name' => 'Test BV',
]);
Sanctum::actingAs($this->orgAdmin);
$response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}");
$response->assertOk()
->assertJson(['data' => ['name' => 'Test BV']]);
}
public function test_show_cross_org_returns_403(): void
{
$company = Company::factory()->create([
'organisation_id' => $this->organisation->id,
]);
Sanctum::actingAs($this->outsider);
$response = $this->getJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}");
$response->assertForbidden();
}
public function test_update_company(): void
{
$company = Company::factory()->create([
'organisation_id' => $this->organisation->id,
'name' => 'Old Name',
]);
Sanctum::actingAs($this->orgAdmin);
$response = $this->putJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}", [
'name' => 'New Name',
'type' => 'partner',
]);
$response->assertOk()
->assertJson(['data' => ['name' => 'New Name', 'type' => 'partner']]);
}
public function test_update_cross_org_returns_403(): void
{
$company = Company::factory()->create([
'organisation_id' => $this->organisation->id,
]);
Sanctum::actingAs($this->outsider);
$response = $this->putJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}", [
'name' => 'Hacked',
]);
$response->assertForbidden();
}
public function test_destroy_soft_deletes_company(): void
{
$company = Company::factory()->create([
'organisation_id' => $this->organisation->id,
]);
Sanctum::actingAs($this->orgAdmin);
$response = $this->deleteJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}");
$response->assertNoContent();
$this->assertSoftDeleted('companies', ['id' => $company->id]);
}
public function test_destroy_cross_org_returns_403(): void
{
$company = Company::factory()->create([
'organisation_id' => $this->organisation->id,
]);
Sanctum::actingAs($this->outsider);
$response = $this->deleteJson("/api/v1/organisations/{$this->organisation->id}/companies/{$company->id}");
$response->assertForbidden();
}
}

190
apps/app/src/components/organisation/CompanyDialog.vue Normal file
View 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>

42
apps/app/src/components/persons/CreatePersonDialog.vue
View File

@@ -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,12 +36,30 @@ const successName = ref('')
const { mutate: createPerson, isPending } = useCreatePerson(eventIdRef)
const crowdTypeItems = computed(() =>
crowdTypes.value?.map(ct => ({
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' },
@@ -104,11 +124,11 @@ function onSubmit() {
@after-leave="resetForm"
>
<VCard title="Persoon toevoegen">
<VCardText>
<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=""
v-model="form.company_id"
label="Bedrijf"
:items="[]"
disabled
:items="companyItems"
clearable
:no-data-text="'Nog geen bedrijven'"
/>
</div>
</template>
Komt beschikbaar zodra bedrijven zijn aangemaakt
</VTooltip>
</VCol>
<VCol cols="12">
<AppSelect
@@ -168,7 +182,6 @@ function onSubmit() {
/>
</VCol>
</VRow>
</VForm>
</VCardText>
<VCardActions>
<VSpacer />
@@ -179,13 +192,14 @@ function onSubmit() {
Annuleren
</VBtn>
<VBtn
type="submit"
color="primary"
:loading="isPending"
@click="onSubmit"
>
Toevoegen
</VBtn>
</VCardActions>
</VForm>
</VCard>
</VDialog>

41
apps/app/src/components/persons/EditPersonDialog.vue
View File

@@ -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,12 +50,30 @@ watch(() => props.person, (p) => {
}, { immediate: true })
const crowdTypeItems = computed(() =>
crowdTypes.value?.map(ct => ({
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' },
@@ -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"
>
<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,10 +203,10 @@ function onSubmit() {
variant="outlined"
rows="3"
:error-messages="errors.admin_notes"
autocomplete="one-time-code"
/>
</VCol>
</VRow>
</VForm>
</VCardText>
<VCardActions>
<VSpacer />
@@ -185,13 +217,14 @@ function onSubmit() {
Annuleren
</VBtn>
<VBtn
type="submit"
color="primary"
:loading="isPending"
@click="onSubmit"
>
Opslaan
</VBtn>
</VCardActions>
</VForm>
</VCard>
</VDialog>

74
apps/app/src/composables/api/useCompanies.ts Normal file
View File

@@ -0,0 +1,74 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
import type { Ref } from 'vue'
import { apiClient } from '@/lib/axios'
import type { Company, CreateCompanyPayload, UpdateCompanyPayload } from '@/types/organisation'
interface ApiResponse<T> {
success: boolean
data: T
message?: string
}
export function useCompanies(orgId: Ref<string>) {
return useQuery({
queryKey: ['companies', orgId],
queryFn: async () => {
const { data } = await apiClient.get<{ data: Company[] }>(
`/organisations/${orgId.value}/companies`,
)
return data.data
},
enabled: () => !!orgId.value,
staleTime: Infinity,
})
}
export function useCreateCompany(orgId: Ref<string>) {
const queryClient = useQueryClient()
return useMutation({
mutationFn: async (payload: CreateCompanyPayload) => {
const { data } = await apiClient.post<ApiResponse<Company>>(
`/organisations/${orgId.value}/companies`,
payload,
)
return data.data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['companies', orgId] })
},
})
}
export function useUpdateCompany(orgId: Ref<string>) {
const queryClient = useQueryClient()
return useMutation({
mutationFn: async ({ id, ...payload }: UpdateCompanyPayload & { id: string }) => {
const { data } = await apiClient.put<ApiResponse<Company>>(
`/organisations/${orgId.value}/companies/${id}`,
payload,
)
return data.data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['companies', orgId] })
},
})
}
export function useDeleteCompany(orgId: Ref<string>) {
const queryClient = useQueryClient()
return useMutation({
mutationFn: async (id: string) => {
await apiClient.delete(`/organisations/${orgId.value}/companies/${id}`)
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['companies', orgId] })
},
})
}

5
apps/app/src/navigation/vertical/index.ts
View File

@@ -24,4 +24,9 @@ export default [
action: 'read',
subject: 'members',
},
{
title: 'Bedrijven',
to: { name: 'organisation-companies' },
icon: { icon: 'tabler-building' },
},
]

301
apps/app/src/pages/organisation/companies.vue Normal file
View File

@@ -0,0 +1,301 @@
<script setup lang="ts">
import { useCompanies, useDeleteCompany } from '@/composables/api/useCompanies'
import { useAuthStore } from '@/stores/useAuthStore'
import { useOrganisationStore } from '@/stores/useOrganisationStore'
import CompanyDialog from '@/components/organisation/CompanyDialog.vue'
import type { Company } from '@/types/organisation'
const authStore = useAuthStore()
const orgStore = useOrganisationStore()
const orgId = computed(() => orgStore.activeOrganisationId ?? '')
const { data: companies, isLoading, isError, refetch } = useCompanies(orgId)
const { mutate: deleteCompany, isPending: isDeleting } = useDeleteCompany(orgId)
// Search & filter
const search = ref('')
const filterType = ref('')
const typeOptions = [
{ title: 'Alle types', value: '' },
{ title: 'Leverancier', value: 'supplier' },
{ title: 'Partner', value: 'partner' },
{ title: 'Bureau', value: 'agency' },
{ title: 'Locatie', value: 'venue' },
{ title: 'Overig', value: 'other' },
]
const typeLabel: Record<string, string> = {
supplier: 'Leverancier',
partner: 'Partner',
agency: 'Bureau',
venue: 'Locatie',
other: 'Overig',
}
const typeColor: Record<string, string> = {
supplier: 'info',
partner: 'success',
agency: 'purple',
venue: 'warning',
other: 'default',
}
const filteredCompanies = computed(() => {
let result = companies.value ?? []
if (filterType.value) {
result = result.filter(c => c.type === filterType.value)
}
if (search.value) {
const q = search.value.toLowerCase()
result = result.filter(c => c.name.toLowerCase().includes(q))
}
return result
})
const headers = [
{ title: 'Naam', key: 'name' },
{ title: 'Type', key: 'type' },
{ title: 'Contactpersoon', key: 'contact_name' },
{ title: 'E-mail', key: 'contact_email' },
{ title: 'Telefoon', key: 'contact_phone' },
{ title: 'Acties', key: 'actions', sortable: false, align: 'end' as const },
]
// Dialogs
const isDialogOpen = ref(false)
const editingCompany = ref<Company | null>(null)
const isDeleteDialogOpen = ref(false)
const deletingCompany = ref<Company | null>(null)
const showSuccess = ref(false)
const successMessage = ref('')
function onAdd() {
editingCompany.value = null
isDialogOpen.value = true
}
function onEdit(company: Company) {
editingCompany.value = company
isDialogOpen.value = true
}
function onDeleteConfirm(company: Company) {
deletingCompany.value = company
isDeleteDialogOpen.value = true
}
function onDeleteExecute() {
if (!deletingCompany.value) return
const name = deletingCompany.value.name
deleteCompany(deletingCompany.value.id, {
onSuccess: () => {
isDeleteDialogOpen.value = false
deletingCompany.value = null
successMessage.value = `${name} verwijderd`
showSuccess.value = true
},
})
}
function onSaved() {
successMessage.value = editingCompany.value ? 'Bedrijf bijgewerkt' : 'Bedrijf toegevoegd'
showSuccess.value = true
}
</script>
<template>
<div>
<!-- Loading -->
<VSkeletonLoader
v-if="isLoading"
type="card"
/>
<!-- Error -->
<VAlert
v-else-if="isError"
type="error"
class="mb-4"
>
Kon bedrijven niet laden.
<template #append>
<VBtn
variant="text"
@click="refetch()"
>
Opnieuw proberen
</VBtn>
</template>
</VAlert>
<template v-else>
<!-- Header -->
<div class="d-flex justify-space-between align-center mb-6">
<div>
<h4 class="text-h4">
Bedrijven
</h4>
<p class="text-body-1 text-disabled mb-0">
Leveranciers, partners en andere organisaties
</p>
</div>
<VBtn
prepend-icon="tabler-plus"
@click="onAdd"
>
Bedrijf toevoegen
</VBtn>
</div>
<!-- Filters -->
<div class="d-flex gap-x-4 mb-4">
<AppTextField
v-model="search"
prepend-inner-icon="tabler-search"
placeholder="Zoek op naam..."
clearable
style="max-inline-size: 300px;"
/>
<AppSelect
v-model="filterType"
label="Type"
:items="typeOptions"
clearable
style="min-inline-size: 180px;"
/>
</div>
<!-- Empty state -->
<VCard
v-if="!companies?.length"
class="text-center pa-8"
>
<VIcon
icon="tabler-building"
size="48"
class="mb-4 text-disabled"
/>
<p class="text-body-1 text-disabled">
Nog geen bedrijven. Voeg je eerste bedrijf toe.
</p>
</VCard>
<!-- No results after filter -->
<VCard
v-else-if="!filteredCompanies.length"
class="text-center pa-8"
>
<p class="text-body-1 text-disabled">
Geen bedrijven gevonden voor deze zoekopdracht.
</p>
</VCard>
<!-- Data table -->
<VCard v-else>
<VDataTable
:headers="headers"
:items="filteredCompanies"
item-value="id"
:items-per-page="-1"
hide-default-footer
hover
@click:row="(_e: Event, row: { item: Company }) => onEdit(row.item)"
>
<template #item.type="{ item }">
<VChip
:color="typeColor[item.type] ?? 'default'"
size="small"
>
{{ typeLabel[item.type] ?? item.type }}
</VChip>
</template>
<template #item.contact_name="{ item }">
{{ item.contact_name ?? '-' }}
</template>
<template #item.contact_email="{ item }">
{{ item.contact_email ?? '-' }}
</template>
<template #item.contact_phone="{ item }">
{{ item.contact_phone ?? '-' }}
</template>
<template #item.actions="{ item }">
<div class="d-flex justify-end gap-x-1">
<VBtn
icon="tabler-edit"
variant="text"
size="small"
title="Bewerken"
@click.stop="onEdit(item)"
/>
<VBtn
icon="tabler-trash"
variant="text"
size="small"
color="error"
title="Verwijderen"
@click.stop="onDeleteConfirm(item)"
/>
</div>
</template>
</VDataTable>
</VCard>
</template>
<!-- Create/Edit dialog -->
<CompanyDialog
v-model="isDialogOpen"
:org-id="orgId"
:company="editingCompany"
@saved="onSaved"
/>
<!-- Delete confirmation -->
<VDialog
v-model="isDeleteDialogOpen"
max-width="400"
>
<VCard title="Bedrijf verwijderen">
<VCardText>
Weet je zeker dat je <strong>{{ deletingCompany?.name }}</strong> wilt verwijderen?
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
variant="text"
@click="isDeleteDialogOpen = false"
>
Annuleren
</VBtn>
<VBtn
color="error"
:loading="isDeleting"
@click="onDeleteExecute"
>
Verwijderen
</VBtn>
</VCardActions>
</VCard>
</VDialog>
<!-- Success snackbar -->
<VSnackbar
v-model="showSuccess"
color="success"
:timeout="3000"
>
{{ successMessage }}
</VSnackbar>
</div>
</template>

14
apps/app/src/types/organisation.ts
View File

@@ -33,7 +33,19 @@ export interface CrowdType {
export interface Company {
id: string
name: string
type: string
type: 'supplier' | 'partner' | 'agency' | 'venue' | 'other'
contact_name: string | null
contact_email: string | null
contact_phone: string | null
persons_count?: number
}
export interface CreateCompanyPayload {
name: string
type: Company['type']
contact_name?: string | null
contact_email?: string | null
contact_phone?: string | null
}
export interface UpdateCompanyPayload extends Partial<CreateCompanyPayload> {}