Billing markup and project page rework (#1963)
This commit is contained in:
Nikolay Yurchenko
GitHub
parent
d59c00b47c
commit
ae24778ef7
@ -11,23 +11,23 @@
|
||||
</div>
|
||||
<h2 class="edit-profile-popup__form-container__main-label-text">Edit profile</h2>
|
||||
</div>
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Full name"
|
||||
placeholder="Enter Full Name"
|
||||
width="100%"
|
||||
ref="fullNameInput"
|
||||
:error="fullNameError"
|
||||
:initValue="originalFullName"
|
||||
@setData="setFullName" />
|
||||
<HeaderlessInput
|
||||
class="full-input"
|
||||
label="Short Name"
|
||||
placeholder="Enter Short Name"
|
||||
width="100%"
|
||||
ref="shortNameInput"
|
||||
:initValue="originalShortName"
|
||||
@setData="setShortName"/>
|
||||
<HeaderedInput
|
||||
class="full-input"
|
||||
label="Full name"
|
||||
placeholder="Enter Full Name"
|
||||
width="100%"
|
||||
ref="fullNameInput"
|
||||
:error="fullNameError"
|
||||
:initValue="originalFullName"
|
||||
@setData="setFullName" />
|
||||
<HeaderedInput
|
||||
class="full-input"
|
||||
label="Short Name"
|
||||
placeholder="Enter Short Name"
|
||||
width="100%"
|
||||
ref="shortNameInput"
|
||||
:initValue="originalShortName"
|
||||
@setData="setShortName"/>
|
||||
<div class="edit-profile-popup__form-container__button-container">
|
||||
<Button label="Cancel" width="205px" height="48px" :onPress="onCloseClick" isWhite />
|
||||
<Button label="Update" width="205px" height="48px" :onPress="onUpdateClick" />
|
||||
@ -44,7 +44,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
|
||||
import HeaderedInput from '@/components/common/HeaderedInput.vue';
|
||||
import Button from '@/components/common/Button.vue';
|
||||
import { USER_ACTIONS, NOTIFICATION_ACTIONS, APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
|
||||
|
||||
@ -116,7 +116,7 @@
|
||||
},
|
||||
},
|
||||
components: {
|
||||
HeaderlessInput,
|
||||
HeaderedInput,
|
||||
Button,
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,7 +53,6 @@
|
||||
padding-left: 20px;
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
color: #AFB7C1;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
188
web/satellite/src/components/project/PaymentMethods.vue
Normal file
188
web/satellite/src/components/project/PaymentMethods.vue
Normal file
@ -0,0 +1,188 @@
|
||||
// Copyright (C) 2018 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="payment-methods-container">
|
||||
<p class="payment-methods-container__title">Credit or Debit Cards</p>
|
||||
<div class="payment-methods-container__card-container">
|
||||
<div class="payment-methods-container__card-container__info-area">
|
||||
<img class="payment-methods-container__card-container__info-area__card-logo" src="../../../static/images/Logo.svg">
|
||||
<div class="payment-methods-container__card-container__info-area__info-container">
|
||||
<h1>xxxx 0000</h1>
|
||||
<h2>Shawn Wilkinson</h2>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__info-area__expire-container">
|
||||
<h2>Expires</h2>
|
||||
<h1>12/2020</h1>
|
||||
</div>
|
||||
<h3 class="payment-methods-container__card-container__info-area__added-text">Added on 29 May 2019</h3>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__default-button" v-if="true">
|
||||
<p class="payment-methods-container__card-container__default-button__label">Default</p>
|
||||
</div>
|
||||
<div class="payment-methods-container__card-container__button-area" v-if="false">
|
||||
<div class="payment-methods-container__card-container__button-area__make-button">
|
||||
<p class="payment-methods-container__card-container__button-area__make-button__label">Make Default</p>
|
||||
</div>
|
||||
<svg class="payment-methods-container__card-container__button-area__delete-button"
|
||||
width="34"
|
||||
height="34"
|
||||
viewBox="0 0 34 34"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="34" height="34" rx="17" fill="#EB5757"/>
|
||||
<path d="M19.7834 11.9727V11.409C19.7834 10.6576 19.1215 10 18.2706 10H16.0014C15.1504 10 14.4886 10.6576 14.4886 11.409V11.9727H10.7065V13.1938H12.0302V22.3057C12.0302 23.5269 12.9758 24.4662 14.0158 24.4662H20.1616C21.2962 24.4662 22.1471 23.5269 22.1471 22.3057V13.1938H23.4709V11.9727H19.7834ZM16.6632 22.3057H15.3395V14.2271H16.6632V22.3057ZM18.9324 22.3057H17.6087V14.2271H18.9324V22.3057Z" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
class="payment-methods-container__add-button"
|
||||
label="Add Card"
|
||||
width="140px"
|
||||
height="48px"
|
||||
isDisabled />
|
||||
</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 PaymentMethods extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.payment-methods-container {
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #384B65;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
|
||||
&__card-container {
|
||||
width: calc(100% - 80px);
|
||||
margin-top: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 50px 40px 50px 40px;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
|
||||
&__info-area {
|
||||
width: 75%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&__card-logo {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&__info-container {
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&__expire-container {
|
||||
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
}
|
||||
}
|
||||
|
||||
&__added-text {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
}
|
||||
}
|
||||
|
||||
&__default-button {
|
||||
width: 100px;
|
||||
height: 34px;
|
||||
border-radius: 6px;
|
||||
background-color: #F5F6FA;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #AFB7C1;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-area {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&__make-button {
|
||||
width: 134px;
|
||||
height: 34px;
|
||||
border-radius: 6px;
|
||||
background-color: #DFEDFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #2683FF;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__add-button {
|
||||
margin-top: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
285
web/satellite/src/components/project/ProjectDetails.vue
Normal file
285
web/satellite/src/components/project/ProjectDetails.vue
Normal file
@ -0,0 +1,285 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="project-details">
|
||||
<h1>Project Details</h1>
|
||||
<div class="project-details-info-container">
|
||||
<div class="project-details-info-container__name-container">
|
||||
<h2>Project Name</h2>
|
||||
<h3>{{name}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container">
|
||||
<div class="project-details-info-container__description-container" v-if="!isEditing">
|
||||
<div class="project-details-info-container__description-container__text">
|
||||
<h2>Description</h2>
|
||||
<h3>{{description}}</h3>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditing">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container__description-container--editing" v-if="isEditing">
|
||||
<HeaderedInput
|
||||
label="Description"
|
||||
placeholder ="Enter Description"
|
||||
width="70vw"
|
||||
height="10vh"
|
||||
isMultiline
|
||||
@setData="setNewDescription" />
|
||||
<div class="project-details-info-container__description-container__buttons-area">
|
||||
<Button label="Cancel" width="180px" height="48px" :onPress="toggleEditing" isWhite/>
|
||||
<Button label="Save" width="180px" height="48px" :onPress="onSaveButtonClick"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details__button-area" id="deleteProjectPopupButton">
|
||||
<Button class="delete-project" label="Delete project" width="180px" height="48px" :onPress="toggleDeleteDialog" isDeletion/>
|
||||
</div>
|
||||
</div>
|
||||
<DeleteProjectPopup v-if="isPopupShown" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import Button from '@/components/common/Button.vue';
|
||||
import HeaderedInput from '@/components/common/HeaderedInput.vue';
|
||||
import Checkbox from '@/components/common/Checkbox.vue';
|
||||
import EmptyState from '@/components/common/EmptyStateArea.vue';
|
||||
import { PROJETS_ACTIONS, APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
|
||||
import ROUTES from '@/utils/constants/routerConstants';
|
||||
import DeleteProjectPopup from '@/components/project/DeleteProjectPopup.vue';
|
||||
import ProjectNavigation from '@/components/project/ProjectNavigation.vue';
|
||||
|
||||
@Component(
|
||||
{
|
||||
data: function () {
|
||||
return {
|
||||
isEditing: false,
|
||||
newDescription: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleEditing: function (): void {
|
||||
this.$data.isEditing = !this.$data.isEditing;
|
||||
// TODO: cache this value in future
|
||||
this.$data.newDescription = '';
|
||||
},
|
||||
setNewDescription: function (value: string): void {
|
||||
this.$data.newDescription = value;
|
||||
},
|
||||
onSaveButtonClick: async function (): Promise<any> {
|
||||
let response = await this.$store.dispatch(
|
||||
PROJETS_ACTIONS.UPDATE, {
|
||||
id: this.$store.getters.selectedProject.id,
|
||||
description: this.$data.newDescription,
|
||||
}
|
||||
);
|
||||
|
||||
response.isSuccess
|
||||
// TODO: call toggleEditing method instead of this IIF
|
||||
? (() => {
|
||||
this.$data.isEditing = !this.$data.isEditing;
|
||||
this.$data.newDescription = '';
|
||||
this.$store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, 'Project updated successfully!');
|
||||
})()
|
||||
: this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, response.errorMessage);
|
||||
},
|
||||
toggleDeleteDialog: function (): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_PROJ);
|
||||
},
|
||||
onMoreClick: function (): void {
|
||||
this.$router.push(ROUTES.USAGE_REPORT);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
name: function (): string {
|
||||
return this.$store.getters.selectedProject.name;
|
||||
},
|
||||
description: function (): string {
|
||||
return this.$store.getters.selectedProject.description ?
|
||||
this.$store.getters.selectedProject.description :
|
||||
'No description yet. Please enter some information about the project if any.';
|
||||
},
|
||||
isPopupShown: function (): boolean {
|
||||
return this.$store.state.appStateModule.appState.isDeleteProjectPopupShown;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Button,
|
||||
HeaderedInput,
|
||||
Checkbox,
|
||||
EmptyState,
|
||||
DeleteProjectPopup,
|
||||
ProjectNavigation,
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export default class ProjectDetailsArea extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.project-details {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 85vh;
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #354049;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
h2 {
|
||||
@extend h1;
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: rgba(56, 75, 101, 0.4);
|
||||
}
|
||||
h3 {
|
||||
@extend h2;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend h1;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
&__terms-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
img {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'font_regular';
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-area {
|
||||
margin-top: 3vh;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
.project-details-info-container {
|
||||
height: auto;
|
||||
margin-top: 37px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
&__name-container {
|
||||
min-height: 67px;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 28px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&__description-container {
|
||||
@extend .project-details-info-container__name-container;
|
||||
min-height: 67px;
|
||||
height: auto;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
width: 65vw;
|
||||
|
||||
h3 {
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&--editing {
|
||||
@extend .project-details-info-container__description-container;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__buttons-area {
|
||||
margin-top: 2vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 380px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
rect {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
path {
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__portability-container {
|
||||
@extend .project-details-info-container__description-container;
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
margin-left: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons-area {
|
||||
@extend .project-details-info-container__portability-container__info;
|
||||
width: 380px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 6vw;
|
||||
height: 10vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,337 +0,0 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="project-details" v-if="isProjectSelected">
|
||||
<h1>Project Details</h1>
|
||||
<div class="project-details-info-container">
|
||||
<div class="project-details-info-container__name-container">
|
||||
<h2>Project Name</h2>
|
||||
<h3>{{name}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container">
|
||||
<div class="project-details-info-container__description-container" v-if="!isEditing">
|
||||
<div class="project-details-info-container__description-container__text">
|
||||
<h2>Description</h2>
|
||||
<h3>{{description}}</h3>
|
||||
</div>
|
||||
<div title="Edit">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditing">
|
||||
<rect width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container__description-container--editing" v-if="isEditing">
|
||||
<HeaderedInput
|
||||
label="Description"
|
||||
placeholder ="Enter Description"
|
||||
width="70vw"
|
||||
height="10vh"
|
||||
isMultiline
|
||||
@setData="setNewDescription" />
|
||||
<div class="project-details-info-container__description-container__buttons-area">
|
||||
<Button label="Cancel" width="180px" height="48px" :onPress="toggleEditing" isWhite/>
|
||||
<Button label="Save" width="180px" height="48px" :onPress="onSaveButtonClick"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container" >
|
||||
<div class="project-details-info-container__usage-report-container">
|
||||
<div class="project-details-info-container__usage-report-container__info">
|
||||
<img src="../../../static/images/projectDetails/UsageReport.svg" alt="">
|
||||
<div class="project-details-info-container__usage-report-container__info__text">
|
||||
<h4>Usage</h4>
|
||||
<h2>Analyze and understand your storage, egress and object usage amounts</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details-info-container__usage-report-container__buttons-area">
|
||||
<Button label="View" width="140px" height="48px" :onPress="onMoreClick"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-details__button-area" id="deleteProjectPopupButton">
|
||||
<Button class="delete-project" label="Delete project" width="180px" height="48px" :onPress="toggleDeleteDialog" isDeletion/>
|
||||
</div>
|
||||
</div>
|
||||
<EmptyState
|
||||
v-if="!isProjectSelected"
|
||||
mainTitle="Create your first project"
|
||||
additional-text='<p>Please click the button <span style="font-family: font_bold">"New Project"</span> in the right corner</p>'
|
||||
:imageSource="emptyImage" />
|
||||
<DeleteProjectPopup v-if="isPopupShown" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import Button from '@/components/common/Button.vue';
|
||||
import HeaderedInput from '@/components/common/HeaderedInput.vue';
|
||||
import Checkbox from '@/components/common/Checkbox.vue';
|
||||
import EmptyState from '@/components/common/EmptyStateArea.vue';
|
||||
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
||||
import { PROJETS_ACTIONS, APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
|
||||
import ROUTES from '@/utils/constants/routerConstants';
|
||||
import DeleteProjectPopup from '@/components/project/DeleteProjectPopup.vue';
|
||||
|
||||
@Component(
|
||||
{
|
||||
data: function () {
|
||||
return {
|
||||
isEditing: false,
|
||||
newDescription: '',
|
||||
emptyImage: EMPTY_STATE_IMAGES.PROJECT,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleEditing: function (): void {
|
||||
this.$data.isEditing = !this.$data.isEditing;
|
||||
// TODO: cache this value in future
|
||||
this.$data.newDescription = '';
|
||||
},
|
||||
setNewDescription: function (value: string): void {
|
||||
this.$data.newDescription = value;
|
||||
},
|
||||
onSaveButtonClick: async function (): Promise<any> {
|
||||
let response = await this.$store.dispatch(
|
||||
PROJETS_ACTIONS.UPDATE, {
|
||||
id: this.$store.getters.selectedProject.id,
|
||||
description: this.$data.newDescription,
|
||||
}
|
||||
);
|
||||
|
||||
response.isSuccess
|
||||
// TODO: call toggleEditing method instead of this IIF
|
||||
? (() => {
|
||||
this.$data.isEditing = !this.$data.isEditing;
|
||||
this.$data.newDescription = '';
|
||||
this.$store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, 'Project updated successfully!');
|
||||
})()
|
||||
: this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, response.errorMessage);
|
||||
},
|
||||
toggleDeleteDialog: function (): void {
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_DEL_PROJ);
|
||||
},
|
||||
onMoreClick: function (): void {
|
||||
this.$router.push(ROUTES.USAGE_REPORT);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
name: function (): string {
|
||||
return this.$store.getters.selectedProject.name;
|
||||
},
|
||||
description: function (): string {
|
||||
return this.$store.getters.selectedProject.description ?
|
||||
this.$store.getters.selectedProject.description :
|
||||
'No description yet. Please enter some information about the project if any.';
|
||||
},
|
||||
// this computed is used to indicate if project is selected.
|
||||
// if false - we should change UI
|
||||
isProjectSelected: function (): boolean {
|
||||
return this.$store.getters.selectedProject.id !== '';
|
||||
},
|
||||
isPopupShown: function (): boolean {
|
||||
return this.$store.state.appStateModule.appState.isDeleteProjectPopupShown;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Button,
|
||||
HeaderedInput,
|
||||
Checkbox,
|
||||
EmptyState,
|
||||
DeleteProjectPopup,
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export default class ProjectDetailsArea extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.project-details {
|
||||
padding: 44px 55px 55px 55px;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 85vh;
|
||||
h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #354049;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
h2 {
|
||||
@extend h1;
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: rgba(56, 75, 101, 0.4);
|
||||
}
|
||||
h3 {
|
||||
@extend h2;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend h1;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
&__terms-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
img {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'font_regular';
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-area {
|
||||
margin-top: 3vh;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
.project-details-info-container {
|
||||
height: auto;
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
&__name-container {
|
||||
min-height: 67px;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 28px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&__description-container {
|
||||
@extend .project-details-info-container__name-container;
|
||||
min-height: 67px;
|
||||
height: auto;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
width: 65vw;
|
||||
|
||||
h3 {
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&--editing {
|
||||
@extend .project-details-info-container__description-container;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__buttons-area {
|
||||
margin-top: 2vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 380px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
rect {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
path {
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__portability-container {
|
||||
@extend .project-details-info-container__description-container;
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
margin-left: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons-area {
|
||||
@extend .project-details-info-container__portability-container__info;
|
||||
width: 380px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 6vw;
|
||||
height: 10vh;
|
||||
}
|
||||
}
|
||||
|
||||
&__usage-report-container {
|
||||
@extend .project-details-info-container__description-container;
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
margin-left: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons-area {
|
||||
@extend .project-details-info-container__usage-report-container__info;
|
||||
width: 380px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 6vw;
|
||||
height: 10vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
web/satellite/src/components/project/ProjectNavigation.vue
Normal file
59
web/satellite/src/components/project/ProjectNavigation.vue
Normal file
@ -0,0 +1,59 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="project-navigation-container">
|
||||
<router-link :to="navLink.path" class="project-navigation-container__item" v-for="navLink in navigation" :key="navLink.name">
|
||||
<p>{{navLink.name}}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { PROJECT_ROUTES } from '@/utils/constants/projectNavigation';
|
||||
|
||||
@Component(
|
||||
{
|
||||
data: function() {
|
||||
return {
|
||||
navigation: PROJECT_ROUTES,
|
||||
};
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export default class ProjectNavigation extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.project-navigation-container {
|
||||
width: auto;
|
||||
display: flex;
|
||||
|
||||
&__item {
|
||||
width: 150px;
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #AFB7C1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
font-family: 'font_medium';
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #AFB7C1;
|
||||
}
|
||||
|
||||
&.router-link-exact-active,
|
||||
&:hover {
|
||||
border-bottom: 3px solid #2683FF;
|
||||
|
||||
p {
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
web/satellite/src/components/project/ProjectOverviewArea.vue
Normal file
59
web/satellite/src/components/project/ProjectOverviewArea.vue
Normal file
@ -0,0 +1,59 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="project-overview">
|
||||
<ProjectNavigation class="project-overview__navigation" v-if="isProjectSelected"/>
|
||||
<router-view v-if="isProjectSelected"/>
|
||||
<EmptyState
|
||||
v-if="!isProjectSelected"
|
||||
mainTitle="Create your first project"
|
||||
additional-text='<p>Please click the button <span style="font-family: font_bold">"New Project"</span> in the right corner</p>'
|
||||
:imageSource="emptyImage" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import EmptyState from '@/components/common/EmptyStateArea.vue';
|
||||
import ProjectNavigation from '@/components/project/ProjectNavigation.vue';
|
||||
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
||||
|
||||
@Component(
|
||||
{
|
||||
data: function () {
|
||||
return {
|
||||
emptyImage: EMPTY_STATE_IMAGES.PROJECT,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isProjectSelected: function (): boolean {
|
||||
return this.$store.getters.selectedProject.id !== '';
|
||||
},
|
||||
},
|
||||
components: {
|
||||
EmptyState,
|
||||
ProjectNavigation,
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export default class ProjectDetailsArea extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.project-overview {
|
||||
padding: 44px 55px 55px 55px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
height: 85vh;
|
||||
|
||||
&__navigation {
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
top: 44px;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,30 +3,22 @@
|
||||
|
||||
<template>
|
||||
<div class="usage-report-container">
|
||||
<div class="usage-report-container__navigation">
|
||||
<div class="usage-report-container__navigation__button" @click="onBackClick">
|
||||
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5607 0.43934C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L5.12132 8H17.5C18.3284 8 19 8.67157 19 9.5C19 10.3284 18.3284 11 17.5 11H5.12132L10.5607 16.4393C11.1464 17.0251 11.1464 17.9749 10.5607 18.5607C9.97487 19.1464 9.02513 19.1464 8.43934 18.5607L0.43934 10.5607C-0.146447 9.97487 -0.146447 9.02513 0.43934 8.43934L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.43934Z" fill="#384B65"/>
|
||||
</svg>
|
||||
<p>Back to Project Details</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-report-container__header">
|
||||
<p>Usage</p>
|
||||
<div class="usage-report-container__header__options-area">
|
||||
<div class="usage-report-container__header__options-area__option active" @click.prevent="onCurrentRollupClick">
|
||||
<p>Current Billing Period</p>
|
||||
</div>
|
||||
<div class="usage-report-container__header__options-area__option" @click.prevent="onPreviousRollupClick">
|
||||
<p>Previous Billing Period</p>
|
||||
</div>
|
||||
<div class="usage-report-container__header__options-area__option" @click.prevent.self="onCustomDateClick">
|
||||
<p @click.prevent.self="onCustomDateClick">Custom Date Range</p>
|
||||
<Datepicker ref="datePicker" :date="startTime" @change="getDates"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent.self="onCustomDateClick">
|
||||
<path d="M16.3213 2.28026H14.8009V1.50058C14.8009 1.10058 14.4806 0.760742 14.0611 0.760742C13.6611 0.760742 13.3213 1.08106 13.3213 1.50058V2.28026H6.66106V1.50058C6.66106 1.10058 6.34074 0.760742 5.92122 0.760742C5.5009 0.760742 5.2009 1.10058 5.2009 1.50058V2.28026H3.68058C1.92042 2.28026 0.500977 3.70058 0.500977 5.45986V16.0599C0.500977 17.82 1.9213 19.2395 3.68058 19.2395H16.3204C18.0805 19.2395 19.5 17.8191 19.5 16.0599V5.45986C19.5008 3.70048 18.0804 2.28026 16.321 2.28026H16.3213ZM3.68066 3.74042H5.20098V4.5201C5.20098 4.9201 5.5213 5.25994 5.94082 5.25994C6.36114 5.25994 6.68066 4.93962 6.68066 4.5201V3.74042H13.3603V4.5201C13.3603 4.9201 13.6806 5.25994 14.1001 5.25994C14.5001 5.25994 14.8399 4.93962 14.8399 4.5201V3.74042H16.3603C17.3001 3.74042 18.0806 4.50058 18.0806 5.46074V7.06074H1.96098V5.46074C1.96098 4.5209 2.74066 3.74042 3.68052 3.74042H3.68066ZM9.62126 14.2006H10.4009C11.0213 14.2006 11.5213 14.7006 11.5213 15.3209C11.5213 15.9413 11.0213 16.4413 10.4009 16.4413H9.62126C9.00094 16.4413 8.50094 15.9413 8.50094 15.3209C8.50094 14.7006 9.00094 14.2006 9.62126 14.2006ZM8.50094 10.8404C8.50094 10.2201 9.00094 9.7201 9.62126 9.7201L10.4009 9.72088C11.0213 9.72088 11.5213 10.2209 11.5213 10.8412C11.5213 11.4615 11.0213 11.9615 10.4009 11.9615H9.62126C9.00094 11.9607 8.50094 11.4607 8.50094 10.8404V10.8404ZM14.8407 14.2006H15.6204C16.2407 14.2006 16.7407 14.7006 16.7407 15.3209C16.7407 15.9413 16.2407 16.4413 15.6204 16.4413H14.8407C14.2204 16.4413 13.7204 15.9413 13.7204 15.3209C13.7212 14.7006 14.2212 14.2006 14.8407 14.2006ZM13.7212 10.8404C13.7212 10.2201 14.2212 9.7201 14.8415 9.7201H15.6212C16.2415 9.7201 16.7415 10.2201 16.7415 10.8404C16.7415 11.4607 16.2415 11.9607 15.6212 11.9607H14.8415C14.2212 11.9607 13.7212 11.4607 13.7212 10.8404ZM6.2806 10.8404C6.2806 11.4607 5.7806 11.9607 5.16028 11.9607H4.3806C3.76028 11.9607 3.26028 11.4607 3.26028 10.8404C3.26028 10.2201 3.76028 9.7201 4.3806 9.7201H5.16028C5.7806 9.72088 6.2806 10.2209 6.2806 10.8404ZM4.3806 14.2006H5.16028C5.7806 14.2006 6.2806 14.7006 6.2806 15.3209C6.2806 15.9413 5.7806 16.4413 5.16028 16.4413H4.3806C3.76028 16.4413 3.26028 15.9413 3.26028 15.3209C3.26106 14.7006 3.76106 14.2006 4.3806 14.2006Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Report</p>
|
||||
</div>
|
||||
<div class="usage-report-container__options-area">
|
||||
<div class="usage-report-container__options-area__option active" @click.prevent="onCurrentRollupClick">
|
||||
<p>Current Billing Period</p>
|
||||
</div>
|
||||
<div class="usage-report-container__options-area__option" @click.prevent="onPreviousRollupClick">
|
||||
<p>Previous Billing Period</p>
|
||||
</div>
|
||||
<div class="usage-report-container__options-area__option" @click.prevent.self="onCustomDateClick">
|
||||
<p @click.prevent.self="onCustomDateClick">Custom Date Range</p>
|
||||
<Datepicker ref="datePicker" :date="startTime" @change="getDates"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent.self="onCustomDateClick">
|
||||
<path d="M16.3213 2.28026H14.8009V1.50058C14.8009 1.10058 14.4806 0.760742 14.0611 0.760742C13.6611 0.760742 13.3213 1.08106 13.3213 1.50058V2.28026H6.66106V1.50058C6.66106 1.10058 6.34074 0.760742 5.92122 0.760742C5.5009 0.760742 5.2009 1.10058 5.2009 1.50058V2.28026H3.68058C1.92042 2.28026 0.500977 3.70058 0.500977 5.45986V16.0599C0.500977 17.82 1.9213 19.2395 3.68058 19.2395H16.3204C18.0805 19.2395 19.5 17.8191 19.5 16.0599V5.45986C19.5008 3.70048 18.0804 2.28026 16.321 2.28026H16.3213ZM3.68066 3.74042H5.20098V4.5201C5.20098 4.9201 5.5213 5.25994 5.94082 5.25994C6.36114 5.25994 6.68066 4.93962 6.68066 4.5201V3.74042H13.3603V4.5201C13.3603 4.9201 13.6806 5.25994 14.1001 5.25994C14.5001 5.25994 14.8399 4.93962 14.8399 4.5201V3.74042H16.3603C17.3001 3.74042 18.0806 4.50058 18.0806 5.46074V7.06074H1.96098V5.46074C1.96098 4.5209 2.74066 3.74042 3.68052 3.74042H3.68066ZM9.62126 14.2006H10.4009C11.0213 14.2006 11.5213 14.7006 11.5213 15.3209C11.5213 15.9413 11.0213 16.4413 10.4009 16.4413H9.62126C9.00094 16.4413 8.50094 15.9413 8.50094 15.3209C8.50094 14.7006 9.00094 14.2006 9.62126 14.2006ZM8.50094 10.8404C8.50094 10.2201 9.00094 9.7201 9.62126 9.7201L10.4009 9.72088C11.0213 9.72088 11.5213 10.2209 11.5213 10.8412C11.5213 11.4615 11.0213 11.9615 10.4009 11.9615H9.62126C9.00094 11.9607 8.50094 11.4607 8.50094 10.8404V10.8404ZM14.8407 14.2006H15.6204C16.2407 14.2006 16.7407 14.7006 16.7407 15.3209C16.7407 15.9413 16.2407 16.4413 15.6204 16.4413H14.8407C14.2204 16.4413 13.7204 15.9413 13.7204 15.3209C13.7212 14.7006 14.2212 14.2006 14.8407 14.2006ZM13.7212 10.8404C13.7212 10.2201 14.2212 9.7201 14.8415 9.7201H15.6212C16.2415 9.7201 16.7415 10.2201 16.7415 10.8404C16.7415 11.4607 16.2415 11.9607 15.6212 11.9607H14.8415C14.2212 11.9607 13.7212 11.4607 13.7212 10.8404ZM6.2806 10.8404C6.2806 11.4607 5.7806 11.9607 5.16028 11.9607H4.3806C3.76028 11.9607 3.26028 11.4607 3.26028 10.8404C3.26028 10.2201 3.76028 9.7201 4.3806 9.7201H5.16028C5.7806 9.72088 6.2806 10.2209 6.2806 10.8404ZM4.3806 14.2006H5.16028C5.7806 14.2006 6.2806 14.7006 6.2806 15.3209C6.2806 15.9413 5.7806 16.4413 5.16028 16.4413H4.3806C3.76028 16.4413 3.26028 15.9413 3.26028 15.3209C3.26106 14.7006 3.76106 14.2006 4.3806 14.2006Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-report-container__main-area">
|
||||
@ -103,7 +95,7 @@ import { toUnixTimestamp } from '@/utils/time';
|
||||
this.$data.dateRange.startDate = previousDate;
|
||||
this.$data.dateRange.endDate = currentDate;
|
||||
|
||||
const buttons = [...(document as any).querySelectorAll('.usage-report-container__header__options-area__option')];
|
||||
const buttons = [...(document as any).querySelectorAll('.usage-report-container__options-area__option')];
|
||||
buttons.forEach(option => {
|
||||
option.classList.remove('active');
|
||||
});
|
||||
@ -125,7 +117,7 @@ import { toUnixTimestamp } from '@/utils/time';
|
||||
}
|
||||
},
|
||||
onBackClick: function (): void {
|
||||
this.$router.push(ROUTES.PROJECT_DETAILS);
|
||||
this.$router.push(ROUTES.PROJECT_OVERVIEW);
|
||||
},
|
||||
onCurrentRollupClick: async function (event: any) {
|
||||
const currentDate = new Date();
|
||||
@ -214,7 +206,6 @@ import { toUnixTimestamp } from '@/utils/time';
|
||||
|
||||
<style scoped lang="scss">
|
||||
.usage-report-container {
|
||||
padding: 55px 60px 55px 60px;
|
||||
position: relative;
|
||||
|
||||
&__navigation {
|
||||
@ -244,59 +235,61 @@ import { toUnixTimestamp } from '@/utils/time';
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
height: 56px;
|
||||
margin-top: 17px;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #354049;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&__options-area {
|
||||
&__options-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
margin-top: 39px;
|
||||
|
||||
&__option {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
width: 271px;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border: solid 1px #F2F2F2;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
|
||||
&__option {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 271px;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border: solid 1px #F2F2F2;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
p {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #2683FF;
|
||||
|
||||
p {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #2683FF;
|
||||
|
||||
p {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: #ffffff !important;
|
||||
}
|
||||
path {
|
||||
fill: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
91
web/satellite/src/components/project/billing/BillingArea.vue
Normal file
91
web/satellite/src/components/project/billing/BillingArea.vue
Normal file
@ -0,0 +1,91 @@
|
||||
// Copyright (C) 2018 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="billing > 0" class="billing-overflow">
|
||||
<div class="billing-header">
|
||||
<p>Billing</p>
|
||||
</div>
|
||||
<div class="billing-container">
|
||||
<table class="billing-container__table">
|
||||
<SortingHeader />
|
||||
<BucketItem />
|
||||
</table>
|
||||
<PaginationArea />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import EmptyState from '@/components/common/EmptyStateArea.vue';
|
||||
import BucketItem from '@/components/project/billing/BillingItem.vue';
|
||||
import PaginationArea from '@/components/project/billing/PaginationArea.vue';
|
||||
import SortingHeader from '@/components/project/billing/SortingHeader.vue';
|
||||
|
||||
@Component({
|
||||
data: function () {
|
||||
return {
|
||||
billing: 1,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
EmptyState,
|
||||
SortingHeader,
|
||||
BucketItem,
|
||||
PaginationArea,
|
||||
}
|
||||
})
|
||||
export default class BillingArea extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.billing-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #384B65;
|
||||
margin-right: 50px;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.billing-container {
|
||||
&__table {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 90px 0 40px;
|
||||
|
||||
&:last-child {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 880px) {
|
||||
.billing-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 700px) {
|
||||
.billing-overflow {
|
||||
height: 570px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
119
web/satellite/src/components/project/billing/BillingItem.vue
Normal file
119
web/satellite/src/components/project/billing/BillingItem.vue
Normal file
@ -0,0 +1,119 @@
|
||||
// Copyright (C) 2018 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<tr class="container">
|
||||
<td class="container__item bold">test</td>
|
||||
<td class="container__item">test</td>
|
||||
<td class="container__item">
|
||||
<div class="row justify-start">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 7.26316V3.87134C20 3.40351 19.7938 2.93567 19.4845 2.5848C19.1753 2.23392 18.7629 2 18.3505 2H1.64948C1.23711 2 0.824742 2.23392 0.515464 2.5848C0.206186 2.93567 0 3.40351 0 3.87134V7.26316H20Z" fill="#2683FF"/>
|
||||
<path d="M0 9.36816V16.1852C0 16.5862 0.206186 16.9872 0.515464 17.288C0.824742 17.5887 1.23711 17.7892 1.64948 17.7892H18.3505C18.7629 17.7892 19.1753 17.5887 19.4845 17.288C19.7938 16.9872 20 16.5862 20 16.1852V9.36816H0ZM5.36083 15.1827H2.68041V13.8794H5.36083V15.1827ZM10.7217 15.1827H6.70103V13.8794H10.7217V15.1827Z" fill="#2683FF"/>
|
||||
</svg>
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item">
|
||||
<div class="row justify-start">
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3333 0H2.66667C1.19418 0 0 1.15147 0 2.57131V9.42869C0 10.8485 1.19418 12 2.66667 12H13.3333C14.8058 12 16 10.8485 16 9.42869V2.57131C16 1.15147 14.8058 0 13.3333 0ZM11.1383 8.1165C11.2642 8.23703 11.335 8.40095 11.335 8.57209C11.335 8.74244 11.265 8.90636 11.14 9.02769C11.0142 9.14822 10.8442 9.21571 10.6675 9.21571C10.49 9.21571 10.32 9.14742 10.195 9.02608L8.00004 6.90876L5.80506 9.02608C5.54422 9.27517 5.12339 9.27437 4.86338 9.02448C4.60423 8.77376 4.60337 8.36799 4.86172 8.11647L7.05756 5.99997L4.86172 3.88348C4.60339 3.63196 4.60422 3.22619 4.86338 2.97547C5.12339 2.72558 5.54422 2.72476 5.80506 2.97387L8.00004 5.09119L10.195 2.97469V2.97389C10.4559 2.7248 10.8767 2.7256 11.1367 2.97549C11.3959 3.22621 11.3967 3.63198 11.1384 3.8835L8.94253 5.99999L11.1383 8.1165Z" fill="#EB001B"/>
|
||||
</svg>
|
||||
<p>test</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="container__item bold">
|
||||
<div class="row">
|
||||
<p>test</p>
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="background" width="40" height="40" rx="4" fill="#E2ECF7"/>
|
||||
<path class="blue" d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z" fill="#2683FF"/>
|
||||
<rect class="blue" x="11" y="28" width="18" height="2" rx="1" fill="#2683FF"/>
|
||||
</svg>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component({})
|
||||
|
||||
export default class BillingItem extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
transition: box-shadow .2s ease-out;
|
||||
padding: 35px 0px 35px 70px;
|
||||
transition: all .2s ease;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 6px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0px 4px 4px rgba(231, 232, 238, 0.6);
|
||||
}
|
||||
&__item {
|
||||
width: 20%;
|
||||
height: 80px;
|
||||
padding-left: 30px;
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg:hover {
|
||||
.background {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
.blue {
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
|
||||
svg {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-family: 'font_bold';
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.container {
|
||||
grid-template-columns: 2% 20% 30% 20% 15% 13%;
|
||||
padding: 20px 0px 20px 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
web/satellite/src/components/project/billing/PaginationArea.vue
Normal file
115
web/satellite/src/components/project/billing/PaginationArea.vue
Normal file
@ -0,0 +1,115 @@
|
||||
// Copyright (C) 2018 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-container__pages">
|
||||
<div v-html="arrowLeft" class="pagination-container__button"></div>
|
||||
<div class="pagination-container__items">
|
||||
<span class="selected">1</span>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div v-html="arrowRight" class="pagination-container__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
||||
|
||||
@Component({
|
||||
data: function() {
|
||||
return {
|
||||
arrowLeft: EMPTY_STATE_IMAGES.ARROW_LEFT,
|
||||
arrowRight: EMPTY_STATE_IMAGES.ARROW_RIGHT,
|
||||
};
|
||||
},
|
||||
})
|
||||
|
||||
export default class PaginationArea extends Vue {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 25px;
|
||||
margin-top: 25px;
|
||||
&__pages {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&__counter {
|
||||
|
||||
p {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
color: #AFB7C1;
|
||||
}
|
||||
}
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid #AFB7C1;
|
||||
border-radius: 6px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
&:hover {
|
||||
svg {
|
||||
path {
|
||||
fill: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__items {
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
.selected {
|
||||
color: #2379EC;
|
||||
font-family: 'font_bold';
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background-color: #2379EC;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all .2s ease;
|
||||
&:hover {
|
||||
color: #2379EC;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #2379EC;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
111
web/satellite/src/components/project/billing/SortingHeader.vue
Normal file
111
web/satellite/src/components/project/billing/SortingHeader.vue
Normal file
@ -0,0 +1,111 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<tr class="sort-header-container">
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Invoice</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span class="selected" v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Billing Period</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Payment method</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Status</p>
|
||||
</div>
|
||||
</th>
|
||||
<th class="sort-header-container__item">
|
||||
<div class="row">
|
||||
<p>Amount</p>
|
||||
<div class="sort-header-container__item__arrows">
|
||||
<span v-html="arrowUp"></span>
|
||||
<span v-html="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
||||
@Component({
|
||||
data: function() {
|
||||
return {
|
||||
arrowUp: EMPTY_STATE_IMAGES.ARROW_UP,
|
||||
arrowDown: EMPTY_STATE_IMAGES.ARROW_DOWN,
|
||||
};
|
||||
}
|
||||
})
|
||||
export default class SortBucketsHeader extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sort-header-container {
|
||||
height: 80px;
|
||||
|
||||
&__item {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
padding-left: 30px;
|
||||
&__arrows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 12px;
|
||||
margin-left: 10px;
|
||||
span.selected {
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: #2683FF !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #AFB7C1;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-width: 1600px) {
|
||||
.sort-header-container {
|
||||
grid-template-columns: 25% 28% 19% 15% 14%;
|
||||
height: 65px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -9,11 +9,14 @@ 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 ProjectDetailsArea from '@/components/project/ProjectDetailsArea.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 BillingHistory from '@/components/project/billing/BillingArea.vue';
|
||||
import PaymentMethods from '@/components/project/PaymentMethods.vue';
|
||||
import BucketArea from '@/components/buckets/BucketArea.vue';
|
||||
import { getToken } from '@/utils/tokenManager';
|
||||
import store from '@/store';
|
||||
@ -51,15 +54,42 @@ let router = new Router({
|
||||
component: AccountArea
|
||||
},
|
||||
{
|
||||
path: ROUTES.PROJECT_DETAILS.path,
|
||||
name: ROUTES.PROJECT_DETAILS.name,
|
||||
component: ProjectDetailsArea
|
||||
path: ROUTES.PROJECT_OVERVIEW.path,
|
||||
name: ROUTES.PROJECT_OVERVIEW.name,
|
||||
component: ProjectOverviewArea,
|
||||
children: [
|
||||
{
|
||||
path: ROUTES.USAGE_REPORT.path,
|
||||
name: ROUTES.USAGE_REPORT.name,
|
||||
component: UsageReport,
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
name: ROUTES.PROJECT_DETAILS.name,
|
||||
component: ProjectDetails
|
||||
},
|
||||
{
|
||||
path: ROUTES.PROJECT_DETAILS.path,
|
||||
name: ROUTES.PROJECT_DETAILS.name,
|
||||
component: ProjectDetails
|
||||
},
|
||||
{
|
||||
path: ROUTES.BILLING_HISTORY.path,
|
||||
name: ROUTES.BILLING_HISTORY.name,
|
||||
component: BillingHistory
|
||||
},
|
||||
{
|
||||
path: ROUTES.PAYMENT_METHODS.path,
|
||||
name: ROUTES.PAYMENT_METHODS.name,
|
||||
component: PaymentMethods
|
||||
},
|
||||
]
|
||||
},
|
||||
// Remove when dashboard will be created
|
||||
{
|
||||
path: '/',
|
||||
name: 'default',
|
||||
component: ProjectDetailsArea
|
||||
component: ProjectOverviewArea
|
||||
},
|
||||
{
|
||||
path: ROUTES.TEAM.path,
|
||||
@ -71,11 +101,6 @@ let router = new Router({
|
||||
name: ROUTES.API_KEYS.name,
|
||||
component: ApiKeysArea
|
||||
},
|
||||
{
|
||||
path: ROUTES.USAGE_REPORT.path,
|
||||
name: ROUTES.USAGE_REPORT.name,
|
||||
component: UsageReport,
|
||||
},
|
||||
// {
|
||||
// path: ROUTES.BUCKETS.path,
|
||||
// name: ROUTES.BUCKETS.name,
|
||||
@ -100,7 +125,7 @@ let router = new Router({
|
||||
// and if we are able to navigate to page without existing project
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (isUnavailablePageWithoutProject(to.name as string)) {
|
||||
next(ROUTES.PROJECT_DETAILS);
|
||||
next(ROUTES.PROJECT_OVERVIEW);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
@ -18,9 +18,9 @@ const NAVIGATION_ITEMS = {
|
||||
// </defs>
|
||||
// </svg>`
|
||||
// },
|
||||
PROJECT_DETAILS: {
|
||||
PROJECT_OVERVIEW: {
|
||||
label: 'Overview',
|
||||
path: ROUTES.PROJECT_DETAILS.path,
|
||||
path: ROUTES.PROJECT_OVERVIEW.path + '/' + ROUTES.PROJECT_DETAILS.path,
|
||||
svg: `<svg class="svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.073 5.3913C21.8382 5.15652 21.5252 5 21.2121 5H6.89038C6.26429 5 5.71647 5.54783 5.79473 6.09565L2.19473 6.01739C1.80342 6.09565 1.49038 6.17391 1.2556 6.48696C1.09908 6.72174 0.942555 7.03478 1.02082 7.42609L3.13386 18.4609C3.21212 19.0087 3.68169 19.4 4.22951 19.4H19.0991C19.6469 19.4 20.1165 19.0087 20.1947 18.4609L22.3078 6.33043C22.386 6.01739 22.3078 5.62609 22.073 5.3913ZM19.6469 14.7826L18.7078 9.38261C18.6295 8.75652 18.0034 8.28696 17.3773 8.28696H8.4556C8.37734 8.28696 8.29908 8.2087 8.29908 8.13043L8.14256 7.34783C8.14256 6.8 7.75125 6.33043 7.28169 6.17391L21.2121 6.09565L19.6469 14.7826Z" fill="#363840"/>
|
||||
</svg>`
|
||||
|
||||
21
web/satellite/src/utils/constants/projectNavigation.ts
Normal file
21
web/satellite/src/utils/constants/projectNavigation.ts
Normal file
@ -0,0 +1,21 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
export const PROJECT_ROUTES = {
|
||||
DETAILS: {
|
||||
path: '/project-overview/details',
|
||||
name: 'Details'
|
||||
},
|
||||
PAYMENT_METHODS: {
|
||||
path: '/project-overview/payment-methods',
|
||||
name: 'Payment Methods'
|
||||
},
|
||||
BILLING_HISTORY: {
|
||||
path: '/project-overview/billing-history',
|
||||
name: 'Billing History'
|
||||
},
|
||||
REPORT: {
|
||||
path: '/project-overview/usage-report',
|
||||
name: 'Report'
|
||||
},
|
||||
};
|
||||
@ -22,9 +22,9 @@ const ROUTES = {
|
||||
path: '/account-settings',
|
||||
name: 'AccountSettings'
|
||||
},
|
||||
PROJECT_DETAILS: {
|
||||
path: '/project-details',
|
||||
name: 'ProjectDetails'
|
||||
PROJECT_OVERVIEW: {
|
||||
path: '/project-overview',
|
||||
name: 'ProjectOverview'
|
||||
},
|
||||
TEAM: {
|
||||
path: '/team',
|
||||
@ -35,9 +35,21 @@ const ROUTES = {
|
||||
name: 'ApiKeys'
|
||||
},
|
||||
USAGE_REPORT: {
|
||||
path: '/project-details/usage-report',
|
||||
path: 'usage-report',
|
||||
name: 'UsageReport'
|
||||
},
|
||||
BILLING_HISTORY: {
|
||||
path: 'billing-history',
|
||||
name: 'BillingHistory'
|
||||
},
|
||||
PROJECT_DETAILS: {
|
||||
path: 'details',
|
||||
name: 'ProjectDetails'
|
||||
},
|
||||
PAYMENT_METHODS: {
|
||||
path: 'payment-methods',
|
||||
name: 'PaymentMethods'
|
||||
},
|
||||
BUCKETS: {
|
||||
path: '/buckets',
|
||||
name: 'Buckets'
|
||||
|
||||
@ -62,7 +62,7 @@ import { validateEmail, validatePassword } from '@/utils/validation';
|
||||
setTimeout(() => {
|
||||
setToken(loginResponse.data);
|
||||
this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING);
|
||||
this.$router.push(ROUTES.PROJECT_DETAILS.path);
|
||||
this.$router.push(ROUTES.PROJECT_OVERVIEW.path + '/' + ROUTES.PROJECT_DETAILS.path);
|
||||
}, 2000);
|
||||
},
|
||||
validateFields: function (): boolean {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user