adds downloadable data sheets for course visualizations

packages/frontend/app/components/reports/subject-header.js

@@ -4,7 +4,7 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import PapaParse from 'papaparse';
 import { dropTask, timeout, waitForProperty } from 'ember-concurrency';
-import createDownloadFile from 'frontend/utils/create-download-file';
+import createDownloadFile from 'ilios-common/utils/create-download-file';
 import { validatable, Length } from 'ilios-common/decorators/validation';
 import { TrackedAsyncData } from 'ember-async-data';
 

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-instructor-session-type-graph.js

@@ -14,6 +14,12 @@ const definition = {
   },
   dataTable: {
     scope: '[data-test-data-table]',
+    actions: {
+      scope: '[data-test-data-table-actions]',
+      download: {
+        scope: '[data-test-download-data]',
+      },
+    },
     header: {
       scope: 'thead',
       sessionType: {

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-instructor-term-graph.js

@@ -15,6 +15,12 @@ const definition = {
   },
   dataTable: {
     scope: '[data-test-data-table]',
+    actions: {
+      scope: '[data-test-data-table-actions]',
+      download: {
+        scope: '[data-test-download-data]',
+      },
+    },
     header: {
       scope: 'thead',
       vocabularyTerm: {

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-instructors-graph.js

@@ -15,6 +15,12 @@ const definition = {
   },
   dataTable: {
     scope: '[data-test-data-table]',
+    actions: {
+      scope: '[data-test-data-table-actions]',
+      download: {
+        scope: '[data-test-download-data]',
+      },
+    },
     header: {
       scope: 'thead',
       instructor: {

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-objectives-graph.js

@@ -19,6 +19,12 @@ const definition = {
   },
   dataTable: {
     scope: '[data-test-data-table]',
+    actions: {
+      scope: '[data-test-data-table-actions]',
+      download: {
+        scope: '[data-test-download-data]',
+      },
+    },
     header: {
       scope: 'thead',
       percentage: {

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-session-type-graph.js

@@ -15,6 +15,12 @@ const definition = {
   },
   dataTable: {
     scope: '[data-test-data-table]',
+    actions: {
+      scope: '[data-test-data-table-actions]',
+      download: {
+        scope: '[data-test-download-data]',
+      },
+    },
     header: {
       scope: 'thead',
       vocabularyTerm: {

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-session-types-graph.js

@@ -15,6 +15,12 @@ const definition = {
   },
   dataTable: {
     scope: '[data-test-data-table]',
+    actions: {
+      scope: '[data-test-data-table-actions]',
+      download: {
+        scope: '[data-test-download-data]',
+      },
+    },
     header: {
       scope: 'thead',
       sessionType: {

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-term-graph.js

@@ -15,6 +15,12 @@ const definition = {
   },
   dataTable: {
     scope: '[data-test-data-table]',
+    actions: {
+      scope: '[data-test-data-table-actions]',
+      download: {
+        scope: '[data-test-download-data]',
+      },
+    },
     header: {
       scope: 'thead',
       sessionType: {

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-vocabularies-graph.js

@@ -15,6 +15,12 @@ const definition = {
   },
   dataTable: {
     scope: '[data-test-data-table]',
+    actions: {
+      scope: '[data-test-data-table-actions]',
+      download: {
+        scope: '[data-test-download-data]',
+      },
+    },
     header: {
       scope: 'thead',
       vocabulary: {

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-vocabulary-graph.js

@@ -15,6 +15,12 @@ const definition = {
   },
   dataTable: {
     scope: '[data-test-data-table]',
+    actions: {
+      scope: '[data-test-data-table-actions]',
+      download: {
+        scope: '[data-test-download-data]',
+      },
+    },
     header: {
       scope: 'thead',
       term: {

packages/ilios-common/addon/components/course/visualize-instructor-session-type-graph.hbs

@@ -26,6 +26,15 @@
     {{/if}}
     {{#if (and (not @isIcon) this.hasData @showDataTable)}}
         <div class="data-table" data-test-data-table>
+          <div class="table-actions" data-test-data-table-actions>
+            <button
+              type="button"
+              {{on "click" (perform this.downloadData)}}
+              data-test-download-data
+            >
+              <FaIcon @icon="download" /> {{t "general.download"}}
+            </button>
+          </div>
           <table>
             <thead>
             <tr>
@@ -78,4 +87,4 @@
   {{else}}
     <LoadingSpinner />
   {{/if}}
-</div>
+</div>

packages/ilios-common/addon/components/course/visualize-instructor-session-type-graph.js

@@ -1,12 +1,14 @@
 import Component from '@glimmer/component';
 import { filter, map } from 'rsvp';
 import { htmlSafe } from '@ember/template';
-import { restartableTask, timeout } from 'ember-concurrency';
+import { dropTask, restartableTask, timeout } from 'ember-concurrency';
 import { service } from '@ember/service';
 import { cached, tracked } from '@glimmer/tracking';
 import { TrackedAsyncData } from 'ember-async-data';
-import { findById, mapBy, sortBy, uniqueValues } from 'ilios-common/utils/array-helpers';
 import { action } from '@ember/object';
+import PapaParse from 'papaparse';
+import createDownloadFile from 'ilios-common/utils/create-download-file';
+import { findById, mapBy, sortBy, uniqueValues } from 'ilios-common/utils/array-helpers';
 
 export default class CourseVisualizeInstructorSessionTypeGraph extends Component {
   @service router;
@@ -135,4 +137,21 @@ export default class CourseVisualizeInstructorSessionTypeGraph extends Component
     );
     this.tooltipContent = htmlSafe(uniqueValues(mapBy(meta.sessions, 'title')).sort().join(', '));
   });
+
+  downloadData = dropTask(async () => {
+    const data = await this.getData(this.args.course, this.args.user);
+    const output = data.map((obj) => {
+      const rhett = {};
+      rhett[`${this.intl.t('general.sessionType')}`] = obj.meta.sessionType.title;
+      rhett[this.intl.t('general.sessions')] = mapBy(obj.meta.sessions, 'title').sort().join(', ');
+      rhett[this.intl.t('general.minutes')] = obj.data;
+      return rhett;
+    });
+    const csv = PapaParse.unparse(output);
+    createDownloadFile(
+      `ilios-course-${this.args.course.id}-instructor-${this.args.user.id}-session-types.csv`,
+      csv,
+      'text/csv',
+    );
+  });
 }

packages/ilios-common/addon/components/course/visualize-instructor-term-graph.hbs

@@ -26,6 +26,15 @@
     {{/if}}
     {{#if (and (not @isIcon) this.hasData @showDataTable)}}
       <div class="data-table" data-test-data-table>
+        <div class="table-actions" data-test-data-table-actions>
+          <button
+            type="button"
+            {{on "click" (perform this.downloadData)}}
+            data-test-download-data
+          >
+            <FaIcon @icon="download" /> {{t "general.download"}}
+          </button>
+        </div>
         <table>
           <thead>
           <tr>
@@ -78,4 +87,4 @@
   {{else}}
     <LoadingSpinner />
   {{/if}}
-</div>
+</div>

packages/ilios-common/addon/components/course/visualize-instructor-term-graph.js

@@ -2,12 +2,14 @@ import Component from '@glimmer/component';
 import { filter, map } from 'rsvp';
 import { isEmpty } from '@ember/utils';
 import { htmlSafe } from '@ember/template';
-import { restartableTask, timeout } from 'ember-concurrency';
+import { dropTask, restartableTask, timeout } from 'ember-concurrency';
 import { service } from '@ember/service';
 import { cached, tracked } from '@glimmer/tracking';
 import { TrackedAsyncData } from 'ember-async-data';
-import { findById, mapBy, sortBy } from 'ilios-common/utils/array-helpers';
 import { action } from '@ember/object';
+import PapaParse from 'papaparse';
+import createDownloadFile from 'ilios-common/utils/create-download-file';
+import { findById, mapBy, sortBy } from 'ilios-common/utils/array-helpers';
 
 export default class CourseVisualizeInstructorTermGraph extends Component {
   @service router;
@@ -156,4 +158,21 @@ export default class CourseVisualizeInstructorTermGraph extends Component {
     );
     this.tooltipContent = htmlSafe(mapBy(meta.sessions, 'title').sort().join(', '));
   });
+
+  downloadData = dropTask(async () => {
+    const data = await this.getData(this.args.course, this.args.user);
+    const output = data.map((obj) => {
+      const rhett = {};
+      rhett[`${this.intl.t('general.term')}`] = obj.meta.term.title;
+      rhett[this.intl.t('general.sessions')] = mapBy(obj.meta.sessions, 'title').sort().join(', ');
+      rhett[this.intl.t('general.minutes')] = obj.data;
+      return rhett;
+    });
+    const csv = PapaParse.unparse(output);
+    createDownloadFile(
+      `ilios-course-${this.args.course.id}-instructor-${this.args.user.id}-vocabulary-terms.csv`,
+      csv,
+      'text/csv',
+    );
+  });
 }

packages/ilios-common/addon/components/course/visualize-instructors-graph.hbs

@@ -27,6 +27,15 @@
     {{/if}}
     {{#if (and (not @isIcon) this.hasData @showDataTable)}}
         <div class="data-table" data-test-data-table>
+          <div class="table-actions" data-test-data-table-actions>
+            <button
+              type="button"
+              {{on "click" (perform this.downloadData)}}
+              data-test-download-data
+            >
+              <FaIcon @icon="download" /> {{t "general.download"}}
+            </button>
+          </div>
           <table>
             <thead>
             <tr>
@@ -83,4 +92,4 @@
   {{else}}
     <LoadingSpinner />
   {{/if}}
-</div>
+</div>

packages/ilios-common/addon/components/course/visualize-instructors-graph.js

@@ -1,13 +1,15 @@
 import Component from '@glimmer/component';
 import { isEmpty } from '@ember/utils';
 import { htmlSafe } from '@ember/template';
-import { restartableTask, timeout } from 'ember-concurrency';
+import { dropTask, restartableTask, timeout } from 'ember-concurrency';
 import { map } from 'rsvp';
 import { service } from '@ember/service';
 import { cached, tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { cleanQuery } from 'ilios-common/utils/query-utils';
 import { TrackedAsyncData } from 'ember-async-data';
+import PapaParse from 'papaparse';
+import createDownloadFile from 'ilios-common/utils/create-download-file';
 import { findById, mapBy, sortBy, uniqueValues } from 'ilios-common/utils/array-helpers';
 
 export default class CourseVisualizeInstructorsGraph extends Component {
@@ -155,4 +157,17 @@ export default class CourseVisualizeInstructorsGraph extends Component {
 
     this.router.transitionTo('course-visualize-instructor', this.args.course.id, obj.meta.user.id);
   }
+
+  downloadData = dropTask(async () => {
+    const data = await this.getData(this.args.course);
+    const output = data.map((obj) => {
+      const rhett = {};
+      rhett[`${this.intl.t('general.instructor')}`] = obj.meta.user.fullName;
+      rhett[this.intl.t('general.sessions')] = mapBy(obj.meta.sessions, 'title').sort().join(', ');
+      rhett[this.intl.t('general.minutes')] = obj.data;
+      return rhett;
+    });
+    const csv = PapaParse.unparse(output);
+    createDownloadFile(`ilios-course-${this.args.course.id}-instructors.csv`, csv, 'text/csv');
+  });
 }

packages/ilios-common/addon/components/course/visualize-objectives-graph.hbs

@@ -53,6 +53,15 @@
     {{/if}}
     {{#if (and (not @isIcon) this.hasData @showDataTable)}}
       <div class="data-table" data-test-data-table>
+        <div class="table-actions" data-test-data-table-actions>
+          <button
+            type="button"
+            {{on "click" (perform this.downloadData)}}
+            data-test-download-data
+          >
+            <FaIcon @icon="download" /> {{t "general.download"}}
+          </button>
+        </div>
         <table>
           <thead>
             <tr>
@@ -126,4 +135,4 @@
   {{else}}
     <LoadingSpinner />
   {{/if}}
-</div>
+</div>

packages/ilios-common/addon/components/course/visualize-objectives-graph.js

@@ -4,9 +4,11 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { htmlSafe } from '@ember/template';
 import { filter, map } from 'rsvp';
-import { restartableTask, timeout } from 'ember-concurrency';
+import { dropTask, restartableTask, timeout } from 'ember-concurrency';
 import { TrackedAsyncData } from 'ember-async-data';
+import PapaParse from 'papaparse';
 import { mapBy, sortBy, uniqueValues } from 'ilios-common/utils/array-helpers';
+import createDownloadFile from 'ilios-common/utils/create-download-file';
 
 export default class CourseVisualizeObjectivesGraph extends Component {
   @service router;
@@ -38,6 +40,7 @@ export default class CourseVisualizeObjectivesGraph extends Component {
   get hasData() {
     return this.data.length;
   }
+
   get sortedAscending() {
     return this.sortBy.search(/desc/) === -1;
   }
@@ -191,4 +194,23 @@ export default class CourseVisualizeObjectivesGraph extends Component {
     );
     this.tooltipContent = htmlSafe(mapBy(meta.sessionObjectives, 'sessionTitle').sort().join(', '));
   });
+
+  downloadData = dropTask(async () => {
+    const sessions = await this.args.course.sessions;
+    const data = await this.getDataObjects(sessions);
+    const output = data.map((obj) => {
+      const rhett = {};
+      rhett[this.intl.t('general.percentage')] = obj.percentage;
+      rhett[this.intl.t('general.courseObjective')] = obj.meta.courseObjective.title;
+      rhett[this.intl.t('general.competencies')] = obj.meta.competencies;
+      rhett[this.intl.t('general.sessions')] = mapBy(
+        sortBy(mapBy(obj.meta.sessionObjectives, 'session'), 'title'),
+        'title',
+      ).join(', ');
+      rhett[this.intl.t('general.minutes')] = obj.data;
+      return rhett;
+    });
+    const csv = PapaParse.unparse(output);
+    createDownloadFile(`ilios-course-${this.args.course.id}-objectives.csv`, csv, 'text/csv');
+  });
 }

packages/ilios-common/addon/components/course/visualize-session-type-graph.hbs

@@ -26,6 +26,15 @@
     {{/if}}
     {{#if (and (not @isIcon) this.hasData @showDataTable)}}
       <div class="data-table" data-test-data-table>
+        <div class="table-actions" data-test-data-table-actions>
+          <button
+            type="button"
+            {{on "click" (perform this.downloadData)}}
+            data-test-download-data
+          >
+            <FaIcon @icon="download" /> {{t "general.download"}}
+          </button>
+        </div>
         <table>
           <thead>
           <tr>
@@ -78,4 +87,4 @@
   {{else}}
     <LoadingSpinner />
   {{/if}}
-</div>
+</div>