JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: Project members web client refactoring. (#2783)

Browse Source
This commit is contained in:
Bogdan Artemenko 2019-08-19 14:20:38 +03:00 committed by GitHub
parent 6400d63a6c
commit b77f582b29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
46 changed files with 1340 additions and 1250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
web/satellite/src/api/projectMembers.ts
View File

@ -3,8 +3,7 @@
import apollo from '@/utils/apolloManager';
import gql from 'graphql-tag';
import { ProjectMemberSortByEnum } from '@/utils/constants/ProjectMemberSortEnum';
import { TeamMember } from '@/types/teamMembers';
import { ProjectMember, ProjectMemberCursor, ProjectMembersPage } from '@/types/projectMembers';
import { RequestResponse } from '@/types/response';
// Performs graqhQL request.
@ -80,38 +79,55 @@ export async function deleteProjectMembersRequest(projectId: string, emails: str
}
// Performs graqhQL request.
export async function fetchProjectMembersRequest(projectId: string, limit: number, offset: number, sortBy: ProjectMemberSortByEnum, searchQuery: string): Promise<RequestResponse<TeamMember[]>> {
let result: RequestResponse<TeamMember[]> = {
export async function fetchProjectMembersRequest(projectId: string, cursor: ProjectMemberCursor): Promise<RequestResponse<ProjectMembersPage>> {
let result: RequestResponse<ProjectMembersPage> = {
errorMessage: '',
isSuccess: false,
data: []
data: new ProjectMembersPage()
};
let response: any = await apollo.query(
{
query: gql(`
query($projectId: String!, $limit: Int!, $offset: Int!, $order: Int!, $search: String!) {
project(
query($projectId: String!, $limit: Int!, $search: String!, $page: Int!, $order: Int!, $orderDirection: Int!) {
project (
id: $projectId,
) {
members(limit: $limit, offset: $offset, order: $order, search: $search) {
user {
id,
fullName,
shortName,
email
members (
cursor: {
limit: $limit,
search: $search,
page: $page,
order: $order,
orderDirection: $orderDirection
}
) {
projectMembers {
user {
id,
fullName,
shortName,
email
},
joinedAt
},
joinedAt
search,
limit,
order,
pageCount,
currentPage,
totalCount
}
}
}`
),
variables: {
projectId: projectId,
limit: limit,
offset: offset,
order: sortBy,
search: searchQuery
limit: cursor.limit,
search: cursor.search,
page: cursor.page,
order: cursor.order,
orderDirection: cursor.orderDirection,
},
fetchPolicy: 'no-cache',
errorPolicy: 'all',
@ -128,10 +144,21 @@ export async function fetchProjectMembersRequest(projectId: string, limit: numbe
return result;
}
function getProjectMembersList(projectMembers: any[]): TeamMember[] {
function getProjectMembersList(projectMembers: any): ProjectMembersPage {
if (!projectMembers) {
return [];
return new ProjectMembersPage();
}
return projectMembers.map(key => new TeamMember(key.user.fullName, key.user.shortName, key.user.email, '', key.user.id));
const projectMembersPage: ProjectMembersPage = new ProjectMembersPage();
projectMembersPage.projectMembers = projectMembers.projectMembers.map(key => new ProjectMember(key.user.fullName, key.user.shortName, key.user.email, key.joinedAt, key.user.id));
projectMembersPage.search = projectMembers.search;
projectMembersPage.limit = projectMembers.limit;
projectMembersPage.order = projectMembers.order;
projectMembersPage.orderDirection = projectMembers.orderDirection;
projectMembersPage.pageCount = projectMembers.pageCount;
projectMembersPage.currentPage = projectMembers.currentPage;
projectMembersPage.totalCount = projectMembers.totalCount;
return projectMembersPage;
}

2
web/satellite/src/components/buckets/BucketArea.vue
View File

@ -31,7 +31,7 @@
import NoBucketArea from '@/components/buckets/NoBucketsArea.vue';
import HeaderComponent from '@/components/common/HeaderComponent.vue';
import Pagination from '@/components/common/Pagination.vue';
import List from "@/components/common/List.vue";
import List from '@/components/common/List.vue';
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
import { BUCKET_USAGE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';

3
web/satellite/src/components/common/List.vue
View File

@ -9,8 +9,7 @@
:is="itemComponent"
:itemData="item"
@click.native="onItemClick(item)"
v-bind:class="[item.isSelected ? 'selected' : '']"
v-bind:key="item.id"/>
:class="{ selected: item.isSelected }"/>
</div>
</template>

15
web/satellite/src/components/common/Pagination.vue
View File

@ -18,7 +18,7 @@
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
import PagesBlock from '@/components/common/PagesBlock.vue';
import { Page } from '@/types/pagination';
@ -71,6 +71,11 @@
return page === this.currentPageNumber;
}
@Watch('totalPageCount')
public onPageCountChange(val: number, oldVal: number) {
this.resetPageIndex();
}
public async onPageClick(page: number): Promise<void> {
if (this.isLoading) {
return;
@ -107,6 +112,14 @@
this.isLoading = false;
}
public resetPageIndex(): void {
this.pagesArray = [];
this.firstBlockPages = [];
this.setCurrentPage(1);
this.populatePagesArray();
}
private populatePagesArray(): void {
if (!this.totalPageCount) {
return;

52
web/satellite/src/components/common/VerticalArrows.vue Normal file
View File

@ -0,0 +1,52 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="container">
<svg :class="{ active: isActive && isTop }"
width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"/>
</svg>
<svg :class="{ active: isActive && isBottom }"
width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"/>
</svg>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { SortingDirectionEnum } from '@/types/sortingArrows';
@Component
export default class VerticalArrows extends Vue {
@Prop({default: false})
private isActive: boolean;
@Prop({default: SortingDirectionEnum.BOTTOM})
private direction: SortingDirectionEnum;
public get isTop(): boolean {
return this.direction === SortingDirectionEnum.TOP;
}
public get isBottom(): boolean {
return this.direction === SortingDirectionEnum.BOTTOM;
}
}
</script>
<style scoped lang="scss">
.container {
display: flex;
flex-direction: column;
margin-left: 10px;
justify-content: space-between;
height: 17px;
}
.active {
path {
fill: #2683FF !important;
}
}
</style>

4
web/satellite/src/components/header/projectSelection/ProjectSelectionDropdown.vue
View File

@ -34,13 +34,15 @@
@Component
export default class ProjectSelectionDropdown extends Vue {
private FIRST_PAGE = 0;
public async onProjectSelected(projectID: string): Promise<void> {
this.$store.dispatch(PROJETS_ACTIONS.SELECT, projectID);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_PROJECTS);
this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
// TODO: add types
const pmResponse = await this.$store.dispatch(PM_ACTIONS.FETCH);
const pmResponse = await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
const keysResponse = await this.$store.dispatch(API_KEYS_ACTIONS.FETCH);
const usageResponse = await this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_CURRENT_ROLLUP);
const bucketsResponse = await this.$store.dispatch(BUCKET_USAGE_ACTIONS.FETCH, 1);

15
web/satellite/src/components/project/NewProjectPopup.vue
View File

@ -45,19 +45,20 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HeaderedInput from '@/components/common/HeaderedInput.vue';
import Checkbox from '@/components/common/Checkbox.vue';
import Button from '@/components/common/Button.vue';
import {
API_KEYS_ACTIONS,
APP_STATE_ACTIONS,
NOTIFICATION_ACTIONS, PROJECT_USAGE_ACTIONS,
NOTIFICATION_ACTIONS,
PROJECT_USAGE_ACTIONS,
PROJETS_ACTIONS,
BUCKET_USAGE_ACTIONS
BUCKET_USAGE_ACTIONS,
PM_ACTIONS
} from '@/utils/constants/actionNames';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { RequestResponse } from '@/types/response';
import Button from '@/components/common/Button.vue';
import Checkbox from '@/components/common/Checkbox.vue';
import { CreateProjectModel, Project } from '@/types/projects';
import HeaderedInput from '@/components/common/HeaderedInput.vue';
import { RequestResponse } from '@/types/response';
@Component({
components: {

2
web/satellite/src/components/team/AddUserPopup.vue
View File

@ -138,7 +138,7 @@
let result = await this.$store.dispatch(PM_ACTIONS.ADD, emailArray);
if (!result.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Error during adding team members!');
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Error during adding projectMembers members!');
this.isLoading = false;
return;

12
web/satellite/src/components/team/headerArea/HeaderArea.vue → web/satellite/src/components/team/HeaderArea.vue
View File

@ -28,10 +28,10 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Button from '@/components/common/Button.vue';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
import Button from '@/components/common/Button.vue';
import HeaderComponent from '@/components/common/HeaderComponent.vue';
import { TeamMember } from '@/types/teamMembers';
import { ProjectMember } from '@/types/projectMembers';
import { RequestResponse } from '@/types/response';
declare interface ClearSearch {
@ -50,6 +50,8 @@
@Prop({default: 0})
private readonly selectedProjectMembers: number;
private FIRST_PAGE = 1;
private isDeleteClicked: boolean = false;
public $refs!: {
@ -80,14 +82,14 @@
}
public async onDelete(): Promise<void> {
const projectMemberEmails = this.$store.getters.selectedProjectMembers.map((member: TeamMember) => {
const projectMemberEmails = this.$store.getters.selectedProjectMembers.map((member: ProjectMember) => {
return member.user.email;
});
const response = await this.$store.dispatch(PM_ACTIONS.DELETE, projectMemberEmails);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Error while deleting users from team');
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Error while deleting users from projectMembers');
return;
}
@ -100,7 +102,7 @@
public async processSearchQuery(search: string) {
this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, search);
const response: RequestResponse<object> = await this.$store.dispatch(PM_ACTIONS.FETCH);
const response: RequestResponse<object> = await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project members');

135
web/satellite/src/components/team/ProjectMemberListItem.vue Normal file
View File

@ -0,0 +1,135 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="user-container">
<div class="user-container__base-info">
<div class="checkbox" >
</div>
<div class="user-container__base-info__avatar" :style="avatarData.style">
<h1>{{avatarData.letter}}</h1>
</div>
<p class="user-container__base-info__user-name">{{this.itemData.formattedFullName()}}</p>
</div>
<p class="user-container__date">{{this.itemData.joinedAtLocal()}}</p>
<p class="user-container__user-email">{{this.itemData.formattedEmail()}}</p>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { getColor } from '@/utils/avatarColorManager';
import { ProjectMember } from '@/types/projectMembers';
@Component
export default class ProjectMemberListItem extends Vue {
@Prop({default: new ProjectMember('', '', '', '', '')})
public itemData: ProjectMember;
public get avatarData(): object {
let fullName: string = this.itemData.user.getFullName();
const letter = fullName.slice(0, 1).toLocaleUpperCase();
const style = {
background: getColor(letter)
};
return {
letter,
style
};
}
}
</script>
<style scoped lang="scss">
.user-container {
margin-top: 2px;
display: flex;
flex-direction: row;
align-items: center;
padding-left: 28px;
height: 83px;
background-color: #fff;
cursor: pointer;
width: calc(100% - 28px);
&__base-info {
width: 50%;
display: flex;
align-items: center;
justify-content: flex-start;
&__avatar {
min-width: 40px;
max-width: 40px;
min-height: 40px;
max-height: 40px;
margin-left: 20px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
background-color: #FF8658;
h1 {
font-size: 16px;
font-family: 'font_regular';
color: #F5F6FA;
}
}
&__user-name {
width: 100%;
margin-left: 20px;
font-size: 16px;
font-family: 'font_bold';
color: #354049;
}
}
&__date {
width: 25%;
font-family: 'font_regular';
font-size: 16px;
color: #354049;
}
&__user-email {
width: 25%;
font-family: 'font_regular';
font-size: 16px;
color: #354049;
}
}
.checkbox {
background-image: url("../../../static/images/team/checkboxEmpty.svg");
min-width: 23px;
height: 23px;
}
.user-container.selected {
box-shadow: 0px 12px 24px rgba(38, 131, 255, 0.4);
background-color: #2683FF;
.checkbox {
min-width: 23px;
height: 23px;
background-image: url("../../../static/images/team/checkboxChecked.svg");
}
h1 {
font-size: 16px;
font-family: 'font_regular';
color: #FFFFFF;
}
p {
color: #FFFFFF;
}
}
</style>

150
web/satellite/src/components/team/TeamArea.vue → web/satellite/src/components/team/ProjectMembersArea.vue
View File

@ -6,20 +6,23 @@
<div class="team-header">
<HeaderArea :headerState="headerState" :selectedProjectMembers="selectedProjectMembers.length"/>
</div>
<div id="scrollable_team_container" v-if="projectMembers.length > 0 || projectMembersCount > 0" v-on:scroll="onScroll" class="team-container">
<div id="team_container" v-if="projectMembersCount > 0 || projectMembersTotalCount > 0" class="team-container">
<div class="team-container__content">
<div v-for="member in projectMembers" v-on:click="onMemberClick(member)" v-bind:key="member.id">
<TeamMemberItem
:projectMember = "member"
v-bind:class = "[member.isSelected ? 'selected' : '']" />
</div>
</div>
<!-- only when selecting team members -->
<div v-if="selectedProjectMembers.length > 0" >
<Footer/>
<SortingListHeader
class="team-container__content__sort-header-container"
:onHeaderClickCallback="onHeaderSectionClickCallback"/>
<List
:dataSet="projectMembers"
:itemComponent="getItemComponent"
:onItemClick="onMemberClick"/>
</div>
<Pagination
class="pagination-area"
ref="pagination"
:totalPageCount="totalPageCount"
:onPageClickCallback="onPageClick"/>
</div>
<div class="empty-search-result-area" v-if="(projectMembers.length === 0 && projectMembersCount === 0)">
<div class="empty-search-result-area" v-if="(projectMembersCount === 0 && projectMembersTotalCount === 0)">
<h1 class="empty-search-result-area__text">No results found</h1>
<svg width="380" height="295" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"/>
@ -57,12 +60,15 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TeamMemberItem from '@/components/team/TeamMemberItem.vue';
import HeaderArea from '@/components/team/headerArea/HeaderArea.vue';
import Footer from '@/components/team/footerArea/Footer.vue';
import HeaderArea from '@/components/team/HeaderArea.vue';
import List from '@/components/common/List.vue';
import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
import { TeamMember } from '@/types/teamMembers';
import Pagination from '@/components/common/Pagination.vue';
import { ProjectMember, ProjectMemberOrderBy, ProjectMembersPage } from '@/types/projectMembers';
import ProjectMemberListItem from '@/components/team/ProjectMemberListItem.vue';
import { RequestResponse } from '@/types/response';
import { SortDirection } from '@/types/common';
import SortingListHeader from '@/components/team/SortingListHeader.vue';
enum HeaderState {
DEFAULT = 0,
@ -71,53 +77,48 @@
@Component({
components: {
TeamMemberItem,
HeaderArea,
Footer,
List,
Pagination,
SortingListHeader,
}
})
export default class TeamArea extends Vue {
private isFetchInProgress: boolean = false;
export default class ProjectMembersArea extends Vue {
private FIRST_PAGE = 1;
public mounted(): void {
this.$store.dispatch(PM_ACTIONS.FETCH);
this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
}
public onMemberClick(member: any): void {
public onMemberClick(member: ProjectMember): void {
this.$store.dispatch(PM_ACTIONS.TOGGLE_SELECTION, member.user.id);
}
public async onScroll(): Promise<void> {
// TODO: cache team container
const teamContainer = document.getElementById('scrollable_team_container');
if (!teamContainer) {
return;
}
const isAtBottom = teamContainer.scrollTop + teamContainer.clientHeight === teamContainer.scrollHeight;
if (!isAtBottom || this.isFetchInProgress) return;
this.isFetchInProgress = true;
const response: RequestResponse<object> = await this.$store.dispatch(PM_ACTIONS.FETCH);
this.isFetchInProgress = false;
if (response.isSuccess) return;
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project members');
public get projectMembers(): ProjectMember[] {
return this.$store.state.projectMembersModule.page.projectMembers;
}
public get projectMembers(): TeamMember[] {
return this.$store.getters.projectMembers;
public get getItemComponent() {
return ProjectMemberListItem;
}
public get projectMembersTotalCount(): number {
return this.$store.state.projectMembersModule.page.totalCount;
}
public get projectMembersCount(): number {
return this.$store.getters.projectMembersCount;
return this.$store.state.projectMembersModule.page.projectMembers.length;
}
public get selectedProjectMembers(): TeamMember[] {
public get totalPageCount(): number {
return this.$store.state.projectMembersModule.page.pageCount;
}
public get pageIndex(): number {
return this.$store.state.projectMembersModule.page.currentPage;
}
public get selectedProjectMembers(): ProjectMember[] {
return this.$store.getters.selectedProjectMembers;
}
@ -128,6 +129,20 @@
return HeaderState.DEFAULT;
}
public async onPageClick(index: number):Promise<void> {
await this.$store.dispatch(PM_ACTIONS.FETCH, index);
}
public async onHeaderSectionClickCallback(sortBy: ProjectMemberOrderBy, sortDirection: SortDirection): Promise<any> {
this.$store.dispatch(PM_ACTIONS.SET_SORT_BY, sortBy);
this.$store.dispatch(PM_ACTIONS.SET_SORT_DIRECTION, sortDirection);
const response: RequestResponse<ProjectMembersPage> = await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project members');
}
(this.$refs.pagination as Pagination).resetPageIndex();
}
}
</script>
@ -142,33 +157,34 @@
max-width: 78.7%;
width: 100%;
background-color: #F5F6FA;
z-index: 999;
z-index: 1;
top: auto;
}
.team-container {
padding: 0px 30px 55px 64px;
overflow-y: scroll;
max-height: 84vh;
height: 84vh;
position: relative;
&__content {
display: grid;
grid-template-columns: 230px 230px 230px 230px 230px 230px;
width: 100%;
grid-column-gap: 20px;
grid-row-gap: 20px;
display: flex;
justify-content: space-between;
margin-top: 185px;
margin-bottom: 100px;
/*margin-top: 225px;*/
margin-bottom: 20px;
flex-direction: column;
}
}
.user-container {
height: 160px;
.sort-header-container {
margin-top: 190px;
}
.pagination-area {
margin-left: -25px;
}
.empty-search-result-area {
height: 80vh;
display: flex;
@ -205,15 +221,11 @@
.team-header {
max-width: 75%;
}
.user-container {
height: 160px;
}
}
@media screen and (max-width: 1366px) {
.team-container {
&__content {
grid-template-columns: 210px 210px 210px 210px;
}
@ -222,10 +234,6 @@
.team-header {
max-width: 70.2%;
}
.user-container {
height: 160px;
}
}
@media screen and (max-width: 1120px) {
@ -239,9 +247,5 @@
.team-header {
max-width: 82.7%;
}
.user-container {
height: 150px;
}
}
</style>

124
web/satellite/src/components/team/SortingListHeader.vue Normal file
View File

@ -0,0 +1,124 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="sort-header-container">
<div class="sort-header-container__name-container" @click="onHeaderItemClick(ProjectMemberOrderBy.NAME)">
<p>Name</p>
<VerticalArrows
:isActive="getSortBy === ProjectMemberOrderBy.NAME"
:direction="getSortDirection"/>
</div>
<div class="sort-header-container__added-container" @click="onHeaderItemClick(ProjectMemberOrderBy.CREATED_AT)">
<p>Added</p>
<VerticalArrows
:isActive="getSortBy === ProjectMemberOrderBy.CREATED_AT"
:direction="getSortDirection"/>
</div>
<div class="sort-header-container__email-container" @click="onHeaderItemClick(ProjectMemberOrderBy.EMAIL)">
<p>Email</p>
<VerticalArrows
:isActive="getSortBy === ProjectMemberOrderBy.EMAIL"
:direction="getSortDirection"/>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { OnHeaderClickCallback, ProjectMemberOrderBy } from '@/types/projectMembers';
import { SortDirection } from '@/types/common';
import VerticalArrows from '@/components/common/VerticalArrows.vue';
@Component({
components: {
VerticalArrows,
},
})
export default class SortingListHeader extends Vue {
@Prop({default: () => { return new Promise(() => false); }})
private readonly onHeaderClickCallback: OnHeaderClickCallback;
public ProjectMemberOrderBy = ProjectMemberOrderBy;
public sortBy: ProjectMemberOrderBy = ProjectMemberOrderBy.NAME;
public sortDirection: SortDirection = SortDirection.ASCENDING;
public get getSortDirection() {
if (this.sortDirection === SortDirection.DESCENDING) {
return SortDirection.ASCENDING;
}
return SortDirection.DESCENDING;
}
public get getSortBy() {
return this.sortBy;
}
public async onHeaderItemClick(sortBy: ProjectMemberOrderBy): Promise<void> {
if (this.sortBy != sortBy) {
this.sortBy = sortBy;
this.sortDirection = SortDirection.ASCENDING;
await this.onHeaderClickCallback(this.sortBy, this.sortDirection);
return;
}
if (this.sortDirection === SortDirection.DESCENDING) {
this.sortDirection = SortDirection.ASCENDING;
} else {
this.sortDirection = SortDirection.DESCENDING;
}
await this.onHeaderClickCallback(this.sortBy, this.sortDirection);
}
}
</script>
<style scoped lang="scss">
.sort-header-container {
display: flex;
flex-direction: row;
height: 36px;
margin-top: 200px;
p {
font-family: 'font_medium';
font-size: 16px;
line-height: 23px;
color: #AFB7C1;
margin: 0;
}
&__name-container {
display: flex;
width: calc(50% - 30px);
cursor: pointer;
text-align: left;
margin-left: 30px;
align-items: center;
justify-content: flex-start;
}
&__added-container {
width: 25%;
cursor: pointer;
text-align: left;
margin-left: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
}
&__email-container {
width: 25%;
cursor: pointer;
text-align: left;
display: flex;
align-items: center;
justify-content: flex-start;
}
}
</style>

133
web/satellite/src/components/team/TeamMemberItem.vue
View File

@ -1,133 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="user-container">
<div class="user-container__avatar" :style="avatarData.style">
<h1>{{avatarData.letter}}</h1>
</div>
<p class="user-container__user-name">{{this.projectMember.formattedFullName()}}</p>
<p class="user-container__user-email">{{this.projectMember.formattedEmail()}}</p>
<p class="user-container__date">{{this.projectMember.joinedAtLocal()}}</p>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { getColor } from '@/utils/avatarColorManager';
import { TeamMember } from '../../types/teamMembers';
@Component
export default class TeamMemberItem extends Vue {
@Prop()
private projectMember: TeamMember;
// TODO: fix this method
public get avatarData(): object {
let fullName: string = this.projectMember.user.getFullName();
const letter = fullName.slice(0, 1).toLocaleUpperCase();
const style = {
background: getColor(letter)
};
return {
letter,
style
};
}
}
</script>
<style scoped lang="scss">
.user-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 6px;
height: 180px;
background-color: #fff;
padding: 30px 0;
cursor: pointer;
transition: box-shadow .2s ease-out;
&:hover {
box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);
}
&:last-child {
margin-left: 0;
}
&__date {
font-family: 'font_regular';
font-size: 12px;
line-height: 16px;
color: #AFB7C1;
margin-top: 10px;
margin-bottom: 0;
}
&__user-email {
font-family: 'font_regular';
font-size: 14px;
line-height: 19px;
color: #AFB7C1;
margin-top: 0;
margin-bottom: 15px;
}
&__user-name {
font-family: 'font_bold';
font-size: 14px;
line-height: 19px;
color: #354049;
margin-top: 20px;
}
&__avatar {
min-width: 40px;
max-width: 40px;
min-height: 40px;
max-height: 40px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
background-color: #FF8658;
h1 {
font-family: 'font_medium';
font-size: 16px;
line-height: 23px;
color: #fff;
}
}
}
.user-container.selected {
box-shadow: 0px 12px 24px rgba(38, 131, 255, 0.4);
background-color: #2683FF;
p {
&:nth-child(2) {
color: #fff;
}
&:nth-child(3) {
color: #fff;
}
&:nth-child(4) {
color: #fff;
}
&:nth-child(5) {
color: #fff;
}
}
}
</style>

124
web/satellite/src/components/team/footerArea/ApproveDeleteUserArea.vue
View File

@ -1,124 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div>
<div class="blur-wrap"></div>
<div class="delete-user-container" >
<div class="delete-user-container__text">
<img src="../../../../static/images/team/atten.svg" alt="">
<p>Are you sure you want to delete <span>1</span> user?</p>
</div>
<div class="delete-user-container__buttons-group">
<Button
class="delete-user-container__buttons-group__cancel"
label="Cancel"
width="140px"
height="48px"
:onPress="onCancelButtonClick"
isWhite="true" />
<Button
label="Delete"
width="140px"
height="48px"
:onPress="onDeleteButtonClick" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Button from '@/components/common/Button.vue';
@Component({
components: {
Button
}
})
export default class ApproveDeleteUserArea extends Vue {}
</script>
<style scoped lang="scss">
.delete-user-container {
height: 98px;
max-width: 74.2%;
width: 100%;
background-color: #fff;
display: flex;
position: fixed;
bottom: 100px;
align-items: center;
justify-content: space-between;
padding: 0 32px;
box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);
border-radius: 6px;
z-index: 1000;
&__text {
display: flex;
align-items: center;
p {
font-family: 'font_medium';
font-size: 16px;
margin-left: 40px;
}
}
&__buttons-group {
display: flex;
span {
width: 142px;
padding: 14px 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-family: 'font_medium';
font-size: 16px;
cursor: pointer;
}
&__cancel {
margin-right: 24px;
}
}
}
.blur-wrap {
position: fixed;
height: 100vh;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
filter: blur(4px);
background-color: rgba(0,0,0,0.5);
}
@media screen and (max-width: 1600px) {
.delete-user-container {
max-width: 72%;
}
}
@media screen and (max-width: 1366px) {
.delete-user-container {
max-width: 65%;
}
}
@media screen and (max-width: 1120px) {
.delete-user-container {
max-width: 60%;
}
}
@media screen and (max-width: 1025px) {
.delete-user-container {
max-width: 73%;
}
}
</style>

155
web/satellite/src/components/team/footerArea/DeleteUserArea.vue
View File

@ -1,155 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="delete-user-container" >
<div class="delete-user-container__wrap">
<div class="delete-user-container__selected-users-count">
<span class="delete-user-container__selected-users-count__button"></span>
<p class="delete-user-container__selected-users-count__count">{{selectedProjectMembersCount}}</p>
<p class="delete-user-container__selected-users-count__total-count"> of <span>{{projectMembersCount}}</span> Users Selected</p>
</div>
<div class="delete-user-container__buttons-group">
<Button
class="delete-user-container__buttons-group__cancel"
label="Cancel"
width="140px"
height="48px"
:onPress="onClearSelection"
isWhite="true" />
<Button
label="Delete"
width="140px"
height="48px"
:onPress="onDelete" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Button from '@/components/common/Button.vue';
import { PM_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { TeamMember } from '../../../types/teamMembers';
@Component({
components: {
Button
}
})
export default class DeleteUserArea extends Vue {
public async onDelete(): Promise<any> {
const projectMemberEmails = this.$store.getters.selectedProjectMembers.map((member: TeamMember) => {
return member.user.email;
});
const response = await this.$store.dispatch(PM_ACTIONS.DELETE, projectMemberEmails);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Error while deleting users from team');
return;
}
this.$store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, 'Members was successfully removed from project');
}
public onClearSelection(): void {
this.$store.dispatch(PM_ACTIONS.CLEAR_SELECTION);
}
public get selectedProjectMembersCount(): number {
return this.$store.getters.selectedProjectMembers.length;
}
public get projectMembersCount(): number {
return this.$store.getters.projectMembers.length;
}
}
</script>
<style scoped lang="scss">
.delete-user-container {
padding-bottom: 50px;
position: fixed;
bottom: 0px;
max-width: 79.7%;
width: 100%;
&__wrap {
padding: 0 32px;
height: 98px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);
border-radius: 6px;
}
&__buttons-group {
display: flex;
span {
width: 142px;
padding: 14px 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-family: 'font_medium';
font-size: 16px;
cursor: pointer;
}
&__cancel {
margin-right: 24px;
}
}
&__selected-users-count {
display: flex;
align-items: center;
font-family: 'font_regular';
font-size: 18px;
color: #AFB7C1;
&__count {
margin: 0 7px;
}
&__button {
height: 16px;
display: block;
cursor: pointer;
width: 16px;
background-image: url('../../../../static/images/team/delete.svg');
}
}
}
@media screen and (max-width: 1600px) {
.delete-user-container {
max-width: 74%;
}
}
@media screen and (max-width: 1366px) {
.delete-user-container {
max-width: 72%;
}
}
@media screen and (max-width: 1120px) {
.delete-user-container {
max-width: 65%;
}
}
@media screen and (max-width: 1025px) {
.delete-user-container {
max-width: 84%;
}
}
</style>

25
web/satellite/src/components/team/footerArea/Footer.vue
View File

@ -1,25 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div>
<!-- if selection mode -->
<DeleteUserArea />
<!-- approval after delete click -->
<!--<ApproveDeleteUserArea />-->
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ApproveDeleteUserArea from './ApproveDeleteUserArea.vue';
import DeleteUserArea from './DeleteUserArea.vue';
@Component({
components: {
DeleteUserArea,
ApproveDeleteUserArea,
}
})
export default class TeamFooter extends Vue {}
</script>

121
web/satellite/src/components/team/headerArea/SearchArea.vue
View File

@ -1,121 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="search-container">
<div class="search-container__wrap">
<label class="search-container__wrap__input">
<div v-if="searchQuery" class="search-container__wrap__input__clear" v-on:click="clearSearch">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
</svg>
</div>
<input v-on:input="processSearchQuery" v-model="searchQuery" placeholder="Search Users" type="text">
</label>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
import { RequestResponse } from '@/types/response';
@Component
export default class SearchArea extends Vue {
private searchQuery: string = '';
public clearSearch() {
this.searchQuery = '';
this.processSearchQuery();
}
private async processSearchQuery() {
this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, this.searchQuery);
const response: RequestResponse<object> = await this.$store.dispatch(PM_ACTIONS.FETCH);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project members');
}
}
}
</script>
<style scoped lang="scss">
.search-container {
width: 100%;
height: 56px;
margin: 0 0 0 24px;
&__wrap {
position: relative;
&::after {
content: '';
display: block;
position: absolute;
height: 20px;
top: 50%;
transform: translateY(-50%);
right: 20px;
width: 20px;
background-image: url('../../../../static/images/team/searchIcon.svg');
background-repeat: no-repeat;
background-size: cover;
z-index: 20;
}
&__input {
&__clear {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 65px;
top: 50%;
transform: translateY(-50%);
z-index: 99;
cursor: pointer;
height: 20px;
width: 20px;
&:hover svg path {
fill: #2683FF;
}
}
input {
box-sizing: border-box;
position: relative;
border: none;
outline: none;
border-radius: 6px;
width: 100%;
height: 56px;
padding-right: 100px;
padding-left: 20px;
font-family: 'font_regular';
font-size: 16px;
transition: all .2s ease-in-out;
&:hover {
box-shadow: 0px 4px 4px rgba(231, 232, 238, 0.6);
border: none;
outline: none;
}
&:focus {
box-shadow: 0px 4px 4px rgba(231, 232, 238, 0.6);
border: none;
outline: none;
}
}
}
}
}
::-webkit-input-placeholder {
color: #AFB7C1;
}
</style>

95
web/satellite/src/components/team/headerArea/SortDropdown.vue
View File

@ -1,95 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<!-- To close popup we need to use method onCloseClick -->
<div class="sort-dropdown-choice-container" id="sortTeamMemberByDropdown">
<div class="sort-dropdown-overflow-container">
<!-- TODO: add selection logic onclick -->
<div class="sort-dropdown-item-container" v-on:click="onSortUsersClick(sortByEnum.EMAIL)">
<h2>Sort by Email</h2>
</div>
<div class="sort-dropdown-item-container" v-on:click="onSortUsersClick(sortByEnum.CREATED_AT)">
<h2>Sort by Date</h2>
</div>
<div class="sort-dropdown-item-container" v-on:click="onSortUsersClick(sortByEnum.NAME)">
<h2>Sort by Name</h2>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { ProjectMemberSortByEnum } from '@/utils/constants/ProjectMemberSortEnum';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
import { RequestResponse } from '@/types/response';
@Component
export default class SortDropdown extends Vue {
public sortByEnum: any = ProjectMemberSortByEnum;
public onCloseClick(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SORT_PM_BY_DROPDOWN);
}
public async onSortUsersClick(sortBy: ProjectMemberSortByEnum) {
this.$store.dispatch(PM_ACTIONS.SET_SORT_BY, sortBy);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SORT_PM_BY_DROPDOWN);
const response: RequestResponse<object> = await this.$store.dispatch(PM_ACTIONS.FETCH);
if (response.isSuccess) return;
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project members');
}
}
</script>
<style scoped lang="scss">
.sort-dropdown-choice-container {
position: absolute;
top: 70px;
left: 0px;
border-radius: 4px;
padding: 10px 0px 10px 0px;
box-shadow: 0px 4px rgba(231, 232, 238, 0.6);
background-color: #FFFFFF;
z-index: 800;
}
.sort-dropdown-overflow-container {
position: relative;
width: 260px;
height: auto;
background-color: #FFFFFF;
}
.sort-dropdown-item-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding-left: 20px;
padding-right: 20px;
h2 {
font-family: 'font_regular';
margin-left: 20px;
font-size: 14px;
line-height: 20px;
color: #354049;
}
&:hover {
background-color: #F2F2F6;
path {
fill: #2683FF !important;
}
}
}
a {
text-decoration: none;
outline: none;
}
</style>

117
web/satellite/src/components/team/headerArea/SortUsersDropdown.vue
View File

@ -1,117 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="sort-container" id="sortTeamMemberByDropdownButton">
<!-- TODO: fix dd styles on hover -->
<div class="sort-toggle-container" v-on:click="toggleSelection" >
<h1 class="sort-toggle-container__sort-name">Sort by {{sortOption}}</h1>
<div class="sort-toggle-container__expander-area">
<img v-if="!isChoiceShown" src="../../../../static/images/register/BlueExpand.svg" />
<img v-if="isChoiceShown" src="../../../../static/images/register/BlueHide.svg" />
</div>
</div>
<SortDropdown v-if="isChoiceShown" @onClose="toggleSelection" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import SortDropdown from './SortDropdown.vue';
import { ProjectMemberSortByEnum } from '@/utils/constants/ProjectMemberSortEnum';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
@Component({
components: {
SortDropdown
}
})
export default class SortUsersDropdown extends Vue {
private userName: string = this.$store.getters.userName;
public toggleSelection(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SORT_PM_BY_DROPDOWN);
}
public get sortOption(): string {
switch (this.$store.state.projectMembersModule.searchParameters.sortBy) {
case ProjectMemberSortByEnum.EMAIL:
return 'email';
case ProjectMemberSortByEnum.CREATED_AT:
return 'date';
default: // ProjectMemberSortByEnum.NAME
return 'name';
}
}
public get isChoiceShown(): boolean {
return this.$store.state.appStateModule.appState.isSortProjectMembersByPopupShown;
}
}
</script>
<style scoped lang="scss">
a {
text-decoration: none;
outline: none;
}
.sort-container {
position: relative;
padding-right: 10px;
background-color: #FFFFFF;
cursor: pointer;
width: 100%;
max-width: 260px;
height: 56px;
box-sizing: border-box;
border-radius: 6px;
transition: all .2s ease-in-out;
margin-left: 24px;
&:hover {
box-shadow: 0px 4px rgba(231, 232, 238, 0.6);
}
&:focus {
box-shadow: 0px 4px rgba(231, 232, 238, 0.6);
}
}
.sort-toggle-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 56px;
&__sort-name {
margin-left: 20px;
font-family: 'font_medium';
font-size: 16px;
line-height: 23px;
color: #AFB7C1;
}
&__expander-area {
margin-left: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
}
}
@media screen and (max-width: 720px) {
.sort-toggle-container {
&__sort-name {
display: none;
}
}
}
</style>

32
web/satellite/src/router/index.ts
View File

@ -2,27 +2,27 @@
// See LICENSE for copying information.
import Vue from 'vue';
import Router from 'vue-router';
import ROUTES from '@/utils/constants/routerConstants';
import Login from '@/views/login/Login.vue';
import Register from '@/views/register/Register.vue';
import ForgotPassword from '@/views/forgotPassword/ForgotPassword.vue';
import Dashboard from '@/views/Dashboard.vue';
import AccountArea from '@/components/account/AccountArea.vue';
import Profile from '@/components/account/Profile.vue';
import AccountBillingHistory from '@/components/account/billing/BillingArea.vue';
import AccountPaymentMethods from '@/components/account/AccountPaymentMethods.vue';
import ProjectOverviewArea from '@/components/project/ProjectOverviewArea.vue';
import TeamArea from '@/components/team/TeamArea.vue';
import Page404 from '@/components/errors/Page404.vue';
import ApiKeysArea from '@/components/apiKeys/ApiKeysArea.vue';
import UsageReport from '@/components/project/UsageReport.vue';
import ProjectDetails from '@/components/project/ProjectDetails.vue';
import ProjectBillingHistory from '@/components/project/billing/BillingArea.vue';
import ProjectPaymentMethods from '@/components/project/ProjectPaymentMethods.vue';
import BucketArea from '@/components/buckets/BucketArea.vue';
import { AuthToken } from '@/utils/authToken';
import BucketArea from '@/components/buckets/BucketArea.vue';
import Dashboard from '@/views/Dashboard.vue';
import ForgotPassword from '@/views/forgotPassword/ForgotPassword.vue';
import Login from '@/views/login/Login.vue';
import Page404 from '@/components/errors/Page404.vue';
import Profile from '@/components/account/Profile.vue';
import ProjectBillingHistory from '@/components/project/billing/BillingArea.vue';
import ProjectDetails from '@/components/project/ProjectDetails.vue';
import ProjectMembersArea from '@/components/team/ProjectMembersArea.vue';
import ProjectOverviewArea from '@/components/project/ProjectOverviewArea.vue';
import ProjectPaymentMethods from '@/components/project/ProjectPaymentMethods.vue';
import Register from '@/views/register/Register.vue';
import Router from 'vue-router';
import ROUTES from '@/utils/constants/routerConstants';
import store from '@/store';
import UsageReport from '@/components/project/UsageReport.vue';
Vue.use(Router);
@ -114,7 +114,7 @@ let router = new Router({
{
path: ROUTES.TEAM.path,
name: ROUTES.TEAM.name,
component: TeamArea
component: ProjectMembersArea
},
{
path: ROUTES.API_KEYS.path,

2
web/satellite/src/store/modules/appState.ts
View File

@ -26,7 +26,7 @@ export const appStateModule = {
},
},
mutations: {
// Mutation changing add team members popup visibility
// Mutation changing add projectMembers members popup visibility
[APP_STATE_MUTATIONS.TOGGLE_ADD_TEAMMEMBER_POPUP](state: any): void {
state.appState.isAddTeamMembersPopupShown = !state.appState.isAddTeamMembersPopupShown;
},

130
web/satellite/src/store/modules/projectMembers.ts
View File

@ -7,35 +7,51 @@ import {
deleteProjectMembersRequest,
fetchProjectMembersRequest
} from '@/api/projectMembers';
import { ProjectMemberSortByEnum } from '@/utils/constants/ProjectMemberSortEnum';
import { TeamMember } from '@/types/teamMembers';
import { ProjectMember, ProjectMemberCursor, ProjectMemberOrderBy, ProjectMembersPage } from '@/types/projectMembers';
import { RequestResponse } from '@/types/response';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { SortDirection } from '@/types/common';
const PROJECT_MEMBERS_PAGE_LIMIT = 8;
const FIRST_PAGE = 1;
export const projectMembersModule = {
state: {
projectMembers: [],
projectMembersCount: 0,
searchParameters: {
sortBy: ProjectMemberSortByEnum.NAME,
searchQuery: ''
},
pagination: {
offset: 0,
limit: 20,
}
cursor: new ProjectMemberCursor(),
page: new ProjectMembersPage(),
},
mutations: {
[PROJECT_MEMBER_MUTATIONS.DELETE](state: any, projectMemberEmails: string[]) {
const emailsCount = projectMemberEmails.length;
for (let j = 0; j < emailsCount; j++) {
state.projectMembers = state.projectMembers.filter((element: any) => {
state.page.projectMembers = state.page.projectMembers.filter((element: any) => {
return element.user.email !== projectMemberEmails[j];
});
}
},
[PROJECT_MEMBER_MUTATIONS.FETCH](state: any, page: ProjectMembersPage) {
// todo expand this assignment
state.page = page;
},
[PROJECT_MEMBER_MUTATIONS.SET_PAGE](state: any, page: number) {
state.cursor.page = page;
},
[PROJECT_MEMBER_MUTATIONS.SET_SEARCH_QUERY](state: any, search: string) {
state.cursor.search = search;
},
[PROJECT_MEMBER_MUTATIONS.CHANGE_SORT_ORDER](state: any, order: ProjectMemberOrderBy) {
state.cursor.order = order;
},
[PROJECT_MEMBER_MUTATIONS.CHANGE_SORT_ORDER_DIRECTION](state: any, direction: SortDirection) {
state.cursor.orderDirection = direction;
},
[PROJECT_MEMBER_MUTATIONS.CLEAR](state: any) {
state.cursor = {limit: PROJECT_MEMBERS_PAGE_LIMIT, search: '', page: FIRST_PAGE} as ProjectMemberCursor;
state.page = {projectMembers: [] as ProjectMember[]} as ProjectMembersPage;
},
[PROJECT_MEMBER_MUTATIONS.TOGGLE_SELECTION](state: any, projectMemberId: string) {
state.projectMembers = state.projectMembers.map((projectMember: any) => {
state.page.projectMembers = state.page.projectMembers.map((projectMember: any) => {
if (projectMember.user.id === projectMemberId) {
projectMember.isSelected = !projectMember.isSelected;
}
@ -44,43 +60,20 @@ export const projectMembersModule = {
});
},
[PROJECT_MEMBER_MUTATIONS.CLEAR_SELECTION](state: any) {
state.projectMembers = state.projectMembers.map((projectMember: any) => {
state.page.projectMembers = state.page.projectMembers.map((projectMember: any) => {
projectMember.isSelected = false;
return projectMember;
});
},
[PROJECT_MEMBER_MUTATIONS.FETCH](state: any, teamMembers: any[]) {
teamMembers.forEach(value => {
state.projectMembers.push(value);
});
state.projectMembersCount = state.projectMembers.length;
},
[PROJECT_MEMBER_MUTATIONS.CLEAR](state: any) {
state.projectMembers = [];
},
[PROJECT_MEMBER_MUTATIONS.CHANGE_SORT_ORDER](state: any, sortBy: ProjectMemberSortByEnum) {
state.searchParameters.sortBy = sortBy;
},
[PROJECT_MEMBER_MUTATIONS.SET_SEARCH_QUERY](state: any, searchQuery: string) {
state.searchParameters.searchQuery = searchQuery;
},
[PROJECT_MEMBER_MUTATIONS.ADD_OFFSET](state: any) {
state.pagination.offset += state.pagination.limit;
},
[PROJECT_MEMBER_MUTATIONS.CLEAR_OFFSET](state: any) {
state.pagination.offset = 0;
}
},
actions: {
addProjectMembers: async function ({rootGetters}: any, emails: string[]): Promise<RequestResponse<null>> {
[PM_ACTIONS.ADD]: async function ({rootGetters}: any, emails: string[]): Promise<RequestResponse<null>> {
const projectId = rootGetters.selectedProject.id;
return await addProjectMembersRequest(projectId, emails);
},
deleteProjectMembers: async function ({commit, rootGetters}: any, projectMemberEmails: string[]): Promise<RequestResponse<null>> {
[PM_ACTIONS.DELETE]: async function ({commit, rootGetters}: any, projectMemberEmails: string[]): Promise<RequestResponse<null>> {
const projectId = rootGetters.selectedProject.id;
const response = await deleteProjectMembersRequest(projectId, projectMemberEmails);
@ -91,47 +84,40 @@ export const projectMembersModule = {
return response;
},
toggleProjectMemberSelection: function ({commit}: any, projectMemberId: string) {
commit(PROJECT_MEMBER_MUTATIONS.TOGGLE_SELECTION, projectMemberId);
},
clearProjectMemberSelection: function ({commit}: any) {
commit(PROJECT_MEMBER_MUTATIONS.CLEAR_SELECTION);
},
fetchProjectMembers: async function ({commit, state, rootGetters}: any): Promise<RequestResponse<TeamMember[]>> {
const projectId = rootGetters.selectedProject.id;
const response: RequestResponse<TeamMember[]> = await fetchProjectMembersRequest(projectId, state.pagination.limit, state.pagination.offset,
state.searchParameters.sortBy, state.searchParameters.searchQuery);
[PM_ACTIONS.FETCH]: async function ({commit, rootGetters, state}: any, page: number): Promise<RequestResponse<ProjectMembersPage>> {
const projectID = rootGetters.selectedProject.id;
state.cursor.page = page;
if (response.isSuccess) {
commit(PROJECT_MEMBER_MUTATIONS.FETCH, response.data);
commit(PROJECT_MEMBER_MUTATIONS.SET_PAGE, page);
if (response.data.length > 0) {
commit(PROJECT_MEMBER_MUTATIONS.ADD_OFFSET);
}
let result = await fetchProjectMembersRequest(projectID, state.cursor);
if (result.isSuccess) {
commit(PROJECT_MEMBER_MUTATIONS.FETCH, result.data);
}
return response;
return result;
},
setProjectMembersSortingBy: function ({commit, dispatch}, sortBy: ProjectMemberSortByEnum) {
commit(PROJECT_MEMBER_MUTATIONS.CHANGE_SORT_ORDER, sortBy);
commit(PROJECT_MEMBER_MUTATIONS.CLEAR);
commit(PROJECT_MEMBER_MUTATIONS.CLEAR_OFFSET);
[PM_ACTIONS.SET_SEARCH_QUERY]: function ({commit}, search: string) {
commit(PROJECT_MEMBER_MUTATIONS.SET_SEARCH_QUERY, search);
},
setProjectMembersSearchQuery: function ({commit, dispatch}, searchQuery: string): void {
commit(PROJECT_MEMBER_MUTATIONS.SET_SEARCH_QUERY, searchQuery);
commit(PROJECT_MEMBER_MUTATIONS.CLEAR);
commit(PROJECT_MEMBER_MUTATIONS.CLEAR_OFFSET);
[PM_ACTIONS.SET_SORT_BY]: function ({commit}, order: ProjectMemberOrderBy) {
commit(PROJECT_MEMBER_MUTATIONS.CHANGE_SORT_ORDER, order);
},
clearProjectMembers: function ({commit}: any): void {
[PM_ACTIONS.SET_SORT_DIRECTION]: function ({commit}, direction: SortDirection) {
commit(PROJECT_MEMBER_MUTATIONS.CHANGE_SORT_ORDER_DIRECTION, direction);
},
[PM_ACTIONS.CLEAR]: function ({commit}) {
commit(PROJECT_MEMBER_MUTATIONS.CLEAR);
},
clearProjectMembersOffset: function ({commit}): void {
commit(PROJECT_MEMBER_MUTATIONS.CLEAR_OFFSET);
}
[PM_ACTIONS.TOGGLE_SELECTION]: function ({commit}: any, projectMemberId: string) {
commit(PROJECT_MEMBER_MUTATIONS.TOGGLE_SELECTION, projectMemberId);
},
[PM_ACTIONS.CLEAR_SELECTION]: function ({commit}: any) {
commit(PROJECT_MEMBER_MUTATIONS.CLEAR_SELECTION);
},
},
getters: {
projectMembers: (state: any): TeamMember[] => state.projectMembers,
projectMembersCount: (state: any): number => state.projectMembersCount,
selectedProjectMembers: (state: any): TeamMember[] => state.projectMembers.filter((member: TeamMember) => member.isSelected),
},
selectedProjectMembers: (state: any) => state.page.projectMembers.filter((member: any) => member.isSelected),
}
};

5
web/satellite/src/store/mutationConstants.ts
View File

@ -20,13 +20,12 @@ export const PROJECT_MEMBER_MUTATIONS = {
FETCH: 'FETCH_MEMBERS',
TOGGLE_SELECTION: 'TOGGLE_SELECTION',
CLEAR_SELECTION: 'CLEAR_SELECTION',
ADD: 'ADD_MEMBERS',
DELETE: 'DELETE_MEMBERS',
CLEAR: 'CLEAR_MEMBERS',
CHANGE_SORT_ORDER: 'CHANGE_SORT_ORDER',
CHANGE_SORT_ORDER_DIRECTION: 'CHANGE_SORT_ORDER_DIRECTION',
SET_SEARCH_QUERY: 'SET_SEARCH_QUERY',
CLEAR_OFFSET: 'CLEAR_OFFSET',
ADD_OFFSET:'ADD_OFFSET',
SET_PAGE: 'SET_PROJECT_MEMBERS_PAGE',
};
export const API_KEYS_MUTATIONS = {

7
web/satellite/src/types/common.ts Normal file
View File

@ -0,0 +1,7 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
export enum SortDirection {
ASCENDING = 1,
DESCENDING,
}

79
web/satellite/src/types/projectMembers.ts Normal file
View File

@ -0,0 +1,79 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
// ProjectMember stores needed info about user info to show it on UI
import { User } from '@/types/users';
import { SortDirection } from '@/types/common';
export type OnHeaderClickCallback = (sortBy: ProjectMemberOrderBy, sortDirection: SortDirection) => Promise<any>;
export enum ProjectMemberOrderBy {
NAME = 1,
EMAIL,
CREATED_AT,
}
// ProjectMemberCursor is a type, used for paged project members request
export class ProjectMemberCursor {
public constructor(
public search: string = '',
public limit: number = 6,
public page: number = 1,
public order: ProjectMemberOrderBy = ProjectMemberOrderBy.NAME,
public orderDirection: SortDirection = SortDirection.ASCENDING) {
}
}
// ProjectMembersPage is a type, used to describe paged project members list
export class ProjectMembersPage {
public constructor(
public projectMembers: ProjectMember[] = [],
public search: string = '',
public order: ProjectMemberOrderBy = ProjectMemberOrderBy.NAME,
public orderDirection: SortDirection = SortDirection.ASCENDING,
public limit: number = 6,
public pageCount: number = 0,
public currentPage: number = 1,
public totalCount: number = 0) {
}
}
// ProjectMember is a type, used to describe project member
export class ProjectMember {
public user: User;
public joinedAt: string;
public isSelected: boolean;
public constructor(fullName: string, shortName: string, email: string, joinedAt: string, id?: string) {
this.user = new User(id || '', fullName, shortName, email);
this.joinedAt = joinedAt;
}
public formattedFullName(): string {
let fullName: string = this.user.getFullName();
if (fullName.length > 16) {
fullName = fullName.slice(0, 13) + '...';
}
return fullName;
}
public formattedEmail(): string {
let email: string = this.user.email;
if (email.length > 16) {
email = this.user.email.slice(0, 13) + '...';
}
return email;
}
public joinedAtLocal(): string {
if (!this.joinedAt) return '';
return new Date(this.joinedAt).toLocaleDateString();
}
}

7
web/satellite/src/types/sortingArrows.ts Normal file
View File

@ -0,0 +1,7 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
export enum SortingDirectionEnum {
TOP = 1,
BOTTOM,
}

44
web/satellite/src/types/teamMembers.ts
View File

@ -1,44 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
// TeamMember stores needed info about user info to show it on UI
import { User } from '@/types/users';
export class TeamMember {
public user: User;
public joinedAt: string;
public isSelected: boolean;
public constructor(fullName: string, shortName: string, email: string, joinedAt: string, id?: string) {
this.user = new User(fullName, shortName, email);
this.user.id = id || '';
this.joinedAt = joinedAt;
}
public formattedFullName(): string {
let fullName: string = this.user.getFullName();
if (fullName.length > 16) {
fullName = fullName.slice(0, 13) + '...';
}
return fullName;
}
public formattedEmail(): string {
let email: string = this.user.email;
if (email.length > 16) {
email = this.user.email.slice(0, 13) + '...';
}
return email;
}
public joinedAtLocal(): string {
if (!this.joinedAt) return '';
return new Date(this.joinedAt).toLocaleDateString();
}
}

5
web/satellite/src/utils/constants/ProjectMemberSortEnum.ts
View File

@ -1,8 +1,3 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
export enum ProjectMemberSortByEnum {
NAME = 1,
EMAIL,
CREATED_AT,
}

1
web/satellite/src/utils/constants/actionNames.ts
View File

@ -40,6 +40,7 @@ export const PM_ACTIONS = {
CLEAR: 'clearProjectMembers',
SET_SEARCH_QUERY: 'setProjectMembersSearchQuery',
SET_SORT_BY: 'setProjectMembersSortingBy',
SET_SORT_DIRECTION: 'setProjectMembersSortingDirection',
CLEAR_OFFSET: 'clearProjectMembersOffset'
};

2
web/satellite/src/utils/constants/routerConstants.ts
View File

@ -27,7 +27,7 @@ const ROUTES = {
name: 'ProjectOverview'
},
TEAM: {
path: '/team',
path: '/projectMembers',
name: 'Team'
},
API_KEYS: {

18
web/satellite/src/views/Dashboard.vue
View File

@ -21,9 +21,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import DashboardHeader from '@/components/header/Header.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import { AuthToken } from '@/utils/authToken';
import { AppState } from '@/utils/constants/appStateEnum';
import {
API_KEYS_ACTIONS,
APP_STATE_ACTIONS,
@ -34,12 +32,14 @@
PROJECT_USAGE_ACTIONS,
BUCKET_USAGE_ACTIONS, PROJECT_PAYMENT_METHODS_ACTIONS
} from '@/utils/constants/actionNames';
import ROUTES from '@/utils/constants/routerConstants';
import ProjectCreationSuccessPopup from '@/components/project/ProjectCreationSuccessPopup.vue';
import { AppState } from '../utils/constants/appStateEnum';
import { RequestResponse } from '../types/response';
import { User } from '../types/users';
import { AuthToken } from '@/utils/authToken';
import DashboardHeader from '@/components/header/Header.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import { Project } from '@/types/projects';
import ProjectCreationSuccessPopup from '@/components/project/ProjectCreationSuccessPopup.vue';
import { RequestResponse } from '@/types/response';
import ROUTES from '@/utils/constants/routerConstants';
import { User } from '@/types/users';
@Component({
mounted: async function() {
@ -67,7 +67,7 @@
await this.$store.dispatch(PROJETS_ACTIONS.SELECT, getProjectsResponse.data[0].id);
await this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
const projectMembersResponse = await this.$store.dispatch(PM_ACTIONS.FETCH);
const projectMembersResponse = await this.$store.dispatch(PM_ACTIONS.FETCH, 1);
if (!projectMembersResponse.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to fetch project members');
}

4
web/satellite/static/images/team/checkboxChecked.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="23" height="23" rx="4" fill="white"/>
<path d="M6 13.3L9.52941 16L18 7" stroke="#2683FF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 271 B

3
web/satellite/static/images/team/checkboxEmpty.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.75" y="0.75" width="21.5" height="21.5" rx="3.25" stroke="#384B65" stroke-opacity="0.4" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 223 B

60
web/satellite/tests/unit/common/Pagination.spec.ts
View File

@ -306,4 +306,64 @@ describe('Pagination.vue', () => {
expect(wrapperData.middleBlockPages.length).toBe(0);
expect(wrapperData.lastBlockPages.length).toBe(3);
});
it('should reset current page index to 1', async () => {
const wrapper = shallowMount(Pagination, {
propsData: {
totalPageCount: 4,
onPageClickCallback: () => Promise.resolve({})
},
mocks: {
$route: {
query: {
pageNumber: null
}
},
$router: {
replace: () => false
}
}
});
await wrapper.vm.nextPage();
expect(wrapper.vm.$data.currentPageNumber).toBe(2);
wrapper.vm.resetPageIndex();
const wrapperData = wrapper.vm.$data;
expect(wrapperData.currentPageNumber).toBe(1);
expect(wrapperData.pagesArray.length).toBe(4);
});
it('should completely reinitialize Pagination on totalPageCount change', async () => {
const wrapper = shallowMount(Pagination, {
propsData: {
totalPageCount: 4,
onPageClickCallback: () => Promise.resolve({})
},
mocks: {
$route: {
query: {
pageNumber: null
}
},
$router: {
replace: () => false
}
}
});
await wrapper.vm.nextPage();
expect(wrapper.vm.$data.currentPageNumber).toBe(2);
wrapper.setProps({totalPageCount: 7});
const wrapperData = wrapper.vm.$data;
expect(wrapperData.currentPageNumber).toBe(1);
expect(wrapperData.pagesArray.length).toBe(7);
});
});

4
web/satellite/tests/unit/common/TestList.spec.ts
View File

@ -3,7 +3,7 @@
import { mount } from '@vue/test-utils';
import TestList from '@/components/common/test/TestList.vue';
import * as sinon from 'sinon';
import sinon from 'sinon';
describe('TestList.vue', () => {
it('should render list of primitive types', function () {
@ -12,7 +12,7 @@ describe('TestList.vue', () => {
onItemClick: sinon.stub()
}
});
expect(wrapper.html()).toBe('<div class="item-component"><h1 class="item-component__item">1</h1><h1 class="item-component__item">2</h1><h1 class="item-component__item">3</h1></div>');
expect(wrapper).toMatchSnapshot();
});
it('should retrieve callback', function () {

42
web/satellite/tests/unit/common/VerticalArrows.spec.ts Normal file
View File

@ -0,0 +1,42 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { mount } from '@vue/test-utils';
import VerticalArrows from '@/components/common/VerticalArrows.vue';
import { SortingDirectionEnum } from '@/types/sortingArrows';
describe('VerticalArrows.vue', () => {
it('should render with bottom arrow highlighted', function () {
const wrapper = mount(VerticalArrows, {
propsData: {
isActive: true,
direction: SortingDirectionEnum.BOTTOM
}
});
expect(wrapper).toMatchSnapshot();
});
it('should render without any highlighted arrows', function () {
const wrapper = mount(VerticalArrows, {
propsData: {
isActive: false,
direction: SortingDirectionEnum.BOTTOM
}
});
expect(wrapper).toMatchSnapshot();
});
it('should render with top arrow highlighted', function () {
const wrapper = mount(VerticalArrows, {
propsData: {
isActive: true,
direction: SortingDirectionEnum.TOP
}
});
expect(wrapper).toMatchSnapshot();
});
});

5
web/satellite/tests/unit/common/__snapshots__/Pagination.spec.ts.snap
View File

@ -28,10 +28,11 @@ exports[`Pagination.vue renders correctly with props 1`] = `
<path d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"></path>
</svg></div>
<div class="pagination-container__items">
<pagesblock-stub pages="[object Object],[object Object],[object Object]" checkselected="function () { [native code] }"></pagesblock-stub> <span>...</span>
<pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub>
<!---->
<pagesblock-stub pages="[object Object]" checkselected="function () { [native code] }"></pagesblock-stub>
<pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub>
<!---->
<pagesblock-stub pages="" checkselected="function () { [native code] }"></pagesblock-stub>
</div>
<div class="pagination-container__button"><svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 4.73684L0 9L1.20219e-06 -9.53674e-07L6 4.73684Z" fill="#354049"></path>

25
web/satellite/tests/unit/common/__snapshots__/VerticalArrows.spec.ts.snap Normal file
View File

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VerticalArrows.vue should render with bottom arrow highlighted 1`] = `
<div class="container"><svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"></path>
</svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="active">
<path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"></path>
</svg></div>
`;
exports[`VerticalArrows.vue should render with top arrow highlighted 1`] = `
<div class="container"><svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="active">
<path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"></path>
</svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"></path>
</svg></div>
`;
exports[`VerticalArrows.vue should render without any highlighted arrows 1`] = `
<div class="container"><svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"></path>
</svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"></path>
</svg></div>
`;

8
web/satellite/tests/unit/team/headerArea/HeaderArea.spec.ts → web/satellite/tests/unit/projectMembers/HeaderArea.spec.ts
View File

@ -4,8 +4,8 @@
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
import * as sinon from 'sinon';
import Vuex from 'vuex';
import HeaderArea from '@/components/team/headerArea/HeaderArea.vue';
import { TeamMember } from '@/types/teamMembers';
import HeaderArea from '@/components/team/HeaderArea.vue';
import { ProjectMember } from '@/types/projectMembers';
const localVue = createLocalVue();
@ -43,8 +43,8 @@ describe('projectMembers/notification Actions', () => {
let actions;
let getters;
let state;
let teamMember = new TeamMember('test', 'test', 'test@test.test', 'test');
let teamMember1 = new TeamMember('test1', 'test1', 'test1@test.test', 'test1');
let teamMember = new ProjectMember('test', 'test', 'test@test.test', 'test');
let teamMember1 = new ProjectMember('test1', 'test1', 'test1@test.test', 'test1');
let searchQuery = 'test';
beforeEach(() => {

33
web/satellite/tests/unit/projectMembers/ProjectMemberListItem.spec.ts Normal file
View File

@ -0,0 +1,33 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { mount } from '@vue/test-utils';
import { ProjectMember } from '@/types/projectMembers';
import ProjectMemberListItem from '@/components/team/ProjectMemberListItem.vue';
describe('', () => {
it('should renders correctly', function () {
const member: ProjectMember = new ProjectMember('testFullName', 'testShortName', 'test@example.com', '2019-08-09T08:52:43.695679Z', '1');
const wrapper = mount(ProjectMemberListItem, {
propsData: {
itemData: member
}
});
expect(wrapper).toMatchSnapshot();
});
it('should render correctly with item row highlighted', function () {
const member: ProjectMember = new ProjectMember('testFullName', 'testShortName', 'test@example.com', '2019-08-09T08:52:43.695679Z', '1');
member.isSelected = true;
const wrapper = mount(ProjectMemberListItem, {
propsData: {
itemData: member
}
});
expect(wrapper).toMatchSnapshot();
});
});

154
web/satellite/tests/unit/projectMembers/ProjectMembersArea.spec.ts Normal file
View File

@ -0,0 +1,154 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import ProjectMembersArea from '@/components/team/ProjectMembersArea.vue';
import { projectMembersModule } from '@/store/modules/projectMembers';
import { PROJECT_MEMBER_MUTATIONS } from '@/store/mutationConstants';
import { ProjectMember, ProjectMembersPage } from '@/types/projectMembers';
const localVue = createLocalVue();
localVue.use(Vuex);
const projectMember1 = new ProjectMember('testFullName1', 'testShortName1', 'test1@example.com', 'now1', '1');
const projectMember2 = new ProjectMember('testFullName2', 'testShortName2', 'test2@example.com', 'now2', '2');
describe('ProjectMembersArea.vue', () => {
const state = projectMembersModule.state;
const mutations = projectMembersModule.mutations;
const actions = projectMembersModule.actions;
const getters = projectMembersModule.getters;
const store = new Vuex.Store({
modules: {
projectMembersModule: {
state,
mutations,
actions,
getters,
}
}
});
it('renders correctly', () => {
const wrapper = shallowMount(ProjectMembersArea, {
store,
localVue
});
expect(wrapper).toMatchSnapshot();
});
it('function fetchProjectMembers works correctly', () => {
const testProjectMembersPage = new ProjectMembersPage();
testProjectMembersPage.projectMembers = [projectMember1];
testProjectMembersPage.totalCount = 1;
testProjectMembersPage.pageCount = 1;
store.commit(PROJECT_MEMBER_MUTATIONS.FETCH, testProjectMembersPage);
const wrapper = mount(ProjectMembersArea, {
store,
localVue,
mocks: {
$route: {
query: {
pageNumber: null
}
},
$router: {
replace: () => false
}
}
});
expect(wrapper.vm.projectMembers.length).toBe(1);
});
it('action on toggle works correctly', () => {
const wrapper = mount(ProjectMembersArea, {
store,
localVue,
mocks: {
$route: {
query: {}
}
}
});
wrapper.vm.onMemberClick(projectMember1);
expect(store.getters.selectedProjectMembers.length).toBe(1);
});
it('clear selection works correctly', () => {
const wrapper = mount(ProjectMembersArea, {
store,
localVue,
mocks: {
$route: {
query: {}
}
}
});
wrapper.vm.onMemberClick(projectMember1);
expect(store.getters.selectedProjectMembers.length).toBe(0);
});
it('Reversing list order triggers rerender', () => {
const testProjectMembersPage = new ProjectMembersPage();
testProjectMembersPage.projectMembers = [projectMember1, projectMember2];
testProjectMembersPage.totalCount = 2;
testProjectMembersPage.pageCount = 1;
store.commit(PROJECT_MEMBER_MUTATIONS.FETCH, testProjectMembersPage);
const wrapper = mount(ProjectMembersArea, {
store,
localVue,
mocks: {
$route: {
query: {}
}
}
});
expect(wrapper.vm.projectMembers[0].user.id).toBe(projectMember1.user.id);
testProjectMembersPage.projectMembers = [projectMember2, projectMember1];
store.commit(PROJECT_MEMBER_MUTATIONS.FETCH, testProjectMembersPage);
expect(wrapper.vm.projectMembers[0].user.id).toBe(projectMember2.user.id);
});
it('project member deletion trigger list rerender', () => {
const testProjectMembersPage = new ProjectMembersPage();
testProjectMembersPage.projectMembers = [projectMember1];
testProjectMembersPage.totalCount = 1;
testProjectMembersPage.pageCount = 1;
store.commit(PROJECT_MEMBER_MUTATIONS.FETCH, testProjectMembersPage);
const wrapper = mount(ProjectMembersArea, {
store,
localVue,
mocks: {
$route: {
query: {}
}
}
});
expect(wrapper.vm.projectMembers.length).toBe(1);
store.commit(PROJECT_MEMBER_MUTATIONS.DELETE, [projectMember1.user.email]);
expect(wrapper.vm.projectMembers.length).toBe(0);
});
});

66
web/satellite/tests/unit/projectMembers/SortingListHeader.spec.ts Normal file
View File

@ -0,0 +1,66 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { mount } from '@vue/test-utils';
import sinon from 'sinon';
import { ProjectMemberOrderBy } from '@/types/projectMembers';
import { SortDirection } from '@/types/common';
import SortingListHeader from '@/components/team/SortingListHeader.vue';
describe('SortingListHeader.vue', () => {
it('should render correctly', function () {
const wrapper = mount(SortingListHeader);
expect(wrapper).toMatchSnapshot();
});
it('should retrieve callback', function () {
let onPressSpy = sinon.spy();
const wrapper = mount(SortingListHeader, {
propsData: {
onHeaderClickCallback: onPressSpy,
}
});
wrapper.find('.sort-header-container__name-container').trigger('click');
expect(onPressSpy.callCount).toBe(1);
});
it('should change sort direction', function () {
let onPressSpy = sinon.spy();
const wrapper = mount(SortingListHeader, {
propsData: {
onHeaderClickCallback: onPressSpy,
}
});
expect(wrapper.vm.sortBy).toBe(ProjectMemberOrderBy.NAME);
expect(wrapper.vm.sortDirection).toBe(SortDirection.ASCENDING);
wrapper.find('.sort-header-container__name-container').trigger('click');
expect(onPressSpy.callCount).toBe(1);
expect(wrapper.vm.sortBy).toBe(ProjectMemberOrderBy.NAME);
expect(wrapper.vm.sortDirection).toBe(SortDirection.DESCENDING);
});
it('should change sort by value', function () {
let onPressSpy = sinon.spy();
const wrapper = mount(SortingListHeader, {
propsData: {
onHeaderClickCallback: onPressSpy,
}
});
expect(wrapper.vm.sortBy).toBe(ProjectMemberOrderBy.NAME);
expect(wrapper.vm.sortDirection).toBe(SortDirection.ASCENDING);
wrapper.find('.sort-header-container__added-container').trigger('click');
expect(onPressSpy.callCount).toBe(1);
expect(wrapper.vm.sortBy).toBe(ProjectMemberOrderBy.CREATED_AT);
expect(wrapper.vm.sortDirection).toBe(SortDirection.ASCENDING);
});
});

0
web/satellite/tests/unit/team/headerArea/__snapshots__/HeaderArea.spec.ts.snap → web/satellite/tests/unit/projectMembers/__snapshots__/HeaderArea.spec.ts.snap
View File

42
web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMembersArea.spec.ts.snap Normal file
View File

@ -0,0 +1,42 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProjectMembersArea.vue renders correctly 1`] = `
<div class="team-area">
<div class="team-header">
<headerarea-stub headerstate="0" selectedprojectmembers="0"></headerarea-stub>
</div>
<!---->
<div class="empty-search-result-area">
<h1 class="empty-search-result-area__text">No results found</h1> <svg width="380" height="295" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3168 98C21.4071 98 20 96.5077 20 94.6174C20.9046 68.9496 31.8599 45.769 49.0467 28.7566C66.2335 11.7442 89.6518 0.900089 115.583 0.00470057C117.492 -0.094787 119 1.39753 119 3.28779V32.4377C119 34.2284 117.593 35.6213 115.784 35.7208C99.7025 36.5167 85.2294 43.3813 74.4751 53.927C63.8213 64.5722 56.8863 78.8984 56.0822 94.8164C55.9817 96.6072 54.5746 98 52.7655 98H23.3168Z" fill="#B0B6C9"></path>
<path d="M117.5 30C124.404 30 130 25.0751 130 19C130 12.9249 124.404 8 117.5 8C110.596 8 105 12.9249 105 19C105 25.0751 110.596 30 117.5 30Z" fill="#8F96AD"></path>
<path d="M112.5 97C116.09 97 119 94.3137 119 91C119 87.6863 116.09 85 112.5 85C108.91 85 106 87.6863 106 91C106 94.3137 108.91 97 112.5 97Z" fill="#B0B6C9"></path>
<path d="M15.0005 282C23.226 282 30 274.575 30 265.5C30 256.425 23.226 249 15.0005 249C6.77499 249 0.00102409 256.425 0.00102409 265.5C-0.0957468 274.678 6.67822 282 15.0005 282Z" fill="#8F96AD"></path>
<path d="M15.5 274C19.0286 274 22 270.9 22 267C22 263.2 19.1214 260 15.5 260C11.9714 260 9 263.1 9 267C9 270.9 11.8786 274 15.5 274Z" fill="white"></path>
<path d="M282.587 111H307.413C309.906 111 312 108.955 312 106.5C312 104.045 309.906 102 307.413 102H282.587C280.094 102 278 104.045 278 106.5C278 108.955 280.094 111 282.587 111Z" fill="white"></path>
<path d="M282.585 93H289.415C291.951 93 294 91.02 294 88.5C294 85.98 291.951 84 289.415 84H282.585C280.049 84 278 85.98 278 88.5C278 91.02 279.951 93 282.585 93Z" fill="#E8EAF2"></path>
<path d="M252.872 92H260.128C262.823 92 265 90.4091 265 88.5C265 86.5909 262.823 85 260.128 85H252.872C250.177 85 248 86.5909 248 88.5C248 90.4091 250.177 92 252.872 92Z" fill="#363840"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M45 166C48.8182 166 52 162.818 52 159C52 155.182 48.8182 152 45 152C41.1818 152 38 155.182 38 159C38 162.818 41.1818 166 45 166Z" fill="#B0B6C9"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M217 232C220.818 232 224 228.818 224 225C224 221.182 220.818 218 217 218C213.182 218 210 221.182 210 225C210 228.818 213.182 232 217 232Z" fill="#2683FF"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 142C29.8182 142 33 139.045 33 135.5C33 131.955 29.8182 129 26 129C22.1818 129 19 131.955 19 135.5C19 139.045 22.1818 142 26 142Z" fill="white"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M45 142C48.8182 142 52 139.045 52 135.5C52 131.955 48.8182 129 45 129C41.1818 129 38 131.955 38 135.5C38 139.045 41.1818 142 45 142Z" fill="#E8EAF2"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M64 142C67.8182 142 71 139.045 71 135.5C71 131.955 67.8182 129 64 129C60.1818 129 57 131.955 57 135.5C57 139.045 60.1818 142 64 142Z" fill="white"></path>
<path d="M107.014 129.651C107.014 129.651 152.017 118.395 199.527 125.169C212.857 127.061 224.785 134.831 232.001 146.186C245.031 166.606 263.374 203.062 259.465 241.112L239.018 246.093C239.018 246.093 224.885 200.97 209.049 182.643C209.049 182.643 190.205 225.275 191.208 248.683C191.208 249.38 191.308 249.977 191.308 250.575C193.513 273.485 101 254.858 101 254.858L107.014 129.651Z" fill="#F5F6FA"></path>
<path d="M143 89.7894L145.01 121.569C145.211 124.568 147.12 127.066 149.833 127.865C156.063 129.664 167.821 131.863 179.276 127.266C181.387 126.466 182.492 123.968 181.789 121.669L166.514 73L143 89.7894Z" fill="#8F96AD"></path>
<path d="M189 61.014C189 61.014 186.474 85.2772 181.219 95.8484C175.964 106.42 174.448 114.272 161.412 109.641C148.376 105.01 141.707 93.5328 142.01 80.2434C142.01 80.2434 142.414 59.7052 147.972 54.3692C153.631 49.0333 189 61.014 189 61.014Z" fill="#B0B6C9"></path>
<path d="M150.596 75.686L152.115 76.4754C152.115 76.4754 153.128 60.6872 159.814 61.4766C166.5 62.266 190.609 69.8641 199.625 64.9303C208.235 60.1938 191.521 44.2082 180.074 40.4585C163.866 35.0313 150.798 35.5247 144.822 45.2936C144.416 45.8857 143.606 45.8857 143.201 45.2936C142.492 44.0108 128.209 53.9772 132.97 65.917C133.172 66.5091 138.946 83.4815 140.567 83.9748C140.972 84.0735 141.479 83.8762 141.681 83.4815L146.24 74.4032C146.442 73.9098 147.05 73.7125 147.557 74.0085L150.596 75.686Z" fill="#0F002D"></path>
<path d="M149.877 78.0283C149.877 78.0283 154.31 62.6808 145.56 63.0051C136.81 63.3293 139.844 79.7576 144.744 83L149.877 78.0283Z" fill="#B0B6C9"></path>
<path d="M106.635 221.07C104.63 206.983 119.272 186.154 125.289 178.305C126.994 176.092 127.996 173.274 127.996 170.457C128.197 150.433 119.773 137.553 106.335 129C106.335 129 57.5953 185.953 70.0308 229.724C71.3345 234.453 73.4406 238.478 76.048 242C78.0538 225.397 97.1082 221.875 106.635 221.07Z" fill="#F5F6FA"></path>
<path d="M107.966 215L106 214.798C107.655 200.851 120.172 183.67 125.448 177L127 178.112C121.828 184.681 109.621 201.559 107.966 215Z" fill="#0F002D"></path>
<path d="M107.128 221.954C106.926 221.337 106.825 220.617 106.725 220C97.054 220.823 78.0147 224.423 76 241.29C97.8599 270.808 158 260.111 158 260.111V248.592C158.101 248.695 111.862 239.953 107.128 221.954Z" fill="#B0B6C9"></path>
<path d="M152 257C152 257 160.863 236.189 176.575 243.593C192.187 250.997 190.978 255.799 190.978 255.799L152 257Z" fill="#B0B6C9"></path>
<path d="M271.213 238H136.787C134.194 238 132 235.787 132 233.172V139.828C132 137.213 134.194 135 136.787 135H271.213C273.806 135 276 137.213 276 139.828V233.172C276 235.787 273.906 238 271.213 238Z" fill="#363840"></path>
<path d="M217.252 258H195.744C193.109 258 191 256 191 253.5V190.5C191 188 193.109 186 195.744 186H217.252C219.888 186 221.996 188 221.996 190.5V253.5C222.102 255.9 219.888 258 217.252 258Z" fill="#363840"></path>
<path d="M246.189 254H150.811C149.305 254 148 255.444 148 257.111V258.889C148 260.556 149.305 262 150.811 262H246.189C247.695 262 249 260.556 249 258.889V257.111C249 255.444 247.795 254 246.189 254Z" fill="#363840"></path>
<path d="M350.452 224.555C349.952 224.555 349.553 224.555 349.154 224.654C348.355 224.754 347.557 224.256 347.257 223.56C337.873 206.543 319.705 195 298.742 195C279.775 195 263.004 204.454 253.121 218.883C252.622 219.579 251.724 219.878 250.925 219.778C248.429 219.281 245.834 218.982 243.239 218.982C223.772 219.082 208 234.605 208 253.91C208 253.91 208 253.91 208 254.01C208 255.104 208.898 256 210.096 256H377.904C379.002 256 380 255.104 380 254.01V253.91C379.8 237.591 366.623 224.555 350.452 224.555Z" fill="#B0B6C9"></path>
<path d="M206 195C210.418 195 214 191.194 214 186.5C214 181.806 210.418 178 206 178C201.582 178 198 181.806 198 186.5C198 191.194 201.582 195 206 195Z" fill="white"></path>
</svg>
</div>
</div>
`;

30
web/satellite/tests/unit/projectMembers/__snapshots__/SortingListHeader.spec.ts.snap Normal file
View File

@ -0,0 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SortingListHeader.vue should render correctly 1`] = `
<div class="sort-header-container">
<div class="sort-header-container__name-container">
<p>Name</p>
<div class="container"><svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"></path>
</svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="active">
<path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"></path>
</svg></div>
</div>
<div class="sort-header-container__added-container">
<p>Added</p>
<div class="container"><svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"></path>
</svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"></path>
</svg></div>
</div>
<div class="sort-header-container__email-container">
<p>Email</p>
<div class="container"><svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"></path>
</svg> <svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
<path d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"></path>
</svg></div>
</div>
</div>
`;

429
web/satellite/tests/unit/store/projectMembers.spec.ts
View File

@ -3,12 +3,9 @@
import { projectMembersModule } from '@/store/modules/projectMembers';
import { createLocalVue } from '@vue/test-utils';
import * as api from '@/api/projectMembers';
import { addProjectMembersRequest } from '@/api/projectMembers';
import { PROJECT_MEMBER_MUTATIONS } from '@/store/mutationConstants';
import Vuex from 'vuex';
import { TeamMember } from '@/types/teamMembers';
import { RequestResponse } from '@/types/response';
import { ProjectMember, ProjectMemberCursor, ProjectMembersPage } from '@/types/projectMembers';
const mutations = projectMembersModule.mutations;
@ -19,7 +16,10 @@ describe('mutations', () => {
it('success delete project members', () => {
const state = {
projectMembers: [{user: {email: '1'}}, {user: {email: '2'}}]
cursor: new ProjectMemberCursor(),
page: {
projectMembers: [{user: {email: '1'}}, {user: {email: '2'}}]
} as ProjectMembersPage,
};
const store = new Vuex.Store({state, mutations});
@ -27,12 +27,15 @@ describe('mutations', () => {
store.commit(PROJECT_MEMBER_MUTATIONS.DELETE, membersToDelete);
expect(state.projectMembers.length).toBe(0);
expect(state.page.projectMembers.length).toBe(0);
});
it('error delete project members', () => {
const state = {
projectMembers: [{user: {email: '1'}}, {user: {email: '2'}}]
cursor: new ProjectMemberCursor(),
page: {
projectMembers: [{user: {email: '1'}}, {user: {email: '2'}}]
} as ProjectMembersPage,
};
const store = new Vuex.Store({state, mutations});
@ -40,18 +43,21 @@ describe('mutations', () => {
store.commit(PROJECT_MEMBER_MUTATIONS.DELETE, membersToDelete);
expect(state.projectMembers.length).toBe(2);
expect(state.page.projectMembers.length).toBe(2);
});
it('toggle selection', () => {
const state = {
projectMembers: [{
user: {id: '1'},
isSelected: false
}, {
user: {id: '2'},
isSelected: false
}]
cursor: new ProjectMemberCursor(),
page: {
projectMembers: [{
user: {id: '1'},
isSelected: false
}, {
user: {id: '2'},
isSelected: false
}]
} as ProjectMembersPage,
};
const store = new Vuex.Store({state, mutations});
@ -59,219 +65,224 @@ describe('mutations', () => {
store.commit(PROJECT_MEMBER_MUTATIONS.TOGGLE_SELECTION, memberId);
expect(state.projectMembers[0].isSelected).toBeTruthy();
expect(state.projectMembers[1].isSelected).toBeFalsy();
expect(state.page.projectMembers[0].isSelected).toBeTruthy();
expect(state.page.projectMembers[1].isSelected).toBeFalsy();
});
it('clear selection', () => {
const state = {
projectMembers: [{
user: {id: '1'},
isSelected: true
}, {
user: {id: '2'},
isSelected: true
}]
cursor: new ProjectMemberCursor(),
page: {
projectMembers: [{
user: {id: '1'},
isSelected: true
}, {
user: {id: '2'},
isSelected: true
}]
} as ProjectMembersPage,
};
const store = new Vuex.Store({state, mutations});
store.commit(PROJECT_MEMBER_MUTATIONS.CLEAR_SELECTION);
expect(state.projectMembers[0].isSelected).toBeFalsy();
expect(state.projectMembers[1].isSelected).toBeFalsy();
expect(state.page.projectMembers[0].isSelected).toBeFalsy();
expect(state.page.projectMembers[1].isSelected).toBeFalsy();
});
it('fetch team members', () => {
it('fetch projectMembers members', () => {
const state = {
projectMembers: []
cursor: new ProjectMemberCursor(),
page: new ProjectMembersPage(),
};
const store = new Vuex.Store({state, mutations});
const teamMembers = [{
user: {id: '1'}
}];
const teamMembers = new ProjectMembersPage();
teamMembers.projectMembers = [
new ProjectMember('', '', '', '', '1'),
];
store.commit(PROJECT_MEMBER_MUTATIONS.FETCH, teamMembers);
expect(state.projectMembers.length).toBe(1);
expect(state.page.projectMembers.length).toBe(1);
});
});
describe('actions', () => {
beforeEach(() => {
jest.resetAllMocks();
});
// describe('actions', () => {
// beforeEach(() => {
// jest.resetAllMocks();
// });
//
// it('success add project members', async function () {
// const rootGetters = {
// selectedProject: {
// id: '1'
// },
// searchParameters: {},
// pagination: {limit: 20, offset: 0}
// };
// jest.spyOn(api, 'addProjectMembersRequest').mockReturnValue(Promise.resolve(<RequestResponse<null>>{isSuccess: true}));
//
// const emails = ['1', '2'];
//
// const dispatchResponse = await projectMembersModule.actions.addProjectMembers({rootGetters}, emails);
//
// expect(dispatchResponse.isSuccess).toBeTruthy();
// });
//
// it('error add project members', async function () {
// const rootGetters = {
// selectedProject: {
// id: '1'
// }
// };
// jest.spyOn(api, 'addProjectMembersRequest').mockReturnValue(Promise.resolve(<RequestResponse<null>>{isSuccess: false}));
//
// const emails = ['1', '2'];
//
// const dispatchResponse = await projectMembersModule.actions.addProjectMembers({rootGetters}, emails);
//
// expect(dispatchResponse.isSuccess).toBeFalsy();
// });
//
// it('success delete project members', async () => {
// const rootGetters = {
// selectedProject: {
// id: '1'
// }
// };
// jest.spyOn(api, 'deleteProjectMembersRequest').mockReturnValue(Promise.resolve(<RequestResponse<null>>{isSuccess: true}));
//
// const commit = jest.fn();
// const emails = ['1', '2'];
//
// const dispatchResponse = await projectMembersModule.actions.deleteProjectMembers({commit, rootGetters}, emails);
//
// expect(dispatchResponse.isSuccess).toBeTruthy();
// expect(commit).toHaveBeenCalledWith(PROJECT_MEMBER_MUTATIONS.DELETE, emails);
// });
//
// it('error delete project members', async () => {
// const rootGetters = {
// selectedProject: {
// id: '1'
// }
// };
// jest.spyOn(api, 'deleteProjectMembersRequest').mockReturnValue(Promise.resolve(<RequestResponse<null>>{isSuccess: false}));
//
// const commit = jest.fn();
// const emails = ['1', '2'];
//
// const dispatchResponse = await projectMembersModule.actions.deleteProjectMembers({commit, rootGetters}, emails);
//
// expect(dispatchResponse.isSuccess).toBeFalsy();
// expect(commit).toHaveBeenCalledTimes(0);
// });
//
// it('toggle selection', function () {
// const commit = jest.fn();
// const projectMemberId = '1';
//
// projectMembersModule.actions.toggleProjectMemberSelection({commit}, projectMemberId);
//
// expect(commit).toHaveBeenCalledWith(PROJECT_MEMBER_MUTATIONS.TOGGLE_SELECTION, projectMemberId);
// });
//
// it('clear selection', function () {
// const commit = jest.fn();
//
// projectMembersModule.actions.clearProjectMemberSelection({commit});
//
// expect(commit).toHaveBeenCalledTimes(1);
// });
//
// it('success fetch project members', async function () {
// const rootGetters = {
// selectedProject: {
// id: '1'
// }
// };
// const state = {
// pagination: {
// limit: 20,
// offset: 0
// },
// searchParameters: {
// searchQuery: ''
// }
// };
// const commit = jest.fn();
// const projectMemberMockModel: ProjectMember = new ProjectMember('1', '1', '1', '1', '1');
// jest.spyOn(api, 'fetchProjectMembersRequest').mockReturnValue(
// Promise.resolve(<RequestResponse<ProjectMember[]>>{
// isSuccess: true,
// data: [projectMemberMockModel]
// }));
//
// const dispatchResponse = await projectMembersModule.actions.fetchProjectMembers({
// state,
// commit,
// rootGetters
// });
//
// expect(dispatchResponse.isSuccess).toBeTruthy();
// expect(commit).toHaveBeenCalledWith(PROJECT_MEMBER_MUTATIONS.FETCH, [projectMemberMockModel]);
// });
//
// it('error fetch project members', async function () {
// const rootGetters = {
// selectedProject: {
// id: '1'
// }
// };
// const state = {
// pagination: {
// limit: 20,
// offset: 0
// },
// searchParameters: {
// searchQuery: ''
// }
// };
// const commit = jest.fn();
// jest.spyOn(api, 'fetchProjectMembersRequest').mockReturnValue(
// Promise.resolve(<RequestResponse<ProjectMember[]>>{
// isSuccess: false,
// })
// );
//
// const dispatchResponse = await projectMembersModule.actions.fetchProjectMembers({
// state,
// commit,
// rootGetters
// });
//
// expect(dispatchResponse.isSuccess).toBeFalsy();
// expect(commit).toHaveBeenCalledTimes(0);
// });
// });
it('success add project members', async function () {
const rootGetters = {
selectedProject: {
id: '1'
},
searchParameters: {},
pagination: {limit: 20, offset: 0}
};
jest.spyOn(api, 'addProjectMembersRequest').mockReturnValue(Promise.resolve(<RequestResponse<null>>{isSuccess: true}));
const emails = ['1', '2'];
const dispatchResponse = await projectMembersModule.actions.addProjectMembers({rootGetters}, emails);
expect(dispatchResponse.isSuccess).toBeTruthy();
});
it('error add project members', async function () {
const rootGetters = {
selectedProject: {
id: '1'
}
};
jest.spyOn(api, 'addProjectMembersRequest').mockReturnValue(Promise.resolve(<RequestResponse<null>>{isSuccess: false}));
const emails = ['1', '2'];
const dispatchResponse = await projectMembersModule.actions.addProjectMembers({rootGetters}, emails);
expect(dispatchResponse.isSuccess).toBeFalsy();
});
it('success delete project members', async () => {
const rootGetters = {
selectedProject: {
id: '1'
}
};
jest.spyOn(api, 'deleteProjectMembersRequest').mockReturnValue(Promise.resolve(<RequestResponse<null>>{isSuccess: true}));
const commit = jest.fn();
const emails = ['1', '2'];
const dispatchResponse = await projectMembersModule.actions.deleteProjectMembers({commit, rootGetters}, emails);
expect(dispatchResponse.isSuccess).toBeTruthy();
expect(commit).toHaveBeenCalledWith(PROJECT_MEMBER_MUTATIONS.DELETE, emails);
});
it('error delete project members', async () => {
const rootGetters = {
selectedProject: {
id: '1'
}
};
jest.spyOn(api, 'deleteProjectMembersRequest').mockReturnValue(Promise.resolve(<RequestResponse<null>>{isSuccess: false}));
const commit = jest.fn();
const emails = ['1', '2'];
const dispatchResponse = await projectMembersModule.actions.deleteProjectMembers({commit, rootGetters}, emails);
expect(dispatchResponse.isSuccess).toBeFalsy();
expect(commit).toHaveBeenCalledTimes(0);
});
it('toggle selection', function () {
const commit = jest.fn();
const projectMemberId = '1';
projectMembersModule.actions.toggleProjectMemberSelection({commit}, projectMemberId);
expect(commit).toHaveBeenCalledWith(PROJECT_MEMBER_MUTATIONS.TOGGLE_SELECTION, projectMemberId);
});
it('clear selection', function () {
const commit = jest.fn();
projectMembersModule.actions.clearProjectMemberSelection({commit});
expect(commit).toHaveBeenCalledTimes(1);
});
it('success fetch project members', async function () {
const rootGetters = {
selectedProject: {
id: '1'
}
};
const state = {
pagination:{
limit: 20,
offset: 0
},
searchParameters: {
searchQuery: ''
}
};
const commit = jest.fn();
const projectMemberMockModel: TeamMember = new TeamMember('1', '1', '1', '1', '1');
jest.spyOn(api, 'fetchProjectMembersRequest').mockReturnValue(
Promise.resolve(<RequestResponse<TeamMember[]>>{
isSuccess: true,
data: [projectMemberMockModel]
}));
const dispatchResponse = await projectMembersModule.actions.fetchProjectMembers({
state,
commit,
rootGetters
});
expect(dispatchResponse.isSuccess).toBeTruthy();
expect(commit).toHaveBeenCalledWith(PROJECT_MEMBER_MUTATIONS.FETCH, [projectMemberMockModel]);
});
it('error fetch project members', async function () {
const rootGetters = {
selectedProject: {
id: '1'
}
};
const state = {
pagination:{
limit: 20,
offset: 0
},
searchParameters: {
searchQuery: ''
}
};
const commit = jest.fn();
jest.spyOn(api, 'fetchProjectMembersRequest').mockReturnValue(
Promise.resolve(<RequestResponse<TeamMember[]>>{
isSuccess: false,
})
);
const dispatchResponse = await projectMembersModule.actions.fetchProjectMembers({
state,
commit,
rootGetters
});
expect(dispatchResponse.isSuccess).toBeFalsy();
expect(commit).toHaveBeenCalledTimes(0);
});
});
describe('getters', () => {
it('project members', function () {
const state = {
projectMembers: [{user: {email: '1'}}]
};
const retrievedProjectMembers = projectMembersModule.getters.projectMembers(state);
expect(retrievedProjectMembers.length).toBe(1);
});
it('selected project members', function () {
const state = {
projectMembers: [
{isSelected: false},
{isSelected: true},
{isSelected: true},
{isSelected: true},
{isSelected: false},
]
};
const retrievedSelectedProjectMembers = projectMembersModule.getters.selectedProjectMembers(state);
expect(retrievedSelectedProjectMembers.length).toBe(3);
});
});
// describe('getters', () => {
// it('project members', function () {
// const state = {
// projectMembers: [{user: {email: '1'}}]
// };
// const retrievedProjectMembers = projectMembersModule.getters.projectMembers(state);
//
// expect(retrievedProjectMembers.length).toBe(1);
// });
//
// it('selected project members', function () {
// const state = {
// projectMembers: [
// {isSelected: false},
// {isSelected: true},
// {isSelected: true},
// {isSelected: true},
// {isSelected: false},
// ]
// };
// const retrievedSelectedProjectMembers = projectMembersModule.getters.selectedProjectMembers(state);
// expect(retrievedSelectedProjectMembers.length).toBe(3);
// });
// });