128 lines
4.1 KiB
Vue
128 lines
4.1 KiB
Vue
<script lang="ts" setup>
|
|
import teamRoutes from '@/routes/teams';
|
|
import {Head, Link, setLayoutProps} from '@inertiajs/vue3';
|
|
import type {Team, TeamInvite} from '@/types/models';
|
|
import {Card, CardContent} from '@/components/ui/card';
|
|
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
|
|
import {Button} from '@/components/ui/button';
|
|
import {Pencil, Trash} from '@lucide/vue';
|
|
|
|
const props = defineProps<{
|
|
team: Team;
|
|
canManageTeam: boolean;
|
|
teamInvites?: TeamInvite[];
|
|
}>();
|
|
|
|
setLayoutProps({
|
|
breadcrumbs: [
|
|
{
|
|
title: 'Teams',
|
|
href: teamRoutes.index(),
|
|
},
|
|
{
|
|
title: props.team.name,
|
|
href: teamRoutes.index(),
|
|
},
|
|
],
|
|
});
|
|
|
|
const revokeInvite = (teamInvite: TeamInvite) => fetch(teamRoutes.invite.revoke(teamInvite.team.slug).url, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({email: teamInvite.invitedEmail})
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Teams"/>
|
|
|
|
<div class="flex flex-col justify-center p-16">
|
|
<div v-if="canManageTeam" class="flex w-full justify-end py-4">
|
|
<Link :href="teamRoutes.edit({team: team.slug})">
|
|
<Button>
|
|
<component :is="Pencil"/>
|
|
Bearbeiten
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<Card class="w-full mb-8">
|
|
<CardContent class="flex flex-col">
|
|
<h1 class="font-semibold text-2xl">{{ team.name }}</h1>
|
|
<Table>
|
|
<TableBody class="[&_td]:py-0 [&_tr]:border-0 text-gray-500 text-sm">
|
|
<TableRow>
|
|
<TableCell class="font-bold ">Slug:</TableCell>
|
|
<TableCell>{{ team.slug }}</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell class="font-bold ">Erfordert 2FA:</TableCell>
|
|
<TableCell>{{ team.multi_factor_required ? 'Ja' : 'Nein' }}</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell class="font-bold ">Erstellt am:</TableCell>
|
|
<TableCell>{{ team.created_at }}</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
<Card class="w-full mb-8">
|
|
<CardContent>
|
|
<h2 class="font-semibold text-lg">Mitglieder</h2>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Email</TableHead>
|
|
<TableHead>2FA</TableHead>
|
|
<TableHead>Rolle</TableHead>
|
|
<TableHead>Beigetreten Am</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-for="member in team.members">
|
|
<TableCell>{{ member.name }}</TableCell>
|
|
<TableCell>{{ member.email }}</TableCell>
|
|
<TableCell>{{ member.has_multi_factor ? 'Ja' : 'Nein' }}</TableCell>
|
|
<TableCell>{{ member.role }}</TableCell>
|
|
<TableCell>{{ member.joined_at }}</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
<Card v-if="teamInvites" class="w-full mb-8">
|
|
<CardContent>
|
|
<h2 class="font-semibold text-lg">Ausstehende Invites</h2>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Invited</TableHead>
|
|
<TableHead>Invited von</TableHead>
|
|
<TableHead>Invited at</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-for="invite in teamInvites">
|
|
<TableCell>{{ invite.invitedEmail }}</TableCell>
|
|
<TableCell>{{ invite.invitedBy.name }}</TableCell>
|
|
<TableCell>{{ invite.invitedAt }}</TableCell>
|
|
<Link
|
|
:href="teamRoutes.invite.revoke({team: invite.team.slug})"
|
|
class="cursor-pointer"
|
|
@click="revokeInvite(invite)"
|
|
>
|
|
<TableCell>
|
|
<component :is="Trash" size="18"/>
|
|
</TableCell>
|
|
</Link>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template>
|