crewli/apps/app/src/pages/organisation/members.vue

<script setup lang="ts">
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 InviteMemberDialog from '@/components/members/InviteMemberDialog.vue'
import EditMemberRoleDialog from '@/components/members/EditMemberRoleDialog.vue'
import type { Member } from '@/types/member'

const authStore = useAuthStore()
const orgStore = useOrganisationStore()

const orgId = computed(() => orgStore.activeOrganisationId ?? '')
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(orgId)

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(orgId)

// Revoke invitation
const isRevokeDialogOpen = ref(false)
const invitationToRevoke = ref<{ id: string; email: string } | null>(null)
const { mutate: revokeInvitation, isPending: isRevoking } = useRevokeInvitation(orgId)

// 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(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): string {
  return new Date(iso).toLocaleDateString('nl-NL', {
    day: '2-digit',
    month: '2-digit',
    year: '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>
  <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">
            {{ orgName }}
          </p>
        </div>
        <VBtn
          v-if="isOrgAdmin"
          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>

    <!-- 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>
  </div>
</template>