feat: platform admin member management — invite, remove, role update
Add member management to the platform admin organisation detail page: - Backend: invite (creates invitation or directly adds existing user), remove member, update member role endpoints on AdminOrganisationController - Backend: show endpoint now returns members alongside organisation data - Frontend: members table with inline role editing, invite dialog, remove confirmation dialog on /platform/organisations/[id] - Tests: 7 new tests covering happy paths and edge cases (self-removal, existing member, non-super_admin denied) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,10 +5,15 @@ declare(strict_types=1);
|
||||
namespace App\Http\Controllers\Api\V1\Admin;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Http\Requests\Admin\AdminInviteMemberRequest;
|
||||
use App\Http\Requests\Admin\AdminUpdateMemberRoleRequest;
|
||||
use App\Http\Requests\Admin\AdminUpdateOrganisationRequest;
|
||||
use App\Http\Resources\Admin\AdminOrganisationResource;
|
||||
use App\Http\Resources\Api\V1\MemberResource;
|
||||
use App\Models\Organisation;
|
||||
use App\Models\Person;
|
||||
use App\Models\User;
|
||||
use App\Models\UserInvitation;
|
||||
use Illuminate\Http\JsonResponse;
|
||||
use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
|
||||
|
||||
@@ -50,7 +55,12 @@ final class AdminOrganisationController extends Controller
|
||||
->whereIn('event_id', $organisation->events()->select('id'))
|
||||
->count();
|
||||
|
||||
return $this->success(new AdminOrganisationResource($organisation));
|
||||
$members = $organisation->users()->orderBy('first_name')->get();
|
||||
|
||||
return $this->success([
|
||||
'organisation' => new AdminOrganisationResource($organisation),
|
||||
'members' => MemberResource::collection($members),
|
||||
]);
|
||||
}
|
||||
|
||||
public function store(): void
|
||||
@@ -91,4 +101,104 @@ final class AdminOrganisationController extends Controller
|
||||
|
||||
return response()->json(null, 204);
|
||||
}
|
||||
|
||||
public function invite(AdminInviteMemberRequest $request, string $organisationId): JsonResponse
|
||||
{
|
||||
$organisation = Organisation::withoutGlobalScopes()->findOrFail($organisationId);
|
||||
$email = $request->validated('email');
|
||||
$role = $request->validated('role');
|
||||
|
||||
// Check if already a member
|
||||
$existingMember = $organisation->users()->where('email', $email)->first();
|
||||
|
||||
if ($existingMember) {
|
||||
return $this->error('Gebruiker is al lid van deze organisatie.', 422);
|
||||
}
|
||||
|
||||
// If user with this email already exists, add directly
|
||||
$existingUser = User::where('email', $email)->first();
|
||||
|
||||
if ($existingUser) {
|
||||
$organisation->users()->attach($existingUser, ['role' => $role]);
|
||||
|
||||
activity('admin')
|
||||
->causedBy(auth()->user())
|
||||
->performedOn($organisation)
|
||||
->event('admin.organisation.member_invited')
|
||||
->withProperties(['email' => $email, 'role' => $role, 'direct' => true])
|
||||
->log("Added existing user {$email} as {$role}");
|
||||
|
||||
return $this->success(
|
||||
new MemberResource($organisation->users()->where('user_id', $existingUser->id)->first()),
|
||||
'Gebruiker direct toegevoegd als lid.',
|
||||
);
|
||||
}
|
||||
|
||||
// Create invitation for unknown email
|
||||
$invitation = new UserInvitation(['email' => $email]);
|
||||
$invitation->invited_by_user_id = auth()->id();
|
||||
$invitation->organisation_id = $organisation->id;
|
||||
$invitation->role = $role;
|
||||
$invitation->token = hash('sha256', bin2hex(random_bytes(32)));
|
||||
$invitation->status = 'pending';
|
||||
$invitation->expires_at = now()->addDays(7);
|
||||
$invitation->save();
|
||||
|
||||
activity('admin')
|
||||
->causedBy(auth()->user())
|
||||
->performedOn($organisation)
|
||||
->event('admin.organisation.member_invited')
|
||||
->withProperties(['email' => $email, 'role' => $role, 'direct' => false])
|
||||
->log("Invited {$email} as {$role}");
|
||||
|
||||
return $this->created(null, 'Uitnodiging aangemaakt.');
|
||||
}
|
||||
|
||||
public function removeMember(string $organisationId, User $user): JsonResponse
|
||||
{
|
||||
$organisation = Organisation::withoutGlobalScopes()->findOrFail($organisationId);
|
||||
|
||||
if (auth()->id() === $user->id) {
|
||||
return $this->error('Je kunt jezelf niet verwijderen.', 422);
|
||||
}
|
||||
|
||||
if (!$organisation->users()->where('user_id', $user->id)->exists()) {
|
||||
return $this->notFound('Gebruiker is geen lid van deze organisatie.');
|
||||
}
|
||||
|
||||
$organisation->users()->detach($user->id);
|
||||
|
||||
activity('admin')
|
||||
->causedBy(auth()->user())
|
||||
->performedOn($organisation)
|
||||
->event('admin.organisation.member_removed')
|
||||
->withProperties(['user_id' => $user->id, 'email' => $user->email])
|
||||
->log("Removed {$user->email} from organisation");
|
||||
|
||||
return response()->json(null, 204);
|
||||
}
|
||||
|
||||
public function updateMemberRole(AdminUpdateMemberRoleRequest $request, string $organisationId, User $user): JsonResponse
|
||||
{
|
||||
$organisation = Organisation::withoutGlobalScopes()->findOrFail($organisationId);
|
||||
|
||||
if (!$organisation->users()->where('user_id', $user->id)->exists()) {
|
||||
return $this->notFound('Gebruiker is geen lid van deze organisatie.');
|
||||
}
|
||||
|
||||
$organisation->users()->updateExistingPivot($user->id, [
|
||||
'role' => $request->validated('role'),
|
||||
]);
|
||||
|
||||
activity('admin')
|
||||
->causedBy(auth()->user())
|
||||
->performedOn($organisation)
|
||||
->event('admin.organisation.member_role_updated')
|
||||
->withProperties(['user_id' => $user->id, 'role' => $request->validated('role')])
|
||||
->log("Updated role of {$user->email} to {$request->validated('role')}");
|
||||
|
||||
return $this->success(
|
||||
new MemberResource($organisation->users()->where('user_id', $user->id)->first()),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
24
api/app/Http/Requests/Admin/AdminInviteMemberRequest.php
Normal file
24
api/app/Http/Requests/Admin/AdminInviteMemberRequest.php
Normal file
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Http\Requests\Admin;
|
||||
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
|
||||
final class AdminInviteMemberRequest extends FormRequest
|
||||
{
|
||||
public function authorize(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
/** @return array<string, mixed> */
|
||||
public function rules(): array
|
||||
{
|
||||
return [
|
||||
'email' => ['required', 'email', 'max:255'],
|
||||
'role' => ['required', 'in:org_admin,org_member'],
|
||||
];
|
||||
}
|
||||
}
|
||||
23
api/app/Http/Requests/Admin/AdminUpdateMemberRoleRequest.php
Normal file
23
api/app/Http/Requests/Admin/AdminUpdateMemberRoleRequest.php
Normal file
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Http\Requests\Admin;
|
||||
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
|
||||
final class AdminUpdateMemberRoleRequest extends FormRequest
|
||||
{
|
||||
public function authorize(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
/** @return array<string, mixed> */
|
||||
public function rules(): array
|
||||
{
|
||||
return [
|
||||
'role' => ['required', 'in:org_admin,org_member'],
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -90,6 +90,9 @@ Route::prefix('admin')
|
||||
->group(function () {
|
||||
// Organisations
|
||||
Route::apiResource('organisations', AdminOrganisationController::class);
|
||||
Route::post('organisations/{organisation}/invite', [AdminOrganisationController::class, 'invite']);
|
||||
Route::put('organisations/{organisation}/members/{user}', [AdminOrganisationController::class, 'updateMemberRole']);
|
||||
Route::delete('organisations/{organisation}/members/{user}', [AdminOrganisationController::class, 'removeMember']);
|
||||
|
||||
// Users
|
||||
Route::apiResource('users', AdminUserController::class)
|
||||
|
||||
@@ -8,6 +8,7 @@ use App\Models\Event;
|
||||
use App\Models\Organisation;
|
||||
use App\Models\Person;
|
||||
use App\Models\User;
|
||||
use App\Models\UserInvitation;
|
||||
use Database\Seeders\RoleSeeder;
|
||||
use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||
use Laravel\Sanctum\Sanctum;
|
||||
@@ -100,7 +101,7 @@ class AdminOrganisationControllerTest extends TestCase
|
||||
|
||||
// ─── Show ────────────────────────────────────────────────
|
||||
|
||||
public function test_show_returns_organisation_with_counts(): void
|
||||
public function test_show_returns_organisation_with_members(): void
|
||||
{
|
||||
$event = Event::factory()->create(['organisation_id' => $this->organisation->id]);
|
||||
|
||||
@@ -109,12 +110,17 @@ class AdminOrganisationControllerTest extends TestCase
|
||||
$response = $this->getJson("/api/v1/admin/organisations/{$this->organisation->id}");
|
||||
|
||||
$response->assertOk();
|
||||
$response->assertJsonPath('data.id', $this->organisation->id);
|
||||
$response->assertJsonPath('data.events_count', 1);
|
||||
$response->assertJsonPath('data.users_count', 1);
|
||||
$response->assertJsonPath('data.organisation.id', $this->organisation->id);
|
||||
$response->assertJsonPath('data.organisation.events_count', 1);
|
||||
$response->assertJsonPath('data.organisation.users_count', 1);
|
||||
$response->assertJsonStructure([
|
||||
'data' => ['id', 'name', 'slug', 'billing_status', 'billing_status_label', 'events_count', 'users_count', 'total_persons'],
|
||||
'data' => [
|
||||
'organisation' => ['id', 'name', 'slug', 'billing_status', 'billing_status_label', 'events_count', 'users_count', 'total_persons'],
|
||||
'members' => [['id', 'first_name', 'last_name', 'email', 'role']],
|
||||
],
|
||||
]);
|
||||
$this->assertCount(1, $response->json('data.members'));
|
||||
$response->assertJsonPath('data.members.0.email', $this->orgAdmin->email);
|
||||
}
|
||||
|
||||
// ─── Update ──────────────────────────────────────────────
|
||||
@@ -146,4 +152,115 @@ class AdminOrganisationControllerTest extends TestCase
|
||||
$response->assertNoContent();
|
||||
$this->assertSoftDeleted('organisations', ['id' => $this->organisation->id]);
|
||||
}
|
||||
|
||||
// ─── Invite ──────────────────────────────────────────────
|
||||
|
||||
public function test_invite_creates_invitation_for_new_email(): void
|
||||
{
|
||||
Sanctum::actingAs($this->superAdmin);
|
||||
|
||||
$response = $this->postJson("/api/v1/admin/organisations/{$this->organisation->id}/invite", [
|
||||
'email' => 'newuser@example.com',
|
||||
'role' => 'org_member',
|
||||
]);
|
||||
|
||||
$response->assertCreated();
|
||||
$this->assertDatabaseHas('user_invitations', [
|
||||
'email' => 'newuser@example.com',
|
||||
'organisation_id' => $this->organisation->id,
|
||||
'role' => 'org_member',
|
||||
'status' => 'pending',
|
||||
]);
|
||||
}
|
||||
|
||||
public function test_invite_adds_existing_user_directly(): void
|
||||
{
|
||||
$existingUser = User::factory()->create(['email' => 'exists@example.com']);
|
||||
|
||||
Sanctum::actingAs($this->superAdmin);
|
||||
|
||||
$response = $this->postJson("/api/v1/admin/organisations/{$this->organisation->id}/invite", [
|
||||
'email' => 'exists@example.com',
|
||||
'role' => 'org_admin',
|
||||
]);
|
||||
|
||||
$response->assertOk();
|
||||
$this->assertDatabaseHas('organisation_user', [
|
||||
'user_id' => $existingUser->id,
|
||||
'organisation_id' => $this->organisation->id,
|
||||
'role' => 'org_admin',
|
||||
]);
|
||||
}
|
||||
|
||||
public function test_invite_fails_for_existing_member(): void
|
||||
{
|
||||
Sanctum::actingAs($this->superAdmin);
|
||||
|
||||
$response = $this->postJson("/api/v1/admin/organisations/{$this->organisation->id}/invite", [
|
||||
'email' => $this->orgAdmin->email,
|
||||
'role' => 'org_member',
|
||||
]);
|
||||
|
||||
$response->assertUnprocessable();
|
||||
$response->assertJsonPath('message', 'Gebruiker is al lid van deze organisatie.');
|
||||
}
|
||||
|
||||
public function test_invite_denied_for_non_super_admin(): void
|
||||
{
|
||||
Sanctum::actingAs($this->orgAdmin);
|
||||
|
||||
$response = $this->postJson("/api/v1/admin/organisations/{$this->organisation->id}/invite", [
|
||||
'email' => 'test@example.com',
|
||||
'role' => 'org_member',
|
||||
]);
|
||||
|
||||
$response->assertForbidden();
|
||||
}
|
||||
|
||||
// ─── Remove Member ───────────────────────────────────────
|
||||
|
||||
public function test_remove_member_detaches_from_org(): void
|
||||
{
|
||||
Sanctum::actingAs($this->superAdmin);
|
||||
|
||||
$response = $this->deleteJson("/api/v1/admin/organisations/{$this->organisation->id}/members/{$this->orgAdmin->id}");
|
||||
|
||||
$response->assertNoContent();
|
||||
$this->assertDatabaseMissing('organisation_user', [
|
||||
'user_id' => $this->orgAdmin->id,
|
||||
'organisation_id' => $this->organisation->id,
|
||||
]);
|
||||
}
|
||||
|
||||
public function test_remove_self_fails(): void
|
||||
{
|
||||
// Attach super admin to the org so the self-removal check kicks in
|
||||
$this->organisation->users()->attach($this->superAdmin, ['role' => 'org_admin']);
|
||||
|
||||
Sanctum::actingAs($this->superAdmin);
|
||||
|
||||
$response = $this->deleteJson("/api/v1/admin/organisations/{$this->organisation->id}/members/{$this->superAdmin->id}");
|
||||
|
||||
$response->assertUnprocessable();
|
||||
$response->assertJsonPath('message', 'Je kunt jezelf niet verwijderen.');
|
||||
}
|
||||
|
||||
// ─── Update Member Role ──────────────────────────────────
|
||||
|
||||
public function test_update_member_role(): void
|
||||
{
|
||||
Sanctum::actingAs($this->superAdmin);
|
||||
|
||||
$response = $this->putJson("/api/v1/admin/organisations/{$this->organisation->id}/members/{$this->orgAdmin->id}", [
|
||||
'role' => 'org_member',
|
||||
]);
|
||||
|
||||
$response->assertOk();
|
||||
$response->assertJsonPath('data.role', 'org_member');
|
||||
$this->assertDatabaseHas('organisation_user', [
|
||||
'user_id' => $this->orgAdmin->id,
|
||||
'organisation_id' => $this->organisation->id,
|
||||
'role' => 'org_member',
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,11 +4,15 @@ import { apiClient } from '@/lib/axios'
|
||||
import type {
|
||||
ActivityLogEntry,
|
||||
AdminOrganisation,
|
||||
AdminOrganisationDetail,
|
||||
AdminOrganisationMember,
|
||||
AdminUser,
|
||||
ImpersonationResponse,
|
||||
InviteMemberPayload,
|
||||
PlatformStats,
|
||||
UpdateAdminOrganisationPayload,
|
||||
UpdateAdminUserPayload,
|
||||
UpdateMemberRolePayload,
|
||||
} from '@/types/admin'
|
||||
|
||||
interface ApiResponse<T> {
|
||||
@@ -47,7 +51,7 @@ export function useAdminOrganisation(id: Ref<string>) {
|
||||
return useQuery({
|
||||
queryKey: ['admin', 'organisations', id],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<ApiResponse<AdminOrganisation>>(
|
||||
const { data } = await apiClient.get<ApiResponse<AdminOrganisationDetail>>(
|
||||
`/admin/organisations/${id.value}`,
|
||||
)
|
||||
return data.data
|
||||
@@ -86,6 +90,55 @@ export function useDeleteAdminOrganisation() {
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Organisation Members ──────────────────────────────────
|
||||
|
||||
export function useInviteOrganisationMember() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ organisationId, payload }: { organisationId: string; payload: InviteMemberPayload }) => {
|
||||
const { data } = await apiClient.post<ApiResponse<AdminOrganisationMember | null>>(
|
||||
`/admin/organisations/${organisationId}/invite`,
|
||||
payload,
|
||||
)
|
||||
return data
|
||||
},
|
||||
onSuccess: (_data, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin', 'organisations', variables.organisationId] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useRemoveOrganisationMember() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ organisationId, userId }: { organisationId: string; userId: string }) => {
|
||||
await apiClient.delete(`/admin/organisations/${organisationId}/members/${userId}`)
|
||||
},
|
||||
onSuccess: (_data, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin', 'organisations', variables.organisationId] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpdateOrganisationMemberRole() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ organisationId, userId, payload }: { organisationId: string; userId: string; payload: UpdateMemberRolePayload }) => {
|
||||
const { data } = await apiClient.put<ApiResponse<AdminOrganisationMember>>(
|
||||
`/admin/organisations/${organisationId}/members/${userId}`,
|
||||
payload,
|
||||
)
|
||||
return data.data
|
||||
},
|
||||
onSuccess: (_data, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['admin', 'organisations', variables.organisationId] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Users ──────────────────────────────────────────────────
|
||||
|
||||
export function useAdminUsers(params: Ref<Record<string, string | number | undefined>>) {
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { useAdminOrganisation, useUpdateAdminOrganisation, useDeleteAdminOrganisation } from '@/composables/api/useAdmin'
|
||||
import {
|
||||
useAdminOrganisation,
|
||||
useUpdateAdminOrganisation,
|
||||
useDeleteAdminOrganisation,
|
||||
useInviteOrganisationMember,
|
||||
useRemoveOrganisationMember,
|
||||
useUpdateOrganisationMemberRole,
|
||||
} from '@/composables/api/useAdmin'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import { useOrganisationStore } from '@/stores/useOrganisationStore'
|
||||
import type { BillingStatus, UpdateAdminOrganisationPayload } from '@/types/admin'
|
||||
import type { BillingStatus, InviteMemberPayload, UpdateAdminOrganisationPayload } from '@/types/admin'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
@@ -11,11 +19,15 @@ definePage({
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const orgStore = useOrganisationStore()
|
||||
|
||||
const orgId = computed(() => String((route.params as { id: string }).id))
|
||||
|
||||
const { data: org, isLoading, isError, refetch } = useAdminOrganisation(orgId)
|
||||
const { data: orgData, isLoading, isError, refetch } = useAdminOrganisation(orgId)
|
||||
|
||||
const org = computed(() => orgData.value?.organisation)
|
||||
const members = computed(() => orgData.value?.members ?? [])
|
||||
|
||||
const billingStatusColor: Record<BillingStatus, string> = {
|
||||
trial: 'info',
|
||||
@@ -31,6 +43,11 @@ const billingStatusOptions = [
|
||||
{ title: 'Cancelled', value: 'cancelled' },
|
||||
]
|
||||
|
||||
const roleOptions = [
|
||||
{ title: 'Admin', value: 'org_admin' },
|
||||
{ title: 'Lid', value: 'org_member' },
|
||||
]
|
||||
|
||||
// Edit dialog
|
||||
const isEditDialogOpen = ref(false)
|
||||
const editForm = ref<UpdateAdminOrganisationPayload>({})
|
||||
@@ -52,7 +69,7 @@ function submitEdit() {
|
||||
{
|
||||
onSuccess: () => {
|
||||
isEditDialogOpen.value = false
|
||||
showEditSuccess.value = true
|
||||
showSnackbar('Organisatie bijgewerkt', 'success')
|
||||
},
|
||||
},
|
||||
)
|
||||
@@ -77,7 +94,79 @@ function openAsOrganiser() {
|
||||
router.push({ name: 'dashboard' })
|
||||
}
|
||||
|
||||
const showEditSuccess = ref(false)
|
||||
// ─── Invite Member ──────────────────────────────────────────
|
||||
const isInviteDialogOpen = ref(false)
|
||||
const inviteForm = ref<InviteMemberPayload>({ email: '', role: 'org_member' })
|
||||
const inviteError = ref('')
|
||||
const { mutate: inviteMember, isPending: isInviting } = useInviteOrganisationMember()
|
||||
|
||||
function openInviteDialog() {
|
||||
inviteForm.value = { email: '', role: 'org_member' }
|
||||
inviteError.value = ''
|
||||
isInviteDialogOpen.value = true
|
||||
}
|
||||
|
||||
function submitInvite() {
|
||||
inviteError.value = ''
|
||||
inviteMember(
|
||||
{ organisationId: orgId.value, payload: inviteForm.value },
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
isInviteDialogOpen.value = false
|
||||
showSnackbar(data.message ?? 'Uitnodiging verstuurd', 'success')
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
const error = err as { response?: { data?: { message?: string } } }
|
||||
inviteError.value = error.response?.data?.message ?? 'Er is een fout opgetreden.'
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Remove Member ──────────────────────────────────────────
|
||||
const isRemoveDialogOpen = ref(false)
|
||||
const memberToRemove = ref<{ id: string; full_name: string } | null>(null)
|
||||
const { mutate: removeMember, isPending: isRemoving } = useRemoveOrganisationMember()
|
||||
|
||||
function openRemoveDialog(member: { id: string; full_name: string }) {
|
||||
memberToRemove.value = member
|
||||
isRemoveDialogOpen.value = true
|
||||
}
|
||||
|
||||
function confirmRemove() {
|
||||
if (!memberToRemove.value) return
|
||||
removeMember(
|
||||
{ organisationId: orgId.value, userId: memberToRemove.value.id },
|
||||
{
|
||||
onSuccess: () => {
|
||||
isRemoveDialogOpen.value = false
|
||||
memberToRemove.value = null
|
||||
showSnackbar('Lid verwijderd', 'success')
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Update Member Role ─────────────────────────────────────
|
||||
const { mutate: updateMemberRole } = useUpdateOrganisationMemberRole()
|
||||
|
||||
function onRoleChange(userId: string, newRole: string) {
|
||||
updateMemberRole(
|
||||
{ organisationId: orgId.value, userId, payload: { role: newRole } },
|
||||
{
|
||||
onSuccess: () => {
|
||||
showSnackbar('Rol bijgewerkt', 'success')
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Snackbar ───────────────────────────────────────────────
|
||||
const snackbar = ref({ show: false, message: '', color: 'success' })
|
||||
|
||||
function showSnackbar(message: string, color: string) {
|
||||
snackbar.value = { show: true, message, color }
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('nl-NL', {
|
||||
@@ -277,6 +366,97 @@ function formatDate(iso: string): string {
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- Members Card -->
|
||||
<VCard class="mb-6">
|
||||
<VCardTitle class="d-flex align-center justify-space-between">
|
||||
<span>Leden</span>
|
||||
<VBtn
|
||||
size="small"
|
||||
prepend-icon="tabler-user-plus"
|
||||
@click="openInviteDialog"
|
||||
>
|
||||
Lid uitnodigen
|
||||
</VBtn>
|
||||
</VCardTitle>
|
||||
<VTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Naam</th>
|
||||
<th>Email</th>
|
||||
<th>Rol</th>
|
||||
<th class="text-end">
|
||||
Acties
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="member in members"
|
||||
:key="member.id"
|
||||
>
|
||||
<td>
|
||||
<div class="d-flex align-center gap-x-3 py-2">
|
||||
<VAvatar
|
||||
size="34"
|
||||
:color="member.avatar ? undefined : 'primary'"
|
||||
variant="tonal"
|
||||
>
|
||||
<VImg
|
||||
v-if="member.avatar"
|
||||
:src="member.avatar"
|
||||
/>
|
||||
<span v-else>{{ member.first_name.charAt(0) }}{{ member.last_name.charAt(0) }}</span>
|
||||
</VAvatar>
|
||||
<span>{{ member.full_name }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ member.email }}</td>
|
||||
<td>
|
||||
<AppSelect
|
||||
:model-value="member.role"
|
||||
:items="roleOptions"
|
||||
density="compact"
|
||||
hide-details
|
||||
style="max-inline-size: 160px;"
|
||||
@update:model-value="(val: string) => onRoleChange(member.id, val)"
|
||||
/>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<VTooltip
|
||||
v-if="member.id === authStore.user?.id"
|
||||
location="top"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<span v-bind="props">
|
||||
<IconBtn
|
||||
disabled
|
||||
size="small"
|
||||
>
|
||||
<VIcon icon="tabler-trash" />
|
||||
</IconBtn>
|
||||
</span>
|
||||
</template>
|
||||
Je kunt jezelf niet verwijderen
|
||||
</VTooltip>
|
||||
<IconBtn
|
||||
v-else
|
||||
size="small"
|
||||
color="error"
|
||||
@click="openRemoveDialog(member)"
|
||||
>
|
||||
<VIcon icon="tabler-trash" />
|
||||
</IconBtn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<VCardText v-if="members.length === 0">
|
||||
<p class="text-body-2 text-disabled text-center mb-0">
|
||||
Geen leden gevonden.
|
||||
</p>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- Danger Zone -->
|
||||
<VCard>
|
||||
<VCardTitle class="text-error">
|
||||
@@ -372,13 +552,94 @@ function formatDate(iso: string): string {
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- Success snackbar -->
|
||||
<!-- Invite Dialog -->
|
||||
<VDialog
|
||||
v-model="isInviteDialogOpen"
|
||||
max-width="500"
|
||||
>
|
||||
<VCard title="Lid uitnodigen">
|
||||
<VCardText>
|
||||
<VAlert
|
||||
v-if="inviteError"
|
||||
type="error"
|
||||
variant="tonal"
|
||||
class="mb-4"
|
||||
density="comfortable"
|
||||
>
|
||||
{{ inviteError }}
|
||||
</VAlert>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="inviteForm.email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="naam@voorbeeld.nl"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="inviteForm.role"
|
||||
:items="roleOptions"
|
||||
label="Rol"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
@click="isInviteDialogOpen = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isInviting"
|
||||
@click="submitInvite"
|
||||
>
|
||||
Uitnodigen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- Remove Member Dialog -->
|
||||
<VDialog
|
||||
v-model="isRemoveDialogOpen"
|
||||
max-width="400"
|
||||
>
|
||||
<VCard title="Lid verwijderen">
|
||||
<VCardText>
|
||||
Weet je zeker dat je <strong>{{ memberToRemove?.full_name }}</strong> wilt verwijderen uit deze organisatie?
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="isRemoveDialogOpen = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
:loading="isRemoving"
|
||||
@click="confirmRemove"
|
||||
>
|
||||
Verwijderen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- Snackbar -->
|
||||
<VSnackbar
|
||||
v-model="showEditSuccess"
|
||||
color="success"
|
||||
v-model="snackbar.show"
|
||||
:color="snackbar.color"
|
||||
:timeout="3000"
|
||||
>
|
||||
Organisatie bijgewerkt
|
||||
{{ snackbar.message }}
|
||||
</VSnackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -72,6 +72,30 @@ export interface ImpersonationResponse {
|
||||
admin_id: string
|
||||
}
|
||||
|
||||
export interface AdminOrganisationMember {
|
||||
id: string
|
||||
first_name: string
|
||||
last_name: string
|
||||
full_name: string
|
||||
email: string
|
||||
role: string
|
||||
avatar: string | null
|
||||
}
|
||||
|
||||
export interface AdminOrganisationDetail {
|
||||
organisation: AdminOrganisation
|
||||
members: AdminOrganisationMember[]
|
||||
}
|
||||
|
||||
export interface InviteMemberPayload {
|
||||
email: string
|
||||
role: string
|
||||
}
|
||||
|
||||
export interface UpdateMemberRolePayload {
|
||||
role: string
|
||||
}
|
||||
|
||||
export interface UpdateAdminOrganisationPayload {
|
||||
name?: string
|
||||
slug?: string
|
||||
|
||||
Reference in New Issue
Block a user