Merge pull request #8326 from michaelchadwick/remove-calendar-render-…

…modifiers Removed render modifiers from Daily/Weekly calendar
ilios · Jan 28, 2025 · 5e3edef · 5e3edef
2 parents 6762090 + 6fc26c4
commit 5e3edef
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 34 deletions.
diff --git a/packages/ilios-common/addon/components/daily-calendar.hbs b/packages/ilios-common/addon/components/daily-calendar.hbs
@@ -1,4 +1,3 @@
-{{!-- template-lint-disable no-at-ember-render-modifiers --}}
 <section
   class="daily-calendar"
   aria-busy={{if @isLoadingEvents "true" "false"}}
@@ -21,11 +20,12 @@
   <div
     class="day"
     tabindex="0"
-    {{did-update (perform this.scrollView) this.earliestHour}}
+    id="daily-calendar-events"
+    {{this.scrollView this.earliestHour}}
   >
     <div class="hours">
       {{#each this.hours as |hour|}}
-        <span aria-hidden="true" class="hour hour-{{hour.hour}}" {{did-insert this.setHour hour.hour}}>
+        <span aria-hidden="true" class="hour hour-{{hour.hour}}">
           <span class="long">{{hour.longName}}</span>
           <span class="short">{{hour.shortName}}</span>
         </span>

diff --git a/packages/ilios-common/addon/components/daily-calendar.js b/packages/ilios-common/addon/components/daily-calendar.js
@@ -1,24 +1,21 @@
 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 { modifier } from 'ember-modifier';
 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;
+  scrollView = modifier((element, [earliestHour]) => {
+    // all of the hour elements are registered in the template as hour-0, hour-1, etc
+    let hourElement = element.getElementsByClassName(`hour-6`)[0];
 
     if (earliestHour < 24 && earliestHour > 2) {
-      hourElement = this[`hour${earliestHour}`];
+      hourElement = element.getElementsByClassName(`hour-${earliestHour}`)[0];
     }
     const { offsetTop } = hourElement;
-    calendarElement.scrollTo({
+    element.scrollTo({
       top: offsetTop,
       behavior: 'instant',
     });
@@ -54,9 +51,4 @@ export default class DailyCalendarComponent extends Component {
       };
     });
   }
-
-  @action
-  setHour(element, [hour]) {
-    set(this, `hour${hour}`, element);
-  }
 }
diff --git a/packages/ilios-common/addon/components/weekly-calendar.hbs b/packages/ilios-common/addon/components/weekly-calendar.hbs
@@ -22,11 +22,12 @@
   <div
     class="days"
     tabindex="0"
-    {{did-update (perform this.scrollView) this.earliestHour}}
+    id="weekly-calendar-days"
+    {{this.scrollView this.earliestHour}}
   >
     <div class="hours">
       {{#each this.hours as |hour|}}
-        <span aria-hidden="true" class="hour hour-{{hour.hour}}" {{did-insert this.setHour hour.hour}}>
+        <span aria-hidden="true" class="hour hour-{{hour.hour}}">
           <span class="long">{{hour.longName}}</span>
           <span class="short">{{hour.shortName}}</span>
         </span>

diff --git a/packages/ilios-common/addon/components/weekly-calendar.js b/packages/ilios-common/addon/components/weekly-calendar.js
@@ -1,25 +1,23 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { restartableTask, timeout } from 'ember-concurrency';
-import { action, set } from '@ember/object';
-import { DateTime } from 'luxon';
+import { action } from '@ember/object';
 import { sortBy } from 'ilios-common/utils/array-helpers';
+import { modifier } from 'ember-modifier';
+import { DateTime } from 'luxon';
 
 export default class WeeklyCalendarComponent extends Component {
   @service intl;
   @service localeDays;
 
-  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;
+  scrollView = modifier((element, [earliestHour]) => {
+    // all of the hour elements are registered in the template as hour-0, hour-1, etc
+    let hourElement = element.getElementsByClassName(`hour-6`)[0];
 
     if (earliestHour < 24 && earliestHour > 2) {
-      hourElement = this[`hour${earliestHour}`];
+      hourElement = element.getElementsByClassName(`hour-${earliestHour}`)[0];
     }
     const { offsetTop } = hourElement;
-    calendarElement.scrollTo({
+    element.scrollTo({
       top: offsetTop,
       behavior: 'instant',
     });
@@ -84,11 +82,6 @@ export default class WeeklyCalendarComponent extends Component {
     });
   }
 
-  @action
-  setHour(element, [hour]) {
-    set(this, `hour${hour}`, element);
-  }
-
   @action
   selectEvent(event) {
     if (event.isMulti) {