1// Copyright (C) 2020 Storj Labs, Inc.
2// See LICENSE for copying information.
3
4<template>
5    <div class="period-container" @click.stop="openPeriodDropdown">
6        <p class="period-container__label long-text">{{ period }}</p>
7        <BlackArrowHide v-if="isCalendarShown" />
8        <BlackArrowExpand v-else />
9        <PayoutHistoryPeriodCalendar
10            v-if="isCalendarShown"
11            v-click-outside="closePeriodDropdown"
12            class="period-container__calendar"
13        />
14    </div>
15</template>
16
17<script lang="ts">
18import { Component, Vue } from 'vue-property-decorator';
19
20import PayoutHistoryPeriodCalendar from '@/app/components/payments/PayoutHistoryPeriodCalendar.vue';
21
22import BlackArrowExpand from '@/../static/images/BlackArrowExpand.svg';
23import BlackArrowHide from '@/../static/images/BlackArrowHide.svg';
24
25import { APPSTATE_ACTIONS } from '@/app/store/modules/appState';
26import { monthNames } from '@/app/types/payout';
27
28// @vue/component
29@Component({
30    components: {
31        PayoutHistoryPeriodCalendar,
32        BlackArrowExpand,
33        BlackArrowHide,
34    },
35})
36export default class PayoutHistoryPeriodDropdown extends Vue {
37    /**
38     * String presentation of selected payout history period.
39     */
40    public get period(): string {
41        if (!this.$store.state.payoutModule.payoutHistoryPeriod) {
42            return '';
43        }
44
45        const splittedPeriod = this.$store.state.payoutModule.payoutHistoryPeriod.split('-');
46
47        return `${monthNames[(splittedPeriod[1] - 1)]}, ${splittedPeriod[0]}`;
48    }
49
50    /**
51     * Indicates if period selection calendar should appear.
52     */
53    public get isCalendarShown(): boolean {
54        return this.$store.state.appStateModule.isPayoutHistoryCalendarShown;
55    }
56
57    /**
58     * Opens payout period selection dropdown.
59     */
60    public openPeriodDropdown(): void {
61        this.$store.dispatch(APPSTATE_ACTIONS.TOGGLE_PAYOUT_HISTORY_CALENDAR, true);
62    }
63
64    /**
65     * Closes payout period selection dropdown.
66     */
67    public closePeriodDropdown(): void {
68        this.$store.dispatch(APPSTATE_ACTIONS.TOGGLE_PAYOUT_HISTORY_CALENDAR, false);
69    }
70}
71</script>
72
73<style scoped lang="scss">
74    .period-container {
75        position: relative;
76        display: flex;
77        flex-direction: row;
78        align-items: center;
79        justify-content: center;
80        background-color: transparent;
81        cursor: pointer;
82
83        &__label {
84            margin-right: 8px;
85            font-family: 'font_regular', sans-serif;
86            font-weight: 500;
87            font-size: 16px;
88            color: var(--regular-text-color);
89        }
90
91        &__calendar {
92            position: absolute;
93            top: 30px;
94            right: 0;
95        }
96    }
97
98    .active {
99
100        .period-container__label {
101            color: var(--navigation-link-color);
102        }
103    }
104
105    .arrow {
106
107        path {
108            fill: var(--period-selection-arrow-color);
109        }
110    }
111</style>
112