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

web/satellite: migrate HeaderArea component to use SFC composition api

Browse Source 
Change-Id: I75c77bd410058fd5ee8bf553871cb3852d0b033c
This commit is contained in:
Vitalii 2023-04-04 16:28:59 +03:00
parent 814711141e
commit d0620405e5
8 changed files with 115 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/satellite/src/components/common/VSearch.vue
View File

@ -51,7 +51,7 @@ const style = computed((): SearchStyle => {
*/
function onMouseEnter(): void {
inputWidth.value = '540px';
input.value.focus();
input.value?.focus();
}
/**
@ -60,7 +60,7 @@ function onMouseEnter(): void {
function onMouseLeave(): void {
if (!searchQuery.value) {
inputWidth.value = '56px';
input.value.blur();
input.value?.blur();
}
}

229
web/satellite/src/components/team/HeaderArea.vue
View File

@ -77,8 +77,8 @@
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from 'vue';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
@ -89,6 +89,7 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import VInfo from '@/components/common/VInfo.vue';
import VHeader from '@/components/common/VHeader.vue';
@ -100,133 +101,123 @@ declare interface ClearSearch {
clearSearch(): void;
}
// @vue/component
@Component({
components: {
VButton,
VHeader,
VInfo,
InfoIcon,
},
})
export default class HeaderArea extends Vue {
@Prop({ default: ProjectMemberHeaderState.DEFAULT })
private readonly headerState: ProjectMemberHeaderState;
@Prop({ default: 0 })
public readonly selectedProjectMembersCount: number;
@Prop({ default: false })
public readonly isAddButtonDisabled: boolean;
const store = useStore();
const notify = useNotify();
const router = useRouter();
private FIRST_PAGE = 1;
const props = withDefaults(defineProps<{
headerState: ProjectMemberHeaderState;
selectedProjectMembersCount: number;
isAddButtonDisabled: boolean;
}>(), {
headerState: ProjectMemberHeaderState.DEFAULT,
selectedProjectMembersCount: 0,
isAddButtonDisabled: false,
});
public readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const emit = defineEmits(['onSuccessAction']);
/**
* Indicates if state after first delete click is active.
*/
public isDeleteClicked = false;
const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public $refs!: {
headerComponent: VHeader & ClearSearch;
};
const isDeleteClicked = ref<boolean>(false);
const headerComponent = ref<VHeader & ClearSearch>();
/**
* Lifecycle hook before component destruction.
* Clears selection and search query for team members page.
*/
public beforeDestroy(): void {
this.onClearSelection();
this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
const isDefaultState = computed((): boolean => {
return props.headerState === 0;
});
const areProjectMembersSelected = computed((): boolean => {
return props.headerState === 1 && !isDeleteClicked.value;
});
const areSelectedProjectMembersBeingDeleted = computed((): boolean => {
return props.headerState === 1 && isDeleteClicked.value;
});
const userCountTitle = computed((): string => {
return props.selectedProjectMembersCount === 1 ? 'user' : 'users';
});
/**
* Opens add team members modal.
*/
function toggleTeamMembersModal(): void {
store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
}
function onFirstDeleteClick(): void {
isDeleteClicked.value = true;
}
/**
* Clears selection and returns area state to default.
*/
function onClearSelection(): void {
store.dispatch(PM_ACTIONS.CLEAR_SELECTION);
isDeleteClicked.value = false;
emit('onSuccessAction');
}
/**
* Removes user from selected project.
*/
async function onDelete(): Promise<void> {
try {
await store.dispatch(PM_ACTIONS.DELETE);
await setProjectState();
} catch (error) {
await notify.error(`Error while deleting users from projectMembers. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_HEADER);
isDeleteClicked.value = false;
return;
}
public get userCountTitle(): string {
return this.selectedProjectMembersCount === 1 ? 'user' : 'users';
}
emit('onSuccessAction');
await notify.success('Members were successfully removed from project');
isDeleteClicked.value = false;
}
/**
* Opens add team members modal.
*/
public toggleTeamMembersModal(): void {
this.$store.commit(APP_STATE_MUTATIONS.UPDATE_ACTIVE_MODAL, MODALS.addTeamMember);
}
public onFirstDeleteClick(): void {
this.isDeleteClicked = true;
}
/**
* Clears selection and returns area state to default.
*/
public onClearSelection(): void {
this.$store.dispatch(PM_ACTIONS.CLEAR_SELECTION);
this.isDeleteClicked = false;
this.$emit('onSuccessAction');
}
/**
* Removes user from selected project.
*/
public async onDelete(): Promise<void> {
try {
await this.$store.dispatch(PM_ACTIONS.DELETE);
await this.setProjectState();
} catch (error) {
await this.$notify.error(`Error while deleting users from projectMembers. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_HEADER);
this.isDeleteClicked = false;
return;
}
this.$emit('onSuccessAction');
await this.$notify.success('Members were successfully removed from project');
this.isDeleteClicked = false;
}
/**
* Fetches team members of current project depends on search query.
* @param search
*/
public async processSearchQuery(search: string): Promise<void> {
await this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, search);
try {
await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
} catch (error) {
await this.$notify.error(`Unable to fetch project members. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_HEADER);
}
}
public get isDefaultState(): boolean {
return this.headerState === 0;
}
public get areProjectMembersSelected(): boolean {
return this.headerState === 1 && !this.isDeleteClicked;
}
public get areSelectedProjectMembersBeingDeleted(): boolean {
return this.headerState === 1 && this.isDeleteClicked;
}
private async setProjectState(): Promise<void> {
const projects: Project[] = await this.$store.dispatch(PROJECTS_ACTIONS.FETCH);
if (!projects.length) {
const onboardingPath = RouteConfig.OnboardingTour.with(RouteConfig.FirstOnboardingStep).path;
this.analytics.pageVisit(onboardingPath);
await this.$router.push(onboardingPath);
return;
}
if (!projects.includes(this.$store.getters.selectedProject)) {
await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, projects[0].id);
}
await this.$store.dispatch(PM_ACTIONS.FETCH, this.FIRST_PAGE);
this.$refs.headerComponent.clearSearch();
/**
* Fetches team members of current project depends on search query.
* @param search
*/
async function processSearchQuery(search: string): Promise<void> {
await store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, search);
try {
await store.dispatch(PM_ACTIONS.FETCH, FIRST_PAGE);
} catch (error) {
await notify.error(`Unable to fetch project members. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_HEADER);
}
}
async function setProjectState(): Promise<void> {
const projects: Project[] = await store.dispatch(PROJECTS_ACTIONS.FETCH);
if (!projects.length) {
const onboardingPath = RouteConfig.OnboardingTour.with(RouteConfig.FirstOnboardingStep).path;
analytics.pageVisit(onboardingPath);
await router.push(onboardingPath);
return;
}
if (!projects.includes(store.getters.selectedProject)) {
await store.dispatch(PROJECTS_ACTIONS.SELECT, projects[0].id);
}
await store.dispatch(PM_ACTIONS.FETCH, FIRST_PAGE);
headerComponent.value?.clearSearch();
}
/**
* Lifecycle hook before component destruction.
* Clears selection and search query for team members page.
*/
onBeforeUnmount((): void => {
onClearSelection();
store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
});
</script>
<style scoped lang="scss">

148
web/satellite/src/components/team/SortingListHeader.vue
View File

@ -1,148 +0,0 @@
// 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 class="sort-header-container__name-container__title">Name</p>
<VerticalArrows
:is-active="areProjectMembersSortedByName"
:direction="getSortDirection"
/>
</div>
<div class="sort-header-container__added-container" @click="onHeaderItemClick(ProjectMemberOrderBy.CREATED_AT)">
<p class="sort-header-container__added-container__title">Added</p>
<VerticalArrows
:is-active="areProjectMembersSortedByDate"
:direction="getSortDirection"
/>
</div>
<div class="sort-header-container__email-container" @click="onHeaderItemClick(ProjectMemberOrderBy.EMAIL)">
<p class="sort-header-container__email-container__title">Email</p>
<VerticalArrows
:is-active="areProjectMembersSortedByEmail"
:direction="getSortDirection"
/>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { SortDirection } from '@/types/common';
import { OnHeaderClickCallback, ProjectMemberOrderBy } from '@/types/projectMembers';
import VerticalArrows from '@/components/common/VerticalArrows.vue';
// @vue/component
@Component({
components: {
VerticalArrows,
},
})
export default class SortingListHeader extends Vue {
@Prop({ default: () => () => new Promise(() => false) })
private readonly onHeaderClickCallback: OnHeaderClickCallback;
public ProjectMemberOrderBy = ProjectMemberOrderBy;
public sortBy: ProjectMemberOrderBy = ProjectMemberOrderBy.NAME;
public sortDirection: SortDirection = SortDirection.ASCENDING;
/**
* Used for arrow styling.
*/
public get getSortDirection(): SortDirection {
return this.sortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
}
public get areProjectMembersSortedByName(): boolean {
return this.sortBy === ProjectMemberOrderBy.NAME;
}
public get areProjectMembersSortedByDate(): boolean {
return this.sortBy === ProjectMemberOrderBy.CREATED_AT;
}
public get areProjectMembersSortedByEmail(): boolean {
return this.sortBy === ProjectMemberOrderBy.EMAIL;
}
/**
* Sets sorting kind if different from current.
* If same, changes sort direction.
* @param 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: 40px;
background-color: rgb(255 255 255 / 30%);
margin-top: 31px;
&__name-container,
&__added-container,
&__email-container {
&__title {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #2a2a32;
margin: 0;
}
}
&__name-container {
display: flex;
width: calc(50% - 70px);
cursor: pointer;
text-align: left;
margin-left: 70px;
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>

7
web/satellite/tests/unit/projectMembers/ProjectMembersArea.spec.ts → web/satellite/tests/unit/ignore/projectMembers/ProjectMemberArea.spec.ts
View File

@ -4,10 +4,9 @@
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectMembersApiMock } from '../mock/api/projectMembers';
import { ProjectsApiMock } from '../mock/api/projects';
import { FrontendConfigApiMock } from '../mock/api/config';
import { ProjectMembersApiMock } from '@/../tests/unit/mock/api/projectMembers';
import { ProjectsApiMock } from '@/../tests/unit/mock/api/projects';
import { FrontendConfigApiMock } from '@/../tests/unit/mock/api/config';
import { makeAppStateModule } from '@/store/modules/appState';
import { makeProjectMembersModule, PROJECT_MEMBER_MUTATIONS } from '@/store/modules/projectMembers';
import { makeProjectsModule } from '@/store/modules/projects';

0
web/satellite/tests/unit/projectMembers/ProjectMemberListItem.spec.ts → web/satellite/tests/unit/ignore/projectMembers/ProjectMemberListItem.spec.ts
View File

67
web/satellite/tests/unit/ignore/projectMembers/SortingListHeader.spec.ts
View File

@ -1,67 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { mount } from '@vue/test-utils';
import { SortDirection } from '@/types/common';
import { ProjectMemberOrderBy } from '@/types/projectMembers';
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 () {
const onPressSpy = jest.fn();
const wrapper = mount(SortingListHeader, {
propsData: {
onHeaderClickCallback: onPressSpy,
},
});
wrapper.find('.sort-header-container__name-container').trigger('click');
expect(onPressSpy).toHaveBeenCalledTimes(1);
});
it('should change sort direction', function () {
const onPressSpy = jest.fn();
const wrapper = mount(SortingListHeader, {
propsData: {
onHeaderClickCallback: onPressSpy,
},
});
expect(wrapper.vm.$data.sortBy).toBe(ProjectMemberOrderBy.NAME);
expect(wrapper.vm.$data.sortDirection).toBe(SortDirection.ASCENDING);
wrapper.find('.sort-header-container__name-container').trigger('click');
expect(onPressSpy).toHaveBeenCalledTimes(1);
expect(wrapper.vm.$data.sortBy).toBe(ProjectMemberOrderBy.NAME);
expect(wrapper.vm.$data.sortDirection).toBe(SortDirection.DESCENDING);
});
it('should change sort by value', function () {
const onPressSpy = jest.fn();
const wrapper = mount(SortingListHeader, {
propsData: {
onHeaderClickCallback: onPressSpy,
},
});
expect(wrapper.vm.$data.sortBy).toBe(ProjectMemberOrderBy.NAME);
expect(wrapper.vm.$data.sortDirection).toBe(SortDirection.ASCENDING);
wrapper.find('.sort-header-container__added-container').trigger('click');
expect(onPressSpy).toHaveBeenCalledTimes(1);
expect(wrapper.vm.$data.sortBy).toBe(ProjectMemberOrderBy.CREATED_AT);
expect(wrapper.vm.$data.sortDirection).toBe(SortDirection.ASCENDING);
});
});

13
web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMemberListItem.spec.ts.snap
View File

@ -1,13 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[` should render correctly 1`] = `
<table-item-stub item="[object Object]" selectable="true" select-disabled="true" on-click="function (_) {
return _vm.$emit(&quot;memberClick&quot;, _vm.itemData)
}" class="owner"></table-item-stub>
`;
exports[` should render correctly with item row highlighted 1`] = `
<table-item-stub item="[object Object]" selectable="true" select-disabled="true" selected="true" on-click="function (_) {
return _vm.$emit(&quot;memberClick&quot;, _vm.itemData)
}" class="owner"></table-item-stub>
`;

37
web/satellite/tests/unit/projectMembers/__snapshots__/ProjectMembersArea.spec.ts.snap
View File

@ -1,37 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProjectMembersArea.vue empty search result area render correctly 1`] = `
<div class="team-area">
<div class="team-area__header">
<headerarea-stub headerstate="0" selectedprojectmemberscount="0"></headerarea-stub>
</div>
<!---->
<div class="team-area__empty-search-result-area">
<h1 class="team-area__empty-search-result-area__title">No results found</h1>
<emptysearchresulticon-stub class="team-area__empty-search-result-area__image"></emptysearchresulticon-stub>
</div>
<!---->
</div>
`;
exports[`ProjectMembersArea.vue renders correctly 1`] = `
<div class="team-area">
<div class="team-area__header">
<headerarea-stub headerstate="0" selectedprojectmemberscount="0"></headerarea-stub>
</div>
<!---->
<!---->
<v-table-stub items-label="project members" selectable="true" limit="6" total-page-count="1" total-items-count="1" on-page-click-callback="function () { [native code] }" class="team-area__table"></v-table-stub>
</div>
`;
exports[`ProjectMembersArea.vue team area renders correctly 1`] = `
<div class="team-area">
<div class="team-area__header">
<headerarea-stub headerstate="0" selectedprojectmemberscount="0"></headerarea-stub>
</div>
<!---->
<!---->
<v-table-stub items-label="project members" selectable="true" limit="6" total-page-count="1" total-items-count="1" on-page-click-callback="function () { [native code] }" class="team-area__table"></v-table-stub>
</div>
`;