revoke team member invite

resources/js/pages/team/Show.vue

@@ -1,15 +1,16 @@
 <script lang="ts" setup>
 import teamRoutes from '@/routes/teams';
 import {Head, Link, setLayoutProps} from '@inertiajs/vue3';
-import type {Team} from '@/types/models';
+import type {Team, TeamInvite} from '@/types/models';
 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} from '@lucide/vue';
+import {Pencil, Trash} from '@lucide/vue';
 
 const props = defineProps<{
   team: Team;
   canManageTeam: boolean;
+  teamInvites?: TeamInvite[];
 }>();
 
 setLayoutProps({
@@ -25,6 +26,12 @@ setLayoutProps({
   ],
 });
 
+const revokeInvite = (teamInvite: TeamInvite) => fetch(teamRoutes.invite.revoke(teamInvite.team.slug).url, {
+  method: 'POST',
+  headers: {'Content-Type': 'application/json'},
+  body: JSON.stringify({email: teamInvite.invitedEmail})
+})
+
 </script>
 
 <template>
@@ -61,7 +68,7 @@ setLayoutProps({
         </Table>
       </CardContent>
     </Card>
-    <Card>
+    <Card class="w-full mb-8">
       <CardContent>
         <h2 class="font-semibold text-lg">Mitglieder</h2>
         <Table>
@@ -86,5 +93,35 @@ setLayoutProps({
         </Table>
       </CardContent>
     </Card>
+    <Card v-if="teamInvites" class="w-full mb-8">
+      <CardContent>
+        <h2 class="font-semibold text-lg">Ausstehende Invites</h2>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Invited</TableHead>
+              <TableHead>Invited von</TableHead>
+              <TableHead>Invited at</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow v-for="invite in teamInvites">
+              <TableCell>{{ invite.invitedEmail }}</TableCell>
+              <TableCell>{{ invite.invitedBy.name }}</TableCell>
+              <TableCell>{{ invite.invitedAt }}</TableCell>
+              <Link
+                :href="teamRoutes.invite.revoke({team: invite.team.slug})"
+                class="cursor-pointer"
+                @click="revokeInvite(invite)"
+              >
+                <TableCell>
+                  <component :is="Trash" size="18"/>
+                </TableCell>
+              </Link>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
   </div>
 </template>

resources/js/types/models.ts

@@ -8,10 +8,20 @@ export interface Team {
 
 export type TeamMemberRole = 'admin' | 'member';
 
-export interface TeamMember {
+export interface User {
   name: string;
   email: string;
   has_multi_factor: boolean;
+}
+
+export interface TeamMember extends User {
   role: TeamMemberRole;
-  joined_at: string
+  joined_at: string;
+}
+
+export interface TeamInvite {
+  invitedEmail: string;
+  team: Team;
+  invitedBy: User;
+  invitedAt: string;
 }