add team delte

resources/js/pages/team/Index.vue

@@ -1,20 +1,12 @@
 <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 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, Trash} from '@lucide/vue';
 
 defineOptions({
   layout: {
@@ -38,6 +30,9 @@ const openTeam = (team: Team) =>
 
 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';
 </script>
 
 <template>
@@ -61,6 +56,7 @@ const canManageTeam = (team: Team) =>
               <TableHead>Slug</TableHead>
               <TableHead>Mitglieder</TableHead>
               <TableHead>2FA</TableHead>
+              <TableHead/>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -78,7 +74,7 @@ const canManageTeam = (team: Team) =>
               <TableCell>{{
                 team.multi_factor_required ? 'Ja' : 'Nein'
               }}</TableCell>
-              <TableCell>
+              <TableCell class="flex gap-4  justify-end">
                 <Link
                   :href="
                     (canManageTeam(team) ? teamRoutes.edit : teamRoutes.show)({
@@ -93,6 +89,21 @@ const canManageTeam = (team: Team) =>
                     size="18"
                   />
                 </Link>
+                <Link
+                  v-if="canDeleteTeam(team)"
+                  :href="
+                    teamRoutes.destroy({
+                      team: team.slug,
+                    })
+                  "
+                  class="cursor-pointer text-red-500"
+                  @click.stop
+                >
+                  <component
+                    :is="Trash"
+                    size="18"
+                  />
+                </Link>
               </TableCell>
             </TableRow>
           </TableBody>

resources/js/types/models.ts

@@ -6,7 +6,10 @@ export interface Team {
   created_at: string;
 }
 
-export type TeamMemberRole = 'admin' | 'member';
+export type TeamMemberRole =
+  |'owner'
+  | 'admin'
+  | 'member';
 
 export interface User {
   name: string;