From 8cdc5bd10789ff972f6988a6dd8344f7b2b36d94 Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Tue, 6 Jun 2023 18:30:29 +0000
Subject: [PATCH] web/satellite: add invites to all projects dashboard table

This change adds projects invites to the projects table.

Related: https://github.com/storj/storj/issues/5925

Change-Id: I82fbf1e47ea383377369005956a9eec3c8ac6416
---
 .../src/components/common/TableItem.vue       |   1 +
 web/satellite/src/types/projects.ts           |   8 +
 .../all-dashboard/components/MyProjects.vue   |   2 +-
 .../components/ProjectTableInvitationItem.vue | 209 ++++++++++++++++++
 .../components/ProjectTableItem.vue           |   3 +-
 .../components/ProjectsTable.vue              |  16 +-
 6 files changed, 235 insertions(+), 4 deletions(-)
 create mode 100644 web/satellite/src/views/all-dashboard/components/ProjectTableInvitationItem.vue

diff --git a/web/satellite/src/components/common/TableItem.vue b/web/satellite/src/components/common/TableItem.vue
index a138f8393..48f3f2fb2 100644
--- a/web/satellite/src/components/common/TableItem.vue
+++ b/web/satellite/src/components/common/TableItem.vue
@@ -28,6 +28,7 @@
                 <p v-else :class="{primary: index === 0}" :title="val" @click.stop="(e) => cellContentClicked(index, e)">
                     <middle-truncate v-if="keyVal === 'fileName'" :text="val" />
                     <project-ownership-tag v-else-if="keyVal === 'owner'" :no-icon="itemType !== 'project'" :is-owner="val" />
+                    <project-ownership-tag v-else-if="keyVal === 'invited'" :is-invited="val" />
                     <span v-else>{{ val }}</span>
                 </p>
                 <div v-if="showBucketGuide(index)" class="animation">
diff --git a/web/satellite/src/types/projects.ts b/web/satellite/src/types/projects.ts
index 3d4f570a3..74f3a6a18 100644
--- a/web/satellite/src/types/projects.ts
+++ b/web/satellite/src/types/projects.ts
@@ -248,6 +248,14 @@ export class ProjectInvitation {
         public inviterEmail: string,
         public createdAt: Date,
     ) {}
