luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Calendar widget tooltip (#13937) 

* first tooltip for next year disabled

* workable for left tooltip

* styling

* make dry

* forgot this one

* remove right tooltip

* clean up

* bug fix

* add bullets when two error messages in one

* fix to isAfter on range comparisons

* remove

* update message per design

* only warning for startTime

* fix for firefox
This commit is contained in:
Angel Garbarino 2022-02-10 09:43:40 -07:00 committed by GitHub
parent c360d5ad45
commit ccba717a93
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 107 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ui/app/components/calendar-widget.js
View File

@ -31,6 +31,8 @@ class CalendarWidget extends Component {
@tracked disablePastYear = this.isObsoleteYear(); // if obsolete year, disable left chevron
@tracked disableFutureYear = this.isCurrentYear(); // if current year, disable right chevron
@tracked showCalendar = false;
@tracked tooltipTarget = null;
@tracked tooltipText = null;
// HELPER FUNCTIONS (alphabetically) //
addClass(element, classString) {
@ -52,6 +54,15 @@ class CalendarWidget extends Component {
}
// ACTIONS (alphabetically) //
@action
addTooltip() {
if (this.isObsoleteYear()) {
let previousYear = Number(this.displayYear) - 1;
this.tooltipText = `${previousYear} is unavailable because it is before your billing start month. Change your billing start month to a date in ${previousYear} to see data for this year.`; // set tooltip text
this.tooltipTarget = '#previous-year';
}
}
@action
addYear() {
this.displayYear = this.displayYear + 1;
@ -88,17 +99,26 @@ class CalendarWidget extends Component {
}
}
// Compare values so the user cannot select an endTime after the endTime returned from counters/activity response on page load.
// ARG TODO will need to test if no data is returned on page load.
if (this.displayYear.toString() === this.args.endTimeFromResponse[0]) {
let endMonth = this.args.endTimeFromResponse[1];
let yearEndTimeFromResponse = Number(this.args.endTimeFromResponse[0]);
let endMonth = this.args.endTimeFromResponse[1];
if (this.displayYear === yearEndTimeFromResponse) {
// add readOnly class to any month that is older (higher) than the endMonth index. (e.g. if nov is the endMonth of the endTimeDisplay, then 11 and 12 should not be displayed 10 < 11 and 10 < 12.)
if (endMonth < elementMonthId) {
e.classList.add('is-readOnly');
}
}
// if the year display higher than the endTime e.g. you're looking at 2022 and the returned endTime is 2021, all months should be disabled.
if (this.displayYear > yearEndTimeFromResponse) {
// all months should be disabled.
e.classList.add('is-readOnly');
}
});
}
@action removeTooltip() {
this.tooltipTarget = null;
}
@action
selectCurrentBillingPeriod(D) {
this.args.handleCurrentBillingPeriod(); // resets the billing startTime and endTime to what it is on init via the parent.

35
ui/app/components/clients/history.js
View File

@ -112,25 +112,12 @@ export default class History extends Component {
return false;
}
let versionDate = new Date(firstUpgrade.timestampInstalled);
// compare against this startTimeFromResponse to show message or not.
return isAfter(versionDate, new Date(this.startTimeFromResponse)) ? versionDate : false;
}
// HELPERS
areArraysTheSame(a1, a2) {
return (
a1 === a2 ||
(a1 !== null &&
a2 !== null &&
a1.length === a2.length &&
a1
.map(function (val, idx) {
return val === a2[idx];
})
.reduce(function (prev, cur) {
return prev && cur;
}, true))
let startTimeFromResponseAsDateObject = new Date(
Number(this.startTimeFromResponse[0]),
this.startTimeFromResponse[1]
);
// compare against this startTimeFromResponse to show message or not.
return isAfter(versionDate, startTimeFromResponseAsDateObject) ? versionDate : false;
}
// ACTIONS
@ -171,9 +158,15 @@ export default class History extends Component {
this.startTimeFromResponse = response.formattedStartTime;
this.endTimeFromResponse = response.formattedEndTime;
}
// compare if the response and what you requested are the same. If they are not throw a warning.
// this only gets triggered if the data was returned, which does not happen if the user selects a startTime after for which we have data. That's an adapter error and is captured differently.
if (!this.areArraysTheSame(this.startTimeFromResponse, this.startTimeRequested)) {
// compare if the response startTime comes after the requested startTime. If true throw a warning.
// only display if they selected a startTime
if (
dateType === 'startTime' &&
isAfter(
new Date(this.getActivityResponse.startTime),
new Date(this.startTimeRequested[0], this.startTimeRequested[1])
)
) {
this.responseRangeDiffMessage = `You requested data from ${month} ${year}. We only have data from ${this.startTimeDisplay}, and that is what is being shown here.`;
} else {
this.responseRangeDiffMessage = null;

19
ui/app/styles/components/calendar-widget.scss
View File

@ -42,9 +42,15 @@ $dark-gray: #535f73;
justify-content: space-between;
align-items: first baseline;
// spacing of < year > icons when the tooltip is added or removed from DOM.
> .padding-right {
// if no tooltip
padding-right: 26px;
}
> .negative-margin {
// if tooltip
margin-right: -50px;
}
}
.calendar-widget {
@ -99,3 +105,16 @@ $dark-gray: #535f73;
grid-gap: 0.5rem;
padding: 7px 28px 28px 28px;
}
// for modal-dialog tooltips
.calendar-tooltip {
background-color: $ui-gray-700;
color: white;
font-size: $size-8;
padding: $size-9;
border-radius: $radius-large;
width: 141px;
}
.ember-modal-dialog {
z-index: 1000;
}

34
ui/app/templates/components/calendar-widget.hbs
View File

@ -39,18 +39,46 @@
{{#if this.showCalendar}}
<div class="calendar-widget-container">
<div class="select-year">
<button type="button" class="button is-transparent" disabled={{this.disablePastYear}} {{on "click" this.subYear}}>
<Chevron @direction="left" @size="s" class="has-text-grey" />
<button
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>{{this.displayYear}}</p>
<button
type="button"
class="button is-transparent padding-right"
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 {{did-insert this.disableMonths}} class="calendar-widget-grid calendar-widget">
{{#each @arrayOfMonths as |month index|}}

5
ui/app/templates/components/clients/current.hbs
View File

@ -34,10 +34,9 @@
{{#if this.countsIncludeOlderData}}
<AlertBanner @type="warning" @title="Warning">
{{concat "You upgraded to Vault " this.firstUpgradeVersion " on " (date-format this.upgradeDate "MMMM d, yyyy.")}}
How we count clients changed in 1.9, so please keep in mind when looking at the data below. Furthermore, namespace
attribution is available only for 1.9 data.
How we count clients changed in 1.9, so please keep that in mind when looking at the data below, and you can
<DocLink @path="/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts">
Learn more here.
read more here.
</DocLink>
</AlertBanner>
{{/if}}

35
ui/app/templates/components/clients/history.hbs
View File

@ -76,27 +76,28 @@
</ToolbarFilters>
</Toolbar>
</div>
{{#if this.countsIncludeOlderData}}
{{#if (or this.countsIncludeOlderData this.responseRangeDiffMessage)}}
<AlertBanner @type="warning" @title="Warning">
<ul>
<ul class={{if (and this.countsIncludeOlderData this.responseRangeDiffMessage) "bullet"}}>
{{#if this.responseRangeDiffMessage}}
<li>{{this.responseRangeDiffMessage}}</li>
{{/if}}
<li>
{{concat
"You upgraded to Vault "
this.firstUpgradeVersion
" on "
(date-format this.upgradeDate "MMMM d, yyyy.")
}}
How we count clients changed in 1.9, so please keep in mind when looking at the data below. Furthermore,
namespace attribution is available only for 1.9 data.
<DocLink
@path="/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts"
>
Learn more here.
</DocLink>
</li>
{{#if this.countsIncludeOlderData}}
<li>
{{concat
"You upgraded to Vault "
this.firstUpgradeVersion
" on "
(date-format this.upgradeDate "MMMM d, yyyy.")
}}
How we count clients changed in 1.9, so please keep that in mind when looking at the data below, and you can
<DocLink
@path="/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts"
>
read more here.
</DocLink>
</li>
{{/if}}
</ul>
</AlertBanner>
{{/if}}