feat(ui): add new Invitations view, table and components

Author: luizhf42

ui/src/components/Team/Invitation/InvitationCancel.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <v-list-item
+      :disabled="!hasAuthorization"
+      data-test="invitation-cancel-btn"
+      @click="showDialog = true"
+    >
+      <div class="d-flex align-center ga-2">
+        <v-icon icon="mdi-close-circle" />
+        <v-list-item-title data-test="invitation-cancel-title">Cancel</v-list-item-title>
+      </div>
+    </v-list-item>
+
+    <MessageDialog
+      v-model="showDialog"
+      title="Cancel Invitation"
+      :description="`Are you sure you want to cancel the invitation for ${invitation.user.email}?`"
+      icon="mdi-alert"
+      icon-color="error"
+      confirm-text="Cancel Invitation"
+      confirm-color="error"
+      :confirm-loading="isLoading"
+      cancel-text="Close"
+      confirm-data-test="cancel-invitation-btn"
+      cancel-data-test="close-btn"
+      data-test="invitation-cancel-dialog"
+      @close="close"
+      @confirm="cancelInvitation"
+      @cancel="close"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import axios from "axios";
+import MessageDialog from "@/components/Dialogs/MessageDialog.vue";
+import { IInvitation } from "@/interfaces/IInvitation";
+import handleError from "@/utils/handleError";
+import useSnackbar from "@/helpers/snackbar";
+import useInvitationsStore from "@/store/modules/invitations";
+
+const { invitation, hasAuthorization } = defineProps<{
+  invitation: IInvitation;
+  hasAuthorization: boolean;
+}>();
+
+const emit = defineEmits(["update"]);
+const invitationsStore = useInvitationsStore();
+const snackbar = useSnackbar();
+const showDialog = ref(false);
+const isLoading = ref(false);
+
+const close = () => { showDialog.value = false; };
+
+const update = () => {
+  emit("update");
+  close();
+};
+
+const handleCancelInvitationError = (error: unknown) => {
+  if (axios.isAxiosError(error)) {
+    const status = error.response?.status;
+    switch (status) {
+      case 400:
+        snackbar.showError("Invalid invitation.");
+        break;
+      case 403:
+        snackbar.showError("You don't have permission to cancel invitations.");
+        break;
+      case 404:
+        snackbar.showError("Invitation not found.");
+        break;
+      default:
+        snackbar.showError("Failed to cancel invitation.");
+    }
+  } else {
+    snackbar.showError("Failed to cancel invitation.");
+  }
+
+  handleError(error);
+};
+
+const cancelInvitation = async () => {
+  isLoading.value = true;
+  try {
+    await invitationsStore.cancelInvitation({
+      tenant: invitation.namespace.tenant_id,
+      user_id: invitation.user.id,
+    });
+
+    snackbar.showSuccess("Successfully cancelled invitation.");
+    update();
+  } catch (error: unknown) {
+    handleCancelInvitationError(error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>

ui/src/components/Team/Invitation/InvitationEdit.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <v-list-item
+      :disabled="!hasAuthorization"
+      data-test="invitation-edit-btn"
+      @click="showDialog = true"
+    >
+      <div class="d-flex align-center ga-2">
+        <v-icon icon="mdi-pencil" />
+        <v-list-item-title data-test="invitation-edit-title">Edit Role</v-list-item-title>
+      </div>
+    </v-list-item>
+
+    <FormDialog
+      v-model="showDialog"
+      title="Update invitation role"
+      icon="mdi-account-edit"
+      confirm-text="Update"
+      :confirm-loading="isLoading"
+      cancel-text="Cancel"
+      confirm-data-test="update-btn"
+      cancel-data-test="cancel-btn"
+      data-test="invitation-edit-dialog"
+      @close="close"
+      @confirm="editInvitation"
+      @cancel="close"
+    >
+      <v-card-text class="pa-6">
+        <RoleSelect v-model="newRole" />
+      </v-card-text>
+    </FormDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import axios from "axios";
+import FormDialog from "@/components/Dialogs/FormDialog.vue";
+import { IInvitation } from "@/interfaces/IInvitation";
+import handleError from "@/utils/handleError";
+import useSnackbar from "@/helpers/snackbar";
+import RoleSelect from "@/components/Team/RoleSelect.vue";
+import useInvitationsStore from "@/store/modules/invitations";
+
+const { invitation, hasAuthorization } = defineProps<{
+  invitation: IInvitation;
+  hasAuthorization: boolean;
+}>();
+
+const emit = defineEmits(["update"]);
+const invitationsStore = useInvitationsStore();
+const snackbar = useSnackbar();
+const showDialog = ref(false);
+const isLoading = ref(false);
+const newRole = ref(invitation.role);
+
+const close = () => {
+  showDialog.value = false;
+  newRole.value = invitation.role;
+};
+
+const update = () => {
+  emit("update");
+  close();
+};
+
+const handleEditInvitationError = (error: unknown) => {
+  if (axios.isAxiosError(error)) {
+    const status = error.response?.status;
+    switch (status) {
+      case 400:
+        snackbar.showError("Invalid invitation or role.");
+        break;
+      case 403:
+        snackbar.showError("You don't have permission to edit invitations.");
+        break;
+      case 404:
+        snackbar.showError("Invitation not found.");
+        break;
+      default:
+        snackbar.showError("Failed to update invitation role.");
+    }
+  } else {
+    snackbar.showError("Failed to update invitation role.");
+  }
+
+  handleError(error);
+};
+
+const editInvitation = async () => {
+  isLoading.value = true;
+  try {
+    await invitationsStore.editInvitation({
+      tenant: invitation.namespace.tenant_id,
+      user_id: invitation.user.id,
+      role: newRole.value,
+    });
+
+    snackbar.showSuccess("Successfully updated invitation role.");
+    update();
+  } catch (error: unknown) {
+    handleEditInvitationError(error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>