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