unlock download button only after subject reports data has loaded.

also show the spinner in the download button while data is loading.
ilios · Aug 16, 2024 · f336408 · f336408
1 parent 35f110a
commit f336408
Show file tree

Hide file tree

Showing 15 changed files with 62 additions and 6 deletions.
diff --git a/packages/frontend/app/components/reports/subject-results.hbs b/packages/frontend/app/components/reports/subject-results.hbs
@@ -28,6 +28,7 @@
     </div>
   {{/if}}
   <this.subjectComponent
+    @setDataIsLoaded={{@setDataIsLoaded}}
     @subject={{@subject}}
     @prepositionalObject={{@prepositionalObject}}
     @prepositionalObjectTableRowId={{@prepositionalObjectTableRowId}}

diff --git a/packages/frontend/app/components/reports/subject.hbs b/packages/frontend/app/components/reports/subject.hbs
@@ -37,13 +37,13 @@
       <div class="actions">
         <button
           type="button"
-          disabled={{this.downloadReport.isRunning}}
+          disabled={{or (not this.dataIsLoaded) this.downloadReport.isRunning}}
           {{on "click" (perform this.downloadReport)}}
           data-test-download
         >
           {{#if this.finishedBuildingReport}}
             <FaIcon @icon="check" />
-          {{else if this.downloadReport.isRunning}}
+          {{else if (or (not this.dataIsLoaded) this.downloadReport.isRunning)}}
             <LoadingSpinner />
           {{else}}
             <FaIcon @icon="download" />
@@ -55,6 +55,7 @@
     {{#let (load this.reportDescriptionPromise) as |p|}}
       {{#if p.isResolved}}
         <Reports::SubjectResults
+          @setDataIsLoaded={{this.setDataIsLoaded}}
           @subject={{@report.subject}}
           @prepositionalObject={{@report.prepositionalObject}}
           @prepositionalObjectTableRowId={{@report.prepositionalObjectTableRowId}}

diff --git a/packages/frontend/app/components/reports/subject.js b/packages/frontend/app/components/reports/subject.js
@@ -16,6 +16,7 @@ export default class ReportsSubjectComponent extends Component {
   @service store;
   @tracked finishedBuildingReport = false;
   @tracked myReportEditorOn = false;
+  @tracked dataIsLoaded = false;
   @tracked @Length(1, 240) title = '';
 
   @cached
@@ -86,6 +87,11 @@ export default class ReportsSubjectComponent extends Component {
     await this.args.report.save();
   });
 
+  @action
+  setDataIsLoaded() {
+    this.dataIsLoaded = true;
+  }
+
   @action
   revertTitleChanges() {
     this.title = this.reportTitle;

diff --git a/packages/frontend/app/components/reports/subject/competency.js b/packages/frontend/app/components/reports/subject/competency.js
@@ -41,6 +41,9 @@ export default class ReportsSubjectCompetencyComponent extends Component {
       filters.push(`${what}: [${prepositionalObjectTableRowId}]`);
     }
     const result = await this.graphql.find('competencies', filters, 'id, title');
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.competencies.map(({ title }) => title);
   }
 }
diff --git a/packages/frontend/app/components/reports/subject/course.js b/packages/frontend/app/components/reports/subject/course.js
@@ -79,7 +79,9 @@ export default class ReportsSubjectCourseComponent extends Component {
       throw new Error(`Report for ${subject} sent to ReportsSubjectCourseComponent`);
     }
     const result = await this.graphql.find('courses', filters, 'id, title, year, externalId');
-
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.courses;
   }
 }
diff --git a/packages/frontend/app/components/reports/subject/instructor-group.js b/packages/frontend/app/components/reports/subject/instructor-group.js
@@ -41,6 +41,9 @@ export default class ReportsSubjectInstructorGroupComponent extends Component {
       filters.push(`${what}: [${prepositionalObjectTableRowId}]`);
     }
     const result = await this.graphql.find('instructorGroups', filters, 'title');
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.instructorGroups.map(({ title }) => title);
   }
 }
diff --git a/packages/frontend/app/components/reports/subject/instructor.js b/packages/frontend/app/components/reports/subject/instructor.js
@@ -78,6 +78,9 @@ export default class ReportsSubjectInstructorComponent extends Component {
     );
     const attributes = ['firstName', 'middleName', 'lastName', 'displayName'];
     const result = await this.graphql.find('users', filters, attributes.join(','));
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.users;
   }
 }
