7f7ef1cfe9
* Months after current are disabled, regardless of endTimeFromResponse * move tracked values to getters for consistency * months for widget are calculated in getter and then rendered * Styling for current month is mix of hover and readonly * Fix tests * Add changelog * Reset display year to endTimeFromResponse on toggle calendar * update resetDisplayYear and naming * Add test for displayYear when opened
111 lines
3.8 KiB
Handlebars
111 lines
3.8 KiB
Handlebars
<BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
|
|
<D.Trigger
|
|
data-test-popup-menu-trigger="true"
|
|
class={{concat "toolbar-link" (if D.isOpen " is-active")}}
|
|
@htmlTag="button"
|
|
>
|
|
{{@startTimeDisplay}}
|
|
-
|
|
{{@endTimeDisplay}}
|
|
<Chevron @direction="down" @isButton={{true}} />
|
|
</D.Trigger>
|
|
<D.Content @defaultClass={{concat "popup-menu-content calendar-content" (if this.showCalendar " calendar-open")}}>
|
|
<nav class="box menu">
|
|
<div class="calendar-title is-subtitle-gray">
|
|
DATE OPTIONS
|
|
</div>
|
|
<ul class="menu-list">
|
|
<li class="action">
|
|
<button
|
|
data-test-current-billing-period
|
|
class="link link-plain has-text-weight-semibold is-ghost"
|
|
type="button"
|
|
{{on "click" (fn this.selectCurrentBillingPeriod D)}}
|
|
>
|
|
Current billing period
|
|
</button>
|
|
</li>
|
|
<li class="action">
|
|
<button
|
|
data-test-show-calendar
|
|
class={{concat "link link-plain has-text-weight-semibold is-ghost" (if this.showCalendar " is-active")}}
|
|
type="button"
|
|
{{on "click" this.toggleShowCalendar}}
|
|
>
|
|
<div class="level is-mobile">
|
|
<span class="level-left">
|
|
Custom end month
|
|
</span>
|
|
<Chevron class="has-text-grey-light level-right" />
|
|
</div>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
{{#if this.showCalendar}}
|
|
<div class="calendar-widget-container" data-test-calendar-widget-container>
|
|
<div class="select-year">
|
|
<button
|
|
data-test-previous-year
|
|
id="previous-year"
|
|
type="button"
|
|
class="button is-transparent"
|
|
disabled={{this.disablePastYear}}
|
|
{{on "click" this.subYear}}
|
|
>
|
|
<Chevron
|
|
@direction="left"
|
|
@size="s"
|
|
class="has-text-grey"
|
|
{{on "mouseover" this.addTooltip}}
|
|
{{on "mouseleave" this.removeTooltip}}
|
|
/>
|
|
</button>
|
|
<p data-test-display-year>
|
|
{{this.displayYear}}
|
|
</p>
|
|
<button
|
|
data-test-future-year
|
|
type="button"
|
|
class={{concat "button is-transparent " (if (or this.tooltipTarget) "negative-margin" "padding-right")}}
|
|
disabled={{this.disableFutureYear}}
|
|
{{on "click" this.addYear}}
|
|
>
|
|
<Chevron @direction="right" @size="s" class="has-text-grey" />
|
|
</button>
|
|
{{#if this.tooltipTarget}}
|
|
{{! Component must be in curly bracket notation }}
|
|
{{! template-lint-disable no-curly-component-invocation }}
|
|
{{#modal-dialog
|
|
tagName="div"
|
|
tetherTarget=this.tooltipTarget
|
|
targetAttachment="top right"
|
|
attachment="top middle"
|
|
offset="150px 0"
|
|
}}
|
|
<div class={{"calendar-tooltip"}}>
|
|
<p>
|
|
{{this.tooltipText}}
|
|
</p>
|
|
</div>
|
|
<div class="chart-tooltip-arrow"></div>
|
|
{{/modal-dialog}}
|
|
{{/if}}
|
|
</div>
|
|
<div class="calendar-widget-grid calendar-widget">
|
|
{{#each this.widgetMonths as |m|}}
|
|
<button
|
|
data-test-calendar-month={{m.month}}
|
|
type="button"
|
|
class="is-month-list {{if m.readonly 'is-readOnly'}} {{if (eq m.id this.selectedMonthId) 'is-selected-month'}}"
|
|
id={{m.id}}
|
|
{{on "click" (fn this.selectEndMonth m.id D)}}
|
|
>
|
|
{{m.month}}
|
|
</button>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</D.Content>
|
|
</BasicDropdown> |