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

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

Browse Source 
- 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:
bert.hausmans
2026-04-16 22:30:42 +02:00
parent 7695011f4b
commit 0ca7c0f20f
10 changed files with 92 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components.d.ts vendored
View File

@@ -67,6 +67,7 @@ declare module 'vue' {
EventMetricCards: typeof import('./src/components/events/EventMetricCards.vue')['default']
EventTabsNav: typeof import('./src/components/events/EventTabsNav.vue')['default']
I18n: typeof import('./src/@core/components/I18n.vue')['default']
ImageUploadField: typeof import('./src/components/common/ImageUploadField.vue')['default']
ImpersonateDialog: typeof import('./src/components/platform/ImpersonateDialog.vue')['default']
ImpersonationBanner: typeof import('./src/components/platform/ImpersonationBanner.vue')['default']
ImportFromEventDialog: typeof import('./src/components/event/ImportFromEventDialog.vue')['default']
@@ -80,6 +81,7 @@ declare module 'vue' {
Notifications: typeof import('./src/@core/components/Notifications.vue')['default']
NotificationsTab: typeof import('./src/components/account-settings/NotificationsTab.vue')['default']
OrganisationSwitcher: typeof import('./src/components/layout/OrganisationSwitcher.vue')['default']
PasswordRequirements: typeof import('./src/components/auth/PasswordRequirements.vue')['default']
PaymentProvidersDialog: typeof import('./src/components/dialogs/PaymentProvidersDialog.vue')['default']
PersonDetailPanel: typeof import('./src/components/persons/PersonDetailPanel.vue')['default']
PersonTagsTab: typeof import('./src/components/organisation/PersonTagsTab.vue')['default']

144
apps/app/src/components/members/EditMemberRoleDialog.vue
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>

14
apps/app/src/components/members/InviteMemberDialog.vue
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 = ''

484
apps/app/src/components/organisation/settings/SettingsMembers.vue
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>

4
apps/app/src/components/persons/PersonDetailPanel.vue
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')

52
apps/app/src/composables/api/useAdmin.ts
View File

@@ -5,14 +5,11 @@ import type {
ActivityLogEntry,
AdminOrganisation,
AdminOrganisationDetail,
AdminOrganisationMember,
AdminUser,
CreateOrganisationPayload,
InviteMemberPayload,
PlatformStats,
UpdateAdminOrganisationPayload,
UpdateAdminUserPayload,
UpdateMemberRolePayload,
} from '@/types/admin'
interface ApiResponse<T> {
@@ -107,55 +104,6 @@ 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>>) {

76
apps/app/src/composables/api/useMembers.ts
View File

@@ -8,6 +8,7 @@ import type {
InviteMemberPayload,
Member,
MemberListResponse,
MemberScope,
UpdateMemberRolePayload,
} from '@/types/member'
@@ -17,55 +18,92 @@ interface ApiResponse<T> {
message?: string
}
export function useMemberList(orgId: Ref<string>) {
function memberListKey(scope: MemberScope, orgId: Ref<string>) {
return ['members', scope, orgId] as const
}
function invalidateScopedKeys(scope: MemberScope, orgId: Ref<string>, queryClient: ReturnType<typeof useQueryClient>) {
queryClient.invalidateQueries({ queryKey: memberListKey(scope, orgId) })
if (scope === 'platform')
queryClient.invalidateQueries({ queryKey: ['admin', 'organisations', orgId] })
}
function endpointList(scope: MemberScope, orgId: string) {
return scope === 'platform'
? `/admin/organisations/${orgId}`
: `/organisations/${orgId}/members`
}
function endpointInvite(scope: MemberScope, orgId: string) {
return scope === 'platform'
? `/admin/organisations/${orgId}/invite`
: `/organisations/${orgId}/invite`
}
function endpointMember(scope: MemberScope, orgId: string, userId: string) {
return scope === 'platform'
? `/admin/organisations/${orgId}/members/${userId}`
: `/organisations/${orgId}/members/${userId}`
}
export function useMembersList(scope: MemberScope, orgId: Ref<string>) {
return useQuery({
queryKey: ['members', orgId],
queryKey: memberListKey(scope, orgId),
queryFn: async () => {
const { data } = await apiClient.get<MemberListResponse>(`/organisations/${orgId.value}/members`)
const url = endpointList(scope, orgId.value)
if (scope === 'platform') {
const { data } = await apiClient.get<ApiResponse<{ members: Member[] }>>(url)
return {
data: data.data.members,
meta: {
total_members: data.data.members.length,
pending_invitations_count: 0,
pending_invitations: [],
},
} satisfies MemberListResponse
}
const { data } = await apiClient.get<MemberListResponse>(url)
return data
},
enabled: () => !!orgId.value,
})
}
export function useInviteMember(orgId: Ref<string>) {
export function useInviteMember(scope: MemberScope, orgId: Ref<string>) {
const queryClient = useQueryClient()
return useMutation({
mutationFn: async (payload: InviteMemberPayload) => {
const { data } = await apiClient.post<ApiResponse<Member>>(`/organisations/${orgId.value}/invite`, payload)
const { data } = await apiClient.post<ApiResponse<Member>>(endpointInvite(scope, orgId.value), payload)
return data.data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['members', orgId] })
},
onSuccess: () => invalidateScopedKeys(scope, orgId, queryClient),
})
}
export function useUpdateMemberRole(orgId: Ref<string>) {
export function useUpdateMemberRole(scope: MemberScope, 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 })
const { data } = await apiClient.put<ApiResponse<Member>>(
endpointMember(scope, orgId.value, userId),
{ role },
)
return data.data
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['members', orgId] })
},
onSuccess: () => invalidateScopedKeys(scope, orgId, queryClient),
})
}
export function useRemoveMember(orgId: Ref<string>) {
export function useRemoveMember(scope: MemberScope, 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] })
await apiClient.delete(endpointMember(scope, orgId.value, userId))
},
onSuccess: () => invalidateScopedKeys(scope, orgId, queryClient),
})
}
@@ -77,7 +115,7 @@ export function useRevokeInvitation(orgId: Ref<string>) {
await apiClient.delete(`/organisations/${orgId.value}/invitations/${invitationId}`)
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['members', orgId] })
queryClient.invalidateQueries({ queryKey: memberListKey('organisation', orgId) })
},
})
}

