107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import teamRoutes from '@/routes/teams';
|
|
import { Head, Link, router, usePage } from '@inertiajs/vue3';
|
|
import type { Team } from '@/types/models';
|
|
import type { TeamIndexPageProps } from '@/types/page-props';
|
|
import TextLink from '@/components/TextLink.vue';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Eye, Pencil, Plus } from '@lucide/vue';
|
|
|
|
defineOptions({
|
|
layout: {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'Teams',
|
|
href: teamRoutes.index(),
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
defineProps<TeamIndexPageProps>();
|
|
|
|
const user = usePage().props.auth.user;
|
|
|
|
const openTeam = (team: Team) =>
|
|
router.visit(teamRoutes.show({ team: team.slug }).url);
|
|
|
|
const canManageTeam = (team: Team) =>
|
|
team.members.find((member) => member.email === user.email)?.role === 'admin';
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col justify-center p-16">
|
|
<Head title="Teams" />
|
|
<div class="flex w-full justify-end py-4">
|
|
<Link :href="teamRoutes.create()">
|
|
<Button>
|
|
<component :is="Plus" />
|
|
Erstellen
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<Card class="w-full">
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Slug</TableHead>
|
|
<TableHead>Mitglieder</TableHead>
|
|
<TableHead>2FA</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow
|
|
v-for="team in teams"
|
|
:key="team.slug"
|
|
role="link"
|
|
tabindex="0"
|
|
@click="openTeam(team)"
|
|
@keydown.enter.self="openTeam(team)"
|
|
>
|
|
<TableCell>{{ team.name }}</TableCell>
|
|
<TableCell>{{ team.slug }}</TableCell>
|
|
<TableCell>{{ team.members.length }}</TableCell>
|
|
<TableCell>{{
|
|
team.multi_factor_required ? 'Ja' : 'Nein'
|
|
}}</TableCell>
|
|
<TableCell>
|
|
<Link
|
|
:href="
|
|
(canManageTeam(team) ? teamRoutes.edit : teamRoutes.show)({
|
|
team: team.slug,
|
|
})
|
|
"
|
|
class="cursor-pointer"
|
|
@click.stop
|
|
>
|
|
<component
|
|
:is="canManageTeam(team) ? Pencil : Eye"
|
|
size="18"
|
|
/>
|
|
</Link>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
<TableCaption v-if="teams.length <= 0">
|
|
Du bist noch von keinem Team mitglied. Tritt einem Team bei oder
|
|
<TextLink :href="teamRoutes.create()">erstelle eins.</TextLink>
|
|
</TableCaption>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template>
|