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
This commit is contained in:
parent
cf5ff537e3
commit
09311b22ca
@ -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';
|
||||
|
@ -2,41 +2,24 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div v-if="project" class="tag" :class="{member: !isOwner}">
|
||||
<box-icon class="tag__icon" />
|
||||
<div class="tag" :class="{member: !isOwner}">
|
||||
<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 = defineProps<{
|
||||
project?: Project,
|
||||
}>();
|
||||
|
||||
/**
|
||||
* Returns user entity from store.
|
||||
*/
|
||||
const user = computed((): User => {
|
||||
return usersStore.state.user;
|
||||
const props = withDefaults(defineProps<{
|
||||
isOwner: boolean,
|
||||
noIcon?: boolean,
|
||||
}>(), {
|
||||
isOwner: false,
|
||||
noIcon: false,
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns projects list from store.
|
||||
*/
|
||||
const isOwner = computed((): boolean => {
|
||||
return props.project?.ownerId === user.value.id;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
@ -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.
|
||||
*/
|
||||
|
@ -35,25 +35,18 @@ const isProjectOwner = computed((): boolean => {
|
||||
return props.itemData.user.id === projectsStore.state.selectedProject.ownerId;
|
||||
});
|
||||
|
||||
const itemToRender = computed((): { [key: string]: string | string[] } => {
|
||||
if (!isMobile.value && !isTablet.value) return { name: props.itemData.name, date: props.itemData.localDate(), email: props.itemData.email };
|
||||
const itemToRender = computed((): { [key: string]: unknown | string[] } => {
|
||||
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;
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user