refactor(members): consolidate Platform Admin + Org members into shared useMembers

- useMembers.ts gains a scope param ('organisation' | 'platform') on list,
  invite, update-role, and remove; endpoints branch accordingly.
- Platform Admin's [id].vue now consumes useMembers via scope='platform';
  deleted the duplicated useInviteOrganisationMember / useRemoveOrganisationMember
  / useUpdateOrganisationMemberRole helpers from useAdmin.ts.
- Deduplicated InviteMemberPayload / UpdateMemberRolePayload / AdminOrganisationMember
  from types/admin.ts; Member is now the canonical type.
- SettingsMembers.vue and EditMemberRoleDialog.vue removed (no remaining imports).
- InviteMemberDialog accepts an optional scope prop and is restricted to the
  two organisation-level roles matching the /members UX.
This commit is contained in:
2026-04-16 22:30:42 +02:00
parent 7695011f4b
commit 0ca7c0f20f
10 changed files with 92 additions and 747 deletions

View File

@@ -1,144 +0,0 @@
<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'
import type { AxiosError } from 'axios'
import type { ApiErrorResponse } from '@/types/auth'
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: Error) => {
const data = (err as AxiosError<ApiErrorResponse>).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">
<VForm
ref="refVForm"
@submit.prevent="onSubmit"
>
<VCardText>
<VRow class="mb-4">
<VCol cols="12">
<div class="text-body-1">
<strong>{{ member.full_name }}</strong>
</div>
<div class="text-body-2 text-disabled">
{{ member.email }}
</div>
</VCol>
</VRow>
<VSelect
v-model="role"
label="Rol"
:items="roleOptions"
:rules="[requiredValidator]"
:error-messages="errors.role"
/>
</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
type="submit"
color="primary"
:loading="isPending"
>
Opslaan
</VBtn>
</VCardActions>
</VForm>
</VCard>
</VDialog>
<VSnackbar
v-model="showSuccess"
color="success"
:timeout="3000"
>
Rol bijgewerkt
</VSnackbar>
</template>

View File

@@ -2,13 +2,16 @@
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'
import type { MemberScope, OrganisationRole } from '@/types/member'
import type { AxiosError } from 'axios'
import type { ApiErrorResponse } from '@/types/auth'
const props = defineProps<{
const props = withDefaults(defineProps<{
orgId: string
}>()
scope?: MemberScope
}>(), {
scope: 'organisation',
})
const modelValue = defineModel<boolean>({ required: true })
@@ -24,12 +27,9 @@ 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)
const { mutate: inviteMember, isPending } = useInviteMember(props.scope, orgIdRef)
function resetForm() {
email.value = ''

View File

@@ -1,484 +0,0 @@
<script setup lang="ts">
import { useMemberList, useRemoveMember, useRevokeInvitation } from '@/composables/api/useMembers'
import { useAdminChangeEmail } from '@/composables/api/useAccount'
import { useAuthStore } from '@/stores/useAuthStore'
import InviteMemberDialog from '@/components/members/InviteMemberDialog.vue'
import EditMemberRoleDialog from '@/components/members/EditMemberRoleDialog.vue'
import type { Member } from '@/types/member'
const props = defineProps<{
orgId: string
}>()
const authStore = useAuthStore()
const orgIdRef = computed(() => props.orgId)
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(orgIdRef)
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(orgIdRef)
// Revoke invitation
const isRevokeDialogOpen = ref(false)
const invitationToRevoke = ref<{ id: string; email: string } | null>(null)
const { mutate: revokeInvitation, isPending: isRevoking } = useRevokeInvitation(orgIdRef)
// Change email
const isEmailChangeDialogOpen = ref(false)
const memberToChangeEmail = ref<Member | null>(null)
const newMemberEmail = ref('')
const adminEmailErrors = ref<Record<string, string>>({})
const showEmailChangeSuccess = ref(false)
const { mutate: adminChangeEmail, isPending: isChangingMemberEmail } = useAdminChangeEmail(orgIdRef)
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 memberSearch = ref('')
const memberHeaders = computed(() => {
const headers: 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) {
headers.push({ title: 'Acties', key: 'actions', sortable: false, align: 'end' })
}
return headers
})
const memberSortBy = [{ key: 'full_name', order: 'asc' as const }]
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 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 openEmailChangeDialog(member: Member) {
memberToChangeEmail.value = member
newMemberEmail.value = ''
adminEmailErrors.value = {}
isEmailChangeDialogOpen.value = true
}
function confirmEmailChange() {
if (!memberToChangeEmail.value) return
adminEmailErrors.value = {}
adminChangeEmail(
{ userId: memberToChangeEmail.value.id, newEmail: newMemberEmail.value },
{
onSuccess: () => {
isEmailChangeDialogOpen.value = false
memberToChangeEmail.value = null
newMemberEmail.value = ''
showEmailChangeSuccess.value = true
},
onError: (err: unknown) => {
const ax = err as { response?: { data?: { errors?: Record<string, string[]> } } }
if (ax.response?.data?.errors) {
for (const [key, messages] of Object.entries(ax.response.data.errors)) {
adminEmailErrors.value[key] = messages[0]
}
}
},
},
)
}
function confirmRevokeInvitation() {
if (!invitationToRevoke.value) return
revokeInvitation(invitationToRevoke.value.id, {
onSuccess: () => {
isRevokeDialogOpen.value = false
invitationToRevoke.value = null
showRevokeSuccess.value = true
},
})
}
</script>
<template>
<!-- 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>
<!-- Members table -->
<VCard class="mb-6">
<VCardText>
<VRow>
<VCol
cols="12"
md="6"
>
<AppTextField
v-model="memberSearch"
placeholder="Zoek op naam of e-mail..."
prepend-inner-icon="tabler-search"
clearable
/>
</VCol>
<VCol
v-if="isOrgAdmin"
cols="12"
md="6"
class="d-flex justify-end align-center"
>
<VBtn
prepend-icon="tabler-user-plus"
@click="isInviteDialogOpen = true"
>
Lid uitnodigen
</VBtn>
</VCol>
</VRow>
</VCardText>
<VDataTable
:headers="memberHeaders"
:items="members"
:search="memberSearch"
:sort-by="memberSortBy"
:items-per-page="10"
>
<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">
<VBtn
icon="tabler-edit"
variant="text"
size="small"
@click="openEditRole(item)"
/>
<VBtn
icon="tabler-mail-forward"
variant="text"
size="small"
@click="openEmailChangeDialog(item)"
/>
<VBtn
icon="tabler-trash"
variant="text"
size="small"
color="error"
@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 && 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?.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="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>
<!-- Change email dialog -->
<VDialog
v-model="isEmailChangeDialogOpen"
max-width="420"
>
<VCard title="E-mailadres wijzigen">
<VCardText>
<p class="text-body-2 text-medium-emphasis mb-4">
Wijzig het e-mailadres van <strong>{{ memberToChangeEmail?.full_name }}</strong>.
Er wordt een verificatiemail verstuurd naar het nieuwe adres.
</p>
<AppTextField
v-model="newMemberEmail"
label="Nieuw e-mailadres"
type="email"
:error-messages="adminEmailErrors.new_email"
/>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
variant="tonal"
@click="isEmailChangeDialogOpen = false"
>
Annuleren
</VBtn>
<VBtn
color="primary"
:loading="isChangingMemberEmail"
:disabled="!newMemberEmail"
@click="confirmEmailChange"
>
Verificatiemail versturen
</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>
<VSnackbar
v-model="showEmailChangeSuccess"
color="success"
:timeout="4000"
>
Verificatiemail verstuurd
</VSnackbar>
</template>

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { usePersonDetail, useUpdatePerson } from '@/composables/api/usePersons'
import { useConfirmMatch, useDismissMatch, useManualLinkPerson, useUnlinkPerson } from '@/composables/api/useIdentityMatches'
import { useMemberList } from '@/composables/api/useMembers'
import { useMembersList } from '@/composables/api/useMembers'
import type { Person, PersonStatus } from '@/types/person'
import type { Member } from '@/types/member'
@@ -31,7 +31,7 @@ const { mutate: manualLink, isPending: isManualLinking } = useManualLinkPerson(o
const { mutate: unlinkPerson, isPending: isUnlinking } = useUnlinkPerson(orgIdRef, eventIdRef)
// Members for manual link
const { data: membersResponse } = useMemberList(orgIdRef)
const { data: membersResponse } = useMembersList('organisation', orgIdRef)
const activeTab = ref('info')