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

web/satellite: Added token transaction history to new payment methods flow (#4977)

Browse Source 
Added code for SortingHeader2.vue, VerticalArrows.vue, and TokenTransactionItem.vue. This code is for some of the stubbed components on PaymentMethodsTab.vue.
This commit is contained in:
cl-mitch 2022-08-05 10:03:26 -05:00 committed by GitHub
parent 81327f669a
commit 0f3da7f895
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 292 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
web/satellite/src/components/account/billing/depositAndBillingHistory/SortingHeader2.vue
View File

@ -2,12 +2,147 @@
// See LICENSE for copying information. // See LICENSE for copying information.
<template> <template>
<div class="sort-header-container" /> <div class="sort-header-container">
<div
class="sort-header-container__item date"
@click="sortFunction('date')"
>
<p class="sort-header-container__item__name">DATE</p>
<VerticalArrows
:is-active="arrowController.date"
:direction="dateSortDirection"
/>
</div>
<div class="sort-header-container__item transaction">
<p class="sort-header-container__item__name">TRANSACTION</p>
</div>
<div
class="sort-header-container__item amount"
@click="sortFunction('amount')"
>
<p class="sort-header-container__item__name">AMOUNT(USD)</p>
<VerticalArrows
:is-active="arrowController.amount"
:direction="amountSortDirection"
/>
</div>
<div
class="sort-header-container__item status"
@click="sortFunction('status')"
>
<p class="sort-header-container__item__name">STATUS</p>
<VerticalArrows
:is-active="arrowController.status"
:direction="statusSortDirection"
/>
</div>
<div class="sort-header-container__item details">
<p class="sort-header-container__item__name">DETAILS</p>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import VerticalArrows from '@/components/common/VerticalArrows.vue';
import { SortDirection } from '@/types/common';
// @vue/component
@Component({
components: {
VerticalArrows,
},
})
export default class SortingHeader2 extends Vue { export default class SortingHeader2 extends Vue {
public DATE_DIRECTION = 'date-descending'
public AMOUNT_DIRECTION = 'amount-descending'
public STATUS_DIRECTION = 'status-descending'
public dateSortDirection: SortDirection = SortDirection.ASCENDING;
public amountSortDirection: SortDirection = SortDirection.ASCENDING;
public statusSortDirection: SortDirection = SortDirection.ASCENDING;
public arrowController: {date: boolean, amount: boolean, status: boolean} = {date: false, amount: false, status: false}
/**
* sorts table by date
*/
public sortFunction(key): void {
switch (key) {
case 'date':
this.$emit('sortFunction', this.DATE_DIRECTION);
this.DATE_DIRECTION = this.DATE_DIRECTION === 'date-ascending' ? 'date-descending' : 'date-ascending';
this.arrowController = {date: true, amount: false, status: false};
this.dateSortDirection = this.dateSortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
break;
case 'amount':
this.$emit('sortFunction', this.AMOUNT_DIRECTION);
this.AMOUNT_DIRECTION = this.AMOUNT_DIRECTION === 'amount-ascending' ? 'amount-descending' : 'amount-ascending';
this.arrowController = {date: false, amount: true, status: false};
this.amountSortDirection = this.amountSortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
break
case 'status':
this.$emit('sortFunction', this.STATUS_DIRECTION);
this.STATUS_DIRECTION = this.STATUS_DIRECTION === 'status-ascending' ? 'status-descending' : 'status-ascending';
this.arrowController = {date: false, amount: false, status: true};
this.statusSortDirection = this.statusSortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
break;
default:
break;
}
}
} }
</script> </script>
<style scoped lang="scss">
.sort-header-container {
display: flex;
width: 100%;
padding: 16px 0;
&__item {
text-align: left;
&__name {
font-family: 'font_medium', sans-serif;
font-size: 14px;
line-height: 19px;
color: #adadad;
margin: 0;
}
}
}
.date,
.amount,
.status {
display: flex;
cursor: pointer;
}
.date {
width: 15%;
}
.transaction {
width: 35%;
}
.status {
width: 15%;
}
.amount {
width: 15%;
margin: 0;
}
.details {
text-align: left;
margin: 0;
width: 20%;
}
</style>

140
web/satellite/src/components/account/billing/paymentMethods/TokenTransactionItem.vue
View File

@ -1,13 +1,147 @@
// Copyright (C) 2019 Storj Labs, Inc. // Copyright (C) 2022 Storj Labs, Inc.
// See LICENSE for copying information. // See LICENSE for copying information.
<template> <template>
<div class="container" /> <div class="container">
<div class="divider" />
<div class="container__row">
<div class="container__row__item__date-container">
<p class="container__row__item date">{{ billingItem.start.toLocaleDateString() }}</p>
<p class="container__row__item time">{{ billingItem.start.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) }}</p>
</div>
<div class="container__row__item__description">
<p class="container__row__item__description__text">CoinPayments {{ billingItem.description.includes("Deposit")? "Deposit": "Withdrawal" }}</p>
<p class="container__row__item__description__id">{{ billingItem.id }}</p>
</div>
<p class="container__row__item amount">
<b>
<span v-if="billingItem.type === 1">
${{ billingItem.quantity.received.toFixed(2) }}
</span>
<span v-else>
${{ billingItem.quantity.total.toFixed(2) }}
</span>
</b>
</p>
<p class="container__row__item status">
<span :class="`container__row__item__circle-icon ${billingItem.status}`">
&#9679;
</span>
{{ billingItem.formattedStatus }}
</p>
<p class="container__row__item download">
<a v-if="billingItem.link" class="download-link" target="_blank" :href="billingItem.link">View On CoinPayments</a>
</p>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue } from 'vue-property-decorator'; import { Prop, Vue, Component } from 'vue-property-decorator';
import { PaymentsHistoryItem } from '@/types/payments';
// @vue/component
@Component
export default class TokenTransactionItem extends Vue { export default class TokenTransactionItem extends Vue {
@Prop({default: () => new PaymentsHistoryItem()})
private readonly billingItem: PaymentsHistoryItem;
} }
</script> </script>
<style scoped lang="scss">
.pending {
color: #ffa800;
}
.confirmed {
color: #00ac26;
}
.rejected {
color: #ac1a00;
}
.divider {
height: 1px;
width: calc(100% + 30px);
background-color: #e5e7eb;
align-self: center;
}
.download-link {
color: #2683ff;
font-family: 'font_bold', sans-serif;
text-decoration: underline !important;
&:hover {
color: #0059d0;
}
}
.container {
display: flex;
flex-direction: column;
&__row {
display: flex;
align-items: center;
width: 100%;
&__item {
font-family: sans-serif;
font-weight: 300;
font-size: 16px;
text-align: left;
margin: 30px 0;
&__description {
width: 35%;
display: flex;
flex-direction: column;
text-align: left;
&__text,
&__id {
font-family: 'font_medium', sans-serif;
}
}
&__date-container {
width: 15%;
display: flex;
flex-direction: column;
}
}
}
}
.date {
font-family: 'font_bold', sans-serif;
margin: 0;
}
.time {
color: #6b7280;
margin: 0;
font-size: 14px;
}
.description {
font-family: 'font_medium', sans-serif;
overflow: ellipse;
}
.status {
width: 15%;
}
.amount {
width: 15%;
}
.download {
text-align: left;
width: 20%;
}
</style>