40
apps/app/src/pages/platform/organisations/[id].vue
View File

@@ -3,13 +3,16 @@ import {
useAdminOrganisation,
useUpdateAdminOrganisation,
useDeleteAdminOrganisation,
useInviteOrganisationMember,
useRemoveOrganisationMember,
useUpdateOrganisationMemberRole,
} from '@/composables/api/useAdmin'
import {
useInviteMember,
useRemoveMember,
useUpdateMemberRole,
} from '@/composables/api/useMembers'
import { useAuthStore } from '@/stores/useAuthStore'
import { useOrganisationStore } from '@/stores/useOrganisationStore'
import type { BillingStatus, InviteMemberPayload, UpdateAdminOrganisationPayload } from '@/types/admin'
import type { BillingStatus, UpdateAdminOrganisationPayload } from '@/types/admin'
import type { InviteMemberPayload, OrganisationRole } from '@/types/member'
definePage({
meta: {
@@ -166,7 +169,7 @@ function openAsOrganiser() {
const isInviteDialogOpen = ref(false)
const inviteForm = ref<InviteMemberPayload>({ email: '', role: 'org_member' })
const inviteError = ref('')
const { mutate: inviteMember, isPending: isInviting } = useInviteOrganisationMember()
const { mutate: inviteMember, isPending: isInviting } = useInviteMember('platform', orgId)
function openInviteDialog() {
inviteForm.value = { email: '', role: 'org_member' }
@@ -177,11 +180,11 @@ function openInviteDialog() {
function submitInvite() {
inviteError.value = ''
inviteMember(
{ organisationId: orgId.value, payload: inviteForm.value },
inviteForm.value,
{
onSuccess: (data) => {
onSuccess: () => {
isInviteDialogOpen.value = false
showSnackbar(data.message ?? 'Uitnodiging verstuurd', 'success')
showSnackbar('Uitnodiging verstuurd', 'success')
},
onError: (err: unknown) => {
const error = err as { response?: { data?: { message?: string } } }
@@ -194,7 +197,7 @@ function submitInvite() {
// ─── Remove Member ─────────────────────────────────────────
const isRemoveDialogOpen = ref(false)
const memberToRemove = ref<{ id: string; full_name: string } | null>(null)
const { mutate: removeMember, isPending: isRemoving } = useRemoveOrganisationMember()
const { mutate: removeMember, isPending: isRemoving } = useRemoveMember('platform', orgId)
function openRemoveDialog(member: { id: string; full_name: string }) {
memberToRemove.value = member
@@ -203,24 +206,21 @@ function openRemoveDialog(member: { id: string; full_name: string }) {
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')
},
removeMember(memberToRemove.value.id, {
onSuccess: () => {
isRemoveDialogOpen.value = false
memberToRemove.value = null
showSnackbar('Lid verwijderd', 'success')
},
)
})
}
// ─── Update Member Role ────────────────────────────────────
const { mutate: updateMemberRole } = useUpdateOrganisationMemberRole()
const { mutate: updateMemberRole } = useUpdateMemberRole('platform', orgId)
function onRoleChange(userId: string, newRole: string) {
updateMemberRole(
{ organisationId: orgId.value, userId, payload: { role: newRole } },
{ userId, role: newRole as OrganisationRole },
{
onSuccess: () => {
showSnackbar('Rol bijgewerkt', 'success')

21
apps/app/src/types/admin.ts
View File

@@ -97,28 +97,11 @@ export interface StartImpersonationPayload {
mfa_method: 'totp' | 'email' | 'backup_code'
}
export interface AdminOrganisationMember {
id: string
first_name: string
last_name: string
full_name: string
email: string
role: string
avatar: string | null
}
import type { Member } from './member'
export interface AdminOrganisationDetail {
organisation: AdminOrganisation
members: AdminOrganisationMember[]
}
export interface InviteMemberPayload {
email: string
role: string
}
export interface UpdateMemberRolePayload {
role: string
members: Member[]
}
export interface CreateOrganisationPayload {

2
apps/app/src/types/member.ts
View File

@@ -1,3 +1,5 @@
export type MemberScope = 'organisation' | 'platform'
export interface Member {
id: string
first_name: string