More Improvements to Calendar Courses Filter

By marking the filter parent as relative positioned we can lookup the distance of each year from the top of that filter and scroll the correct one into view without opening anything else. I discovered while testing this that if the current academic year doesn't have any course we were opening the oldest year instead of the latest year with courses. That seems wrong to me so I modified that behavior as well.
ilios · Sep 20, 2024 · 114e466 · 114e466
1 parent 7b7aebb
commit 114e466
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 35 deletions.
diff --git a/...on-test-support/ilios-common/page-objects/components/dashboard/courses-calendar-filter.js b/...on-test-support/ilios-common/page-objects/components/dashboard/courses-calendar-filter.js
@@ -1,10 +1,11 @@
-import { collection, clickable, create, property, text } from 'ember-cli-page-object';
+import { collection, clickable, create, hasClass, property, text } from 'ember-cli-page-object';
 
 const definition = {
   scope: '[data-test-courses-calendar-filter]',
   years: collection('[data-test-year]', {
     title: text('[data-test-year-title]'),
     toggle: clickable('[data-test-year-title] button'),
+    isExpanded: hasClass('expanded'),
     courses: collection('[data-test-course]', {
       title: text(),
       toggle: clickable('[data-test-target]'),

diff --git a/packages/ilios-common/addon/components/dashboard/courses-calendar-filter.js b/packages/ilios-common/addon/components/dashboard/courses-calendar-filter.js
@@ -5,7 +5,6 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { DateTime } from 'luxon';
 import { findBy, sortBy } from 'ilios-common/utils/array-helpers';
-import scrollIntoView from 'scroll-into-view';
 
 export default class DashboardCoursesCalendarFilterComponent extends Component {
   @service dataLoader;
@@ -67,20 +66,21 @@ export default class DashboardCoursesCalendarFilterComponent extends Component {
     return sortBy(courseYears, 'year').reverse();
   }
 
+  get defaultExpandedYear() {
+    if (this.courseYears.length) {
+      const coursesThisYear = findBy(this.courseYears, 'year', this.academicYear);
+      return coursesThisYear ? this.academicYear : this.courseYears[0].year;
+    }
+
+    return false;
+  }
+
   get expandedYears() {
     if (this._expandedYears !== undefined) {
       return this._expandedYears;
     }
-    if (this.courseYears.length) {
-      const coursesThisYear = findBy(this.courseYears, 'year', this.academicYear);
-      if (coursesThisYear) {
-        return [this.academicYear];
-      } else {
-        return [this.courseYears[this.courseYears.length - 1].year];
-      }
-    }
 
-    return [];
+    return this.defaultExpandedYear ? [this.defaultExpandedYear] : [];
   }
 
   load = restartableTask(async () => {
@@ -95,9 +95,11 @@ export default class DashboardCoursesCalendarFilterComponent extends Component {
 
   @action
   scrollToLastYear(element, [year]) {
-    if (year === this.academicYear - 1) {
-      scrollIntoView(element.parentElement.parentElement, {
-        align: { top: 0 },
+    if (year === this.defaultExpandedYear) {
+      const { offsetTop } = element;
+      element.parentElement.scrollTo({
+        top: offsetTop,
+        behavior: 'instant',
       });
     }
   }

diff --git a/...es/ilios-common/app/styles/ilios-common/components/dashboard/courses-calendar-filter.scss b/...es/ilios-common/app/styles/ilios-common/components/dashboard/courses-calendar-filter.scss
@@ -1,6 +1,9 @@
 @use "../../mixins" as m;
 
 .dashboard-courses-calendar-filter {
+  .filters {
+    position: relative;
+  }
   .year {
     button {
       @include m.ilios-button-reset;

diff --git a/packages/test-app/tests/integration/components/dashboard/courses-calendar-filter-test.js b/packages/test-app/tests/integration/components/dashboard/courses-calendar-filter-test.js
@@ -5,6 +5,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { setupMirage } from 'test-app/tests/test-support/mirage';
 import { component } from 'ilios-common/page-objects/components/dashboard/courses-calendar-filter';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
+import { DateTime } from 'luxon';
 
 module('Integration | Component | dashboard/courses-calendar-filter', function (hooks) {
   setupRenderingTest(hooks);
@@ -33,18 +34,23 @@ module('Integration | Component | dashboard/courses-calendar-filter', function (
       @add={{(noop)}}
       @remove={{(noop)}}
     />
-`);
+    `);
 
     assert.strictEqual(component.years.length, 3);
     assert.strictEqual(parseInt(component.years[0].title, 10), thisYear + 1);
     assert.strictEqual(parseInt(component.years[1].title, 10), thisYear);
     assert.strictEqual(parseInt(component.years[2].title, 10), thisYear - 1);
 
-    assert.strictEqual(component.years[0].courses.length, 0);
+    assert.ok(component.years[0].isExpanded);
+    assert.notOk(component.years[1].isExpanded);
+    assert.notOk(component.years[2].isExpanded);
+
+    assert.strictEqual(component.years[0].courses.length, 2);
     assert.strictEqual(component.years[1].courses.length, 0);
-    assert.strictEqual(component.years[2].courses.length, 2);
-    assert.strictEqual(component.years[2].courses[0].title, 'course 4');
-    assert.strictEqual(component.years[2].courses[1].title, 'course 5');
+    assert.strictEqual(component.years[2].courses.length, 0);
+
+    assert.strictEqual(component.years[0].courses[0].title, 'course 2 (1)');
+    assert.strictEqual(component.years[0].courses[1].title, 'course 3 (1)');
 
     await a11yAudit(this.element);
     assert.ok(true, 'no a11y errors found!');
@@ -80,7 +86,7 @@ module('Integration | Component | dashboard/courses-calendar-filter', function (
       @add={{(noop)}}
       @remove={{(noop)}}
     />
-`);
+    `);
 
     assert.strictEqual(component.years[0].title, `${thisYear + 1} - ${thisYear + 2}`);
     assert.strictEqual(component.years[1].title, `${thisYear} - ${thisYear + 1}`);
@@ -91,15 +97,15 @@ module('Integration | Component | dashboard/courses-calendar-filter', function (
     const school = this.server.create('school');
     this.server.createList('course', 2, {
       school,
-      year: 2014,
+      year: 2016,
     });
     this.server.createList('course', 2, {
       school,
       year: 2015,
     });
     this.server.createList('course', 2, {
       school,
-      year: 2016,
+      year: 2014,
     });
     const schoolModel = await this.owner.lookup('service:store').findRecord('school', school.id);
     this.set('school', schoolModel);
@@ -108,34 +114,34 @@ module('Integration | Component | dashboard/courses-calendar-filter', function (
       @add={{(noop)}}
       @remove={{(noop)}}
     />
-`);
+    `);
 
     assert.strictEqual(component.years.length, 3);
 
-    assert.strictEqual(component.years[0].courses.length, 0);
+    assert.strictEqual(component.years[0].courses.length, 2);
+    assert.strictEqual(component.years[0].courses[0].title, 'course 0');
+    assert.strictEqual(component.years[0].courses[1].title, 'course 1');
     assert.strictEqual(component.years[1].courses.length, 0);
-    assert.strictEqual(component.years[2].courses.length, 2);
-    assert.strictEqual(component.years[2].courses[0].title, 'course 0');
-    assert.strictEqual(component.years[2].courses[1].title, 'course 1');
+    assert.strictEqual(component.years[2].courses.length, 0);
 
     await component.years[0].toggle();
     await component.years[1].toggle();
     await component.years[2].toggle();
 
     assert.strictEqual(component.years.length, 3);
 
-    assert.strictEqual(component.years[0].courses.length, 2);
-    assert.strictEqual(component.years[0].courses[0].title, 'course 4');
-    assert.strictEqual(component.years[0].courses[1].title, 'course 5');
+    assert.strictEqual(component.years[0].courses.length, 0);
 
     assert.strictEqual(component.years[1].courses.length, 2);
     assert.strictEqual(component.years[1].courses[0].title, 'course 2');
     assert.strictEqual(component.years[1].courses[1].title, 'course 3');
 
-    assert.strictEqual(component.years[2].courses.length, 0);
+    assert.strictEqual(component.years[2].courses.length, 2);
+    assert.strictEqual(component.years[2].courses[0].title, 'course 4');
+    assert.strictEqual(component.years[2].courses[1].title, 'course 5');
   });
 
-  test('opens last year if current year has no courses', async function (assert) {
+  test('opens latest year if current year has no courses', async function (assert) {
     const school = this.server.create('school');
     this.server.createList('course', 2, {
       school,
@@ -152,16 +158,63 @@ module('Integration | Component | dashboard/courses-calendar-filter', function (
       @add={{(noop)}}
       @remove={{(noop)}}
     />
-`);
+    `);
 
     assert.strictEqual(component.years.length, 2);
     assert.strictEqual(component.years[0].title, `2015`);
     assert.strictEqual(component.years[1].title, `2014`);
 
+    assert.strictEqual(component.years[0].courses.length, 2);
+    assert.strictEqual(component.years[0].courses[0].title, 'course 0');
+    assert.strictEqual(component.years[0].courses[1].title, 'course 1');
+    assert.strictEqual(component.years[1].courses.length, 0);
+  });
+
+  function getCurrentAcademicYear() {
+    const today = DateTime.now();
+    const thisYear = Number(today.year);
+    const thisMonth = Number(today.month);
+    if (thisMonth < 4) {
+      return thisYear - 1;
+    }
+
+    return thisYear;
+  }
+
+  test('opens current year if it has courses', async function (assert) {
+    const currentYear = getCurrentAcademicYear();
+    const school = this.server.create('school');
+    this.server.createList('course', 2, {
+      school,
+      year: currentYear,
+    });
+    this.server.createList('course', 2, {
+      school,
+      year: currentYear + 1,
+    });
+    this.server.createList('course', 2, {
+      school,
+      year: currentYear - 1,
+    });
+    const schoolModel = await this.owner.lookup('service:store').findRecord('school', school.id);
+    this.set('school', schoolModel);
+    await render(hbs`<Dashboard::CoursesCalendarFilter
+      @school={{this.school}}
+      @add={{(noop)}}
+      @remove={{(noop)}}
+    />
+    `);
+
+    assert.strictEqual(component.years.length, 3);
+    assert.strictEqual(component.years[0].title, `${currentYear + 1}`);
+    assert.strictEqual(component.years[1].title, `${currentYear}`);
+    assert.strictEqual(component.years[2].title, `${currentYear - 1}`);
+
     assert.strictEqual(component.years[0].courses.length, 0);
     assert.strictEqual(component.years[1].courses.length, 2);
-    assert.strictEqual(component.years[1].courses[0].title, 'course 2');
-    assert.strictEqual(component.years[1].courses[1].title, 'course 3');
+    assert.strictEqual(component.years[1].courses[0].title, 'course 0');
+    assert.strictEqual(component.years[1].courses[1].title, 'course 1');
+    assert.strictEqual(component.years[2].courses.length, 0);
   });
 
   test('selected courses are checked', async function (assert) {