web/satellite: Added token transaction history to new payment methods flow (#4977)
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:
parent
81327f669a
commit
0f3da7f895
@ -2,12 +2,147 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<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>
|
||||
|
||||
<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 {
|
||||
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
@ -1,13 +1,147 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// Copyright (C) 2022 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<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}`">
|
||||
●
|
||||
</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>
|
||||
|
||||
<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 {
|
||||
@Prop({default: () => new PaymentsHistoryItem()})
|
||||
private readonly billingItem: PaymentsHistoryItem;
|
||||
}
|
||||
</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>
|
||||
|
@ -1,10 +1,10 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// Copyright (C) 2022 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<TopArrowIcon :class="{ active: isActive && isTop }" />
|
||||
<BottomArrowIcon :class="{ active: isActive && isBottom }" />
|
||||
<TopArrowIcon :class="`${ isActive && isTop?'active':'inactive' }`" />
|
||||
<BottomArrowIcon :class="`${ isActive && isBottom?'active':'inactive' }`" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -48,10 +48,16 @@ export default class VerticalArrows extends Vue {
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.active {
|
||||
.inactive {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.arrow-svg-path {
|
||||
.active {
|
||||
opacity: 1;
|
||||
|
||||
::v-deep path {
|
||||
fill: #2683ff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
@ -1,7 +1,7 @@
|
||||
// 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>`;
|
||||
|
@ -4,15 +4,15 @@ exports[`SortingListHeader.vue should render correctly 1`] = `
|
||||
<div class="sort-header-container">
|
||||
<div class="sort-header-container__name-container">
|
||||
<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 class="sort-header-container__added-container">
|
||||
<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 class="sort-header-container__email-container">
|
||||
<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>
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user