web/satellite: add role column to project members table

A "Role" column has been added to the project members table to indicate
the roles of the members in the project.

Issue: https://github.com/storj/storj/issues/5743

Change-Id: I991b01e3d2cd792c21bd661feb7a225300d9a86b

web/satellite/src/components/common/TableItem.vue

@@ -11,7 +11,7 @@
             <v-table-checkbox v-if="!selectHidden" :disabled="selectDisabled || selectHidden" :value="selected" @selectClicked="selectClicked" />
         </th>
         <th
-            v-for="(val, _, index) in item" :key="index" class="align-left data"
+            v-for="(val, keyVal, index) in item" :key="index" class="align-left data"
             :class="{'overflow-visible': showBucketGuide(index)}"
         >
             <div v-if="Array.isArray(val)" class="few-items">
@@ -21,8 +21,9 @@
                 <div v-if="icon && index === 0" class="item-icon file-background">
                     <component :is="icon" />
                 </div>
-                <p :class="{primary: index === 0}" :title="val" @click.stop="(e) => cellContentClicked(index, e)">
+                <p :class="{primary: ((!icon && index === 0) || (icon && index === 1))}" :title="val" @click.stop="(e) => cellContentClicked(index, e)">
                     <middle-truncate v-if="(itemType?.toLowerCase() === 'file')" :text="val" />
+                    <project-ownership-tag v-else-if="keyVal === 'owner'" no-icon :is-owner="val" />
                     <span v-else>{{ val }}</span>
                 </p>
                 <div v-if="showBucketGuide(index)" class="animation">
@@ -41,6 +42,7 @@ import { computed, Component } from 'vue';
 import VTableCheckbox from '@/components/common/VTableCheckbox.vue';
 import BucketGuide from '@/components/objects/BucketGuide.vue';
 import MiddleTruncate from '@/components/browser/MiddleTruncate.vue';
+import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
 
 import TableLockedIcon from '@/../static/images/browser/tableLocked.svg';
 import ColorFolderIcon from '@/../static/images/objects/colorFolder.svg';

web/satellite/src/components/project/ProjectOwnershipTag.vue

@@ -2,41 +2,24 @@
 // See LICENSE for copying information.
 
 <template>
-    <div v-if="project" class="tag" :class="{member: !isOwner}">
+    <div class="tag" :class="{member: !isOwner}">
-        <box-icon class="tag__icon" />
+        <box-icon v-if="!noIcon" class="tag__icon" />
 
         <span class="tag__text"> {{ isOwner ? 'Owner': 'Member' }} </span>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
-import { Project } from '@/types/projects';
-import { User } from '@/types/users';
-import { useUsersStore } from '@/store/modules/usersStore';
-
 import BoxIcon from '@/../static/images/allDashboard/box.svg';
 
-const usersStore = useUsersStore();
+const props = withDefaults(defineProps<{
-
+    isOwner: boolean,
-const props = defineProps<{
+    noIcon?: boolean,
-  project?: Project,
+}>(), {
-}>();
+    isOwner: false,
-
+    noIcon: false,
-/**
- * Returns user entity from store.
- */
-const user = computed((): User => {
-    return usersStore.state.user;
 });
 
-/**
- * Returns projects list from store.
- */
-const isOwner = computed((): boolean => {
-    return props.project?.ownerId === user.value.id;
-});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/components/project/dashboard/ProjectDashboard.vue

@@ -5,7 +5,7 @@
     <div class="project-dashboard">
         <div class="project-dashboard__heading">
             <h1 class="project-dashboard__heading__title" aria-roledescription="title">{{ selectedProject.name }}</h1>
-            <project-ownership-tag :project="selectedProject" />
+            <project-ownership-tag :is-owner="selectedProject.ownerId === user.id" />
         </div>
 
         <p class="project-dashboard__message">
@@ -191,6 +191,7 @@ import { useConfigStore } from '@/store/modules/configStore';
 import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
 import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
 import { centsToDollars } from '@/utils/strings';
+import { User } from '@/types/users';
 
 import VLoader from '@/components/common/VLoader.vue';
 import InfoContainer from '@/components/project/dashboard/InfoContainer.vue';
@@ -328,6 +329,13 @@ const bucketWasCreated = computed((): boolean => {
     return false;
 });
 
+/**
+ * Returns user entity from store.
+ */
+const user = computed((): User => {
+    return usersStore.state.user;
+});
+
 /**
  * Get selected project from store.
  */

web/satellite/src/components/team/ProjectMemberListItem.vue

@@ -35,25 +35,18 @@ const isProjectOwner = computed((): boolean => {
     return props.itemData.user.id === projectsStore.state.selectedProject.ownerId;
 });
 
-const itemToRender = computed((): { [key: string]: string | string[] } => {
+const itemToRender = computed((): { [key: string]: unknown | string[] } => {
-    if (!isMobile.value && !isTablet.value) return { name: props.itemData.name, date: props.itemData.localDate(), email: props.itemData.email };
+    if (!isMobile.value && !isTablet.value) return { name: props.itemData.name, email: props.itemData.email, owner: isProjectOwner.value, date: props.itemData.localDate() };
 
+    if (isTablet.value) {
+        return { name: props.itemData.name, email: props.itemData.email, owner: isProjectOwner.value };
+    }
     // TODO: change after adding actions button to list item
     return { name: props.itemData.name, email: props.itemData.email };
 });
 </script>
 
 <style scoped lang="scss">
-    .owner {
-        cursor: not-allowed;
-
-        & > :deep(th:nth-child(2):after) {
-            content: 'Project Owner';
-            font-size: 13px;
-            color: #afb7c1;
-        }
-    }
-
     :deep(.primary) {
         overflow: hidden;
         white-space: nowrap;

web/satellite/src/components/team/ProjectMembersArea.vue

@@ -29,8 +29,9 @@
         >
             <template #head>
                 <th class="align-left">Name</th>
-                <th class="align-left date-added">Date Added</th>
                 <th class="align-left">Email</th>
+                <th class="align-left">Role</th>
+                <th class="align-left date-added">Date Added</th>
             </template>
             <template #body>
                 <ProjectMemberListItem

web/satellite/src/views/all-dashboard/components/ProjectItem.vue

@@ -4,7 +4,7 @@
 <template>
     <div v-if="project.id" class="project-item">
         <div class="project-item__header">
-            <project-ownership-tag :project="project" />
+            <project-ownership-tag :is-owner="isOwner" />
 
             <a
                 v-click-outside="closeDropDown" href="" class="project-item__header__menu"
@@ -101,7 +101,7 @@ const user = computed((): User => {
 });
 
 /**
- * Returns projects list from store.
+ * Returns if the current user is the owner of this project.
  */
 const isOwner = computed((): boolean => {
     return props.project.ownerId === user.value.id;