Add School Filter to Subject Reports

When All Schools is selected for a report add a school filter to the
results so they can be refined.

Author: jrjohnson

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

@@ -36,5 +36,11 @@
   {{#if @showYearFilter}}
     <Reports::SubjectYearFilter @selectedYear={{@year}} @changeYear={{@changeYear}} />
   {{/if}}
+  {{#if @showSchoolFilter}}
+    <Reports::Subject::SchoolFilter
+      @selectedSchool={{@filterSchool}}
+      @changeSchool={{@changeFilterSchool}}
+    />
+  {{/if}}
   <Reports::SubjectDescription @description={{@description}} @resultsLength={{@resultsLength}} />
 </div>

packages/frontend/app/components/reports/subject-results.hbs

@@ -7,6 +7,8 @@
     @school={{@school}}
     @changeYear={{@changeYear}}
     @year={{@year}}
+    @filterSchool={{@filterSchool}}
+    @changeFilterSchool={{@changeFilterSchool}}
     @description={{@description}}
   />
 </div>

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

@@ -11,6 +11,8 @@
           @description={{p.value}}
           @year={{@year}}
           @changeYear={{@changeYear}}
+          @filterSchool={{@filterSchool}}
+          @changeFilterSchool={{@changeFilterSchool}}
         />
       {{/if}}
     {{/let}}

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

@@ -1,6 +1,9 @@
 <Reports::SubjectHeader
   @report={{@report}}
   @school={{@school}}
+  @changeFilterSchool={{@changeFilterSchool}}
+  @filterSchool={{@filterSchool}}
+  @showSchoolFilter={{this.showSchoolFilter}}
   @subject={{@subject}}
   @prepositionalObject={{@prepositionalObject}}
   @prepositionalObjectTableRowId={{@prepositionalObjectTableRowId}}
@@ -10,14 +13,17 @@
   @description={{@description}}
   @fetchDownloadData={{this.fetchDownloadData}}
   @readyToDownload={{this.allCompetenciesData.isResolved}}
-  @resultsLength={{this.allCompetencies.length}}
+  @resultsLength={{this.resultsLengthDisplay}}
 />
 <div data-test-reports-subject-competency>
   {{#if this.allCompetenciesData.isResolved}}
     <ul class="report-results{{if this.reportResultsExceedMax ' limited'}}" data-test-results>
-      {{#each this.limitedCompetencies as |title|}}
+      {{#each this.limitedCompetencies as |o|}}
         <li>
-          {{title}}
+          {{#if (and this.showSchoolFilter (not @filterSchool))}}
+            {{o.school.title}}:
+          {{/if}}
+          {{o.title}}
         </li>
       {{else}}
         <li>{{t "general.none"}}</li>

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

@@ -30,12 +30,44 @@ export default class ReportsSubjectCompetencyComponent extends Component {
 
   get sortedCompetencies() {
     return this.allCompetencies.sort((a, b) => {
-      return a.localeCompare(b, this.intl.primaryLocale);
+      if (a.school.id !== b.school.id) {
+        return a.school.title.localeCompare(b.school.title, this.intl.primaryLocale);
+      }
+      return a.title.localeCompare(b.title, this.intl.primaryLocale);
+    });
+  }
+
+  get filteredCompetencies() {
+    if (!this.args.filterSchool) {
+      return this.sortedCompetencies;
+    }
+
+    return this.sortedCompetencies.filter((competency) => {
+      return competency.school.id === this.args.filterSchool;
     });
   }
 
   get limitedCompetencies() {
-    return this.sortedCompetencies.slice(0, this.resultsLengthMax);
+    return this.filteredCompetencies.slice(0, this.resultsLengthMax);
+  }
+
+  get resultsLengthDisplay() {
+    const total = this.allCompetencies.length;
+    const filtered = this.filteredCompetencies.length;
+
+    if (total === filtered) {
+      return total;
+    }
+    return `${filtered}/${total}`;
+  }
+
+  get showSchoolFilter() {
+    if (this.args.school) {
+      return false;
+    }
+
+    const uniqueSchools = [...new Set(this.allCompetencies.map((o) => o.school.id))];
+    return uniqueSchools.length > 1;
   }
 
   async getReportResults(subject, prepositionalObject, prepositionalObjectTableRowId, school) {
@@ -51,8 +83,12 @@ export default class ReportsSubjectCompetencyComponent extends Component {
       const what = pluralize(camelize(prepositionalObject));
       filters.push(`${what}: [${prepositionalObjectTableRowId}]`);
     }
-    const result = await this.graphql.find('competencies', filters, 'id, title');
-    return result.data.competencies.map(({ title }) => title);
+    const result = await this.graphql.find(
+      'competencies',
+      filters,
+      'id, title, school { id, title }',
+    );
+    return result.data.competencies;
   }
 
   get reportResultsExceedMax() {
@@ -61,6 +97,20 @@ export default class ReportsSubjectCompetencyComponent extends Component {
 
   @action
   async fetchDownloadData() {
-    return [[this.intl.t('general.competencies')], ...this.sortedCompetencies.map((v) => [v])];
+    const headers = [];
+    if (!this.args.school) {
+      headers.push(this.intl.t('general.school'));
+    }
+    headers.push(this.intl.t('general.competency'));
+    const map = this.sortedCompetencies.map((o) => {
+      const rhett = [];
+      if (!this.args.school) {
+        rhett.push(o.school.title);
+      }
+      rhett.push(o.title);
+
+      return rhett;
+    });
+    return [headers, ...map];
   }
 }

packages/frontend/app/components/reports/subject/school-filter.hbs

@@ -0,0 +1,14 @@
+<div class="school-filter" data-test-report-subject-school-filter>
+  <label>{{t "general.school"}}
+    <select data-test-school-filter {{on "change" (pick "target.value" @changeSchool)}}>
+      <option selected={{is-empty @selectedSchool}} value="">
+        {{t "general.allSchools"}}
+      </option>
+      {{#each (sort-by "title:desc" this.allSchools) as |school|}}
+        <option value={{school.id}} selected={{eq school.id @selectedSchool}}>
+          {{school.title}}
+        </option>
+      {{/each}}
+    </select>
+  </label>
+</div>

packages/frontend/app/components/reports/subject/school-filter.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
+import { service } from '@ember/service';
+
+export default class ReportsSubjectSchoolFilterComponent extends Component {
+  @service store;
+
+  @cached
+  get allSchoolsData() {
+    return new TrackedAsyncData(this.store.findAll('school'));
+  }
+
+  get allSchools() {
+    return this.allSchoolsData.isResolved ? this.allSchoolsData.value : [];
+  }
+}

packages/frontend/app/controllers/reports/subject.js

@@ -5,8 +5,9 @@ import { tracked } from '@glimmer/tracking';
 export default class ReportsSubjectController extends Controller {
   @service store;
 
-  queryParams = ['report', 'reportYear'];
+  queryParams = ['report', 'reportYear', 'filterSchool'];
 
   @tracked report = null;
   @tracked reportYear = '';
+  @tracked filterSchool = null;
 }

packages/frontend/app/templates/reports/subject.hbs

@@ -3,4 +3,6 @@
   @report={{this.model}}
   @year={{this.reportYear}}
   @changeYear={{set this "reportYear"}}
+  @filterSchool={{this.filterSchool}}
+  @changeFilterSchool={{set this "filterSchool"}}
 />

packages/frontend/tests/integration/components/reports/subject/school-filter-test.js

@@ -0,0 +1,24 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | reports/subject/school-filter', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Reports::Subject::SchoolFilter />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`<Reports::Subject::SchoolFilter>
+  template block text
+</Reports::Subject::SchoolFilter>`);
+
+    assert.dom().hasText('template block text');
+  });
+});