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="b-2 border-neutral-500">
            <CardContent>
              <Form
                v-slot="{ errors, processing }"
                :action="teamRoutes.invite.invite({ team: team.slug })"
                class="flex items-end justify-end gap-2"
                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>