change member invite to api route, add resend invitation mail, add delete invitation, fixes ST-87

resources/js/Components/Common/Invitation/InvitationMoreOptionsDropdown.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import Dropdown from '@/Components/Dropdown.vue';
+import { TrashIcon, ArrowPathIcon } from '@heroicons/vue/20/solid';
+const emit = defineEmits<{
+    delete: [];
+    resend: [];
+}>();
+</script>
+
+<template>
+    <Dropdown align="bottom-end">
+        <template #trigger>
+            <svg
+                data-testid="invitation_actions"
+                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.5"
+                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
+            </svg>
+        </template>
+        <template #content>
+            <button
+                @click="emit('resend')"
+                data-testid="invitation_delete"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <ArrowPathIcon class="w-5 text-icon-active"></ArrowPathIcon>
+                <span>Resend Invitation</span>
+            </button>
+            <button
+                @click="emit('delete')"
+                data-testid="invitation_delete"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Invitation/InvitationTable.vue

@@ -18,7 +18,7 @@ onMounted(async () => {
             <div
                 data-testid="client_table"
                 class="grid min-w-full"
-                style="grid-template-columns: 1fr 1fr">
+                style="grid-template-columns: 1fr 1fr 80px">
                 <InvitationTableHeading></InvitationTableHeading>
                 <template
                     v-for="invitation in invitations"

resources/js/Components/Common/Invitation/InvitationTableHeading.vue

@@ -4,8 +4,15 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 
 <template>
     <TableHeading>
-        <div class="px-3 py-1.5 text-left font-semibold text-white">Email</div>
+        <div
+            class="px-3 py-1.5 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            Email
+        </div>
         <div class="px-3 py-1.5 text-left font-semibold text-white">Role</div>
+        <div
+            class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
+            <span class="sr-only">Edit</span>
+        </div>
     </TableHeading>
 </template>
 

resources/js/Components/Common/Invitation/InvitationTableRow.vue

@@ -2,20 +2,76 @@
 import type { Invitation } from '@/utils/api';
 import TableRow from '@/Components/TableRow.vue';
 import { capitalizeFirstLetter } from '../../../utils/format';
+import InvitationMoreOptionsDropdown from '@/Components/Common/Invitation/InvitationMoreOptionsDropdown.vue';
+import { api } from '../../../../../openapi.json.client';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useNotificationsStore } from '@/utils/notification';
+import { useInvitationsStore } from '@/utils/useInvitations';
+const { handleApiRequestNotifications } = useNotificationsStore();
 
-defineProps<{
+const props = defineProps<{
     invitation: Invitation;
 }>();
+
+async function deleteInvitation() {
+    const organizationId = getCurrentOrganizationId();
+    if (organizationId) {
+        await handleApiRequestNotifications(
+            () =>
+                api.removeInvitation(
+                    {},
+                    {
+                        params: {
+                            invitation: props.invitation.id,
+                            organization: organizationId,
+                        },
+                    }
+                ),
+            'Invitation removed successfully',
+            'Error removing invitation',
+            () => {
+                useInvitationsStore().fetchInvitations();
+            }
+        );
+    }
+}
+
+async function resendInvitation() {
+    const organizationId = getCurrentOrganizationId();
+    if (organizationId) {
+        await handleApiRequestNotifications(
+            () =>
+                api.resendInvitationEmail(
+                    {},
+                    {
+                        params: {
+                            invitation: props.invitation.id,
+                            organization: organizationId,
+                        },
+                    }
+                ),
+            'Invitation mail sent successfully',
+            'Error sending invitation mail'
+        );
+    }
+}
 </script>
 
 <template>
     <TableRow>
-        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+        <div
+            class="whitespace-nowrap px-3 py-4 text-sm text-muted pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             {{ invitation.email }}
         </div>
         <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
             {{ capitalizeFirstLetter(invitation.role) }}
         </div>
+        <div
+            class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <InvitationMoreOptionsDropdown
+                @delete="deleteInvitation"
+                @resend="resendInvitation" />
+        </div>
     </TableRow>
 </template>