Client Count Calendar Widget for 1.10 #13613
Conversation
| import { action } from '@ember/object'; | ||
| import { tracked } from '@glimmer/tracking'; | ||
|
|
||
| // ARG TODO documentation takes start and end for handQuery |
There was a problem hiding this comment.
this component will eventually have functions passed down from the parent which is why I left the TODO comment there.
| constructor() { | ||
| super(...arguments); | ||
| // ARG TODO we need to return the config's duration if not default to 12 months to calculate, now it's 12 months | ||
| let date = new Date(); |
There was a problem hiding this comment.
right now I'm calculating the startDate based on today, but the next PR will pull the startDate from the license endpoint and send it to the component as a param. This component is only in charge of endDates or singleMonth or saying, just go back to the default billing period.
| resetData() { | ||
| this.barChartSelection = false; | ||
| this.selectedNamespace = null; | ||
| selectStartMonth(month) { |
There was a problem hiding this comment.
these are fired off from the modal that sets the startMonth. Right now, they do nothing but set a param, when it's wired up they'll fire off a network request.
| text-shadow: 0 1px 1px rgba($black, 0.25); | ||
| } | ||
|
|
||
| &.is-link { |
There was a problem hiding this comment.
We need the button we use to look like a link because we were told it should be a button even if it doesn't look like one for accessibility reasons.
| </div> | ||
| {{/if}} | ||
|
|
||
| {{#if this.showSingleMonth}} |
There was a problem hiding this comment.
This is essentially a copy of the above calendar chunk with a different instance and id names. The reason I did this, even though it's a copy is because the widget needs to know what calendar we're looking at. They behave differently even if they look identical.
| currentMonth = parseInt(format(this.currentDate, 'M')) - 1; // integer and zero index | ||
|
|
||
| @tracked allMonthsNodeList = []; | ||
| @tracked displayYear = this.currentYear; // init to currentYear and then changes as a user clicks on the chevrons |
There was a problem hiding this comment.
Thank you for these comments! 😍
| this.endDateDisplay = format(date, 'MMMM yyyy'); | ||
| } | ||
|
|
||
| // HELPER FUNCTIONS (alphabetically) // |
There was a problem hiding this comment.
alphabetically 👏 👏 👏 😻
hashishaw
left a comment
There was a problem hiding this comment.
So excited for the slick calendar widget 😻
| element.classList.add(classString); | ||
| } | ||
|
|
||
| isCurrentYear() { |
There was a problem hiding this comment.
Any reason this and isObsoleteYear aren't getters? (eg. formatted like get isObsoleteYear() {...})
There was a problem hiding this comment.
@chelshaw likely a dumb question. What is the benefit of making these getters?
There was a problem hiding this comment.
Pretty sure it does a similar thing as computed did, where it will be updated each time and stay up to date. No such guarantees if it's not a getter, but if you're calling it explicitly each time it might not matter 🤷
| ]; | ||
| @tracked selectedNamespace = null; | ||
| // For startDate Modal | ||
| months = Array.from({ length: 12 }, (item, i) => { |
There was a problem hiding this comment.
We could use the const DATE_MAPPING here if it was in a util file - might make sense if there are other shared functions between files
* cherry pick my changes over * clean up * styling fix * clean up * address pr comments * rename * update comment
…corp#13622) * Fix pkiexternalca feature bugs in vault agent * Add changelog * Add regression tests Co-authored-by: Zlaticanin <60530402+Zlaticanin@users.noreply.github.com>
…corp#13623) (hashicorp#13625) * Fix pkiexternalca feature bugs in vault agent * Add changelog * Add regression tests Co-authored-by: Zlaticanin <60530402+Zlaticanin@users.noreply.github.com>
This is hidden under the Dashboard component, which is commented out.
This PR adds the calendar widget that helps users select an endDate, single Month, or the billing period. Outside of the widget, on the Dashboard component, this PR adds another modal that allows the user to pick the startMonth. This layout/set-up is very specific to the Client Counts data and billing periods for 1.10. Though not wired up in this PR, the billing startDate will init with the startDate under the license endpoint.
Once a start and end date is selected, a network request will be fired off (when the API is ready) to return the data.
Here is a video of the modal and calendar-widget. Note, no data is sent, though the structure is partially in place. You'll also notice that you cannot select an endDate from the calendar-widget that comes before the startDate.
Screen.Recording.2022-01-10.at.11.55.48.AM.mp4