Merge pull request #7754 from jrjohnson/i5371-replace-reports-use

Replace async data loading in report subject components

packages/frontend/app/components/reports/subject/competency.hbs

@@ -1,5 +1,5 @@
 <div data-test-reports-subject-competency>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedData as |title|}}
         <li>

packages/frontend/app/components/reports/subject/competency.js

@@ -1,28 +1,28 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 
 export default class ReportsSubjectCompetencyComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedData() {
-    return this.data?.sort((a, b) => {
+    return this.data.value.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }

packages/frontend/app/components/reports/subject/course.hbs

@@ -1,5 +1,5 @@
 <div data-test-reports-subject-course>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedCourses as |course|}}
         <li>

packages/frontend/app/components/reports/subject/course.js

@@ -1,8 +1,6 @@
 import Component from '@glimmer/component';
 import { filterBy } from 'ilios-common/utils/array-helpers';
 import { sortBy } from 'ilios-common/utils/array-helpers';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
 import { TrackedAsyncData } from 'ember-async-data';
 import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
@@ -18,13 +16,17 @@ export default class ReportsSubjectCourseComponent extends Component {
     this.iliosConfig.itemFromConfig('academicYearCrossesCalendarYearBoundaries'),
   );
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
+  }
 
   @cached
   get academicYearCrossesCalendarYearBoundaries() {
@@ -41,20 +43,16 @@ export default class ReportsSubjectCourseComponent extends Component {
 
   get filteredCourses() {
     if (this.args.year) {
-      return filterBy(this.data, 'year', Number(this.args.year));
+      return filterBy(this.data.value, 'year', Number(this.args.year));
     }
 
-    return this.data;
+    return this.data.value;
   }
 
   get sortedCourses() {
     return sortBy(this.filteredCourses, ['year', 'title']);
   }
 
-  get finishedLoading() {
-    return Array.isArray(this.data);
-  }
-
   async getGraphQLFilters(prepositionalObject, prepositionalObjectTableRowId, school) {
     let rhett = [];
     if (school) {

packages/frontend/app/components/reports/subject/instructor-group.hbs

@@ -1,5 +1,5 @@
 <div data-test-reports-subject-instructor-group>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedData as |title|}}
         <li>

packages/frontend/app/components/reports/subject/instructor-group.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -9,20 +9,20 @@ export default class ReportsSubjectInstructorGroupComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedData() {
-    return this.data?.sort((a, b) => {
+    return this.data.value.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }

packages/frontend/app/components/reports/subject/instructor.hbs

@@ -1,5 +1,5 @@
 <div data-test-reports-subject-instructor>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedResults as |name|}}
         <li>

packages/frontend/app/components/reports/subject/instructor.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize, capitalize } from '@ember/string';
@@ -9,26 +9,26 @@ export default class ReportsSubjectInstructorComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedResults() {
-    return this.mappedResults?.sort((a, b) => {
+    return this.mappedResults.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }
 
   get mappedResults() {
-    return this.data?.map(({ firstName, middleName, lastName, displayName }) => {
+    return this.data.value.map(({ firstName, middleName, lastName, displayName }) => {
       if (displayName) {
         return displayName;
       }

packages/frontend/app/components/reports/subject/learning-material.hbs

@@ -1,5 +1,5 @@
 <div data-test-reports-subject-learning-material>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedData as |title|}}
         <li>

packages/frontend/app/components/reports/subject/learning-material.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -9,20 +9,20 @@ export default class ReportsSubjectLearningMaterialComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedData() {
-    return this.data?.sort((a, b) => {
+    return this.data.value.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }

packages/frontend/app/components/reports/subject/mesh-term.hbs

@@ -1,5 +1,5 @@
 <div data-test-reports-subject-mesh-term>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedData as |name|}}
         <li>

packages/frontend/app/components/reports/subject/mesh-term.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -9,20 +9,20 @@ export default class ReportsSubjectMeshTermComponent extends Component {
   @service graphql;
   @service intl;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
   }
 
   get sortedData() {
-    return this.data?.sort((a, b) => {
+    return this.data.value.sort((a, b) => {
       return a.localeCompare(b, this.intl.primaryLocale);
     });
   }

packages/frontend/app/components/reports/subject/program-year.hbs

@@ -1,5 +1,5 @@
 <div data-test-reports-subject-program-year>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedProgramYears as |obj|}}
         <li>

packages/frontend/app/components/reports/subject/program-year.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { sortBy } from 'ilios-common/utils/array-helpers';
-import { use } from 'ember-could-get-used-to-this';
-import AsyncProcess from 'ilios-common/classes/async-process';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { pluralize } from 'ember-inflector';
 import { camelize } from '@ember/string';
@@ -10,13 +10,17 @@ export default class ReportsSubjectProgramYearComponent extends Component {
   @service graphql;
   @service currentUser;
 
-  @use data = new AsyncProcess(() => [
-    this.getReportResults.bind(this),
-    this.args.subject,
-    this.args.prepositionalObject,
-    this.args.prepositionalObjectTableRowId,
-    this.args.school,
-  ]);
+  @cached
+  get data() {
+    return new TrackedAsyncData(
+      this.getReportResults(
+        this.args.subject,
+        this.args.prepositionalObject,
+        this.args.prepositionalObjectTableRowId,
+        this.args.school,
+      ),
+    );
+  }
 
   get canView() {
     return this.currentUser.performsNonLearnerFunction;
@@ -27,11 +31,7 @@ export default class ReportsSubjectProgramYearComponent extends Component {
   }
 
   get sortedProgramYears() {
-    return sortBy(this.data, ['program.school.title', 'program.title', 'classOfYear']);
-  }
-
-  get finishedLoading() {
-    return Array.isArray(this.data);
+    return sortBy(this.data.value, ['program.school.title', 'program.title', 'classOfYear']);
   }
 
   async getReportResults(subject, prepositionalObject, prepositionalObjectTableRowId, school) {

packages/frontend/app/components/reports/subject/program.hbs

@@ -1,5 +1,5 @@
 <div data-test-reports-subject-program>
-  {{#if this.finishedLoading}}
+  {{#if this.data.isResolved}}
     <ul class="report-results" data-test-results>
       {{#each this.sortedPrograms as |program|}}
         <li>