implement local storage to track user context filter selections on th…

…e dashboard calendar.

packages/frontend/config/environment.js

@@ -47,6 +47,10 @@ module.exports = function (environment) {
         visualNoiseLevel: 1,
       },
     },
+    'ember-local-storage': {
+      namespace: true,
+      keyDelimiter: '/',
+    },
     fontawesome: {
       enableExperimentalBuildTimeTransform: false,
       defaultPrefix: 'fas',

packages/frontend/tests/acceptance/dashboard/calendar-test.js

@@ -4,6 +4,7 @@ import { module, test } from 'qunit';
 import { setupAuthentication, freezeDateAt, unfreezeDate } from 'ilios-common';
 import { setupApplicationTest } from 'frontend/tests/helpers';
 import page from 'ilios-common/page-objects/dashboard-calendar';
+import resetStorages from 'ember-local-storage/test-support/reset-storage';
 import percySnapshot from '@percy/ember';
 
 module('Acceptance | Dashboard Calendar', function (hooks) {
@@ -79,6 +80,10 @@ module('Acceptance | Dashboard Calendar', function (hooks) {
 
   hooks.afterEach(() => {
     unfreezeDate();
+    if (window.localStorage) {
+      window.localStorage.clear();
+    }
+    resetStorages();
   });
 
   test('load month calendar', async function (assert) {
@@ -573,6 +578,85 @@ module('Acceptance | Dashboard Calendar', function (hooks) {
     assert.strictEqual(page.calendar.calendar.weekly.events.length, 3);
   });
 
+  test('user context filter selections persist across page reloads', async function (assert) {
+    assert.expect(27);
+    this.user = await setupAuthentication({ school: this.school }, true);
+    const day = DateTime.fromObject({
+      month: 4,
+      day: 4,
+      year: 2004,
+      hour: 4,
+      minute: 0,
+      second: 7,
+    });
+    freezeDateAt(day.toJSDate());
+    this.server.create('userevent', {
+      user: this.user.id,
+      startDate: day.toJSDate(),
+      endDate: day.plus({ hour: 1 }).toJSDate(),
+      offering: 1,
+      userContexts: ['learner'],
+    });
+    this.server.create('userevent', {
+      user: this.user.id,
+      startDate: day.plus({ hour: 1 }).toJSDate(),
+      endDate: day.plus({ hour: 2 }).toJSDate(),
+      offering: 2,
+      userContexts: ['instructor'],
+    });
+    this.server.create('userevent', {
+      user: this.user.id,
+      startDate: day.plus({ hour: 2 }).toJSDate(),
+      endDate: day.plus({ hour: 3 }).toJSDate(),
+      offering: 3,
+      userContexts: ['course director'],
+    });
+    await page.visit({ show: 'calendar' });
+    assert.ok(page.calendar.controls.userContextFilter.learning.isActive);
+    assert.ok(page.calendar.controls.userContextFilter.instructing.isActive);
+    assert.ok(page.calendar.controls.userContextFilter.admin.isActive);
+
+    await page.calendar.controls.userContextFilter.learning.toggle();
+    assert.ok(page.calendar.controls.userContextFilter.learning.isActive);
+    assert.notOk(page.calendar.controls.userContextFilter.instructing.isActive);
+    assert.notOk(page.calendar.controls.userContextFilter.admin.isActive);
+
+    await page.visit({ show: 'calendar' });
+    assert.ok(page.calendar.controls.userContextFilter.learning.isActive);
+    assert.notOk(page.calendar.controls.userContextFilter.instructing.isActive);
+    assert.notOk(page.calendar.controls.userContextFilter.admin.isActive);
+
+    await page.calendar.controls.userContextFilter.instructing.toggle();
+    assert.notOk(page.calendar.controls.userContextFilter.learning.isActive);
+    assert.ok(page.calendar.controls.userContextFilter.instructing.isActive);
+    assert.notOk(page.calendar.controls.userContextFilter.admin.isActive);
+
+    await page.visit({ show: 'calendar' });
+    assert.notOk(page.calendar.controls.userContextFilter.learning.isActive);
+    assert.ok(page.calendar.controls.userContextFilter.instructing.isActive);
+    assert.notOk(page.calendar.controls.userContextFilter.admin.isActive);
+
+    await page.calendar.controls.userContextFilter.admin.toggle();
+    assert.notOk(page.calendar.controls.userContextFilter.learning.isActive);
+    assert.notOk(page.calendar.controls.userContextFilter.instructing.isActive);
+    assert.ok(page.calendar.controls.userContextFilter.admin.isActive);
+
+    await page.visit({ show: 'calendar' });
+    assert.notOk(page.calendar.controls.userContextFilter.learning.isActive);
+    assert.notOk(page.calendar.controls.userContextFilter.instructing.isActive);
+    assert.ok(page.calendar.controls.userContextFilter.admin.isActive);
+
+    await page.calendar.controls.userContextFilter.admin.toggle();
+    assert.ok(page.calendar.controls.userContextFilter.learning.isActive);
+    assert.ok(page.calendar.controls.userContextFilter.instructing.isActive);
+    assert.ok(page.calendar.controls.userContextFilter.admin.isActive);
+
+    await page.visit({ show: 'calendar' });
+    assert.ok(page.calendar.controls.userContextFilter.learning.isActive);
+    assert.ok(page.calendar.controls.userContextFilter.instructing.isActive);
+    assert.ok(page.calendar.controls.userContextFilter.admin.isActive);
+  });
+
   test('test session type filter', async function (assert) {
     const today = DateTime.fromObject({ hour: 8, minute: 8, second: 8 });
     this.server.create('userevent', {

packages/ilios-common/addon/components/dashboard/calendar.hbs

@@ -33,7 +33,7 @@
       {{#if @mySchedule}}
         {{#if this.showUserContextFilters}}
           <div class="calendar-options-control toggle-user-context-filters" data-test-usercontexts>
-            <Dashboard::UserContextFilter @setUserContext={{set this.userContext}} @userContext={{this.userContext}}/>
+            <Dashboard::UserContextFilter @setUserContext={{this.setUserContext}} @userContext={{this.userContext}}/>
           </div>
         {{/if}}
       {{else}}

packages/ilios-common/addon/components/dashboard/calendar.js

@@ -1,11 +1,12 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { cached, tracked } from '@glimmer/tracking';
+import { cached } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { DateTime } from 'luxon';
 import { map } from 'rsvp';
 import { mapBy, sortBy } from 'ilios-common/utils/array-helpers';
 import { TrackedAsyncData } from 'ember-async-data';
+import { storageFor } from 'ember-local-storage';
 
 export default class DashboardCalendarComponent extends Component {
   @service userEvents;
@@ -17,7 +18,17 @@ export default class DashboardCalendarComponent extends Component {
   @service dataLoader;
   @service localeDays;
 
-  @tracked userContext;
+  @storageFor('dashboard') dashboardStorage;
+
+  get userContext() {
+    console.log(this.dashboardStorage.get('userContext'));
+    return this.dashboardStorage?.get('userContext');
+  }
+
+  @action
+  setUserContext(userContext) {
+    this.dashboardStorage?.set('userContext', userContext);
+  }
 
   @cached
   get cohortProxiesData() {

packages/ilios-common/addon/storages/dashboard.js

@@ -0,0 +1,3 @@
+import StorageObject from 'ember-local-storage/local/object';
+
+export default class Storage extends StorageObject {}

packages/ilios-common/app/storages/dashboard.js

@@ -0,0 +1 @@
+export { default } from 'ilios-common/storages/dashboard';

packages/ilios-common/package.json

@@ -51,6 +51,7 @@
     "ember-in-viewport": "^4.0.0",
     "ember-inflector": "^4.0.2",
     "ember-intl": "^7.0.3",
+    "ember-local-storage": "^2.0.7",
     "ember-math-helpers": "^4.0.0",
     "ember-modifier": "^4.0.0",
     "ember-simple-auth": "^6.0.0",
@@ -81,6 +82,7 @@
     "@ember-data/tracking": "5.3.8",
     "@popperjs/core": ">= 2.1.0",
     "class-validator": ">= 0.14.0",
+    "ember-local-storage": "^2.0.7",
     "ember-source": ">= 4.0.0",
     "flatpickr": ">= 4.0.0",
     "froala-editor": ">= 4.2.1",
@@ -120,7 +122,6 @@
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-load-initializers": "^2.1.2",
-    "ember-local-storage": "^2.0.7",
     "ember-page-title": "^8.2.3",
     "ember-resolver": "^11.0.1",
     "ember-source": "~5.8.0",

packages/lti-dashboard/config/environment.js

@@ -19,6 +19,10 @@ module.exports = function (environment) {
       authorizationPrefix: 'Token ',
       refreshLeeway: 300,
     },
+    'ember-local-storage': {
+      namespace: true,
+      keyDelimiter: '/',
+    },
     i18n: {
       defaultLocale: 'en',
     },