429 lines
13 KiB
Vue
429 lines
13 KiB
Vue
// Copyright (C) 2019 Storj Labs, Inc.
|
||
// See LICENSE for copying information.
|
||
|
||
<template>
|
||
<div class="dashboard-container">
|
||
<div v-if="isLoading" class="loading-overlay active">
|
||
<img class="loading-image" src="@/../static/images/register/Loading.gif" alt="Company logo loading gif">
|
||
</div>
|
||
<div v-if="!isLoading" class="dashboard-container__wrap">
|
||
<NavigationArea class="regular-navigation"/>
|
||
<div class="dashboard-container__wrap__column">
|
||
<DashboardHeader/>
|
||
<div class="dashboard-container__main-area">
|
||
<div class="dashboard-container__main-area__banner-area">
|
||
<VBanner
|
||
v-if="isBannerShown"
|
||
text="We’ve Now Added Billing!"
|
||
additional-text="Your attention is required. Add a credit card to set up your account."
|
||
:path="billingPath"
|
||
/>
|
||
</div>
|
||
<div class="dashboard-container__main-area__content">
|
||
<router-view/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="isBlurShown"
|
||
class="dashboard-container__blur-area"
|
||
>
|
||
<div class="dashboard-container__blur-area__button" @click="onCreateButtonClick">
|
||
<span class="dashboard-container__blur-area__button__label">+ Create Project</span>
|
||
</div>
|
||
<div class="dashboard-container__blur-area__message-box">
|
||
<div class="dashboard-container__blur-area__message-box__left-area">
|
||
<AddImage/>
|
||
<span class="dashboard-container__blur-area__message-box__left-area__message">
|
||
Create your first project
|
||
</span>
|
||
</div>
|
||
<CloseCrossIcon class="dashboard-container__blur-area__message-box__close-cross-container" @click="onCloseClick"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { Component, Vue } from 'vue-property-decorator';
|
||
|
||
import VBanner from '@/components/common/VBanner.vue';
|
||
import DashboardHeader from '@/components/header/HeaderArea.vue';
|
||
import NavigationArea from '@/components/navigation/NavigationArea.vue';
|
||
|
||
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
|
||
import AddImage from '@/../static/images/dashboard/Add.svg';
|
||
|
||
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
|
||
import { RouteConfig } from '@/router';
|
||
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
|
||
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
|
||
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
|
||
import { PROJECT_USAGE_ACTIONS } from '@/store/modules/usage';
|
||
import { USER_ACTIONS } from '@/store/modules/users';
|
||
import { CreditCard } from '@/types/payments';
|
||
import { Project } from '@/types/projects';
|
||
import {
|
||
API_KEYS_ACTIONS,
|
||
APP_STATE_ACTIONS,
|
||
PM_ACTIONS,
|
||
} from '@/utils/constants/actionNames';
|
||
import { AppState } from '@/utils/constants/appStateEnum';
|
||
|
||
const {
|
||
SETUP_ACCOUNT,
|
||
GET_BALANCE,
|
||
GET_CREDIT_CARDS,
|
||
GET_BILLING_HISTORY,
|
||
GET_PROJECT_CHARGES_CURRENT_ROLLUP,
|
||
} = PAYMENTS_ACTIONS;
|
||
|
||
@Component({
|
||
components: {
|
||
NavigationArea,
|
||
DashboardHeader,
|
||
VBanner,
|
||
AddImage,
|
||
CloseCrossIcon,
|
||
},
|
||
})
|
||
export default class DashboardArea extends Vue {
|
||
public readonly billingPath: string = RouteConfig.Account.with(RouteConfig.Billing).path;
|
||
|
||
/**
|
||
* Lifecycle hook after initial render.
|
||
* Pre fetches user`s and project information.
|
||
*/
|
||
public async mounted(): Promise<void> {
|
||
// TODO: combine all project related requests in one
|
||
try {
|
||
await this.$store.dispatch(USER_ACTIONS.GET);
|
||
} catch (error) {
|
||
if (!(error instanceof ErrorUnauthorized)) {
|
||
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.ERROR);
|
||
await this.$notify.error(error.message);
|
||
}
|
||
|
||
setTimeout(async () => await this.$router.push(RouteConfig.Login.path), 1000);
|
||
|
||
return;
|
||
}
|
||
|
||
let balance: number = 0;
|
||
let creditCards: CreditCard[] = [];
|
||
|
||
try {
|
||
await this.$store.dispatch(SETUP_ACCOUNT);
|
||
balance = await this.$store.dispatch(GET_BALANCE);
|
||
creditCards = await this.$store.dispatch(GET_CREDIT_CARDS);
|
||
await this.$store.dispatch(GET_BILLING_HISTORY);
|
||
await this.$store.dispatch(GET_PROJECT_CHARGES_CURRENT_ROLLUP);
|
||
} catch (error) {
|
||
await this.$notify.error(error.message);
|
||
}
|
||
|
||
let projects: Project[] = [];
|
||
|
||
try {
|
||
projects = await this.$store.dispatch(PROJECTS_ACTIONS.FETCH);
|
||
} catch (error) {
|
||
await this.$notify.error(error.message);
|
||
|
||
return;
|
||
}
|
||
|
||
if (!projects.length && !creditCards.length && balance === 0) {
|
||
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED_EMPTY);
|
||
|
||
try {
|
||
await this.$router.push(RouteConfig.Overview.path);
|
||
} catch (error) {
|
||
return;
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
if (!projects.length) {
|
||
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED_EMPTY);
|
||
|
||
if (this.$store.getters.isBonusCouponApplied) {
|
||
await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_CONTENT_BLUR);
|
||
}
|
||
|
||
if (!this.isRouteAccessibleWithoutProject()) {
|
||
try {
|
||
await this.$router.push(RouteConfig.Account.with(RouteConfig.Profile).path);
|
||
} catch (error) {
|
||
return;
|
||
}
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, projects[0].id);
|
||
|
||
await this.$store.dispatch(PM_ACTIONS.SET_SEARCH_QUERY, '');
|
||
try {
|
||
await this.$store.dispatch(PM_ACTIONS.FETCH, 1);
|
||
} catch (error) {
|
||
await this.$notify.error(`Unable to fetch project members. ${error.message}`);
|
||
}
|
||
|
||
try {
|
||
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
|
||
} catch (error) {
|
||
await this.$notify.error(`Unable to fetch project limits. ${error.message}`);
|
||
}
|
||
|
||
try {
|
||
await this.$store.dispatch(API_KEYS_ACTIONS.FETCH, 1);
|
||
} catch (error) {
|
||
await this.$notify.error(`Unable to fetch api keys. ${error.message}`);
|
||
}
|
||
|
||
try {
|
||
await this.$store.dispatch(PROJECT_USAGE_ACTIONS.FETCH_CURRENT_ROLLUP);
|
||
} catch (error) {
|
||
await this.$notify.error(`Unable to fetch project usage. ${error.message}`);
|
||
}
|
||
|
||
try {
|
||
await this.$store.dispatch(BUCKET_ACTIONS.FETCH, 1);
|
||
} catch (error) {
|
||
await this.$notify.error(`Unable to fetch buckets. ${error.message}`);
|
||
}
|
||
|
||
if (this.$store.getters.isBonusCouponApplied && !this.userHasHisOwnProject) {
|
||
await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_CONTENT_BLUR);
|
||
}
|
||
|
||
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED);
|
||
}
|
||
|
||
/**
|
||
* Indicates if bonus banner should be rendered.
|
||
*/
|
||
public get isBannerShown(): boolean {
|
||
const isNotOverviewPage = this.$route.name === RouteConfig.Overview.name;
|
||
const hasCreditCards = this.$store.state.paymentsModule.creditCards.length > 0;
|
||
|
||
return !(isNotOverviewPage || hasCreditCards);
|
||
}
|
||
|
||
/**
|
||
* Indicates if loading screen is active.
|
||
*/
|
||
public get isLoading(): boolean {
|
||
return this.$store.state.appStateModule.appState.fetchState === AppState.LOADING;
|
||
}
|
||
|
||
/**
|
||
* Indicates if content blur shown.
|
||
*/
|
||
public get isBlurShown(): boolean {
|
||
return this.$store.state.appStateModule.appState.isContentBlurShown;
|
||
}
|
||
|
||
/**
|
||
* Toggles create project popup showing.
|
||
*/
|
||
public onCreateButtonClick(): void {
|
||
this.onCloseClick();
|
||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_NEW_PROJ);
|
||
}
|
||
|
||
/**
|
||
* Hides blur.
|
||
*/
|
||
public onCloseClick(): void {
|
||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_CONTENT_BLUR);
|
||
}
|
||
|
||
/**
|
||
* This method checks if current route is available when user has no created projects.
|
||
*/
|
||
private isRouteAccessibleWithoutProject(): boolean {
|
||
const availableRoutes = [
|
||
RouteConfig.Account.with(RouteConfig.Billing).path,
|
||
RouteConfig.Account.with(RouteConfig.Profile).path,
|
||
RouteConfig.Overview.path,
|
||
];
|
||
|
||
return availableRoutes.includes(this.$router.currentRoute.path.toLowerCase());
|
||
}
|
||
|
||
/**
|
||
* Indicates if user has his own project.
|
||
*/
|
||
private get userHasHisOwnProject(): boolean {
|
||
return this.$store.state.projectsModule.projects.some((project: Project) => project.ownerId === this.$store.getters.user.id);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.dashboard-container {
|
||
position: fixed;
|
||
max-width: 100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: #f5f6fa;
|
||
z-index: 10;
|
||
|
||
&__wrap {
|
||
display: flex;
|
||
|
||
&__column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
&__main-area {
|
||
position: relative;
|
||
width: 100%;
|
||
height: calc(100vh - 50px);
|
||
overflow-y: scroll;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
&__banner-area {
|
||
flex: 0 1 auto;
|
||
}
|
||
|
||
&__content {
|
||
flex: 1 1 auto;
|
||
}
|
||
}
|
||
|
||
&__blur-area {
|
||
position: fixed;
|
||
max-width: 100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: rgba(12, 37, 70, 0.5);
|
||
backdrop-filter: blur(4px);
|
||
z-index: 20;
|
||
|
||
&__button {
|
||
position: fixed;
|
||
top: 30px;
|
||
right: 148px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 156px;
|
||
height: 40px;
|
||
background-color: #fff;
|
||
border: 1px solid #2683ff;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
z-index: 21;
|
||
|
||
&__label {
|
||
font-family: 'font_medium', sans-serif;
|
||
font-size: 15px;
|
||
line-height: 22px;
|
||
color: #2683ff;
|
||
}
|
||
}
|
||
|
||
&__message-box {
|
||
background-image: url('../../static/images/dashboard/message.png');
|
||
background-size: 100% 100%;
|
||
height: auto;
|
||
width: auto;
|
||
position: fixed;
|
||
top: 80px;
|
||
right: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
z-index: 21;
|
||
padding: 30px 30px 20px 20px;
|
||
|
||
&__left-area {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
&__message {
|
||
font-family: 'font_regular', sans-serif;
|
||
font-size: 14px;
|
||
line-height: 19px;
|
||
color: #373737;
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
|
||
&__close-cross-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 17px;
|
||
width: 17px;
|
||
cursor: pointer;
|
||
margin-left: 50px;
|
||
|
||
&:hover .close-cross-svg-path {
|
||
fill: #2683ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1024px) {
|
||
|
||
.regular-navigation {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 720px) {
|
||
|
||
.dashboard-container {
|
||
|
||
&__main-area {
|
||
left: 60px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.loading-overlay {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100vh;
|
||
z-index: 100;
|
||
background-color: rgba(134, 134, 148, 1);
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
-webkit-transition: all 0.5s linear;
|
||
-moz-transition: all 0.5s linear;
|
||
-o-transition: all 0.5s linear;
|
||
transition: all 0.5s linear;
|
||
|
||
.loading-image {
|
||
z-index: 200;
|
||
}
|
||
}
|
||
|
||
.loading-overlay.active {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
}
|
||
</style>
|