feat(members): add /members page for organisation-scoped member management
This commit is contained in:
437
apps/app/src/pages/members/index.vue
Normal file
437
apps/app/src/pages/members/index.vue
Normal file
@@ -0,0 +1,437 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
useMembersList,
|
||||||
|
useRemoveMember,
|
||||||
|
useRevokeInvitation,
|
||||||
|
useUpdateMemberRole,
|
||||||
|
} from '@/composables/api/useMembers'
|
||||||
|
import { useAuthStore } from '@/stores/useAuthStore'
|
||||||
|
import { useOrganisationStore } from '@/stores/useOrganisationStore'
|
||||||
|
import InviteMemberDialog from '@/components/members/InviteMemberDialog.vue'
|
||||||
|
import type { Member, OrganisationRole } from '@/types/member'
|
||||||
|
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
const orgStore = useOrganisationStore()
|
||||||
|
|
||||||
|
const orgId = computed(() => orgStore.activeOrganisationId ?? '')
|
||||||
|
|
||||||
|
const isOrgAdmin = computed(() => {
|
||||||
|
const role = authStore.currentOrganisation?.role
|
||||||
|
return role === 'org_admin' || authStore.isSuperAdmin
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data: memberData, isLoading, isError, refetch } = useMembersList('organisation', orgId)
|
||||||
|
|
||||||
|
const members = computed(() => memberData.value?.data ?? [])
|
||||||
|
const pendingInvitations = computed(() => memberData.value?.meta?.pending_invitations ?? [])
|
||||||
|
|
||||||
|
const { mutate: updateRole } = useUpdateMemberRole('organisation', orgId)
|
||||||
|
const { mutate: removeMember, isPending: isRemoving } = useRemoveMember('organisation', orgId)
|
||||||
|
const { mutate: revokeInvitation, isPending: isRevoking } = useRevokeInvitation(orgId)
|
||||||
|
|
||||||
|
const roleOptions: Array<{ title: string; value: OrganisationRole }> = [
|
||||||
|
{ title: 'Organisatie Beheerder', value: 'org_admin' },
|
||||||
|
{ title: 'Organisatie Lid', value: 'org_member' },
|
||||||
|
]
|
||||||
|
|
||||||
|
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 search = ref('')
|
||||||
|
const isInviteDialogOpen = ref(false)
|
||||||
|
|
||||||
|
const headers = computed(() => {
|
||||||
|
const h: Array<{ title: string; key: string; sortable?: boolean; align?: 'start' | 'end' }> = [
|
||||||
|
{ title: 'Naam', key: 'full_name', sortable: true },
|
||||||
|
{ title: 'E-mailadres', key: 'email', sortable: true },
|
||||||
|
{ title: 'Rol', key: 'role', sortable: true },
|
||||||
|
]
|
||||||
|
if (isOrgAdmin.value)
|
||||||
|
h.push({ title: 'Acties', key: 'actions', sortable: false, align: 'end' })
|
||||||
|
return h
|
||||||
|
})
|
||||||
|
|
||||||
|
const sortBy = [{ key: 'full_name', order: 'asc' as const }]
|
||||||
|
|
||||||
|
const isRemoveDialogOpen = ref(false)
|
||||||
|
const memberToRemove = ref<Member | null>(null)
|
||||||
|
|
||||||
|
const isRevokeDialogOpen = ref(false)
|
||||||
|
const invitationToRevoke = ref<{ id: string; email: string } | null>(null)
|
||||||
|
|
||||||
|
const snackbar = ref({ show: false, message: '', color: 'success' })
|
||||||
|
|
||||||
|
function showSnackbar(message: string, color: 'success' | 'error' = 'success') {
|
||||||
|
snackbar.value = { show: true, message, color }
|
||||||
|
}
|
||||||
|
|
||||||
|
function getInitials(name: string): string {
|
||||||
|
return name
|
||||||
|
.split(' ')
|
||||||
|
.map(p => p[0])
|
||||||
|
.filter(Boolean)
|
||||||
|
.slice(0, 2)
|
||||||
|
.join('')
|
||||||
|
.toUpperCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(iso: string): string {
|
||||||
|
const d = new Date(iso)
|
||||||
|
const date = d.toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })
|
||||||
|
const time = d.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' })
|
||||||
|
return `${date} om ${time} uur`
|
||||||
|
}
|
||||||
|
|
||||||
|
function onRoleChange(userId: string, newRole: OrganisationRole) {
|
||||||
|
updateRole(
|
||||||
|
{ userId, role: newRole },
|
||||||
|
{
|
||||||
|
onSuccess: () => showSnackbar('Rol bijgewerkt'),
|
||||||
|
onError: (err: unknown) => {
|
||||||
|
const data = (err as { response?: { data?: { message?: string } } }).response?.data
|
||||||
|
showSnackbar(data?.message ?? 'Rol kon niet worden bijgewerkt', 'error')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function openRemoveDialog(member: Member) {
|
||||||
|
memberToRemove.value = member
|
||||||
|
isRemoveDialogOpen.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmRemove() {
|
||||||
|
if (!memberToRemove.value) return
|
||||||
|
|
||||||
|
removeMember(memberToRemove.value.id, {
|
||||||
|
onSuccess: () => {
|
||||||
|
isRemoveDialogOpen.value = false
|
||||||
|
memberToRemove.value = null
|
||||||
|
showSnackbar('Lid verwijderd')
|
||||||
|
},
|
||||||
|
onError: (err: unknown) => {
|
||||||
|
const data = (err as { response?: { data?: { message?: string } } }).response?.data
|
||||||
|
showSnackbar(data?.message ?? 'Lid kon niet worden verwijderd', 'error')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function openRevokeDialog(invitation: { id: string; email: string }) {
|
||||||
|
invitationToRevoke.value = invitation
|
||||||
|
isRevokeDialogOpen.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmRevoke() {
|
||||||
|
if (!invitationToRevoke.value) return
|
||||||
|
|
||||||
|
revokeInvitation(invitationToRevoke.value.id, {
|
||||||
|
onSuccess: () => {
|
||||||
|
isRevokeDialogOpen.value = false
|
||||||
|
invitationToRevoke.value = null
|
||||||
|
showSnackbar('Uitnodiging ingetrokken')
|
||||||
|
},
|
||||||
|
onError: (err: unknown) => {
|
||||||
|
const data = (err as { response?: { data?: { message?: string } } }).response?.data
|
||||||
|
showSnackbar(data?.message ?? 'Uitnodiging kon niet worden ingetrokken', 'error')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</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">
|
||||||
|
Beheer de leden van je organisatie
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<VBtn
|
||||||
|
v-if="isOrgAdmin"
|
||||||
|
prepend-icon="tabler-user-plus"
|
||||||
|
@click="isInviteDialogOpen = true"
|
||||||
|
>
|
||||||
|
Lid uitnodigen
|
||||||
|
</VBtn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filters -->
|
||||||
|
<div class="d-flex flex-wrap align-center gap-4 mb-4">
|
||||||
|
<AppTextField
|
||||||
|
v-model="search"
|
||||||
|
prepend-inner-icon="tabler-search"
|
||||||
|
placeholder="Zoek op naam of e-mail..."
|
||||||
|
clearable
|
||||||
|
class="min-w-0 flex-fill"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Members table -->
|
||||||
|
<VCard class="mb-6">
|
||||||
|
<VDataTable
|
||||||
|
:headers="headers"
|
||||||
|
:items="members"
|
||||||
|
:search="search"
|
||||||
|
:sort-by="sortBy"
|
||||||
|
:items-per-page="25"
|
||||||
|
hover
|
||||||
|
>
|
||||||
|
<template #item.full_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.full_name) }}</span>
|
||||||
|
</VAvatar>
|
||||||
|
<span>{{ item.full_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 justify-end">
|
||||||
|
<VMenu location="bottom end">
|
||||||
|
<template #activator="{ props: menuProps }">
|
||||||
|
<VBtn
|
||||||
|
icon="tabler-edit"
|
||||||
|
variant="text"
|
||||||
|
size="small"
|
||||||
|
title="Rol wijzigen"
|
||||||
|
v-bind="menuProps"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<VList density="compact">
|
||||||
|
<VListItem
|
||||||
|
v-for="opt in roleOptions"
|
||||||
|
:key="opt.value"
|
||||||
|
:active="item.role === opt.value"
|
||||||
|
@click="onRoleChange(item.id, opt.value)"
|
||||||
|
>
|
||||||
|
<VListItemTitle>{{ opt.title }}</VListItemTitle>
|
||||||
|
</VListItem>
|
||||||
|
</VList>
|
||||||
|
</VMenu>
|
||||||
|
<VTooltip
|
||||||
|
v-if="item.id === authStore.user?.id"
|
||||||
|
location="top"
|
||||||
|
text="Je kunt jezelf niet verwijderen uit de organisatie"
|
||||||
|
>
|
||||||
|
<template #activator="{ props: tooltipProps }">
|
||||||
|
<span v-bind="tooltipProps">
|
||||||
|
<VBtn
|
||||||
|
icon="tabler-trash"
|
||||||
|
variant="text"
|
||||||
|
size="small"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</VTooltip>
|
||||||
|
<VBtn
|
||||||
|
v-else
|
||||||
|
icon="tabler-trash"
|
||||||
|
variant="text"
|
||||||
|
size="small"
|
||||||
|
color="error"
|
||||||
|
title="Verwijderen"
|
||||||
|
@click="openRemoveDialog(item)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #no-data>
|
||||||
|
<div class="text-center pa-4 text-disabled">
|
||||||
|
<VIcon
|
||||||
|
icon="tabler-users-minus"
|
||||||
|
size="48"
|
||||||
|
class="mb-2"
|
||||||
|
/>
|
||||||
|
<p>Geen leden gevonden</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</VDataTable>
|
||||||
|
</VCard>
|
||||||
|
|
||||||
|
<!-- Pending invitations -->
|
||||||
|
<VCard v-if="isOrgAdmin">
|
||||||
|
<VCardTitle>Openstaande uitnodigingen</VCardTitle>
|
||||||
|
<VList v-if="pendingInvitations.length">
|
||||||
|
<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>
|
||||||
|
<VCardText
|
||||||
|
v-else
|
||||||
|
class="text-center text-disabled py-6"
|
||||||
|
>
|
||||||
|
Geen openstaande uitnodigingen
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Invite Dialog -->
|
||||||
|
<InviteMemberDialog
|
||||||
|
v-if="isOrgAdmin"
|
||||||
|
v-model="isInviteDialogOpen"
|
||||||
|
:org-id="orgId"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Remove member confirmation -->
|
||||||
|
<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 de organisatie?
|
||||||
|
</VCardText>
|
||||||
|
<VCardActions>
|
||||||
|
<VSpacer />
|
||||||
|
<VBtn
|
||||||
|
variant="text"
|
||||||
|
@click="isRemoveDialogOpen = false"
|
||||||
|
>
|
||||||
|
Annuleren
|
||||||
|
</VBtn>
|
||||||
|
<VBtn
|
||||||
|
color="error"
|
||||||
|
:loading="isRemoving"
|
||||||
|
@click="confirmRemove"
|
||||||
|
>
|
||||||
|
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="confirmRevoke"
|
||||||
|
>
|
||||||
|
Intrekken
|
||||||
|
</VBtn>
|
||||||
|
</VCardActions>
|
||||||
|
</VCard>
|
||||||
|
</VDialog>
|
||||||
|
|
||||||
|
<!-- Snackbar -->
|
||||||
|
<VSnackbar
|
||||||
|
v-model="snackbar.show"
|
||||||
|
:color="snackbar.color"
|
||||||
|
:timeout="3000"
|
||||||
|
>
|
||||||
|
{{ snackbar.message }}
|
||||||
|
</VSnackbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
1
apps/app/typed-router.d.ts
vendored
1
apps/app/typed-router.d.ts
vendored
@@ -36,6 +36,7 @@ declare module 'vue-router/auto-routes' {
|
|||||||
'forgot-password': RouteRecordInfo<'forgot-password', '/forgot-password', Record<never, never>, Record<never, never>>,
|
'forgot-password': RouteRecordInfo<'forgot-password', '/forgot-password', Record<never, never>, Record<never, never>>,
|
||||||
'invitations-token': RouteRecordInfo<'invitations-token', '/invitations/:token', { token: ParamValue<true> }, { token: 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>>,
|
'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
|
||||||
|
'members': RouteRecordInfo<'members', '/members', Record<never, never>, Record<never, never>>,
|
||||||
'organisation': RouteRecordInfo<'organisation', '/organisation', Record<never, never>, Record<never, never>>,
|
'organisation': RouteRecordInfo<'organisation', '/organisation', Record<never, never>, Record<never, never>>,
|
||||||
'organisation-companies': RouteRecordInfo<'organisation-companies', '/organisation/companies', Record<never, never>, Record<never, never>>,
|
'organisation-companies': RouteRecordInfo<'organisation-companies', '/organisation/companies', Record<never, never>, Record<never, never>>,
|
||||||
'organisation-settings': RouteRecordInfo<'organisation-settings', '/organisation/settings', Record<never, never>, Record<never, never>>,
|
'organisation-settings': RouteRecordInfo<'organisation-settings', '/organisation/settings', Record<never, never>, Record<never, never>>,
|
||||||
|
|||||||
Reference in New Issue
Block a user