From 5438e6f2a6a934ad31c5e0e4037cf246527f4499 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Wed, 22 Jan 2025 16:53:17 -0800
Subject: [PATCH 1/6] removed render modifiers from weekly calendar

---
 .../addon/components/weekly-calendar.hbs      |  3 ++-
 .../addon/components/weekly-calendar.js       | 23 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/ilios-common/addon/components/weekly-calendar.hbs b/packages/ilios-common/addon/components/weekly-calendar.hbs
index bf422cd2ba..a04e77c254 100644
--- 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"
+    id="weekly-calendar-days"
     {{did-update (perform 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
index 17930144fc..1ffe2a342a 100644
--- a/packages/ilios-common/addon/components/weekly-calendar.js
+++ b/packages/ilios-common/addon/components/weekly-calendar.js
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { restartableTask, timeout } from 'ember-concurrency';
-import { action, set } from '@ember/object';
+import { task, timeout } from 'ember-concurrency';
+import { action } from '@ember/object';
 import { DateTime } from 'luxon';
 import { sortBy } from 'ilios-common/utils/array-helpers';
 
@@ -9,14 +9,16 @@ 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
+  scrollView = task(async () => {
+    const calendarElement = document.getElementById(`weekly-calendar-days`);
+    // waiting ensures that hour elements are loaded
     await timeout(1);
-    // all of the hour elements are registered in the template as hour0, hour1, etc
-    let hourElement = this.hour6;
+    // all of the hour elements are registered in the template as hour-0, hour-1, etc
+    let hourElement = document.getElementsByClassName(`hour-6`)[0];
+    let earliestHour = this.earliestHour;
 
     if (earliestHour < 24 && earliestHour > 2) {
-      hourElement = this[`hour${earliestHour}`];
+      hourElement = document.getElementsByClassName(`hour-${earliestHour}`)[0];
     }
     const { offsetTop } = hourElement;
     calendarElement.scrollTo({
@@ -64,6 +66,8 @@ export default class WeeklyCalendarComponent extends Component {
   }
 
   get days() {
+    this.scrollView.perform();
+
     return this.week.map((day) => {
       const dt = DateTime.fromJSDate(day.date);
       day.events = this.sortedEvents.filter((e) =>
@@ -84,11 +88,6 @@ export default class WeeklyCalendarComponent extends Component {
     });
   }
 
-  @action
-  setHour(element, [hour]) {
-    set(this, `hour${hour}`, element);
-  }
-
   @action
   selectEvent(event) {
     if (event.isMulti) {

From 92135827fdaf94c55f61886ef0ce123b874d1c99 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Thu, 23 Jan 2025 08:27:17 -0800
Subject: [PATCH 2/6] actually remove the did-update, heh

---
 packages/ilios-common/addon/components/weekly-calendar.hbs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ilios-common/addon/components/weekly-calendar.hbs b/packages/ilios-common/addon/components/weekly-calendar.hbs
index a04e77c254..66005a608b 100644
--- a/packages/ilios-common/addon/components/weekly-calendar.hbs
+++ b/packages/ilios-common/addon/components/weekly-calendar.hbs
@@ -23,7 +23,6 @@
     class="days"
     tabindex="0"
     id="weekly-calendar-days"
-    {{did-update (perform this.scrollView) this.earliestHour}}
   >
     <div class="hours">
       {{#each this.hours as |hour|}}

From 47b4dcbaa659881dc33020e48878174394a9e987 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Thu, 23 Jan 2025 15:32:28 -0800
Subject: [PATCH 3/6] created 'on-update' custom modifier and updated
 daily/weekly calendar

---
 .../addon/components/daily-calendar.hbs       |  6 ++---
 .../addon/components/daily-calendar.js        | 22 +++++++------------
 .../addon/components/weekly-calendar.hbs      |  1 +
 .../addon/components/weekly-calendar.js       | 14 ++++--------
 .../ilios-common/addon/modifiers/on-update.js | 10 +++++++++
 .../ilios-common/app/modifiers/on-update.js   |  1 +
 6 files changed, 27 insertions(+), 27 deletions(-)
 create mode 100644 packages/ilios-common/addon/modifiers/on-update.js
 create mode 100644 packages/ilios-common/app/modifiers/on-update.js

diff --git a/packages/ilios-common/addon/components/daily-calendar.hbs b/packages/ilios-common/addon/components/daily-calendar.hbs
index dbdbffe56b..708d8fb2bf 100644
--- 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"
+    {{on-update 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
index 80f076414a..6f15db9b86 100644
--- a/packages/ilios-common/addon/components/daily-calendar.js
+++ b/packages/ilios-common/addon/components/daily-calendar.js
@@ -1,28 +1,27 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { restartableTask, timeout } from 'ember-concurrency';
-import { action, set } from '@ember/object';
+import { action } 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;
+  @action
+  async scrollView(calendarElement, earliestHour) {
+    // all of the hour elements are registered in the template as hour-0, hour-1, etc
+    let hourElement = document.getElementsByClassName(`hour-6`)[0];
 
     if (earliestHour < 24 && earliestHour > 2) {
-      hourElement = this[`hour${earliestHour}`];
+      hourElement = document.getElementsByClassName(`hour-${earliestHour}`)[0];
     }
+
     const { offsetTop } = hourElement;
     calendarElement.scrollTo({
       top: offsetTop,
       behavior: 'instant',
     });
-  });
+  }
 
   get earliestHour() {
     if (!this.args.events) {
@@ -54,9 +53,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
index 66005a608b..803a7c2228 100644
--- a/packages/ilios-common/addon/components/weekly-calendar.hbs
+++ b/packages/ilios-common/addon/components/weekly-calendar.hbs
@@ -23,6 +23,7 @@
     class="days"
     tabindex="0"
     id="weekly-calendar-days"
+    {{on-update this.scrollView this.earliestHour}}
   >
     <div class="hours">
       {{#each this.hours as |hour|}}
diff --git a/packages/ilios-common/addon/components/weekly-calendar.js b/packages/ilios-common/addon/components/weekly-calendar.js
index 1ffe2a342a..c68cecbfae 100644
--- a/packages/ilios-common/addon/components/weekly-calendar.js
+++ b/packages/ilios-common/addon/components/weekly-calendar.js
@@ -1,21 +1,17 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { task, timeout } from 'ember-concurrency';
 import { action } from '@ember/object';
-import { DateTime } from 'luxon';
 import { sortBy } from 'ilios-common/utils/array-helpers';
+import { DateTime } from 'luxon';
 
 export default class WeeklyCalendarComponent extends Component {
   @service intl;
   @service localeDays;
 
-  scrollView = task(async () => {
-    const calendarElement = document.getElementById(`weekly-calendar-days`);
-    // waiting ensures that hour elements are loaded
-    await timeout(1);
+  @action
+  async scrollView(calendarElement, earliestHour) {
     // all of the hour elements are registered in the template as hour-0, hour-1, etc
     let hourElement = document.getElementsByClassName(`hour-6`)[0];
-    let earliestHour = this.earliestHour;
 
     if (earliestHour < 24 && earliestHour > 2) {
       hourElement = document.getElementsByClassName(`hour-${earliestHour}`)[0];
@@ -25,7 +21,7 @@ export default class WeeklyCalendarComponent extends Component {
       top: offsetTop,
       behavior: 'instant',
     });
-  });
+  }
 
   get firstDayOfWeek() {
     return this.localeDays.firstDayOfDateWeek(this.args.date);
@@ -66,8 +62,6 @@ export default class WeeklyCalendarComponent extends Component {
   }
 
   get days() {
-    this.scrollView.perform();
-
     return this.week.map((day) => {
       const dt = DateTime.fromJSDate(day.date);
       day.events = this.sortedEvents.filter((e) =>
diff --git a/packages/ilios-common/addon/modifiers/on-update.js b/packages/ilios-common/addon/modifiers/on-update.js
new file mode 100644
index 0000000000..9f01321bdb
--- /dev/null
+++ b/packages/ilios-common/addon/modifiers/on-update.js
@@ -0,0 +1,10 @@
+// /app/modifiers/on.js
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [handler, argument]) => {
+  element.addEventListener('change', handler(element, argument));
+
+  return () => {
+    element.removeEventListener('change', handler);
+  };
+});
diff --git a/packages/ilios-common/app/modifiers/on-update.js b/packages/ilios-common/app/modifiers/on-update.js
new file mode 100644
index 0000000000..0297dc7ba1
--- /dev/null
+++ b/packages/ilios-common/app/modifiers/on-update.js
@@ -0,0 +1 @@
+export { default } from 'ilios-common/modifiers/on-update';

From 7eb549a49713d430544fc84f73cf2296a4db2f02 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Thu, 23 Jan 2025 16:54:22 -0800
Subject: [PATCH 4/6] added basic test for new modifier

---
 .../integration/modifiers/on-update-test.js   | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 packages/test-app/tests/integration/modifiers/on-update-test.js

diff --git a/packages/test-app/tests/integration/modifiers/on-update-test.js b/packages/test-app/tests/integration/modifiers/on-update-test.js
new file mode 100644
index 0000000000..653096aefe
--- /dev/null
+++ b/packages/test-app/tests/integration/modifiers/on-update-test.js
@@ -0,0 +1,23 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'test-app/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Modifier | on-update', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it works', async function (assert) {
+    assert.expect(6);
+
+    this.someMethod = (element, value) => {
+      assert.strictEqual(element.tagName, 'DIV', 'correct element tagName');
+      assert.strictEqual(element.id, 'cool-element', 'correct element ID');
+      assert.strictEqual(value, this.boundValue);
+    };
+
+    this.set('boundValue', 'val1');
+    await render(hbs`<div id='cool-element' {{on-update this.someMethod this.boundValue}}></div>`);
+
+    this.set('boundValue', 'val2');
+  });
+});

From 8ac5c5906c56e43f79009fce87cde6c11b7b19d0 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 24 Jan 2025 16:43:28 -0800
Subject: [PATCH 5/6] removed on-update custom modifier, and changed scrollView
 to be an in-component modifier instead

---
 .../addon/components/daily-calendar.hbs       |  2 +-
 .../addon/components/daily-calendar.js        | 10 ++++----
 .../addon/components/weekly-calendar.hbs      |  2 +-
 .../addon/components/weekly-calendar.js       |  8 +++----
 .../ilios-common/addon/modifiers/on-update.js | 10 --------
 .../ilios-common/app/modifiers/on-update.js   |  1 -
 .../integration/modifiers/on-update-test.js   | 23 -------------------
 7 files changed, 10 insertions(+), 46 deletions(-)
 delete mode 100644 packages/ilios-common/addon/modifiers/on-update.js
 delete mode 100644 packages/ilios-common/app/modifiers/on-update.js
 delete mode 100644 packages/test-app/tests/integration/modifiers/on-update-test.js

diff --git a/packages/ilios-common/addon/components/daily-calendar.hbs b/packages/ilios-common/addon/components/daily-calendar.hbs
index 708d8fb2bf..e0cc729984 100644
--- a/packages/ilios-common/addon/components/daily-calendar.hbs
+++ b/packages/ilios-common/addon/components/daily-calendar.hbs
@@ -21,7 +21,7 @@
     class="day"
     tabindex="0"
     id="daily-calendar-events"
-    {{on-update this.scrollView this.earliestHour}}
+    {{this.scrollView this.earliestHour}}
   >
     <div class="hours">
       {{#each this.hours as |hour|}}
diff --git a/packages/ilios-common/addon/components/daily-calendar.js b/packages/ilios-common/addon/components/daily-calendar.js
index 6f15db9b86..039edfc740 100644
--- a/packages/ilios-common/addon/components/daily-calendar.js
+++ b/packages/ilios-common/addon/components/daily-calendar.js
@@ -1,27 +1,25 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-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 DailyCalendarComponent extends Component {
   @service intl;
 
-  @action
-  async scrollView(calendarElement, earliestHour) {
+  scrollView = modifier((element, [earliestHour]) => {
     // all of the hour elements are registered in the template as hour-0, hour-1, etc
     let hourElement = document.getElementsByClassName(`hour-6`)[0];
 
     if (earliestHour < 24 && earliestHour > 2) {
       hourElement = document.getElementsByClassName(`hour-${earliestHour}`)[0];
     }
-
     const { offsetTop } = hourElement;
-    calendarElement.scrollTo({
+    element.scrollTo({
       top: offsetTop,
       behavior: 'instant',
     });
-  }
+  });
 
   get earliestHour() {
     if (!this.args.events) {
diff --git a/packages/ilios-common/addon/components/weekly-calendar.hbs b/packages/ilios-common/addon/components/weekly-calendar.hbs
index 803a7c2228..01ae566acd 100644
--- a/packages/ilios-common/addon/components/weekly-calendar.hbs
+++ b/packages/ilios-common/addon/components/weekly-calendar.hbs
@@ -23,7 +23,7 @@
     class="days"
     tabindex="0"
     id="weekly-calendar-days"
-    {{on-update this.scrollView this.earliestHour}}
+    {{this.scrollView this.earliestHour}}
   >
     <div class="hours">
       {{#each this.hours as |hour|}}
diff --git a/packages/ilios-common/addon/components/weekly-calendar.js b/packages/ilios-common/addon/components/weekly-calendar.js
index c68cecbfae..666a23ec39 100644
--- a/packages/ilios-common/addon/components/weekly-calendar.js
+++ b/packages/ilios-common/addon/components/weekly-calendar.js
@@ -2,14 +2,14 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 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;
 
-  @action
-  async scrollView(calendarElement, earliestHour) {
+  scrollView = modifier((element, [earliestHour]) => {
     // all of the hour elements are registered in the template as hour-0, hour-1, etc
     let hourElement = document.getElementsByClassName(`hour-6`)[0];
 
@@ -17,11 +17,11 @@ export default class WeeklyCalendarComponent extends Component {
       hourElement = document.getElementsByClassName(`hour-${earliestHour}`)[0];
     }
     const { offsetTop } = hourElement;
-    calendarElement.scrollTo({
+    element.scrollTo({
       top: offsetTop,
       behavior: 'instant',
     });
-  }
+  });
 
   get firstDayOfWeek() {
     return this.localeDays.firstDayOfDateWeek(this.args.date);
diff --git a/packages/ilios-common/addon/modifiers/on-update.js b/packages/ilios-common/addon/modifiers/on-update.js
deleted file mode 100644
index 9f01321bdb..0000000000
--- a/packages/ilios-common/addon/modifiers/on-update.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// /app/modifiers/on.js
-import { modifier } from 'ember-modifier';
-
-export default modifier((element, [handler, argument]) => {
-  element.addEventListener('change', handler(element, argument));
-
-  return () => {
-    element.removeEventListener('change', handler);
-  };
-});
diff --git a/packages/ilios-common/app/modifiers/on-update.js b/packages/ilios-common/app/modifiers/on-update.js
deleted file mode 100644
index 0297dc7ba1..0000000000
--- a/packages/ilios-common/app/modifiers/on-update.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'ilios-common/modifiers/on-update';
diff --git a/packages/test-app/tests/integration/modifiers/on-update-test.js b/packages/test-app/tests/integration/modifiers/on-update-test.js
deleted file mode 100644
index 653096aefe..0000000000
--- a/packages/test-app/tests/integration/modifiers/on-update-test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'test-app/tests/helpers';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Modifier | on-update', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it works', async function (assert) {
-    assert.expect(6);
-
-    this.someMethod = (element, value) => {
-      assert.strictEqual(element.tagName, 'DIV', 'correct element tagName');
-      assert.strictEqual(element.id, 'cool-element', 'correct element ID');
-      assert.strictEqual(value, this.boundValue);
-    };
-
-    this.set('boundValue', 'val1');
-    await render(hbs`<div id='cool-element' {{on-update this.someMethod this.boundValue}}></div>`);
-
-    this.set('boundValue', 'val2');
-  });
-});

From 6fc26c4e054c10634f98a624efdf983173580ca0 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Mon, 27 Jan 2025 15:58:02 -0800
Subject: [PATCH 6/6] change scrollView root from document to element

---
 packages/ilios-common/addon/components/daily-calendar.js  | 4 ++--
 packages/ilios-common/addon/components/weekly-calendar.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ilios-common/addon/components/daily-calendar.js b/packages/ilios-common/addon/components/daily-calendar.js
index 039edfc740..f47da4cac3 100644
--- a/packages/ilios-common/addon/components/daily-calendar.js
+++ b/packages/ilios-common/addon/components/daily-calendar.js
@@ -9,10 +9,10 @@ export default class DailyCalendarComponent extends Component {
 
   scrollView = modifier((element, [earliestHour]) => {
     // all of the hour elements are registered in the template as hour-0, hour-1, etc
-    let hourElement = document.getElementsByClassName(`hour-6`)[0];
+    let hourElement = element.getElementsByClassName(`hour-6`)[0];
 
     if (earliestHour < 24 && earliestHour > 2) {
-      hourElement = document.getElementsByClassName(`hour-${earliestHour}`)[0];
+      hourElement = element.getElementsByClassName(`hour-${earliestHour}`)[0];
     }
     const { offsetTop } = hourElement;
     element.scrollTo({
diff --git a/packages/ilios-common/addon/components/weekly-calendar.js b/packages/ilios-common/addon/components/weekly-calendar.js
index 666a23ec39..74627ae972 100644
--- a/packages/ilios-common/addon/components/weekly-calendar.js
+++ b/packages/ilios-common/addon/components/weekly-calendar.js
@@ -11,10 +11,10 @@ export default class WeeklyCalendarComponent extends Component {
 
   scrollView = modifier((element, [earliestHour]) => {
     // all of the hour elements are registered in the template as hour-0, hour-1, etc
-    let hourElement = document.getElementsByClassName(`hour-6`)[0];
+    let hourElement = element.getElementsByClassName(`hour-6`)[0];
 
     if (earliestHour < 24 && earliestHour > 2) {
-      hourElement = document.getElementsByClassName(`hour-${earliestHour}`)[0];
+      hourElement = element.getElementsByClassName(`hour-${earliestHour}`)[0];
     }
     const { offsetTop } = hourElement;
     element.scrollTo({