diff --git a/packages/frontend/app/components/reports/subject/learning-material.js b/packages/frontend/app/components/reports/subject/learning-material.js
@@ -58,6 +58,9 @@ export default class ReportsSubjectLearningMaterialComponent extends Component {
       school,
     );
     const result = await this.graphql.find('learningMaterials', filters, 'id, title');
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.learningMaterials.map(({ title }) => title);
   }
 }
diff --git a/packages/frontend/app/components/reports/subject/mesh-term.js b/packages/frontend/app/components/reports/subject/mesh-term.js
@@ -41,6 +41,9 @@ export default class ReportsSubjectMeshTermComponent extends Component {
       filters.push(`${what}: [${prepositionalObjectTableRowId}]`);
     }
     const result = await this.graphql.find('meshDescriptors', filters, 'id, name');
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.meshDescriptors.map(({ name }) => name);
   }
 }
diff --git a/packages/frontend/app/components/reports/subject/program-year.js b/packages/frontend/app/components/reports/subject/program-year.js
@@ -53,10 +53,12 @@ export default class ReportsSubjectProgramYearComponent extends Component {
       'id, startYear, program { id, title, duration, school { title } }',
     );
 
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.programYears.map((obj) => {
       const classOfYear = Number(obj.startYear) + Number(obj.program.duration);
       obj.classOfYear = String(classOfYear);
-
       return obj;
     });
   }

diff --git a/packages/frontend/app/components/reports/subject/program.js b/packages/frontend/app/components/reports/subject/program.js
@@ -48,7 +48,9 @@ export default class ReportsSubjectProgramComponent extends Component {
       filters.push(`${what}: [${prepositionalObjectTableRowId}]`);
     }
     const result = await this.graphql.find('programs', filters, 'id, title, school { title }');
-
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.programs;
   }
 }
diff --git a/packages/frontend/app/components/reports/subject/session-type.js b/packages/frontend/app/components/reports/subject/session-type.js
@@ -55,6 +55,9 @@ export default class ReportsSubjectSessionTypeComponent extends Component {
       school,
     );
     const result = await this.graphql.find('sessionTypes', filters, 'title');
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.sessionTypes.map(({ title }) => title);
   }
 }
diff --git a/packages/frontend/app/components/reports/subject/session.js b/packages/frontend/app/components/reports/subject/session.js
@@ -84,7 +84,9 @@ export default class ReportsSubjectSessionComponent extends Component {
       filters,
       'id, title, course { id, year, title }',
     );
-
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.sessions.map(({ id, title, course }) => {
       return { id, title, year: course.year, courseId: course.id, courseTitle: course.title };
     });

diff --git a/packages/frontend/app/components/reports/subject/term.js b/packages/frontend/app/components/reports/subject/term.js
@@ -39,6 +39,9 @@ export default class ReportsSubjectTermComponent extends Component {
       filters.push(`${what}: [${prepositionalObjectTableRowId}]`);
     }
     const result = await this.graphql.find('terms', filters, 'id, title, vocabulary { id, title }');
+    if (this.args.setDataIsLoaded) {
+      this.args.setDataIsLoaded();
+    }
     return result.data.terms;
   }
 }
diff --git a/packages/frontend/tests/integration/components/reports/subject-results-test.js b/packages/frontend/tests/integration/components/reports/subject-results-test.js
@@ -44,4 +44,23 @@ module('Integration | Component | reports/subject-results', function (hooks) {
     await a11yAudit(this.element);
     assert.ok(true, 'no a11y errors found!');
   });
+
+  test('data-is-loaded callback fires.', async function (assert) {
+    assert.expect(3);
+    const setDataIsLoaded = () => {
+      assert.ok(true, 'callback fired');
+    };
+    this.set('setDataIsLoaded', setDataIsLoaded);
+    await render(hbs`<Reports::SubjectResults
+      @subject={{this.report.subject}}
+      @prepositionalObject={{this.report.prepositionalObject}}
+      @prepositionalObjectTableRowId={{this.report.prepositionalObjectTableRowId}}
+      @year={{null}}
+      @changeYear={{(noop)}}
+      @setDataIsLoaded={{this.setDataIsLoaded}}
+    />`);
+
+    assert.strictEqual(component.results.length, 1);
+    assert.strictEqual(component.results[0].text, '2013 course 0');
+  });
 });