feat: move organisation members to sidebar, drop tabs on org page
Made-with: Cursor
This commit is contained in:
@@ -1,21 +1,10 @@
|
||||
<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()
|
||||
|
||||
@@ -31,170 +20,14 @@ 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 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) {
|
||||
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>
|
||||
@@ -252,373 +85,42 @@ function confirmRevokeInvitation() {
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<!-- 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()"
|
||||
<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"
|
||||
>
|
||||
Opnieuw proberen
|
||||
</VBtn>
|
||||
</template>
|
||||
</VAlert>
|
||||
{{ organisation.billing_status }}
|
||||
</VChip>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<template v-else>
|
||||
<VCard class="mb-6">
|
||||
<!-- Search + Invite -->
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
@@ -67,18 +67,22 @@ const roleLabelMap: Record<string, string> = {
|
||||
volunteer_coordinator: 'Vrijwilliger Coördinator',
|
||||
}
|
||||
|
||||
const memberSearch = ref('')
|
||||
|
||||
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' },
|
||||
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 })
|
||||
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(' ')
|
||||
@@ -90,11 +94,10 @@ function getInitials(name: string): string {
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
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) {
|
||||
@@ -196,37 +199,52 @@ function confirmRevokeInvitation() {
|
||||
|
||||
<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 class="mb-6">
|
||||
<h4 class="text-h4">
|
||||
Leden
|
||||
</h4>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ orgName }}
|
||||
</p>
|
||||
</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>
|
||||
<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
|
||||
v-else
|
||||
:headers="memberHeaders"
|
||||
:items="members"
|
||||
:items-per-page="-1"
|
||||
hide-default-footer
|
||||
:search="memberSearch"
|
||||
:sort-by="memberSortBy"
|
||||
:items-per-page="10"
|
||||
>
|
||||
<template #item.full_name="{ item }">
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
@@ -257,7 +275,7 @@ function confirmRevokeInvitation() {
|
||||
</template>
|
||||
|
||||
<template #item.actions="{ item }">
|
||||
<div class="d-flex gap-x-1">
|
||||
<div class="d-flex gap-x-1 justify-end">
|
||||
<VBtn
|
||||
icon="tabler-edit"
|
||||
variant="text"
|
||||
@@ -279,6 +297,17 @@ function confirmRevokeInvitation() {
|
||||
/>
|
||||
</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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user