Reports > Start tracking showNewReportForm as queryParam

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

@@ -17,18 +17,18 @@
     </h2>
     <div class="actions">
       <ExpandCollapseButton
-        @value={{this.showNewReportForm}}
-        @action={{this.toggleNewReportForm}}
+        @value={{@showNewReportForm}}
+        @action={{@toggleNewReportForm}}
         @expandButtonLabel={{t "general.newReport"}}
         @collapseButtonLabel={{t "general.close"}}
       />
     </div>
   </div>
   <section class="new">
-    {{#if this.showNewReportForm}}
+    {{#if @showNewReportForm}}
       <Reports::NewSubject
         @save={{perform this.saveNewSubjectReport}}
-        @close={{this.toggleNewReportForm}}
+        @close={{@toggleNewReportForm}}
         @run={{perform this.runSubjectReport}}
       />
     {{/if}}
@@ -47,13 +47,13 @@
       </div>
     {{/if}}
   </section>
-  {{#if this.runningSubjectReport}}
+  {{#if @runningSubjectReport}}
     <Reports::SubjectResults
-      @subject={{this.runningSubjectReport.subject}}
-      @prepositionalObject={{this.runningSubjectReport.prepositionalObject}}
-      @prepositionalObjectTableRowId={{this.runningSubjectReport.prepositionalObjectTableRowId}}
-      @school={{this.runningSubjectReport.school}}
-      @description={{this.runningSubjectReport.description}}
+      @subject={{@runningSubjectReport.subject}}
+      @prepositionalObject={{@runningSubjectReport.prepositionalObject}}
+      @prepositionalObjectTableRowId={{@runningSubjectReport.prepositionalObjectTableRowId}}
+      @school={{@runningSubjectReport.school}}
+      @description={{@runningSubjectReport.description}}
       @year={{this.reportYear}}
       @changeYear={{set this "reportYear"}}
     />

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

@@ -10,9 +10,7 @@ export default class ReportsListComponent extends Component {
   @service currentUser;
   @service reporting;
 
-  @tracked showNewReportForm;
   @tracked newSubjectReport;
-  @tracked runningSubjectReport;
   @tracked reportYear;
 
   userModel = new TrackedAsyncData(this.currentUser.getModel());
@@ -88,11 +86,7 @@ export default class ReportsListComponent extends Component {
   }
 
   get decoratedReports() {
-    if (!this.subjectReportObjects?.isResolved) {
-      return [];
-    }
-
-    return this.subjectReportObjects.value;
+    return this.subjectReportObjects?.isResolved ? this.subjectReportObjects.value : [];
   }
 
   get newReport() {
@@ -103,19 +97,15 @@ export default class ReportsListComponent extends Component {
     return false;
   }
 
-  get subjectReportsFilteredByTitle() {
+  get filteredReports() {
     const filterTitle = this.args.titleFilter?.trim().toLowerCase() ?? '';
     return this.decoratedReports.filter(({ title }) =>
       title.trim().toLowerCase().includes(filterTitle),
     );
   }
 
-  get filteredReports() {
-    return this.subjectReportsFilteredByTitle;
-  }
-
   saveNewSubjectReport = dropTask(async (report) => {
-    this.runningSubjectReport = null;
+    this.args.setRunningSubjectReport(null);
     this.newSubjectReport = await report.save();
     this.showNewReportForm = false;
   });
@@ -128,7 +118,7 @@ export default class ReportsListComponent extends Component {
   runSubjectReport = restartableTask(
     async (subject, prepositionalObject, prepositionalObjectTableRowId, school) => {
       this.reportYear = null;
-      this.runningSubjectReport = {
+      this.args.setRunningSubjectReport({
         subject,
         prepositionalObject,
         prepositionalObjectTableRowId,
@@ -139,13 +129,13 @@ export default class ReportsListComponent extends Component {
           prepositionalObjectTableRowId,
           school,
         ),
-      };
+      });
     },
   );
 
   @action
   toggleNewReportForm() {
-    this.runningSubjectReport = null;
-    this.showNewReportForm = !this.showNewReportForm;
+    this.args.setRunningSubjectReport(null);
+    this.args.toggleNewReportForm;
   }
 }

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

@@ -4,5 +4,9 @@
     @setSortReportsBy={{@sortReportsBy}}
     @titleFilter={{@titleFilter}}
     @changeTitleFilter={{@changeTitleFilter}}
+    @showNewReportForm={{@showNewReportForm}}
+    @toggleNewReportForm={{@toggleNewReportForm}}
+    @runningSubjectReport={{@runningSubjectReport}}
+    @setRunningSubjectReport={{@setRunningSubjectReport}}
   />
 </section>

packages/frontend/app/controllers/reports.js

@@ -1,16 +1,34 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { restartableTask, timeout } from 'ember-concurrency';
+import { action } from '@ember/object';
 
 export default class ReportsController extends Controller {
-  queryParams = [{ sortReportsBy: 'sortBy' }, { titleFilter: 'filter' }];
+  queryParams = [
+    { sortReportsBy: 'sortBy' },
+    { titleFilter: 'filter' },
+    { showNewReportForm: 'showNewReportForm' },
+  ];
 
   @tracked sortReportsBy = 'title';
   @tracked titleFilter = null;
+  @tracked showNewReportForm = false;
+  @tracked runningSubjectReport = null;
 
   changeTitleFilter = restartableTask(async (value) => {
     this.titleFilter = value;
     await timeout(250);
     return value;
   });
+
+  @action
+  setRunningSubjectReport(report) {
+    this.runningSubjectReport = report;
+  }
+
+  @action
+  toggleNewReportForm() {
+    this.runningSubjectReport = null;
+    this.showNewReportForm = !this.showNewReportForm;
+  }
 }

packages/frontend/app/templates/reports.hbs

@@ -4,4 +4,8 @@
   @setSortReportsBy={{set this "sortReportsBy"}}
   @titleFilter={{this.titleFilter}}
   @changeTitleFilter={{perform this.changeTitleFilter}}
+  @showNewReportForm={{this.showNewReportForm}}
+  @toggleNewReportForm={{this.toggleNewReportForm}}
+  @runningSubjectReport={{this.runningSubjectReport}}
+  @setRunningSubjectReport={{this.setRunningSubjectReport}}
 />

packages/frontend/tests/acceptance/reports/subjects-test.js

@@ -369,7 +369,7 @@ module('Acceptance | Reports - Subject Reports', function (hooks) {
     });
     await page.root.list.newSubject.run();
     await percySnapshot(assert);
-    assert.strictEqual(currentURL(), '/reports');
+    assert.strictEqual(currentURL(), '/reports?showNewReportForm=true');
     assert.strictEqual(
       page.root.results.description,
       'This report shows all Sessions associated with Course "course 0" (2015) in school 0.',

packages/frontend/tests/integration/components/reports/list-test.js

@@ -32,6 +32,8 @@ module('Integration | Component | reports/list', function (hooks) {
   @setSortReportsBy={{(noop)}}
   @titleFilter=''
   @changeTitleFilter={{(noop)}}
+  @showNewReportForm={{false}}
+  @toggleNewReportForm={{(noop)}}
 />`);
 
     assert.strictEqual(component.table.reports.length, 2);
@@ -48,17 +50,26 @@ module('Integration | Component | reports/list', function (hooks) {
   @setSortReportsBy={{(noop)}}
   @titleFilter=''
   @changeTitleFilter={{(noop)}}
+  @showNewReportForm={{false}}
+  @toggleNewReportForm={{(noop)}}
 />`);
     assert.notOk(component.table.isVisible);
     a11yAudit(this.element);
   });
 
   test('toggle new report form', async function (assert) {
+    this.set('showNewReportForm', false);
+    this.set('toggleNewReportForm', () => {
+      this.set('showNewReportForm', !this.showNewReportForm);
+    });
+
     await render(hbs`<Reports::Root
   @sortReportsBy='title'
   @setSortReportsBy={{(noop)}}
   @titleFilter=''
   @changeTitleFilter={{(noop)}}
+  @showNewReportForm={{this.showNewReportForm}}
+  @toggleNewReportForm={{this.toggleNewReportForm}}
 />`);
     assert.notOk(component.newSubject.isVisible);
     await component.toggleNewSubjectReportForm();

packages/frontend/tests/integration/components/reports/root-test.js

@@ -32,6 +32,8 @@ module('Integration | Component | reports/root', function (hooks) {
   @setSortReportsBy={{(noop)}}
   @titleFilter=''
   @changeTitleFilter={{(noop)}}
+  @showNewReportForm={{false}}
+  @toggleNewReportForm={{(noop)}}
 />`);
 
     assert.strictEqual(component.list.table.reports.length, 2);
@@ -48,17 +50,26 @@ module('Integration | Component | reports/root', function (hooks) {
   @setSortReportsBy={{(noop)}}
   @titleFilter=''
   @changeTitleFilter={{(noop)}}
+  @showNewReportForm={{false}}
+  @toggleNewReportForm={{(noop)}}
 />`);
     assert.notOk(component.list.table.isVisible);
     a11yAudit(this.element);
   });
 
   test('toggle new report form', async function (assert) {
+    this.set('showNewReportForm', false);
+    this.set('toggleNewReportForm', () => {
+      this.set('showNewReportForm', !this.showNewReportForm);
+    });
+
     await render(hbs`<Reports::Root
   @sortReportsBy='title'
   @setSortReportsBy={{(noop)}}
   @titleFilter=''
   @changeTitleFilter={{(noop)}}
+  @showNewReportForm={{this.showNewReportForm}}
+  @toggleNewReportForm={{this.toggleNewReportForm}}
 />`);
     assert.notOk(component.list.newSubject.isVisible);
     await component.list.toggleNewSubjectReportForm();