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

feat: refactor organisation pages with tabs, members tab, and danger zone

Browse Source 
Organizer org page (/organisation):
- Timestamps moved below title as muted caption
- VTabs with Algemeen (details) and Leden (members) tabs
- Members content embedded from separate page with full functionality:
  invite, edit role, change email, remove, pending invitations

Platform org detail (/platform/organisations/[id]):
- Timestamps moved below title alongside slug
- VTabs with Algemeen and Leden tabs
- Danger zone redesigned: type-to-confirm delete dialog, disabled
  Transfer Ownership button with "Nog niet beschikbaar" tooltip

Navigation:
- Removed standalone "Leden" menu item (now a tab on org page)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
bert.hausmans
2026-04-15 00:59:45 +02:00
parent f2614f2b48
commit a8a2bc92d1
3 changed files with 775 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/app/src/navigation/vertical/index.ts
View File

@@ -17,13 +17,6 @@ export const orgNavItems = [
to: { name: 'organisation' },
icon: { icon: 'tabler-building' },
},
{
title: 'Leden',
to: { name: 'organisation-members' },
icon: { icon: 'tabler-users-group' },
action: 'read',
subject: 'members',
},
{
title: 'Bedrijven',
to: { name: 'organisation-companies' },

557
apps/app/src/pages/organisation/index.vue
View File

@@ -1,15 +1,24 @@
<script setup lang="ts">
import { useMyOrganisation } from '@/composables/api/useOrganisations'
import { useMemberList, useRemoveMember, useRevokeInvitation } from '@/composables/api/useMembers'
import { useAdminChangeEmail } from '@/composables/api/useAccount'
import { useAuthStore } from '@/stores/useAuthStore'
import { useOrganisationStore } from '@/stores/useOrganisationStore'
import EditOrganisationDialog from '@/components/organisations/EditOrganisationDialog.vue'
import InviteMemberDialog from '@/components/members/InviteMemberDialog.vue'
import EditMemberRoleDialog from '@/components/members/EditMemberRoleDialog.vue'
import type { Organisation } from '@/types/organisation'
import type { Member } from '@/types/member'
const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const orgStore = useOrganisationStore()
const orgId = computed(() => orgStore.activeOrganisationId ?? '')
const { data: organisation, isLoading, isError, refetch } = useMyOrganisation()
const isEditDialogOpen = ref(false)
const isOrgAdmin = computed(() => {
const role = authStore.currentOrganisation?.role
return role === 'org_admin' || authStore.isSuperAdmin
@@ -22,6 +31,92 @@ const statusColor: Record<Organisation['billing_status'], string> = {
cancelled: 'error',
}
// ─── Tabs ──────────────────────────────────────────────────
const tabs = [
{ value: 'algemeen', label: 'Algemeen', icon: 'tabler-building' },
{ value: 'leden', label: 'Leden', icon: 'tabler-users-group' },
]
const activeTab = computed({
get: () => {
const tab = route.query.tab as string
return tabs.some(t => t.value === tab) ? tab : 'algemeen'
},
set: (value: string) => {
router.replace({ query: { ...route.query, tab: value } })
},
})
// ─── Edit dialog ───────────────────────────────────────────
const isEditDialogOpen = ref(false)
// ─── Members ───────────────────────────────────────────────
const { data: memberData, isLoading: membersLoading, isError: membersError, refetch: refetchMembers } = useMemberList(orgId)
const members = computed(() => memberData.value?.data ?? [])
const pendingInvitations = computed(() => memberData.value?.meta?.pending_invitations ?? [])
const isInviteDialogOpen = ref(false)
const isEditRoleDialogOpen = ref(false)
const selectedMember = ref<Member | null>(null)
const isRemoveDialogOpen = ref(false)
const memberToRemove = ref<Member | null>(null)
const { mutate: removeMember, isPending: isRemoving } = useRemoveMember(orgId)
const isRevokeDialogOpen = ref(false)
const invitationToRevoke = ref<{ id: string; email: string } | null>(null)
const { mutate: revokeInvitation, isPending: isRevoking } = useRevokeInvitation(orgId)
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(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: 'full_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) {
return new Date(iso).toLocaleDateString('nl-NL', {
year: 'numeric',
@@ -29,6 +124,74 @@ function formatDate(iso: string) {
day: '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 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>
@@ -58,7 +221,7 @@ function formatDate(iso: string) {
<template v-else-if="organisation">
<!-- Header -->
<div class="d-flex justify-space-between align-center mb-6">
<div class="d-flex justify-space-between align-center mb-2">
<div class="d-flex align-center gap-x-3">
<h4 class="text-h4">
{{ organisation.name }}
@@ -79,54 +242,356 @@ function formatDate(iso: string) {
</VBtn>
</div>
<!-- Info card -->
<VCard>
<VCardText>
<VRow>
<VCol
cols="12"
md="4"
>
<h6 class="text-h6 mb-1">
Slug
</h6>
<p class="text-body-1 text-disabled mb-0">
{{ organisation.slug }}
</p>
</VCol>
<VCol
cols="12"
md="4"
>
<h6 class="text-h6 mb-1">
Aangemaakt op
</h6>
<p class="text-body-1 text-disabled mb-0">
{{ formatDate(organisation.created_at) }}
</p>
</VCol>
<VCol
cols="12"
md="4"
>
<h6 class="text-h6 mb-1">
Status
</h6>
<VChip
:color="statusColor[organisation.billing_status]"
size="small"
>
{{ organisation.billing_status }}
</VChip>
</VCol>
</VRow>
</VCardText>
</VCard>
<!-- Timestamps -->
<p class="text-caption text-medium-emphasis mb-6">
Aangemaakt op {{ formatDate(organisation.created_at) }}
</p>
<!-- Tabs -->
<VTabs
v-model="activeTab"
class="mb-6"
>
<VTab
v-for="tab in tabs"
:key="tab.value"
:value="tab.value"
:prepend-icon="tab.icon"
>
{{ tab.label }}
</VTab>
</VTabs>
<VWindow
v-model="activeTab"
class="disable-tab-transition"
>
<!-- Algemeen tab -->
<VWindowItem value="algemeen">
<VCard>
<VCardText>
<VRow>
<VCol
cols="12"
md="4"
>
<h6 class="text-h6 mb-1">
Slug
</h6>
<p class="text-body-1 text-disabled mb-0">
{{ organisation.slug }}
</p>
</VCol>
<VCol
cols="12"
md="4"
>
<h6 class="text-h6 mb-1">
Status
</h6>
<VChip
:color="statusColor[organisation.billing_status]"
size="small"
>
{{ organisation.billing_status }}
</VChip>
</VCol>
</VRow>
</VCardText>
</VCard>
</VWindowItem>
<!-- Leden tab -->
<VWindowItem value="leden">
<!-- Loading -->
<VSkeletonLoader
v-if="membersLoading"
type="card"
/>
<!-- Error -->
<VAlert
v-else-if="membersError"
type="error"
class="mb-4"
>
Kon leden niet laden.
<template #append>
<VBtn
variant="text"
@click="refetchMembers()"
>
Opnieuw proberen
</VBtn>
</template>
</VAlert>
<template v-else>
<!-- Invite button -->
<div
v-if="isOrgAdmin"
class="d-flex justify-end mb-4"
>
<VBtn
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.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">
<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>
</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>
</VWindowItem>
</VWindow>
<!-- Dialogs -->
<EditOrganisationDialog
v-model="isEditDialogOpen"
:organisation="organisation"
/>
<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>
</div>
</template>

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

@@ -48,7 +48,23 @@ const roleOptions = [
{ title: 'Lid', value: 'org_member' },
]
// Edit dialog
// ─── Tabs ──────────────────────────────────────────────────
const tabs = [
{ value: 'algemeen', label: 'Algemeen', icon: 'tabler-building' },
{ value: 'leden', label: 'Leden', icon: 'tabler-users-group' },
]
const activeTab = computed({
get: () => {
const tab = route.query.tab as string
return tabs.some(t => t.value === tab) ? tab : 'algemeen'
},
set: (value: string) => {
router.replace({ query: { ...route.query, tab: value } })
},
})
// ─── Edit dialog ───────────────────────────────────────────
const isEditDialogOpen = ref(false)
const editForm = ref<UpdateAdminOrganisationPayload>({})
const { mutate: updateOrg, isPending: isUpdating } = useUpdateAdminOrganisation()
@@ -75,11 +91,22 @@ function submitEdit() {
)
}
// Delete
// ─── Delete (type-to-confirm) ──────────────────────────────
const isDeleteDialogOpen = ref(false)
const deleteConfirmName = ref('')
const { mutate: deleteOrg, isPending: isDeleting } = useDeleteAdminOrganisation()
const deleteConfirmValid = computed(() =>
deleteConfirmName.value === org.value?.name,
)
function openDeleteDialog() {
deleteConfirmName.value = ''
isDeleteDialogOpen.value = true
}
function confirmDelete() {
if (!deleteConfirmValid.value) return
deleteOrg(orgId.value, {
onSuccess: () => {
router.push({ name: 'platform-organisations' })
@@ -87,14 +114,14 @@ function confirmDelete() {
})
}
// Open as organiser
// ─── Open as organiser ─────────────────────────────────────
function openAsOrganiser() {
if (!org.value) return
orgStore.setActiveOrganisation(org.value.id)
router.push({ name: 'dashboard' })
}
// ─── Invite Member ──────────────────────────────────────────
// ─── Invite Member ─────────────────────────────────────────
const isInviteDialogOpen = ref(false)
const inviteForm = ref<InviteMemberPayload>({ email: '', role: 'org_member' })
const inviteError = ref('')
@@ -123,7 +150,7 @@ function submitInvite() {
)
}
// ─── Remove Member ──────────────────────────────────────────
// ─── Remove Member ─────────────────────────────────────────
const isRemoveDialogOpen = ref(false)
const memberToRemove = ref<{ id: string; full_name: string } | null>(null)
const { mutate: removeMember, isPending: isRemoving } = useRemoveOrganisationMember()
@@ -147,7 +174,7 @@ function confirmRemove() {
)
}
// ─── Update Member Role ─────────────────────────────────────
// ─── Update Member Role ────────────────────────────────────
const { mutate: updateMemberRole } = useUpdateOrganisationMemberRole()
function onRoleChange(userId: string, newRole: string) {
@@ -161,7 +188,7 @@ function onRoleChange(userId: string, newRole: string) {
)
}
// ─── Snackbar ───────────────────────────────────────────────
// ─── Snackbar ──────────────────────────────────────────────
const snackbar = ref({ show: false, message: '', color: 'success' })
function showSnackbar(message: string, color: string) {
@@ -206,7 +233,7 @@ function formatDate(iso: string): string {
<template v-else-if="org">
<!-- Header -->
<div class="d-flex align-center justify-space-between mb-6">
<div class="d-flex align-center justify-space-between mb-2">
<div class="d-flex align-center gap-x-3">
<VBtn
icon="tabler-arrow-left"
@@ -215,19 +242,22 @@ function formatDate(iso: string): string {
:to="{ name: 'platform-organisations' }"
/>
<div>
<h4 class="text-h4">
{{ org.name }}
<div class="d-flex align-center gap-x-2">
<h4 class="text-h4">
{{ org.name }}
</h4>
<VChip
:color="billingStatusColor[org.billing_status]"
size="small"
class="ms-2"
>
{{ org.billing_status_label ?? org.billing_status }}
</VChip>
</h4>
<p class="text-body-2 text-disabled mb-0">
</div>
<span class="text-caption text-medium-emphasis">
{{ org.slug }}
</p>
&middot; Aangemaakt op {{ formatDate(org.created_at) }}
&middot; Gewijzigd op {{ formatDate(org.updated_at) }}
</span>
</div>
</div>
<div class="d-flex gap-x-2">
@@ -247,8 +277,8 @@ function formatDate(iso: string): string {
</div>
</div>
<!-- Info Cards -->
<VRow class="mb-6">
<!-- KPI Cards -->
<VRow class="mb-6 mt-4">
<VCol
cols="12"
md="4"
@@ -335,142 +365,212 @@ function formatDate(iso: string): string {
</VCol>
</VRow>
<!-- Details Card -->
<VCard class="mb-6">
<VCardTitle>Details</VCardTitle>
<VCardText>
<VRow>
<VCol
cols="12"
sm="6"
>
<p class="text-body-2 text-disabled mb-1">
Aangemaakt
</p>
<p class="text-body-1">
{{ formatDate(org.created_at) }}
</p>
</VCol>
<VCol
cols="12"
sm="6"
>
<p class="text-body-2 text-disabled mb-1">
Laatste wijziging
</p>
<p class="text-body-1">
{{ formatDate(org.updated_at) }}
</p>
</VCol>
</VRow>
</VCardText>
</VCard>
<!-- Tabs -->
<VTabs
v-model="activeTab"
class="mb-6"
>
<VTab
v-for="tab in tabs"
:key="tab.value"
:value="tab.value"
:prepend-icon="tab.icon"
>
{{ tab.label }}
</VTab>
</VTabs>
<!-- Members Card -->
<VCard class="mb-6">
<VCardTitle class="d-flex align-center justify-space-between">
<span>Leden</span>
<VBtn
size="small"
prepend-icon="tabler-user-plus"
@click="openInviteDialog"
>
Lid uitnodigen
</VBtn>
</VCardTitle>
<VTable>
<thead>
<tr>
<th>Naam</th>
<th>Email</th>
<th>Rol</th>
<th class="text-end">
Acties
</th>
</tr>
</thead>
<tbody>
<tr
v-for="member in members"
:key="member.id"
>
<td>
<div class="d-flex align-center gap-x-3 py-2">
<VAvatar
size="34"
:color="member.avatar ? undefined : 'primary'"
variant="tonal"
<VWindow
v-model="activeTab"
class="disable-tab-transition"
>
<!-- Algemeen tab -->
<VWindowItem value="algemeen">
<VCard>
<VCardTitle>Details</VCardTitle>
<VCardText>
<VRow>
<VCol
cols="12"
sm="6"
md="3"
>
<p class="text-body-2 text-disabled mb-1">
Slug
</p>
<p class="text-body-1">
{{ org.slug }}
</p>
</VCol>
<VCol
cols="12"
sm="6"
md="3"
>
<p class="text-body-2 text-disabled mb-1">
Billing status
</p>
<VChip
:color="billingStatusColor[org.billing_status]"
size="small"
>
<VImg
v-if="member.avatar"
:src="member.avatar"
/>
<span v-else>{{ member.first_name.charAt(0) }}{{ member.last_name.charAt(0) }}</span>
</VAvatar>
<span>{{ member.full_name }}</span>
</div>
</td>
<td>{{ member.email }}</td>
<td>
<AppSelect
:model-value="member.role"
:items="roleOptions"
density="compact"
hide-details
style="max-inline-size: 160px;"
@update:model-value="(val: string) => onRoleChange(member.id, val)"
/>
</td>
<td class="text-end">
<VTooltip
v-if="member.id === authStore.user?.id"
location="top"
{{ org.billing_status_label ?? org.billing_status }}
</VChip>
</VCol>
</VRow>
</VCardText>
</VCard>
</VWindowItem>
<!-- Leden tab -->
<VWindowItem value="leden">
<div class="d-flex justify-end mb-4">
<VBtn
prepend-icon="tabler-user-plus"
@click="openInviteDialog"
>
Lid uitnodigen
</VBtn>
</div>
<VCard>
<VTable v-if="members.length > 0">
<thead>
<tr>
<th>Naam</th>
<th>Email</th>
<th>Rol</th>
<th class="text-end">
Acties
</th>
</tr>
</thead>
<tbody>
<tr
v-for="member in members"
:key="member.id"
>
<template #activator="{ props }">
<span v-bind="props">
<IconBtn
disabled
size="small"
<td>
<div class="d-flex align-center gap-x-3 py-2">
<VAvatar
size="34"
:color="member.avatar ? undefined : 'primary'"
variant="tonal"
>
<VIcon icon="tabler-trash" />
</IconBtn>
</span>
</template>
Je kunt jezelf niet verwijderen
</VTooltip>
<IconBtn
v-else
size="small"
color="error"
@click="openRemoveDialog(member)"
>
<VIcon icon="tabler-trash" />
</IconBtn>
</td>
</tr>
</tbody>
</VTable>
<VCardText v-if="members.length === 0">
<p class="text-body-2 text-disabled text-center mb-0">
Geen leden gevonden.
</p>
</VCardText>
</VCard>
<VImg
v-if="member.avatar"
:src="member.avatar"
/>
<span v-else>{{ member.first_name.charAt(0) }}{{ member.last_name.charAt(0) }}</span>
</VAvatar>
<span>{{ member.full_name }}</span>
</div>
</td>
<td>{{ member.email }}</td>
<td>
<AppSelect
:model-value="member.role"
:items="roleOptions"
density="compact"
hide-details
style="max-inline-size: 160px;"
@update:model-value="(val: string) => onRoleChange(member.id, val)"
/>
</td>
<td class="text-end">
<VTooltip
v-if="member.id === authStore.user?.id"
location="top"
>
<template #activator="{ props }">
<span v-bind="props">
<IconBtn
disabled
size="small"
>
<VIcon icon="tabler-trash" />
</IconBtn>
</span>
</template>
Je kunt jezelf niet verwijderen
</VTooltip>
<IconBtn
v-else
size="small"
color="error"
@click="openRemoveDialog(member)"
>
<VIcon icon="tabler-trash" />
</IconBtn>
</td>
</tr>
</tbody>
</VTable>
<VCardText
v-else
class="text-center text-disabled"
>
Geen leden gevonden.
</VCardText>
</VCard>
</VWindowItem>
</VWindow>
<!-- Danger Zone -->
<VCard>
<VCardTitle class="text-error">
Gevarenzone
</VCardTitle>
<VCard
variant="outlined"
color="error"
class="mt-6"
>
<VCardTitle>Danger Zone</VCardTitle>
<VCardText>
<VBtn
color="error"
variant="tonal"
prepend-icon="tabler-trash"
@click="isDeleteDialogOpen = true"
>
Organisatie verwijderen
</VBtn>
<div class="d-flex justify-space-between align-center mb-4">
<div>
<p class="text-subtitle-1 font-weight-medium mb-1">
Verwijder organisatie
</p>
<p class="text-body-2 text-medium-emphasis mb-0">
Alle gegevens van deze organisatie worden permanent verwijderd.
Deze actie kan niet ongedaan worden gemaakt.
</p>
</div>
<VBtn
color="error"
variant="outlined"
class="ms-4 flex-shrink-0"
@click="openDeleteDialog"
>
Verwijder
</VBtn>
</div>
<VDivider class="mb-4" />
<div class="d-flex justify-space-between align-center">
<div>
<p class="text-subtitle-1 font-weight-medium mb-1">
Transfer Ownership
</p>
<p class="text-body-2 text-medium-emphasis mb-0">
Draag het eigenaarschap van deze organisatie over aan een andere gebruiker.
</p>
</div>
<VTooltip location="top">
<template #activator="{ props }">
<span v-bind="props">
<VBtn
color="error"
variant="outlined"
class="ms-4 flex-shrink-0"
disabled
>
Transfer
</VBtn>
</span>
</template>
Nog niet beschikbaar
</VTooltip>
</div>
</VCardText>
</VCard>
</template>
@@ -523,15 +623,28 @@ function formatDate(iso: string): string {
</VCard>
</VDialog>
<!-- Delete Dialog -->
<!-- Delete Dialog (type-to-confirm) -->
<VDialog
v-model="isDeleteDialogOpen"
max-width="400"
max-width="480"
>
<VCard title="Organisatie verwijderen">
<VCardText>
Weet je zeker dat je <strong>{{ org?.name }}</strong> wilt verwijderen?
Dit kan niet ongedaan worden gemaakt.
<VAlert
type="error"
variant="tonal"
class="mb-4"
>
Deze actie kan niet ongedaan worden gemaakt. Alle gegevens van
deze organisatie worden permanent verwijderd.
</VAlert>
<p class="text-body-2 mb-2">
Typ <strong>{{ org?.name }}</strong> om te bevestigen:
</p>
<AppTextField
v-model="deleteConfirmName"
placeholder="Organisatienaam"
/>
</VCardText>
<VCardActions>
<VSpacer />
@@ -544,9 +657,10 @@ function formatDate(iso: string): string {
<VBtn
color="error"
:loading="isDeleting"
:disabled="!deleteConfirmValid"
@click="confirmDelete"
>
Verwijderen
Definitief verwijderen
</VBtn>
</VCardActions>
</VCard>