formatted, added team index, create, show

resources/js/pages/team/Index.vue

@@ -1,25 +1,18 @@
-<script setup lang="ts">
-
-import teamRoutes from "@/routes/teams";
-import {Head} 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"
+<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} from '@lucide/vue';
 
 defineOptions({
   layout: {
     breadcrumbs: [
       {
-        title: 'Meine Teams',
+        title: 'Teams',
         href: teamRoutes.index(),
       },
     ],
@@ -27,14 +20,31 @@ defineOptions({
 });
 
 defineProps<{
-  teams: Team[]
-}>()
+  teams: Team[];
+  canCreateTeam: boolean;
+}>();
+
+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>
   <Head title="Teams"/>
 
-  <div class="flex justify-center p-16">
+  <div class="flex flex-col justify-center p-16">
+    <div v-if="canCreateTeam" 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>
@@ -49,19 +59,31 @@ defineProps<{
           </TableHeader>
           <TableBody>
             <TableRow
-              v-if="teams.length > 0"
               v-for="team in teams"
+              v-if="teams.length > 0"
+              :key="team.slug"
+              role="link"
+              tabindex="0"
+              @click="openTeam(team)"
             >
               <TableCell>{{ team.name }}</TableCell>
               <TableCell>{{ team.slug }}</TableCell>
               <TableCell>{{ team.members.length }}</TableCell>
-              <TableCell>{{ team.multi_factor_required }}</TableCell>
+              <TableCell>{{ team.multi_factor_required ? 'Ja' : 'Nein' }}</TableCell>
+              <Link
+                :href="(canManageTeam(team) ? teamRoutes.edit : teamRoutes.show)({ team: team.slug })"
+                class="cursor-pointer"
+                @click.stop
+              >
+                <TableCell>
+                  <component :is="canManageTeam(team) ? Pencil : Eye" size="18"/>
+                </TableCell>
+              </Link>
             </TableRow>
           </TableBody>
           <TableCaption v-if="teams.length <= 0">
-            Du bist noch von keinem Team mitglied.
-            Tritt einem Team bei oder
-            <TextLink href="{{ route('teams.create') }}">erstelle eins.</TextLink>
+            Du bist noch von keinem Team mitglied. Tritt einem Team bei oder
+            <TextLink :href="teamRoutes.create()">erstelle eins.</TextLink>
           </TableCaption>
         </Table>
       </CardContent>