feat: frontend member management
- Leden pagina met VDataTable, rol chips, uitnodigingen sectie - InviteMemberDialog + EditMemberRoleDialog - Publieke acceptatiepagina /invitations/[token] - Router guard uitgebreid met requiresAuth: false support - MemberCollection backend uitgebreid met volledige pending_invitations lijst
This commit is contained in:
@@ -24,13 +24,16 @@ final class MemberCollection extends ResourceCollection
|
||||
{
|
||||
$organisation = $request->route('organisation');
|
||||
|
||||
$pendingInvitations = UserInvitation::where('organisation_id', $organisation->id)
|
||||
->pending()
|
||||
->where('expires_at', '>', now())
|
||||
->get();
|
||||
|
||||
return [
|
||||
'meta' => [
|
||||
'total_members' => $this->collection->count(),
|
||||
'pending_invitations_count' => UserInvitation::where('organisation_id', $organisation->id)
|
||||
->pending()
|
||||
->where('expires_at', '>', now())
|
||||
->count(),
|
||||
'pending_invitations_count' => $pendingInvitations->count(),
|
||||
'pending_invitations' => InvitationResource::collection($pendingInvitations),
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
public function up(): void
|
||||
{
|
||||
Schema::table('activity_log', function (Blueprint $table) {
|
||||
$table->string('subject_id', 26)->nullable()->change();
|
||||
$table->string('causer_id', 26)->nullable()->change();
|
||||
});
|
||||
}
|
||||
|
||||
public function down(): void
|
||||
{
|
||||
Schema::table('activity_log', function (Blueprint $table) {
|
||||
$table->unsignedBigInteger('subject_id')->nullable()->change();
|
||||
$table->unsignedBigInteger('causer_id')->nullable()->change();
|
||||
});
|
||||
}
|
||||
};
|
||||
2
apps/app/components.d.ts
vendored
2
apps/app/components.d.ts
vendored
@@ -40,10 +40,12 @@ declare module 'vue' {
|
||||
DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
|
||||
DropZone: typeof import('./src/@core/components/DropZone.vue')['default']
|
||||
EditEventDialog: typeof import('./src/components/events/EditEventDialog.vue')['default']
|
||||
EditMemberRoleDialog: typeof import('./src/components/members/EditMemberRoleDialog.vue')['default']
|
||||
EditOrganisationDialog: typeof import('./src/components/organisations/EditOrganisationDialog.vue')['default']
|
||||
EnableOneTimePasswordDialog: typeof import('./src/components/dialogs/EnableOneTimePasswordDialog.vue')['default']
|
||||
ErrorHeader: typeof import('./src/components/ErrorHeader.vue')['default']
|
||||
I18n: typeof import('./src/@core/components/I18n.vue')['default']
|
||||
InviteMemberDialog: typeof import('./src/components/members/InviteMemberDialog.vue')['default']
|
||||
MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
|
||||
Notifications: typeof import('./src/@core/components/Notifications.vue')['default']
|
||||
OrganisationSwitcher: typeof import('./src/components/layout/OrganisationSwitcher.vue')['default']
|
||||
|
||||
142
apps/app/src/components/members/EditMemberRoleDialog.vue
Normal file
142
apps/app/src/components/members/EditMemberRoleDialog.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useUpdateMemberRole } from '@/composables/api/useMembers'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import { requiredValidator } from '@core/utils/validators'
|
||||
import type { Member, OrganisationRole } from '@/types/member'
|
||||
|
||||
const props = defineProps<{
|
||||
orgId: string
|
||||
member: Member
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const orgIdRef = computed(() => props.orgId)
|
||||
|
||||
const role = ref<OrganisationRole>(props.member.role as OrganisationRole)
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
const showSuccess = ref(false)
|
||||
|
||||
const isSelf = computed(() => authStore.user?.id === props.member.id)
|
||||
|
||||
const roleOptions: Array<{ title: string; value: OrganisationRole }> = [
|
||||
{ title: 'Organisatie Beheerder', value: 'org_admin' },
|
||||
{ title: 'Organisatie Lid', value: 'org_member' },
|
||||
{ title: 'Evenement Manager', value: 'event_manager' },
|
||||
{ title: 'Staf Coördinator', value: 'staff_coordinator' },
|
||||
{ title: 'Vrijwilliger Coördinator', value: 'volunteer_coordinator' },
|
||||
]
|
||||
|
||||
const { mutate: updateRole, isPending } = useUpdateMemberRole(orgIdRef)
|
||||
|
||||
watch(() => props.member, (m) => {
|
||||
role.value = m.role as OrganisationRole
|
||||
}, { immediate: true })
|
||||
|
||||
function onSubmit() {
|
||||
if (isSelf.value) return
|
||||
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
updateRole(
|
||||
{ userId: props.member.id, role: role.value },
|
||||
{
|
||||
onSuccess: () => {
|
||||
modelValue.value = false
|
||||
showSuccess.value = true
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const data = err.response?.data
|
||||
if (data?.errors) {
|
||||
errors.value = { role: data.errors.role?.[0] ?? '' }
|
||||
}
|
||||
else if (data?.message) {
|
||||
errors.value = { role: data.message }
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="500"
|
||||
>
|
||||
<VCard title="Rol wijzigen">
|
||||
<VCardText>
|
||||
<VRow class="mb-4">
|
||||
<VCol cols="12">
|
||||
<div class="text-body-1">
|
||||
<strong>{{ member.name }}</strong>
|
||||
</div>
|
||||
<div class="text-body-2 text-disabled">
|
||||
{{ member.email }}
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VSelect
|
||||
v-model="role"
|
||||
label="Rol"
|
||||
:items="roleOptions"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.role"
|
||||
/>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VTooltip
|
||||
v-if="isSelf"
|
||||
text="Je kunt je eigen rol niet wijzigen"
|
||||
>
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<div v-bind="tooltipProps">
|
||||
<VBtn
|
||||
color="primary"
|
||||
disabled
|
||||
>
|
||||
Opslaan
|
||||
</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
</VTooltip>
|
||||
<VBtn
|
||||
v-else
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Opslaan
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
Rol bijgewerkt
|
||||
</VSnackbar>
|
||||
</template>
|
||||
133
apps/app/src/components/members/InviteMemberDialog.vue
Normal file
133
apps/app/src/components/members/InviteMemberDialog.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useInviteMember } from '@/composables/api/useMembers'
|
||||
import { emailValidator, requiredValidator } from '@core/utils/validators'
|
||||
import type { OrganisationRole } from '@/types/member'
|
||||
|
||||
const props = defineProps<{
|
||||
orgId: string
|
||||
}>()
|
||||
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const orgIdRef = computed(() => props.orgId)
|
||||
|
||||
const email = ref('')
|
||||
const role = ref<OrganisationRole>('org_member')
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
const showSuccess = ref(false)
|
||||
const successEmail = ref('')
|
||||
|
||||
const roleOptions: Array<{ title: string; value: OrganisationRole }> = [
|
||||
{ title: 'Organisatie Beheerder', value: 'org_admin' },
|
||||
{ title: 'Organisatie Lid', value: 'org_member' },
|
||||
{ title: 'Evenement Manager', value: 'event_manager' },
|
||||
{ title: 'Staf Coördinator', value: 'staff_coordinator' },
|
||||
{ title: 'Vrijwilliger Coördinator', value: 'volunteer_coordinator' },
|
||||
]
|
||||
|
||||
const { mutate: inviteMember, isPending } = useInviteMember(orgIdRef)
|
||||
|
||||
function resetForm() {
|
||||
email.value = ''
|
||||
role.value = 'org_member'
|
||||
errors.value = {}
|
||||
refVForm.value?.reset()
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
inviteMember(
|
||||
{ email: email.value, role: role.value },
|
||||
{
|
||||
onSuccess: () => {
|
||||
successEmail.value = email.value
|
||||
modelValue.value = false
|
||||
showSuccess.value = true
|
||||
resetForm()
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const data = err.response?.data
|
||||
if (data?.errors) {
|
||||
errors.value = {
|
||||
email: data.errors.email?.[0] ?? '',
|
||||
role: data.errors.role?.[0] ?? '',
|
||||
}
|
||||
}
|
||||
else if (data?.message) {
|
||||
errors.value = { email: data.message }
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
v-model="modelValue"
|
||||
max-width="500"
|
||||
@after-leave="resetForm"
|
||||
>
|
||||
<VCard title="Lid uitnodigen">
|
||||
<VCardText>
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="email"
|
||||
label="E-mailadres"
|
||||
type="email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
:error-messages="errors.email"
|
||||
autofocus
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
v-model="role"
|
||||
label="Rol"
|
||||
:items="roleOptions"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.role"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="modelValue = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:loading="isPending"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Uitnodigen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<VSnackbar
|
||||
v-model="showSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
Uitnodiging verzonden naar {{ successEmail }}
|
||||
</VSnackbar>
|
||||
</template>
|
||||
104
apps/app/src/composables/api/useMembers.ts
Normal file
104
apps/app/src/composables/api/useMembers.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
|
||||
import type { Ref } from 'vue'
|
||||
import { apiClient } from '@/lib/axios'
|
||||
import type {
|
||||
AcceptInvitationPayload,
|
||||
AcceptInvitationResponse,
|
||||
InvitationDetailResponse,
|
||||
InviteMemberPayload,
|
||||
Member,
|
||||
MemberListResponse,
|
||||
UpdateMemberRolePayload,
|
||||
} from '@/types/member'
|
||||
|
||||
interface ApiResponse<T> {
|
||||
success: boolean
|
||||
data: T
|
||||
message?: string
|
||||
}
|
||||
|
||||
export function useMemberList(orgId: Ref<string>) {
|
||||
return useQuery({
|
||||
queryKey: ['members', orgId],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<MemberListResponse>(`/organisations/${orgId.value}/members`)
|
||||
return data
|
||||
},
|
||||
enabled: () => !!orgId.value,
|
||||
})
|
||||
}
|
||||
|
||||
export function useInviteMember(orgId: Ref<string>) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload: InviteMemberPayload) => {
|
||||
const { data } = await apiClient.post<ApiResponse<Member>>(`/organisations/${orgId.value}/invite`, payload)
|
||||
return data.data
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['members', orgId] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpdateMemberRole(orgId: Ref<string>) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ userId, role }: UpdateMemberRolePayload) => {
|
||||
const { data } = await apiClient.put<ApiResponse<Member>>(`/organisations/${orgId.value}/members/${userId}`, { role })
|
||||
return data.data
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['members', orgId] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useRemoveMember(orgId: Ref<string>) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (userId: string) => {
|
||||
await apiClient.delete(`/organisations/${orgId.value}/members/${userId}`)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['members', orgId] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useRevokeInvitation(orgId: Ref<string>) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (invitationId: string) => {
|
||||
await apiClient.delete(`/organisations/${orgId.value}/invitations/${invitationId}`)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['members', orgId] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useInvitationDetail(token: Ref<string>) {
|
||||
return useQuery({
|
||||
queryKey: ['invitation', token],
|
||||
queryFn: async () => {
|
||||
const { data } = await apiClient.get<ApiResponse<InvitationDetailResponse>>(`/invitations/${token.value}`)
|
||||
return data.data
|
||||
},
|
||||
enabled: () => !!token.value,
|
||||
retry: false,
|
||||
})
|
||||
}
|
||||
|
||||
export function useAcceptInvitation() {
|
||||
return useMutation({
|
||||
mutationFn: async ({ token, ...payload }: AcceptInvitationPayload & { token: string }) => {
|
||||
const { data } = await apiClient.post<AcceptInvitationResponse>(`/invitations/${token}/accept`, payload)
|
||||
return data
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -17,4 +17,11 @@ export default [
|
||||
to: { name: "organisation" },
|
||||
icon: { icon: "tabler-building" },
|
||||
},
|
||||
{
|
||||
title: "Leden",
|
||||
to: { name: "organisation-members" },
|
||||
icon: { icon: "tabler-users-group" },
|
||||
action: "read",
|
||||
subject: "members",
|
||||
},
|
||||
];
|
||||
|
||||
211
apps/app/src/pages/invitations/[token].vue
Normal file
211
apps/app/src/pages/invitations/[token].vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useInvitationDetail, useAcceptInvitation } from '@/composables/api/useMembers'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import { requiredValidator } from '@core/utils/validators'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import type { OrganisationRole } from '@/types/member'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
layout: 'blank',
|
||||
requiresAuth: false,
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const token = computed(() => String((route.params as { token: string }).token))
|
||||
|
||||
const { data: invitation, isLoading, isError } = useInvitationDetail(token)
|
||||
const { mutate: acceptInvitation, isPending: isAccepting } = useAcceptInvitation()
|
||||
|
||||
const name = ref('')
|
||||
const password = ref('')
|
||||
const passwordConfirmation = ref('')
|
||||
const isPasswordVisible = ref(false)
|
||||
const isPasswordConfirmVisible = ref(false)
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
|
||||
const roleLabelMap: Record<string, string> = {
|
||||
org_admin: 'Organisatie Beheerder',
|
||||
org_member: 'Organisatie Lid',
|
||||
event_manager: 'Evenement Manager',
|
||||
staff_coordinator: 'Staf Coördinator',
|
||||
volunteer_coordinator: 'Vrijwilliger Coördinator',
|
||||
}
|
||||
|
||||
const passwordMinLength = (value: string) => {
|
||||
return value.length >= 8 || 'Wachtwoord moet minimaal 8 tekens bevatten'
|
||||
}
|
||||
|
||||
const passwordConfirmed = (value: string) => {
|
||||
return value === password.value || 'Wachtwoorden komen niet overeen'
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
const payload: Record<string, string> = {}
|
||||
if (!invitation.value?.existing_user) {
|
||||
payload.name = name.value
|
||||
payload.password = password.value
|
||||
payload.password_confirmation = passwordConfirmation.value
|
||||
}
|
||||
|
||||
acceptInvitation(
|
||||
{ token: token.value, ...payload },
|
||||
{
|
||||
onSuccess: (response) => {
|
||||
authStore.setToken(response.data.token)
|
||||
authStore.setUser(response.data.user)
|
||||
router.replace('/dashboard')
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const data = err.response?.data
|
||||
if (data?.errors) {
|
||||
errors.value = {
|
||||
name: data.errors.name?.[0] ?? '',
|
||||
password: data.errors.password?.[0] ?? '',
|
||||
}
|
||||
}
|
||||
else if (data?.message) {
|
||||
errors.value = { general: data.message }
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex align-center justify-center" style="min-block-size: 100vh;">
|
||||
<VCard
|
||||
max-width="500"
|
||||
class="pa-6"
|
||||
:min-width="400"
|
||||
>
|
||||
<VCardText class="text-center mb-4">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
<h4 class="text-h4 mt-4">
|
||||
{{ themeConfig.app.title }}
|
||||
</h4>
|
||||
</VCardText>
|
||||
|
||||
<!-- Loading -->
|
||||
<VCardText v-if="isLoading">
|
||||
<div class="d-flex justify-center">
|
||||
<VProgressCircular indeterminate />
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<!-- Error: not found -->
|
||||
<VCardText v-else-if="isError">
|
||||
<VAlert type="error">
|
||||
Uitnodiging niet gevonden
|
||||
</VAlert>
|
||||
</VCardText>
|
||||
|
||||
<!-- Expired -->
|
||||
<VCardText v-else-if="invitation?.status === 'expired'">
|
||||
<VAlert type="warning">
|
||||
Deze uitnodiging is verlopen
|
||||
</VAlert>
|
||||
</VCardText>
|
||||
|
||||
<!-- Already accepted -->
|
||||
<VCardText v-else-if="invitation?.status === 'accepted'">
|
||||
<VAlert type="info">
|
||||
Deze uitnodiging is al geaccepteerd
|
||||
</VAlert>
|
||||
</VCardText>
|
||||
|
||||
<!-- Pending: accept form -->
|
||||
<template v-else-if="invitation?.status === 'pending'">
|
||||
<VCardText>
|
||||
<h5 class="text-h5 mb-2">
|
||||
Je bent uitgenodigd voor {{ invitation.organisation.name }}
|
||||
</h5>
|
||||
<p class="text-body-1 mb-4">
|
||||
Rol:
|
||||
<VChip
|
||||
size="small"
|
||||
color="primary"
|
||||
>
|
||||
{{ roleLabelMap[invitation.role] ?? invitation.role }}
|
||||
</VChip>
|
||||
</p>
|
||||
|
||||
<!-- Existing user -->
|
||||
<VAlert
|
||||
v-if="invitation.existing_user"
|
||||
type="info"
|
||||
class="mb-4"
|
||||
>
|
||||
Er bestaat al een account voor {{ invitation.email }}. Log in om te accepteren.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
v-if="errors.general"
|
||||
type="error"
|
||||
class="mb-4"
|
||||
>
|
||||
{{ errors.general }}
|
||||
</VAlert>
|
||||
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<!-- New user fields -->
|
||||
<template v-if="!invitation.existing_user">
|
||||
<AppTextField
|
||||
v-model="name"
|
||||
label="Naam"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
class="mb-4"
|
||||
/>
|
||||
<AppTextField
|
||||
v-model="password"
|
||||
label="Wachtwoord"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:rules="[requiredValidator, passwordMinLength]"
|
||||
:error-messages="errors.password"
|
||||
:append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
|
||||
class="mb-4"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
<AppTextField
|
||||
v-model="passwordConfirmation"
|
||||
label="Wachtwoord bevestigen"
|
||||
:type="isPasswordConfirmVisible ? 'text' : 'password'"
|
||||
:rules="[requiredValidator, passwordConfirmed]"
|
||||
:append-inner-icon="isPasswordConfirmVisible ? 'tabler-eye-off' : 'tabler-eye'"
|
||||
class="mb-4"
|
||||
@click:append-inner="isPasswordConfirmVisible = !isPasswordConfirmVisible"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
color="primary"
|
||||
:loading="isAccepting"
|
||||
>
|
||||
Accepteren
|
||||
</VBtn>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</template>
|
||||
</VCard>
|
||||
</div>
|
||||
</template>
|
||||
373
apps/app/src/pages/organisation/members.vue
Normal file
373
apps/app/src/pages/organisation/members.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<script setup lang="ts">
|
||||
import { useMemberList, useRemoveMember, useRevokeInvitation } from '@/composables/api/useMembers'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import { useOrganisationStore } from '@/stores/useOrganisationStore'
|
||||
import InviteMemberDialog from '@/components/members/InviteMemberDialog.vue'
|
||||
import EditMemberRoleDialog from '@/components/members/EditMemberRoleDialog.vue'
|
||||
import type { Member } from '@/types/member'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const orgStore = useOrganisationStore()
|
||||
|
||||
const orgId = computed(() => orgStore.activeOrganisationId ?? '')
|
||||
const orgName = computed(() => authStore.currentOrganisation?.name ?? '')
|
||||
|
||||
const isOrgAdmin = computed(() => {
|
||||
const role = authStore.currentOrganisation?.role
|
||||
return role === 'org_admin' || authStore.isSuperAdmin
|
||||
})
|
||||
|
||||
const { data: memberData, isLoading, isError, refetch } = useMemberList(orgId)
|
||||
|
||||
const members = computed(() => memberData.value?.data ?? [])
|
||||
const pendingInvitations = computed(() => memberData.value?.meta?.pending_invitations ?? [])
|
||||
|
||||
// Invite dialog
|
||||
const isInviteDialogOpen = ref(false)
|
||||
|
||||
// Edit role dialog
|
||||
const isEditRoleDialogOpen = ref(false)
|
||||
const selectedMember = ref<Member | null>(null)
|
||||
|
||||
// Remove member
|
||||
const isRemoveDialogOpen = ref(false)
|
||||
const memberToRemove = ref<Member | null>(null)
|
||||
const { mutate: removeMember, isPending: isRemoving } = useRemoveMember(orgId)
|
||||
|
||||
// Revoke invitation
|
||||
const isRevokeDialogOpen = ref(false)
|
||||
const invitationToRevoke = ref<{ id: string; email: string } | null>(null)
|
||||
const { mutate: revokeInvitation, isPending: isRevoking } = useRevokeInvitation(orgId)
|
||||
|
||||
const showRemoveSuccess = ref(false)
|
||||
const showRevokeSuccess = ref(false)
|
||||
|
||||
const roleColorMap: Record<string, string> = {
|
||||
org_admin: 'purple',
|
||||
org_member: 'info',
|
||||
event_manager: 'cyan',
|
||||
staff_coordinator: 'orange',
|
||||
volunteer_coordinator: 'success',
|
||||
}
|
||||
|
||||
const roleLabelMap: Record<string, string> = {
|
||||
org_admin: 'Organisatie Beheerder',
|
||||
org_member: 'Organisatie Lid',
|
||||
event_manager: 'Evenement Manager',
|
||||
staff_coordinator: 'Staf Coördinator',
|
||||
volunteer_coordinator: 'Vrijwilliger Coördinator',
|
||||
}
|
||||
|
||||
const memberHeaders = computed(() => {
|
||||
const headers: Array<{ title: string; key: string; sortable?: boolean }> = [
|
||||
{ title: 'Naam', key: 'name' },
|
||||
{ title: 'E-mailadres', key: 'email' },
|
||||
{ title: 'Rol', key: 'role' },
|
||||
]
|
||||
if (isOrgAdmin.value) {
|
||||
headers.push({ title: 'Acties', key: 'actions', sortable: false })
|
||||
}
|
||||
return headers
|
||||
})
|
||||
|
||||
function getInitials(name: string): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.map(p => p[0])
|
||||
.filter(Boolean)
|
||||
.slice(0, 2)
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
function openEditRole(member: Member) {
|
||||
selectedMember.value = member
|
||||
isEditRoleDialogOpen.value = true
|
||||
}
|
||||
|
||||
function openRemoveDialog(member: Member) {
|
||||
memberToRemove.value = member
|
||||
isRemoveDialogOpen.value = true
|
||||
}
|
||||
|
||||
function confirmRemoveMember() {
|
||||
if (!memberToRemove.value) return
|
||||
|
||||
removeMember(memberToRemove.value.id, {
|
||||
onSuccess: () => {
|
||||
isRemoveDialogOpen.value = false
|
||||
memberToRemove.value = null
|
||||
showRemoveSuccess.value = true
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function openRevokeDialog(invitation: { id: string; email: string }) {
|
||||
invitationToRevoke.value = invitation
|
||||
isRevokeDialogOpen.value = true
|
||||
}
|
||||
|
||||
function confirmRevokeInvitation() {
|
||||
if (!invitationToRevoke.value) return
|
||||
|
||||
revokeInvitation(invitationToRevoke.value.id, {
|
||||
onSuccess: () => {
|
||||
isRevokeDialogOpen.value = false
|
||||
invitationToRevoke.value = null
|
||||
showRevokeSuccess.value = true
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Loading -->
|
||||
<VSkeletonLoader
|
||||
v-if="isLoading"
|
||||
type="card"
|
||||
/>
|
||||
|
||||
<!-- Error -->
|
||||
<VAlert
|
||||
v-else-if="isError"
|
||||
type="error"
|
||||
class="mb-4"
|
||||
>
|
||||
Kon leden 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">
|
||||
Leden
|
||||
</h4>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ orgName }}
|
||||
</p>
|
||||
</div>
|
||||
<VBtn
|
||||
v-if="isOrgAdmin"
|
||||
prepend-icon="tabler-user-plus"
|
||||
@click="isInviteDialogOpen = true"
|
||||
>
|
||||
Lid uitnodigen
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- Members table -->
|
||||
<VCard class="mb-6">
|
||||
<VCardText v-if="members.length === 0">
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
Nog geen leden
|
||||
</p>
|
||||
</VCardText>
|
||||
<VDataTable
|
||||
v-else
|
||||
:headers="memberHeaders"
|
||||
:items="members"
|
||||
:items-per-page="-1"
|
||||
hide-default-footer
|
||||
>
|
||||
<template #item.name="{ item }">
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<VAvatar
|
||||
v-if="item.avatar"
|
||||
size="34"
|
||||
:image="item.avatar"
|
||||
/>
|
||||
<VAvatar
|
||||
v-else
|
||||
size="34"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
>
|
||||
<span class="text-sm">{{ getInitials(item.name) }}</span>
|
||||
</VAvatar>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #item.role="{ item }">
|
||||
<VChip
|
||||
:color="roleColorMap[item.role] ?? 'default'"
|
||||
size="small"
|
||||
>
|
||||
{{ roleLabelMap[item.role] ?? item.role }}
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<template #item.actions="{ item }">
|
||||
<div class="d-flex gap-x-1">
|
||||
<VBtn
|
||||
icon="tabler-edit"
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="openEditRole(item)"
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-trash"
|
||||
variant="text"
|
||||
size="small"
|
||||
color="error"
|
||||
@click="openRemoveDialog(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</VDataTable>
|
||||
</VCard>
|
||||
|
||||
<!-- Pending invitations -->
|
||||
<VCard
|
||||
v-if="isOrgAdmin && pendingInvitations.length > 0"
|
||||
>
|
||||
<VCardTitle>Openstaande uitnodigingen</VCardTitle>
|
||||
<VList>
|
||||
<VListItem
|
||||
v-for="invitation in pendingInvitations"
|
||||
:key="invitation.id"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
size="34"
|
||||
>
|
||||
<VIcon icon="tabler-mail" />
|
||||
</VAvatar>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>
|
||||
{{ invitation.email }}
|
||||
<VChip
|
||||
:color="roleColorMap[invitation.role] ?? 'default'"
|
||||
size="x-small"
|
||||
class="ms-2"
|
||||
>
|
||||
{{ roleLabelMap[invitation.role] ?? invitation.role }}
|
||||
</VChip>
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
Verloopt op {{ formatDate(invitation.expires_at) }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VBtn
|
||||
variant="text"
|
||||
color="error"
|
||||
size="small"
|
||||
@click="openRevokeDialog(invitation)"
|
||||
>
|
||||
Intrekken
|
||||
</VBtn>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<!-- Dialogs -->
|
||||
<InviteMemberDialog
|
||||
v-if="isOrgAdmin"
|
||||
v-model="isInviteDialogOpen"
|
||||
:org-id="orgId"
|
||||
/>
|
||||
|
||||
<EditMemberRoleDialog
|
||||
v-if="selectedMember"
|
||||
v-model="isEditRoleDialogOpen"
|
||||
:org-id="orgId"
|
||||
:member="selectedMember"
|
||||
/>
|
||||
|
||||
<!-- Remove member confirmation -->
|
||||
<VDialog
|
||||
v-model="isRemoveDialogOpen"
|
||||
max-width="400"
|
||||
>
|
||||
<VCard title="Lid verwijderen">
|
||||
<VCardText>
|
||||
Weet je zeker dat je <strong>{{ memberToRemove?.name }}</strong> wilt verwijderen uit de organisatie?
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="isRemoveDialogOpen = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
:loading="isRemoving"
|
||||
@click="confirmRemoveMember"
|
||||
>
|
||||
Verwijderen
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- Revoke invitation confirmation -->
|
||||
<VDialog
|
||||
v-model="isRevokeDialogOpen"
|
||||
max-width="400"
|
||||
>
|
||||
<VCard title="Uitnodiging intrekken">
|
||||
<VCardText>
|
||||
Weet je zeker dat je de uitnodiging voor <strong>{{ invitationToRevoke?.email }}</strong> wilt intrekken?
|
||||
</VCardText>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="isRevokeDialogOpen = false"
|
||||
>
|
||||
Annuleren
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
:loading="isRevoking"
|
||||
@click="confirmRevokeInvitation"
|
||||
>
|
||||
Intrekken
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- Success snackbars -->
|
||||
<VSnackbar
|
||||
v-model="showRemoveSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
Lid verwijderd
|
||||
</VSnackbar>
|
||||
<VSnackbar
|
||||
v-model="showRevokeSuccess"
|
||||
color="success"
|
||||
:timeout="3000"
|
||||
>
|
||||
Uitnodiging ingetrokken
|
||||
</VSnackbar>
|
||||
</div>
|
||||
</template>
|
||||
@@ -12,7 +12,7 @@ export function setupGuards(router: Router) {
|
||||
}
|
||||
|
||||
// Protected pages: redirect to login if not authenticated
|
||||
if (!isPublic && !authStore.isAuthenticated) {
|
||||
if (!isPublic && !authStore.isAuthenticated && to.meta.requiresAuth !== false) {
|
||||
return { path: '/login', query: { to: to.fullPath } }
|
||||
}
|
||||
})
|
||||
|
||||
84
apps/app/src/types/member.ts
Normal file
84
apps/app/src/types/member.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
export interface Member {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
role: string
|
||||
avatar: string | null
|
||||
}
|
||||
|
||||
export interface Invitation {
|
||||
id: string
|
||||
email: string
|
||||
role: string
|
||||
status: 'pending' | 'accepted' | 'expired'
|
||||
expires_at: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export type OrganisationRole =
|
||||
| 'org_admin'
|
||||
| 'org_member'
|
||||
| 'event_manager'
|
||||
| 'staff_coordinator'
|
||||
| 'volunteer_coordinator'
|
||||
|
||||
export interface MemberListResponse {
|
||||
data: Member[]
|
||||
meta: {
|
||||
total_members: number
|
||||
pending_invitations_count: number
|
||||
pending_invitations: Invitation[]
|
||||
}
|
||||
}
|
||||
|
||||
export interface InviteMemberPayload {
|
||||
email: string
|
||||
role: OrganisationRole
|
||||
}
|
||||
|
||||
export interface UpdateMemberRolePayload {
|
||||
userId: string
|
||||
role: OrganisationRole
|
||||
}
|
||||
|
||||
export interface InvitationDetailResponse {
|
||||
id: string
|
||||
email: string
|
||||
role: string
|
||||
status: 'pending' | 'accepted' | 'expired'
|
||||
organisation: {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
existing_user: boolean
|
||||
}
|
||||
|
||||
export interface AcceptInvitationPayload {
|
||||
name?: string
|
||||
password?: string
|
||||
password_confirmation?: string
|
||||
}
|
||||
|
||||
export interface AcceptInvitationResponse {
|
||||
success: boolean
|
||||
data: {
|
||||
user: {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
timezone: string
|
||||
locale: string
|
||||
avatar: string | null
|
||||
organisations: Array<{
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
role: string
|
||||
}>
|
||||
app_roles: string[]
|
||||
permissions: string[]
|
||||
}
|
||||
token: string
|
||||
}
|
||||
message: string
|
||||
}
|
||||
2
apps/app/typed-router.d.ts
vendored
2
apps/app/typed-router.d.ts
vendored
@@ -23,7 +23,9 @@ declare module 'vue-router/auto-routes' {
|
||||
'dashboard': RouteRecordInfo<'dashboard', '/dashboard', Record<never, never>, Record<never, never>>,
|
||||
'events': RouteRecordInfo<'events', '/events', Record<never, never>, Record<never, never>>,
|
||||
'events-id': RouteRecordInfo<'events-id', '/events/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||
'invitations-token': RouteRecordInfo<'invitations-token', '/invitations/:token', { token: ParamValue<true> }, { token: ParamValue<false> }>,
|
||||
'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
|
||||
'organisation': RouteRecordInfo<'organisation', '/organisation', Record<never, never>, Record<never, never>>,
|
||||
'organisation-members': RouteRecordInfo<'organisation-members', '/organisation/members', Record<never, never>, Record<never, never>>,
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user