feat(ui): implement invitation store, types and API wrapper

Author: luizhf42

ui/src/components/Team/Member/MemberInvite.vue

@@ -114,11 +114,11 @@ import CopyWarning from "@/components/User/CopyWarning.vue";
 import RoleSelect from "../RoleSelect.vue";
 import { BasicRole } from "@/interfaces/INamespace";
 import useAuthStore from "@/store/modules/auth";
-import useNamespacesStore from "@/store/modules/namespaces";
+import useInvitationsStore from "@/store/modules/invitations";
 
 const emit = defineEmits(["update"]);
 const authStore = useAuthStore();
-const namespacesStore = useNamespacesStore();
+const invitationsStore = useInvitationsStore();
 const snackbar = useSnackbar();
 const showDialog = ref(false);
 const isLoading = ref(false);
@@ -182,7 +182,7 @@ const getInvitePayload = () => ({
 const generateLinkInvite = async () => {
   isLoading.value = true;
   try {
-    invitationLink.value = await namespacesStore.generateInvitationLink(getInvitePayload());
+    invitationLink.value = await invitationsStore.generateInvitationLink(getInvitePayload());
     snackbar.showSuccess("Invitation link generated successfully.");
     formWindow.value = "form-2";
   } catch (error) {
@@ -195,7 +195,7 @@ const generateLinkInvite = async () => {
 const sendEmailInvite = async () => {
   isLoading.value = true;
   try {
-    await namespacesStore.sendEmailInvitation(getInvitePayload());
+    await invitationsStore.sendInvitationEmail(getInvitePayload());
     snackbar.showSuccess("Invitation email sent successfully.");
     update();
     resetFields();

ui/src/components/Team/Member/MemberList.vue

@@ -41,14 +41,6 @@
           <td>
             <v-icon> mdi-account </v-icon>
             {{ member.email }}
-          </td>
-
-          <td class="text-center text-capitalize">
-            {{ member.role }}
-          </td>
-
-          <td class="text-center text-capitalize">
-            {{ member.status }}
             <v-tooltip
               v-if="member.added_at !== '0001-01-01T00:00:00Z'"
               activator="parent"
@@ -58,6 +50,10 @@
             </v-tooltip>
           </td>
 
+          <td class="text-center text-capitalize">
+            {{ member.role }}
+          </td>
+
           <td class="text-center">
             <v-menu
               v-if="!isNamespaceOwner(member.role)"
@@ -159,11 +155,6 @@ const headers = [
     value: "role",
     sortable: false,
   },
-  {
-    text: "Status",
-    value: "status",
-    sortable: false,
-  },
   {
     text: "Actions",
     value: "actions",

ui/src/interfaces/IInvitation.ts

@@ -0,0 +1,25 @@
+import { BasicRole } from "@/interfaces/INamespace";
+
+export interface IInvitation {
+  status: "pending" | "expired";
+  role: BasicRole;
+  invited_by: string;
+  expires_at: string;
+  created_at: string;
+  updated_at: string;
+  status_updated_at: string;
+  namespace: {
+    tenant_id: string;
+    name: string;
+  };
+  user: {
+    id: string;
+    email: string;
+  }
+}
+
+export interface IInviteMemberPayload {
+  email: string;
+  role: BasicRole;
+  tenant_id: string;
+}

ui/src/interfaces/INamespace.ts

@@ -5,7 +5,6 @@ export interface INamespaceMember {
   id: string;
   role: Role;
   email: string;
-  status: string;
   added_at: string;
   expires_at: string;
 }
@@ -40,30 +39,19 @@ export interface INamespace {
   type: NamespaceType;
 }
 
-export interface INamespaceAcceptInvite {
-  tenant: string;
-  sig: string;
-}
-
-export interface INamespaceAddMember {
-  email: string;
-  role: Role;
+export interface INamespaceEdit {
   tenant_id: string;
+  name?: string;
+  settings?: Partial<INamespaceSettings>;
 }
 
 export interface INamespaceEditMember {
   user_id: string;
-  role: Role;
+  role: BasicRole;
   tenant_id: string;
 }
 
 export interface INamespaceRemoveMember {
   tenant_id: string;
   user_id: string;
 }
-
-export interface INamespaceEdit {
-  tenant_id: string;
-  name?: string;
-  settings?: Partial<INamespaceSettings>;
-}

ui/src/store/api/invitations.ts

@@ -0,0 +1,24 @@
+import { namespacesApi } from "@/api/http";
+import { IInviteMemberPayload } from "@/interfaces/IInvitation";
+
+export const fetchUserPendingInvitations = async (data: { filter: string, page: number, perPage: number }) =>
+  namespacesApi.getMembershipInvitationList(data.filter, data.page, data.perPage);
+
+export const fetchNamespaceInvitations = async (tenantId: string, data: { filter?: string, page: number, perPage: number }) =>
+  namespacesApi.getNamespaceMembershipInvitationList(tenantId, data.filter, data.page, data.perPage);
+
+export const declineNamespaceInvitation = async (tenant: string) =>
+  namespacesApi.declineInvite(tenant);
+
+export const acceptNamespaceInvitation = async (tenant: string) =>
+  namespacesApi.acceptInvite(tenant);
+
+export const sendNamespaceInvitationEmail = async (data: IInviteMemberPayload) => namespacesApi.addNamespaceMember(data.tenant_id, {
+  email: data.email,
+  role: data.role,
+});
+
+export const generateNamespaceInvitationLink = async (data: IInviteMemberPayload) => namespacesApi.generateInvitationLink(data.tenant_id, {
+  email: data.email,
+  role: data.role,
+});

ui/src/store/api/namespaces.ts

@@ -1,10 +1,4 @@
-import {
-  INamespaceAcceptInvite,
-  INamespaceAddMember,
-  INamespaceEdit,
-  INamespaceEditMember,
-  INamespaceRemoveMember,
-} from "@/interfaces/INamespace";
+import { INamespaceEdit, INamespaceEditMember, INamespaceRemoveMember } from "@/interfaces/INamespace";
 import { namespacesApi } from "@/api/http";
 
 export const createNamespace = async (name: string) => namespacesApi.createNamespace({ name });
@@ -25,16 +19,6 @@ export const editNamespace = async (data: INamespaceEdit) => namespacesApi.editN
   },
 });
 
-export const sendNamespaceLink = async (data: INamespaceAddMember) => namespacesApi.addNamespaceMember(data.tenant_id, {
-  email: data.email,
-  role: data.role,
-});
-
-export const generateNamespaceLink = async (data: INamespaceAddMember) => namespacesApi.generateInvitationLink(data.tenant_id, {
-  email: data.email,
-  role: data.role,
-});
-
 export const updateNamespaceMember = async (data: INamespaceEditMember) => namespacesApi.updateNamespaceMember(
   data.tenant_id,
   data.user_id,
@@ -48,8 +32,6 @@ export const removeUserFromNamespace = async (data: INamespaceRemoveMember) => n
 
 export const switchNamespace = async (tenantId: string) => namespacesApi.getNamespaceToken(tenantId);
 
-export const acceptNamespaceInvite = async (data: INamespaceAcceptInvite) => namespacesApi.acceptInvite(data.tenant, { sig: data.sig });
-
 export const getSupportID = async (tenant: string) => namespacesApi.getNamespaceSupport(tenant);
 
 export const lookupUserStatus = async (

ui/src/store/modules/invitations.ts

@@ -0,0 +1,60 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { IInvitation, IInviteMemberPayload } from "@/interfaces/IInvitation";
+import * as invitationsApi from "../api/invitations";
+
+const useInvitationsStore = defineStore("invitations", () => {
+  const pendingInvitations = ref<IInvitation[]>([]);
+  const namespaceInvitations = ref<IInvitation[]>([]);
+
+  const pendingInvitesFilter = JSON.stringify([{ type: "property", params: { name: "status", operator: "eq", value: "pending" } }]);
+  const encodedFilter = Buffer.from(pendingInvitesFilter).toString("base64");
+
+  const fetchUserPendingInvitationList = async (perPage: number) => {
+    const res = await invitationsApi.fetchUserPendingInvitations({
+      filter: encodedFilter,
+      page: 1,
+      perPage,
+    });
+    pendingInvitations.value = res.data as IInvitation[];
+  };
+
+  const fetchNamespaceInvitationList = async (tenantId: string, page: number, perPage: number) => {
+    const res = await invitationsApi.fetchNamespaceInvitations(tenantId, {
+      filter: undefined,
+      page,
+      perPage,
+    });
+    namespaceInvitations.value = res.data as IInvitation[];
+  };
+
+  const acceptInvitation = async (tenant: string) => {
+    await invitationsApi.acceptNamespaceInvitation(tenant);
+  };
+
+  const declineInvitation = async (tenant: string) => {
+    await invitationsApi.declineNamespaceInvitation(tenant);
+  };
+
+  const sendInvitationEmail = async (data: IInviteMemberPayload) => {
+    await invitationsApi.sendNamespaceInvitationEmail(data);
+  };
+
+  const generateInvitationLink = async (data: IInviteMemberPayload) => {
+    const response = await invitationsApi.generateNamespaceInvitationLink(data);
+    return response.data.link as string;
+  };
+
+  return {
+    pendingInvitations,
+    namespaceInvitations,
+    fetchUserPendingInvitationList,
+    fetchNamespaceInvitationList,
+    acceptInvitation,
+    declineInvitation,
+    sendInvitationEmail,
+    generateInvitationLink,
+  };
+});
+
+export default useInvitationsStore;

ui/src/store/modules/namespaces.ts

@@ -3,8 +3,6 @@ import { ref } from "vue";
 import * as namespacesApi from "../api/namespaces";
 import {
   INamespace,
-  INamespaceAcceptInvite,
-  INamespaceAddMember,
   INamespaceEdit,
   INamespaceEditMember,
   INamespaceRemoveMember,
@@ -52,15 +50,6 @@ const useNamespacesStore = defineStore("namespaces", () => {
     }
   };
 
-  const sendEmailInvitation = async (data: INamespaceAddMember) => {
-    await namespacesApi.sendNamespaceLink(data);
-  };
-
-  const generateInvitationLink = async (data: INamespaceAddMember) => {
-    const res = await namespacesApi.generateNamespaceLink(data);
-    return res.data.link as string;
-  };
-
   const updateNamespaceMember = async (data: INamespaceEditMember) => {
     await namespacesApi.updateNamespaceMember(data);
   };
@@ -69,10 +58,6 @@ const useNamespacesStore = defineStore("namespaces", () => {
     await namespacesApi.removeUserFromNamespace(data);
   };
 
-  const acceptInvite = async (data: INamespaceAcceptInvite) => {
-    await namespacesApi.acceptNamespaceInvite(data);
-  };
-
   const lookupUserStatus = async (data: { tenant: string; id: string; sig: string; }) => {
     const res = await namespacesApi.lookupUserStatus(data);
     userStatus.value = res.data.status;
@@ -106,11 +91,8 @@ const useNamespacesStore = defineStore("namespaces", () => {
     editNamespace,
     deleteNamespace,
     leaveNamespace,
-    sendEmailInvitation,
-    generateInvitationLink,
     updateNamespaceMember,
     removeMemberFromNamespace,
-    acceptInvite,
     lookupUserStatus,
     switchNamespace,
     reset,

ui/src/views/NamespaceInviteCard.vue

@@ -25,18 +25,17 @@
       color="error"
       data-test="decline-btn"
       :text="isUserValid ? 'Decline Invitation' : 'Back to Home Page'"
-      @click="close()"
+      @click="declineInvite()"
     />
     <v-spacer data-test="spacer" />
     <v-btn
       variant="text"
       color="primary"
       data-test="accept-btn"
+      text="Accept Invitation"
       :disabled="!isUserValid"
       @click="acceptInvite()"
-    >
-      Accept Invitation
-    </v-btn>
+    />
   </v-card-actions>
 </template>
 
@@ -45,10 +44,10 @@ import { computed, onMounted, ref } from "vue";
 import axios from "axios";
 import { useRouter, useRoute } from "vue-router";
 import useAuthStore from "@/store/modules/auth";
-import useNamespacesStore from "@/store/modules/namespaces";
+import useInvitationsStore from "@/store/modules/invitations";
 
 const authStore = useAuthStore();
-const namespacesStore = useNamespacesStore();
+const invitationsStore = useInvitationsStore();
 const router = useRouter();
 const route = useRoute();
 
@@ -85,27 +84,37 @@ const handleInviteError = (error: unknown) => {
   }
 };
 
+const declineInvite = async () => {
+  try {
+    const tenant = (route.query["tenant-id"] || route.query.tenantid) as string;
+    const sig = route.query.sig as string;
+
+    await invitationsStore.declineInvitation({ tenant, sig });
+
+    await close();
+  } catch (error) {
+    handleInviteError(error);
+  }
+};
+
 const acceptInvite = async () => {
   try {
     const tenant = (route.query["tenant-id"] || route.query.tenantid) as string;
     const sig = route.query.sig as string;
 
-    await namespacesStore.acceptInvite({ tenant, sig });
+    await invitationsStore.acceptInvitation({ tenant, sig });
 
     message.value = "Your invitation has been successfully accepted! You are now a member of the namespace.";
 
     await authStore.enterInvitedNamespace(tenant);
-    await namespacesStore.fetchNamespaceList();
     await close();
   } catch (error) {
     handleInviteError(error);
   }
 };
 
 onMounted(() => {
-  if (isUserValid.value) {
-    return;
-  }
+  if (isUserValid.value) return;
   errorAlert.value = "You aren't logged in the account meant for this invitation.";
 });