+
+    /**
+     * Returns created date as a local string.
+     */
+    public get invitedDate(): string {
+        const createdAt = new Date(this.createdAt);
+        return createdAt.toLocaleString('en-US', { year: 'numeric', month: '2-digit', day: 'numeric' });
+    }
 }
 
 /**
diff --git a/web/satellite/src/views/all-dashboard/components/MyProjects.vue b/web/satellite/src/views/all-dashboard/components/MyProjects.vue
index 640b8bbb5..3af3ea520 100644
--- a/web/satellite/src/views/all-dashboard/components/MyProjects.vue
+++ b/web/satellite/src/views/all-dashboard/components/MyProjects.vue
@@ -32,7 +32,7 @@
             </span>
         </div>
         <div v-if="projects.length || invites.length" class="my-projects__list">
-            <projects-table v-if="isTableViewSelected" class="my-projects__list__table" />
+            <projects-table v-if="isTableViewSelected" :invites="invites" class="my-projects__list__table" />
             <div v-else-if="!isTableViewSelected" class="my-projects__list__cards">
                 <project-item v-for="project in projects" :key="project.id" :project="project" />
                 <project-invitation-item v-for="invite in invites" :key="invite.projectID" :invitation="invite" />
diff --git a/web/satellite/src/views/all-dashboard/components/ProjectTableInvitationItem.vue b/web/satellite/src/views/all-dashboard/components/ProjectTableInvitationItem.vue
new file mode 100644
index 000000000..b43086744
--- /dev/null
+++ b/web/satellite/src/views/all-dashboard/components/ProjectTableInvitationItem.vue
@@ -0,0 +1,209 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <table-item
+        item-type="project"
+        :item="itemToRender"
+        class="invitation-item"
+    >
+        <template #options>
+            <th class="options overflow-visible">
+                <v-button
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                    :on-press="onJoinClicked"
+                    border-radius="8px"
+                    font-size="12px"
+                    label="Join Project"
+                    class="invitation-item__menu__button"
+                />
+                <div class="invitation-item__menu">
+                    <div class="invitation-item__menu__icon" @click.stop="toggleDropDown">
+                        <div class="invitation-item__menu__icon__content" :class="{open: isDropdownOpen}">
+                            <menu-icon />
+                        </div>
+                    </div>
+
+                    <div v-if="isDropdownOpen" v-click-outside="closeDropDown" class="invitation-item__menu__dropdown">
+                        <div class="invitation-item__menu__dropdown__item" @click.stop="onDeclineClicked">
+                            <logout-icon />
+                            <p class="invitation-item__menu__dropdown__item__label">Decline invite</p>
+                        </div>
+                    </div>
+                </div>
+            </th>
+        </template>
+        <menu-icon />
+    </table-item>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { ProjectInvitation, ProjectInvitationResponse } from '@/types/projects';
+import { useNotify } from '@/utils/hooks';
+import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { MODALS } from '@/utils/constants/appStatePopUps';
+import { useAppStore } from '@/store/modules/appStore';
+import { useProjectsStore } from '@/store/modules/projectsStore';
+import { useResize } from '@/composables/resize';
+import { AnalyticsHttpApi } from '@/api/analytics';
+
+import VButton from '@/components/common/VButton.vue';
+import TableItem from '@/components/common/TableItem.vue';
+
+import MenuIcon from '@/../static/images/common/horizontalDots.svg';
+import LogoutIcon from '@/../static/images/navigation/logout.svg';
+
+const appStore = useAppStore();
+const projectsStore = useProjectsStore();
+const notify = useNotify();
+
+const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
+
+const isLoading = ref<boolean>(false);
+
+const props = defineProps<{
+    invitation: ProjectInvitation,
+}>();
+
+const { isMobile } = useResize();
+
+const itemToRender = computed((): { [key: string]: unknown | string[] } => {
+    if (!isMobile.value) {
+        return {
+            multi: { title: props.invitation.projectName, subtitle: props.invitation.projectDescription },
+            date: props.invitation.invitedDate,
+            memberCount: '',
+            invited: true,
+        };
+    }
+
+    return { info: [ props.invitation.projectName, `Created ${props.invitation.invitedDate}` ] };
+});
+
+/**
+ * isDropdownOpen if dropdown is open.
+ */
+const isDropdownOpen = computed((): boolean => {
+    return appStore.state.activeDropdown === props.invitation.projectID;
+});
+
+/**
+ * Displays the Join Project modal.
+ */
+function onJoinClicked(): void {
+    projectsStore.selectInvitation(props.invitation);
+    appStore.updateActiveModal(MODALS.joinProject);
+}
+
+/**
+ * Declines the project member invitation.
+ */
+async function onDeclineClicked(): Promise<void> {
+    if (isLoading.value) return;
+    isLoading.value = true;
+
+    try {
+        await projectsStore.respondToInvitation(props.invitation.projectID, ProjectInvitationResponse.Decline);
+        analytics.eventTriggered(AnalyticsEvent.PROJECT_INVITATION_DECLINED);
+    } catch (error) {
+        notify.error(`Failed to decline project invitation. ${error.message}`, AnalyticsErrorEventSource.PROJECT_INVITATION);
+    }
+
+    try {
+        await projectsStore.getUserInvitations();
+        await projectsStore.getProjects();
+    } catch (error) {
+        notify.error(`Failed to reload projects and invitations list. ${error.message}`, AnalyticsErrorEventSource.PROJECT_INVITATION);
+    }
+
+    isLoading.value = false;
+}
+
+function toggleDropDown() {
+    appStore.toggleActiveDropdown(props.invitation.projectID);
+}
+
+function closeDropDown() {
+    appStore.closeDropdowns();
+}
+
+</script>
+
+<style scoped lang="scss">
+.invitation-item {
+
+    .options {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        column-gap: 10px;
+        padding-right: 10px;
+    }
+
+    &__menu {
+        position: relative;
+        cursor: pointer;
+
+        &__button {
+            padding: 10px 16px;
+        }
+
+        &__icon {
+
+            &__content {
+                height: 32px;
+                width: 32px;
+                padding: 12px 5px;
+                border-radius: 5px;
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                &.open {
+                    background: var(--c-grey-3);
+                }
+            }
+        }
+
+        &__dropdown {
+            position: absolute;
+            top: 40px;
+            right: 0;
+            background: #fff;
+            box-shadow: 0 7px 20px rgb(0 0 0 / 15%);
+            border: 1px solid var(--c-grey-2);
+            border-radius: 8px;
+            z-index: 100;
+            overflow: hidden;
+
+            &__item {
+                display: flex;
+                align-items: center;
+                width: 200px;
+                padding: 15px;
+                color: var(--c-grey-6);
+                cursor: pointer;
+
+                &__label {
+                    font-family: 'font_regular', sans-serif;
+                    margin: 0 0 0 10px;
+                }
+
+                &:hover {
+                    font-family: 'font_medium', sans-serif;
+                    color: var(--c-blue-3);
+                    background-color: var(--c-grey-1);
+
+                    svg :deep(path) {
+                        fill: var(--c-blue-3);
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/web/satellite/src/views/all-dashboard/components/ProjectTableItem.vue b/web/satellite/src/views/all-dashboard/components/ProjectTableItem.vue
index 534c0bd14..fa363d4bb 100644
--- a/web/satellite/src/views/all-dashboard/components/ProjectTableItem.vue
+++ b/web/satellite/src/views/all-dashboard/components/ProjectTableItem.vue
@@ -206,7 +206,8 @@ async function goToProjectEdit(): Promise<void> {
             &__item {
                 display: flex;
                 align-items: center;
-                padding: 15px 25px;
+                width: 200px;
+                padding: 15px;
                 color: var(--c-grey-6);
                 cursor: pointer;
 
diff --git a/web/satellite/src/views/all-dashboard/components/ProjectsTable.vue b/web/satellite/src/views/all-dashboard/components/ProjectsTable.vue
index cc6f13c7e..aeb8c3947 100644
--- a/web/satellite/src/views/all-dashboard/components/ProjectsTable.vue
+++ b/web/satellite/src/views/all-dashboard/components/ProjectsTable.vue
@@ -3,7 +3,7 @@
 
 <template>
     <v-table
-        :total-items-count="projects.length"
+        :total-items-count="projects.length + invites?.length || 0"
         class="projects-table"
         items-label="projects"
     >
@@ -14,6 +14,11 @@
             <th class="sort-header-container__date-item align-left">Role</th>
         </template>
         <template #body>
+            <project-table-invitation-item
+                v-for="(invite, key) in invites"
+                :key="key"
+                :invitation="invite"
+            />
             <project-table-item
                 v-for="(project, key) in projects"
                 :key="key"
@@ -26,14 +31,21 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { Project } from '@/types/projects';
+import { Project, ProjectInvitation } from '@/types/projects';
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import ProjectTableItem from '@/views/all-dashboard/components/ProjectTableItem.vue';
+import ProjectTableInvitationItem from '@/views/all-dashboard/components/ProjectTableInvitationItem.vue';
 
 import VTable from '@/components/common/VTable.vue';
 
 const projectsStore = useProjectsStore();
 
+const props = withDefaults(defineProps<{
+  invites?: ProjectInvitation[],
+}>(), {
+    invites: () => [],
+});
+
 /**
  * Returns projects list from store.
  */