Fix team authorization, invite revocation, and slug handling

resources/js/pages/team/Index.vue

@@ -1,12 +1,21 @@
 <script lang="ts" setup>
 import teamRoutes from '@/routes/teams';
-import {Head, Link, router, usePage} from '@inertiajs/vue3';
-import type {Team} from '@/types/models';
+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';
+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: {
@@ -19,27 +28,24 @@ defineOptions({
   },
 });
 
-defineProps<{
-  teams: Team[];
-}>();
+defineProps<TeamIndexPageProps>();
 
 const user = usePage().props.auth.user;
 
 const openTeam = (team: Team) =>
-  router.visit(teamRoutes.show({team: team.slug}).url);
+  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 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"/>
+          <component :is="Plus" />
           Erstellen
         </Button>
       </Link>
@@ -59,25 +65,34 @@ const canManageTeam = (team: Team) =>
           <TableBody>
             <TableRow
               v-for="team in teams"
-              v-if="teams.length > 0"
               :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>
-              <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>
+              <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">