open-vault/ui/app/components/calendar-widget.js
Chelsea Shaw 7f7ef1cfe9
UI: calendar widget fix (#15789)
* 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
2022-06-03 14:22:50 -07:00

142 lines
5.1 KiB
JavaScript

import Component from '@glimmer/component';
import layout from '../templates/components/calendar-widget';
import { setComponentTemplate } from '@ember/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
/**
* @module CalendarWidget
* CalendarWidget components are used in the client counts metrics. It helps users understand the ranges they can select.
*
* @example
* ```js
* <CalendarWidget
* @param {array} arrayOfMonths - An array of all the months that the calendar widget iterates through.
* @param {string} endTimeDisplay - The formatted display value of the endTime. Ex: January 2022.
* @param {array} endTimeFromResponse - The value returned on the counters/activity endpoint, which shows the true endTime not the selected one, which can be different. Ex: ['2022', 0]
* @param {function} handleClientActivityQuery - a function passed from parent. This component sends the month and year to the parent via this method which then calculates the new data.
* @param {function} handleCurrentBillingPeriod - a function passed from parent. This component makes the parent aware that the user selected Current billing period and it handles resetting the data.
* @param {string} startTimeDisplay - The formatted display value of the endTime. Ex: January 2022. This component is only responsible for modifying the endTime which is sends to the parent to make the network request.
* />
*
* ```
*/
class CalendarWidget extends Component {
currentDate = new Date();
currentYear = this.currentDate.getFullYear(); // integer
currentMonth = parseInt(this.currentDate.getMonth()); // integer and zero index
@tracked allMonthsNodeList = [];
@tracked displayYear = this.currentYear; // init to currentYear and then changes as a user clicks on the chevrons
@tracked showCalendar = false;
@tracked tooltipTarget = null;
@tracked tooltipText = null;
get selectedMonthId() {
if (!this.args.endTimeFromResponse) return '';
const [year, monthIndex] = this.args.endTimeFromResponse;
return `${monthIndex}-${year}`;
}
get disableFutureYear() {
return this.displayYear === this.currentYear;
}
get disablePastYear() {
let startYear = parseInt(this.args.startTimeDisplay.split(' ')[1]);
return this.displayYear === startYear; // if on startYear then don't let them click back to the year prior
}
get widgetMonths() {
const displayYear = this.displayYear;
const currentYear = this.currentYear;
const currentMonthIdx = this.currentMonth;
const [startMonth, startYear] = this.args.startTimeDisplay.split(' ');
const startMonthIdx = this.args.arrayOfMonths.indexOf(startMonth);
return this.args.arrayOfMonths.map((month, idx) => {
const monthId = `${idx}-${displayYear}`;
let readonly = false;
// if widget is showing billing start year, disable if month is before start month
if (parseInt(startYear) === displayYear && idx < startMonthIdx) {
readonly = true;
}
// if widget showing current year, disable if month is current or later
if (displayYear === currentYear && idx >= currentMonthIdx) {
readonly = true;
}
return {
id: monthId,
month,
readonly,
current: monthId === `${currentMonthIdx}-${currentYear}`,
};
});
}
// HELPER FUNCTIONS (alphabetically) //
addClass(element, classString) {
element.classList.add(classString);
}
removeClass(element, classString) {
element.classList.remove(classString);
}
resetDisplayYear() {
let setYear = this.currentYear;
if (this.args.endTimeDisplay) {
try {
const year = this.args.endTimeDisplay.split(' ')[1];
setYear = parseInt(year);
} catch (e) {
console.debug('Error resetting display year', e);
}
}
this.displayYear = setYear;
}
// ACTIONS (alphabetically) //
@action
addTooltip() {
if (this.disablePastYear) {
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;
}
@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.
this.showCalendar = false;
D.actions.close(); // close the dropdown.
}
@action
selectEndMonth(monthId, D) {
const [monthIdx, year] = monthId.split('-');
this.toggleShowCalendar();
this.args.handleClientActivityQuery(parseInt(monthIdx), parseInt(year), 'endTime');
D.actions.close(); // close the dropdown.
}
@action
subYear() {
this.displayYear = this.displayYear - 1;
}
@action
toggleShowCalendar() {
this.showCalendar = !this.showCalendar;
this.resetDisplayYear();
}
}
export default setComponentTemplate(layout, CalendarWidget);