18
web/satellite/src/components/common/VerticalArrows.vue
View File

@ -1,10 +1,10 @@
// Copyright (C) 2019 Storj Labs, Inc. // Copyright (C) 2022 Storj Labs, Inc.
// See LICENSE for copying information. // See LICENSE for copying information.
<template> <template>
<div class="container"> <div class="container">
<TopArrowIcon :class="{ active: isActive && isTop }" /> <TopArrowIcon :class="`${ isActive && isTop?'active':'inactive' }`" />
<BottomArrowIcon :class="{ active: isActive && isBottom }" /> <BottomArrowIcon :class="`${ isActive && isBottom?'active':'inactive' }`" />
</div> </div>
</template> </template>
@ -48,10 +48,16 @@ export default class VerticalArrows extends Vue {
height: 17px; height: 17px;
} }
.active { .inactive {
opacity: 0.5;
}
.arrow-svg-path { .active {
opacity: 1;
::v-deep path {
fill: #2683ff !important; fill: #2683ff !important;
} }
} }
</style>
</style>

6
web/satellite/tests/unit/common/__snapshots__/VerticalArrows.spec.ts.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VerticalArrows.vue should render with bottom arrow highlighted 1`] = `<div class="container"><svg class=""></svg> <svg class="active"></svg></div>`; exports[`VerticalArrows.vue should render with bottom arrow highlighted 1`] = `<div class="container"><svg class="inactive"></svg> <svg class="active"></svg></div>`;
exports[`VerticalArrows.vue should render with top arrow highlighted 1`] = `<div class="container"><svg class="active"></svg> <svg class=""></svg></div>`; exports[`VerticalArrows.vue should render with top arrow highlighted 1`] = `<div class="container"><svg class="active"></svg> <svg class="inactive"></svg></div>`;
exports[`VerticalArrows.vue should render without any highlighted arrows 1`] = `<div class="container"><svg class=""></svg> <svg class=""></svg></div>`; exports[`VerticalArrows.vue should render without any highlighted arrows 1`] = `<div class="container"><svg class="inactive"></svg> <svg class="inactive"></svg></div>`;

6
web/satellite/tests/unit/projectMembers/__snapshots__/SortingListHeader.spec.ts.snap
View File

@ -4,15 +4,15 @@ exports[`SortingListHeader.vue should render correctly 1`] = `
<div class="sort-header-container"> <div class="sort-header-container">
<div class="sort-header-container__name-container"> <div class="sort-header-container__name-container">
<p class="sort-header-container__name-container__title">Name</p> <p class="sort-header-container__name-container__title">Name</p>
<div class="container"><svg class=""></svg> <svg class="active"></svg></div> <div class="container"><svg class="inactive"></svg> <svg class="active"></svg></div>
</div> </div>
<div class="sort-header-container__added-container"> <div class="sort-header-container__added-container">
<p class="sort-header-container__added-container__title">Added</p> <p class="sort-header-container__added-container__title">Added</p>
<div class="container"><svg class=""></svg> <svg class=""></svg></div> <div class="container"><svg class="inactive"></svg> <svg class="inactive"></svg></div>
</div> </div>
<div class="sort-header-container__email-container"> <div class="sort-header-container__email-container">
<p class="sort-header-container__email-container__title">Email</p> <p class="sort-header-container__email-container__title">Email</p>
<div class="container"><svg class=""></svg> <svg class=""></svg></div> <div class="container"><svg class="inactive"></svg> <svg class="inactive"></svg></div>
</div> </div>
</div> </div>
`; `;