packages/ilios-common/addon/components/daily-calendar.js
import Component from '@glimmer/component';
import { service } from '@ember/service';
import { restartableTask, timeout } from 'ember-concurrency';
import { action, set } from '@ember/object';
import { sortBy } from 'ilios-common/utils/array-helpers';
import { DateTime } from 'luxon';
export default class DailyCalendarComponent extends Component {
@service intl;
scrollView = restartableTask(async (calendarElement, [earliestHour]) => {
//waiting ensures that setHour has time to setup hour elements
await timeout(1);
// all of the hour elements are registered in the template as hour0, hour1, etc
let hourElement = this.hour6;
if (earliestHour < 24 && earliestHour > 2) {
hourElement = this[`hour${earliestHour}`];
}
const { offsetTop } = hourElement;
calendarElement.scrollTo({
top: offsetTop,
behavior: 'instant',
});
});
get earliestHour() {
if (!this.args.events) {
return null;
}
return this.sortedEvents.reduce((earliestHour, event) => {
const { hour } = DateTime.fromISO(event.startDate);
return hour < earliestHour ? hour : earliestHour;
}, 24);
}
get sortedEvents() {
if (!this.args.events) {
return [];
}
return sortBy(this.args.events, ['startDate', 'endDate', 'name']);
}
get hours() {
const today = DateTime.fromJSDate(this.args.date).startOf('day');
return [...Array(24).keys()].map((i) => {
const time = today.set({ hour: i });
return {
hour: time.hour,
longName: this.intl.formatDate(time, { hour: 'numeric', minute: 'numeric' }),
shortName: this.intl.formatDate(time, { hour: 'numeric' }),
};
});
}
@action
setHour(element, [hour]) {
set(this, `hour${hour}`, element);
}
}