open-vault/ui/app/templates/components/calendar-widget.hbs
claire bontempo 4a9610f382
UI: combine current + history client count tabs into one dashboard (#17575)
* WIP/initial routing-ish

* refactor date dropdown to reuse in modal and allowe current month selection

* swap linter disable line

* refactor date-dropdown to return object

* refactor calendar widget, add tests

* change calendar start and end args to getters

* refactor dashboard to use date objects instead of array of year, month

* remove dashboard files for easier to follow git diff

* comment out dashboard tab until route name updated

* delete current tab and route

* fix undefined banner time

* cleanup version history serializer and upgrade data

* first pass of updating tests

* add changelog

* update client count util test

* validate end time is after start time

* update comment

* add current month to calendar widget

* add comments for code changes to make following API update

* Removed a modified file from pull request

* address comments/cleanup

* update variables to const

* update test const

* rename history -> dashboard, fix tests

* fix timestamps for attribution chart

* update release note

* refactor using backend start and end time params

* add test for adapter formatting time params

* fix tests

* cleanup adapter comment and query params

* change back history file name for diff

* rename file using cli

* revert filenames

* rename files via git cli

* revert route file name

* last cli rename

* refactor mirage

* hold off on running total changes

* update params in test

* refactor to remove conditional assertions

* finish tests

* fix firefox tooltip

* remove current-when

* refactor version history

* add timezone/UTC note

* final cleanup!!!!

* fix test

* fix client count date tests

* fix date-dropdown test

* clear datedropdown completely

* update date selectors to accommodate new year (#18586)

* Revert "hold off on running total changes"

This reverts commit 8dc79a626d549df83bc47e290392a556c670f98f.

* remove assumed 0 values

* update average helper to only calculate for array of objects

* remove passing in bar chart data, map in running totals component instead

* cleanup usage stat component

* clear  ss filters for new queries

* update csv export, add explanation to modal

* update test copy

* consistently return null if no upgrade during activity (instead of empty array)

* update description, add clarifying comments

* update tes

* add more clarifying comments

* fix historic single month chart

* remove old test tag

* Update ui/app/components/clients/dashboard.js
2023-01-26 18:21:12 -08:00

123 lines
4.2 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"
>
{{date-format this.startDate "MMM yyyy"}}
-
{{date-format this.endDate "MMM yyyy"}}
<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-month
class="link link-plain has-text-weight-semibold is-ghost"
type="button"
name="currentMonth"
{{on "click" (fn this.handleDateShortcut D.actions)}}
>
Current month
</button>
</li>
<li class="action">
<button
data-test-current-billing-period
class="link link-plain has-text-weight-semibold is-ghost"
type="button"
name="reset"
{{on "click" (fn this.handleDateShortcut D.actions)}}
>
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-next-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 |month|}}
<button
data-test-calendar-month={{month.name}}
type="button"
class="is-month-list {{if month.readonly 'is-readOnly'}}"
id={{month.index}}
{{on "click" (fn this.selectMonth month D.actions)}}
>
{{month.name}}
</button>
{{/each}}
</div>
</div>
{{/if}}
</D.Content>
</BasicDropdown>