Curriculum Report

packages/frontend/app/components/reports/curriculum.hbs

@@ -0,0 +1,20 @@
+<div class="reports-curriculum" data-test-reports-curriculum ...attributes>
+  {{#if @showReportResults}}
+    <this.reportResultsComponent @courses={{this.selectedCourses}} @close={{@stop}} />
+  {{else}}
+    <Reports::Curriculum::Header
+      @countSelectedCourses={{@selectedCourseIds.length}}
+      @showReportResults={{@showReportResults}}
+      @selectedReportValue={{this.selectedReportValue}}
+      @changeSelectedReport={{this.changeSelectedReport}}
+      @runReport={{@run}}
+      @close={{@stop}}
+    />
+    <Reports::Curriculum::ChooseCourse
+      @selectedCourseIds={{@selectedCourseIds}}
+      @schools={{@schools}}
+      @add={{this.pickCourse}}
+      @remove={{this.removeCourse}}
+    />
+  {{/if}}
+</div>

packages/frontend/app/components/reports/curriculum.js

@@ -0,0 +1,68 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { cached, tracked } from '@glimmer/tracking';
+import { ensureSafeComponent } from '@embroider/util';
+import SessionObjectives from './curriculum/session-objectives';
+import LearnerGroups from './curriculum/learner-groups';
+
+export default class ReportsCurriculumComponent extends Component {
+  @service store;
+  @service graphql;
+  @service router;
+  @service intl;
+
+  @tracked searchResults = null;
+  @tracked reportResults = null;
+
+  get passedCourseIds() {
+    return this.args.selectedCourseIds?.map(Number) ?? [];
+  }
+
+  get selectedReportValue() {
+    return this.args.report ?? 'sessionObjectives';
+  }
+
+  @cached
+  get allCourses() {
+    return this.args.schools.reduce((all, school) => {
+      const courses = school.years.reduce((arr, year) => {
+        return [...arr, ...year.courses];
+      }, []);
+      return [...all, ...courses];
+    }, []);
+  }
+
+  get selectedCourses() {
+    return this.allCourses.filter((course) => this.passedCourseIds.includes(Number(course.id)));
+  }
+
+  get showCourseYears() {
+    const years = this.selectedCourses.map(({ year }) => year);
+    return years.some((year) => year !== years[0]);
+  }
+
+  get reportResultsComponent() {
+    switch (this.selectedReportValue) {
+      case 'sessionObjectives':
+        return ensureSafeComponent(SessionObjectives, this);
+      case 'learnerGroups':
+        return ensureSafeComponent(LearnerGroups, this);
+    }
+
+    return false;
+  }
+
+  pickCourse = (id) => {
+    this.args.setSelectedCourseIds([...this.passedCourseIds, Number(id)].sort());
+  };
+
+  removeCourse = (id) => {
+    this.args.stop();
+    this.args.setSelectedCourseIds(this.passedCourseIds.filter((i) => i !== Number(id)).sort());
+  };
+
+  changeSelectedReport = (value) => {
+    this.args.stop();
+    this.args.setReport(value);
+  };
+}

packages/frontend/app/components/reports/curriculum/choose-course.hbs

@@ -0,0 +1,66 @@
+<div class="reports-choose-course" data-test-reports-curriculum-choose-course>
+  <div class="schools" data-test-schools>
+    <FaIcon @icon="building-columns" />
+    {{#if (gt this.filteredSchools.length 1)}}
+      <select
+        aria-label={{t "general.filterBySchool"}}
+        {{on "change" (pick "target.value" (set this "selectedSchoolId"))}}
+      >
+        {{#each (sort-by "title" this.filteredSchools) as |school|}}
+          <option value={{school.id}} selected={{eq school.id this.bestSelectedSchoolId}}>
+            {{school.title}}
+          </option>
+        {{/each}}
+      </select>
+    {{else}}
+      {{this.selectedSchool.title}}
+    {{/if}}
+  </div>
+  {{#each this.selectedSchool.years as |y|}}
+    <ul class="year {{if (eq y.year this.expandedYear) 'expanded' 'collapsed'}}" data-test-year>
+      <li>
+        <button
+          type="button"
+          aria-expanded={{if (eq y.year this.expandedYear) "true" "false"}}
+          {{on "click" (fn this.toggleYear y.year)}}
+          data-test-expand
+        >
+          {{y.year}}
+          <FaIcon @icon={{if (eq y.year this.expandedYear) "caret-down" "caret-right"}} />
+        </button>
+        {{#if (eq y.year this.expandedYear)}}
+          <ul class="courses" data-test-courses>
+            <li>
+              <label class="select-all">
+                <input
+                  type="checkbox"
+                  checked={{this.hasAllExpandedYearCourses}}
+                  indeterminate={{this.hasSomeExpandedYearCourses}}
+                  {{on "click" this.toggleAllExpandedYearCourseSelection}}
+                  disabled={{eq y.courses.length 0}}
+                  data-test-toggle-all
+                />
+                {{t "general.selectAllOrNone"}}
+              </label>
+            </li>
+            {{#each (sort-by "title" y.courses) as |c|}}
+              <li data-test-course>
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={{includes c.id @selectedCourseIds}}
+                    {{on "click" (fn (if (includes c.id @selectedCourseIds) @remove @add) c.id)}}
+                  />
+                  {{c.title}}
+                  {{#if c.externalId}}
+                    ({{c.externalId}})
+                  {{/if}}
+                </label>
+              </li>
+            {{/each}}
+          </ul>
+        {{/if}}
+      </li>
+    </ul>
+  {{/each}}
+</div>

packages/frontend/app/components/reports/curriculum/choose-course.js

@@ -0,0 +1,89 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { cached, tracked } from '@glimmer/tracking';
+import { TrackedAsyncData } from 'ember-async-data';
+import currentAcademicYear from 'ilios-common/utils/current-academic-year';
+
+export default class ReportsCurriculumChooseCourse extends Component {
+  @service iliosConfig;
+  @service currentUser;
+
+  @tracked selectedSchoolId = null;
+  @tracked expandedYear;
+
+  constructor() {
+    super(...arguments);
+    this.expandedYear = currentAcademicYear();
+  }
+
+  userModel = new TrackedAsyncData(this.currentUser.getModel());
+
+  @cached
+  get user() {
+    return this.userModel.isResolved ? this.userModel.value : null;
+  }
+
+  get primarySchool() {
+    return this.args.schools.find(({ id }) => id === this.user?.belongsTo('school').id());
+  }
+
+  crossesBoundaryConfig = new TrackedAsyncData(
+    this.iliosConfig.itemFromConfig('academicYearCrossesCalendarYearBoundaries'),
+  );
+
+  @cached
+  get academicYearCrossesCalendarYearBoundaries() {
+    return this.crossesBoundaryConfig.isResolved ? this.crossesBoundaryConfig.value : false;
+  }
+
+  get bestSelectedSchoolId() {
+    if (this.selectedSchoolId) {
+      return this.selectedSchoolId;
+    }
+    return this.primarySchool?.id;
+  }
+
+  get selectedSchool() {
+    return this.args.schools.find(({ id }) => id === this.bestSelectedSchoolId);
+  }
+
+  get filteredSchools() {
+    return this.args.schools.filter(({ years }) => years.length);
+  }
+
+  get expandedYearCourseIds() {
+    const year = this.selectedSchool?.years.find(({ year }) => year === this.expandedYear);
+    return year?.courses.map(({ id }) => id) ?? [];
+  }
+
+  get hasSomeExpandedYearCourses() {
+    return (
+      this.args.selectedCourseIds &&
+      !this.hasAllExpandedYearCourses &&
+      this.expandedYearCourseIds.some((id) => this.args.selectedCourseIds.includes(id))
+    );
+  }
+
+  get hasAllExpandedYearCourses() {
+    return (
+      this.args.selectedCourseIds &&
+      this.expandedYearCourseIds.every((id) => this.args.selectedCourseIds.includes(id))
+    );
+  }
+
+  toggleYear = (year) => {
+    if (this.expandedYear === year) {
+      this.expandedYear = null;
+    } else {
+      this.expandedYear = year;
+    }
+  };
+
+  toggleAllExpandedYearCourseSelection = () => {
+    if (this.hasAllExpandedYearCourses) {
+      this.expandedYearCourseIds.forEach((id) => this.args.remove(id));
+    } else {
+      this.expandedYearCourseIds.forEach((id) => this.args.add(id));
+    }
+  };
+}

packages/frontend/app/components/reports/curriculum/header.hbs

@@ -0,0 +1,60 @@
+<div class="reports-curriculum-header" data-test-reports-curriculum-header>
+  <div class="run">
+    <p data-test-run-summary>
+      {{#if @countSelectedCourses}}
+        {{#if @showReportResults}}
+          {{t "general.run"}}
+          {{this.selectedReport.label}}
+        {{else}}
+          <label data-test-report-selector>
+            {{t "general.run"}}
+            <select {{on "change" this.changeSelectedReport}}>
+              {{#each this.reportList as |report|}}
+                <option
+                  value={{report.value}}
+                  selected={{eq report.value this.selectedReport.value}}
+                >
+                  {{report.label}}
+                </option>
+              {{/each}}
+            </select>
+          </label>
+        {{/if}}
+        {{this.selectedReport.summary}}
+      {{else}}
+        {{t "general.selectCoursesToRunReport"}}
+      {{/if}}
+    </p>
+  </div>
+  <div class="input-buttons">
+    {{#if @showReportResults}}
+      {{#if @loading}}
+        <button type="button" class="done text">
+          <FaIcon @icon="spinner" @spin={{true}} />
+        </button>
+      {{else}}
+        <button type="button" {{on "click" @download}} data-test-download>
+          {{#if @finished}}
+            <FaIcon @icon="check" />
+          {{else}}
+            <FaIcon @icon="download" />
+          {{/if}}
+          {{t "general.downloadResults"}}
+        </button>
+      {{/if}}
+      <button type="button" class="cancel text" {{on "click" @close}} data-test-close>
+        {{t "general.close"}}
+      </button>
+    {{else}}
+      <button
+        type="button"
+        class="done text"
+        {{on "click" @runReport}}
+        disabled={{not @countSelectedCourses}}
+        data-test-run
+      >
+        <FaIcon @icon="play" @title={{t "general.run"}} />
+      </button>
+    {{/if}}
+  </div>
+</div>

packages/frontend/app/components/reports/curriculum/header.js

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+export default class ReportsCurriculumHeader extends Component {
+  @service intl;
+
+  get reportList() {
+    return [
+      {
+        value: 'sessionObjectives',
+        label: this.intl.t('general.sessionObjectives'),
+        summary: this.intl.t('general.sessionObjectivesReportSummary', {
+          courseCount: this.args.countSelectedCourses,
+        }),
+      },
+      {
+        value: 'learnerGroups',
+        label: this.intl.t('general.learnerGroups'),
+        summary: this.intl.t('general.learnerGroupsReportSummary', {
+          courseCount: this.args.countSelectedCourses,
+        }),
+      },
+    ];
+  }
+
+  get selectedReport() {
+    return this.reportList.find((r) => r.value === this.args.selectedReportValue);
+  }
+
+  changeSelectedReport = ({ target }) => {
+    this.args.changeSelectedReport(target.value);
+  };
+}