ots/resources/js/pages/team/Index.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 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, Trash } from '@lucide/vue';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { ref } from 'vue';

defineOptions({
  layout: {
    breadcrumbs: [
      {
        title: 'Teams',
        href: teamRoutes.index(),
      },
    ],
  },
});

defineProps<{
  teams: Team[];
}>();

const user = usePage().props.auth.user;
const deleteTeam = ref<Team | null>(null);

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';

const canDeleteTeam = (team: Team) =>
  team.members.find((member) => member.email === user.email)?.role === 'owner';

const deleteTeamAction = (team: Team) => {
  router.delete(teamRoutes.destroy({ team: team.slug }).url);
  deleteTeam.value = null;
};
</script>

<template>
  <Dialog
    v-if="deleteTeam != null"
    :open="true"
    @update:open="deleteTeam = null"
  >
    <DialogContent class="sm:max-w-md">
      <DialogHeader class="flex items-start justify-start">
        <DialogTitle>{{ deleteTeam.name }} unwiderruflich löschen?</DialogTitle>
        <DialogDescription>
          Bist du sicher, dass du das Team, {{ deleteTeam.name }}, mit
          {{ deleteTeam.members.length }} Mitgliedern, löschen möchtest?
        </DialogDescription>
        <div class="flex w-full items-end justify-end gap-4">
          <Button
            class="cursor-pointer"
            variant="outline"
            @click="deleteTeam = null"
            >Abbrechen</Button
          >
          <Button
            class="cursor-pointer"
            variant="destructive"
            @click="deleteTeamAction(deleteTeam)"
            >Löschen</Button
          >
        </div>
      </DialogHeader>
    </DialogContent>
  </Dialog>
  <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>
              <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 class="flex justify-end gap-4">
                <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>
                <component
                  :is="Trash"
                  v-if="canDeleteTeam(team)"
                  class="cursor-pointer text-red-500"
                  size="18"
                  @click="deleteTeam = team"
                  @click.stop
                />
              </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>