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