ots/resources/js/pages/team/Show.vue

<script lang="ts" setup>
import teamRoutes from '@/routes/teams';
import {Form, Head, Link, setLayoutProps, useForm} from '@inertiajs/vue3';
import type {Team, TeamInvite} from '@/types/models';
import InputError from '@/components/InputError.vue';
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, Plus, Trash} from '@lucide/vue';
import {Input} from "@/components/ui/input";
import {Label} from "@/components/ui/label";

const props = defineProps<{
  team: Team;
  canManageTeam: boolean;
  teamInvites?: TeamInvite[];
}>();

setLayoutProps({
  breadcrumbs: [
    {
      title: 'Teams',
      href: teamRoutes.index(),
    },
    {
      title: props.team.name,
      href: teamRoutes.index(),
    },
  ],
});

const revokeForm = useForm({email: ''});

function revokeInvite(invite: TeamInvite): void {
  if (revokeForm.processing) {
    return;
  }

  revokeForm.email = invite.invitedEmail;
  revokeForm.submit(teamRoutes.invite.revoke({team: props.team.slug}), {
    preserveScroll: true,
  });
}
</script>

<template>
  <div class="flex flex-col justify-center p-16">
    <Head title="Teams"/>
    <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="mb-8 w-full">
      <CardContent class="flex flex-col">
        <h1 class="text-2xl font-semibold">{{ team.name }}</h1>
        <Table>
          <TableBody class="text-sm text-gray-500 [&_td]:py-0 [&_tr]:border-0">
            <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="mb-8 w-full">
      <CardContent>
        <h2 class="text-lg font-semibold">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" :key="member.email">
              <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="mb-8 w-full">
      <CardContent>
        <div class="flex justify-between">
          <h2 class="text-lg font-semibold">Ausstehende Invites</h2>
          <Card class="border-neutral-500 b-2">
            <CardContent>
              <Form v-slot="{ errors, processing }" :action="teamRoutes.invite.invite({team: team.slug})"
                    class="flex gap-2 justify-end items-end"
                    method="POST"
              >
                <div class="grid gap-y-2">
                  <Label for="email">Email:</Label>
                  <Input id="email" name="email" placeholder="user@example.com" type="email"/>
                  <InputError :message="errors.email"/>
                </div>
                <Button :disabled="processing" type="submit" variant="secondary">
                  <component :is="Plus"/>
                  Einladen
                </Button>
              </Form>
            </CardContent>
          </Card>
        </div>
        <InputError :message="revokeForm.errors.email"/>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Invited</TableHead>
              <TableHead>Invited von</TableHead>
              <TableHead>Invited at</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="invite in teamInvites" :key="invite.invitedEmail">
              <TableCell>{{ invite.invitedEmail }}</TableCell>
              <TableCell>{{ invite.invitedBy.name }}</TableCell>
              <TableCell>{{ invite.invitedAt }}</TableCell>
              <TableCell>
                <Button
                  :aria-label="`Einladung für ${invite.invitedEmail} widerrufen`"
                  :disabled="revokeForm.processing"
                  size="icon"
                  type="button"
                  variant="ghost"
                  @click="revokeInvite(invite)"
                >
                  <Trash :size="18"/>
                </Button>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  </div>
</template>