1// Copyright (C) 2020 Storj Labs, Inc. 2// See LICENSE for copying information. 3 4<template> 5 <section class="payout-history-table"> 6 <div class="payout-history-table__header"> 7 <p class="payout-history-table__header__title">Payout History</p> 8 <div class="payout-history-table__header__selection-area"> 9 <PayoutHistoryPeriodDropdown /> 10 </div> 11 </div> 12 <div class="payout-history-table__divider" /> 13 <div class="payout-history-table__table-container"> 14 <div class="payout-history-table__table-container__labels-area"> 15 <p class="payout-history-table__table-container__labels-area__label">Satellite</p> 16 <p class="payout-history-table__table-container__labels-area__label">Payout</p> 17 </div> 18 <PayoutHistoryTableItem v-for="historyItem in payoutHistory" :key="historyItem.satelliteID" :history-item="historyItem" /> 19 <div class="payout-history-table__table-container__totals-area"> 20 <p class="payout-history-table__table-container__totals-area__label">Total</p> 21 <p class="payout-history-table__table-container__totals-area__value">{{ totalPaid | centsToDollars }}</p> 22 </div> 23 </div> 24 </section> 25</template> 26 27<script lang="ts"> 28import { Component, Vue } from 'vue-property-decorator'; 29 30import PayoutHistoryPeriodDropdown from '@/app/components/payments/PayoutHistoryPeriodDropdown.vue'; 31import PayoutHistoryTableItem from '@/app/components/payments/PayoutHistoryTableItem.vue'; 32 33import { PAYOUT_ACTIONS } from '@/app/store/modules/payout'; 34import { SatellitePayoutForPeriod } from '@/storagenode/payouts/payouts'; 35 36// @vue/component 37@Component ({ 38 components: { 39 PayoutHistoryPeriodDropdown, 40 PayoutHistoryTableItem, 41 }, 42}) 43export default class PayoutHistoryTable extends Vue { 44 public get payoutHistory(): SatellitePayoutForPeriod[] { 45 return this.$store.state.payoutModule.payoutHistory; 46 } 47 48 /** 49 * Returns sum of payouts for all satellites of current period. 50 */ 51 public get totalPaid(): number { 52 return this.$store.getters.totalPaidForPayoutHistoryPeriod; 53 } 54 55 /** 56 * Lifecycle hook after initial render. 57 * Fetches payout history for last period. 58 */ 59 public async mounted(): Promise<void> { 60 const payoutPeriods = this.$store.state.payoutModule.payoutPeriods; 61 62 if (!payoutPeriods.length) { 63 return; 64 } 65 66 const lastPeriod = payoutPeriods[payoutPeriods.length - 1]; 67 await this.$store.dispatch(PAYOUT_ACTIONS.SET_PAYOUT_HISTORY_PERIOD, lastPeriod.period); 68 69 try { 70 await this.$store.dispatch(PAYOUT_ACTIONS.GET_PAYOUT_HISTORY); 71 } catch (error) { 72 console.error(error.message); 73 } 74 } 75} 76</script> 77 78<style scoped lang="scss"> 79 .payout-history-table { 80 display: flex; 81 flex-direction: column; 82 padding: 20px 40px 20px 40px; 83 background: var(--block-background-color); 84 border: 1px solid var(--block-border-color); 85 box-sizing: border-box; 86 border-radius: 12px; 87 font-family: 'font_regular', sans-serif; 88 89 &__header { 90 display: flex; 91 flex-direction: row; 92 align-items: center; 93 justify-content: space-between; 94 height: 40px; 95 96 &__title { 97 font-weight: 500; 98 font-size: 18px; 99 color: var(--regular-text-color); 100 } 101 } 102 103 &__divider { 104 width: 100%; 105 height: 1px; 106 background-color: #eaeaea; 107 } 108 109 &__table-container { 110 width: 100%; 111 margin-top: 19px; 112 113 &__labels-area, 114 &__totals-area { 115 display: flex; 116 align-items: center; 117 justify-content: space-between; 118 padding: 8px 17px; 119 width: calc(100% - 34px); 120 font-family: 'font_medium', sans-serif; 121 } 122 123 &__labels-area { 124 background: var(--table-header-color); 125 126 &__label { 127 font-size: 14px; 128 color: var(--label-text-color); 129 } 130 } 131 132 &__totals-area { 133 margin-top: 12px; 134 font-size: 16px; 135 color: var(--regular-text-color); 136 } 137 } 138 } 139 140 @media screen and (max-width: 640px) { 141 142 .payout-history-table { 143 padding: 28px 20px 28px 20px; 144 145 &__divider { 146 display: none; 147 } 148 } 149 } 150</style> 151