Go back to a resource-based loading approach.

packages/frontend/app/components/curriculum-inventory/leadership-expanded.hbs

@@ -1,56 +1,51 @@
 <div
   class="curriculum-inventory-leadership-expanded"
   data-test-curriculum-inventory-leadership-expanded
-  {{did-insert (perform this.load) @report}}
 >
-  {{#if this.load.isRunning}}
-      <LoadingSpinner />
-  {{else}}
-    <div class="curriculum-inventory-leadership-expanded-header" data-test-header>
-      <button
-        class="title link-button"
-        type="button"
-        aria-expanded="true"
-        data-test-title
-        {{on "click" @collapse}}
-      >
-        {{t "general.leadership"}} ({{this.count}})
-        <FaIcon @icon="caret-down" />
-      </button>
-      <div class="actions">
-        {{#if @isManaging}}
-          <button type="button" class="bigadd" {{on "click" (perform this.save)}} data-test-save>
-            <FaIcon
-              @icon={{if this.save.isRunning "spinner" "check"}}
-              @spin={{this.save.isRunning}}
-            />
-          </button>
-          <button type="button" class="bigcancel" {{on "click" (perform this.cancel)}} data-test-cancel>
-            <FaIcon @icon="arrow-rotate-left" />
-          </button>
-        {{else if @canUpdate}}
-          <button type="button" {{on "click" this.manage}} data-test-manage>
-            {{t "general.manageLeadership"}}
-          </button>
-        {{/if}}
-      </div>
-    </div>
-    <div class="curriculum-inventory-leadership-expanded-content" data-test-content>
+  <div class="curriculum-inventory-leadership-expanded-header" data-test-header>
+    <button
+      class="title link-button"
+      type="button"
+      aria-expanded="true"
+      data-test-title
+      {{on "click" @collapse}}
+    >
+      {{t "general.leadership"}} ({{this.count}})
+      <FaIcon @icon="caret-down" />
+    </button>
+    <div class="actions">
       {{#if @isManaging}}
-        <LeadershipManager
-          @showAdministrators={{true}}
-          @showDirectors={{false}}
-          @administrators={{this.administrators}}
-          @removeAdministrator={{this.removeAdministrator}}
-          @addAdministrator={{this.addAdministrator}}
-        />
-      {{else}}
-        <LeadershipList
-          @showAdministrators={{true}}
-          @showDirectors={{false}}
-          @administrators={{this.administrators}}
-        />
+        <button type="button" class="bigadd" {{on "click" (perform this.save)}} data-test-save>
+          <FaIcon
+            @icon={{if this.save.isRunning "spinner" "check"}}
+            @spin={{this.save.isRunning}}
+          />
+        </button>
+        <button type="button" class="bigcancel" {{on "click" this.close}} data-test-cancel>
+          <FaIcon @icon="arrow-rotate-left" />
+        </button>
+      {{else if @editable}}
+        <button type="button" {{on "click" (fn @setIsManaging true)}} data-test-manage>
+          {{t "general.manageLeadership"}}
+        </button>
       {{/if}}
     </div>
-  {{/if}}
+  </div>
+  <div class="curriculum-inventory-leadership-expanded-content" data-test-content>
+    {{#if @isManaging}}
+      <LeadershipManager
+        @showAdministrators={{true}}
+        @showDirectors={{false}}
+        @administrators={{this.administrators}}
+        @removeAdministrator={{this.removeAdministrator}}
+        @addAdministrator={{this.addAdministrator}}
+      />
+    {{else}}
+      <LeadershipList
+        @showAdministrators={{true}}
+        @showDirectors={{false}}
+        @administrators={{this.administrators}}
+      />
+    {{/if}}
+  </div>
 </div>

packages/frontend/app/components/curriculum-inventory/leadership-expanded.js

@@ -1,47 +1,62 @@
 import Component from '@glimmer/component';
-import { dropTask, timeout } from 'ember-concurrency';
-import { action } from '@ember/object';
+import { dropTask } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class CurriculumInventoryLeadershipExpandedComponent extends Component {
-  @tracked administrators = [];
+  @tracked administratorsToAdd = [];
+  @tracked administratorsToRemove = [];
 
+  @cached
   get count() {
     return this.administrators.length;
   }
 
+  @cached
+  get reportAdministrators() {
+    return new TrackedAsyncData(this.args.report.administrators);
+  }
+
+  @cached
+  get administrators() {
+    const administrators = this.reportAdministrators.isResolved
+      ? this.reportAdministrators.value.slice()
+      : [];
+    return [...administrators, ...this.administratorsToAdd].filter(
+      (user) => !this.administratorsToRemove.includes(user),
+    );
+  }
+
+  resetBuffers() {
+    this.administratorsToAdd = [];
+    this.administratorsToRemove = [];
+  }
+
   @action
   addAdministrator(user) {
-    this.administrators = [...this.administrators, user];
+    this.administratorsToAdd = [...this.administratorsToAdd, user];
+    this.administratorsToRemove = this.administratorsToRemove.filter((d) => d !== user);
   }
+
   @action
   removeAdministrator(user) {
-    this.administrators = this.administrators.filter(({ id }) => id !== user.id);
-  }
-
-  async setBuffers() {
-    this.administrators = (await this.args.report.administrators).slice();
+    this.administratorsToRemove = [...this.administratorsToRemove, user];
+    this.administratorsToAdd = this.administratorsToAdd.filter((d) => d !== user);
   }
 
   @action
-  manage() {
-    this.args.setIsManaging(true);
+  close() {
+    this.resetBuffers();
+    this.args.setIsManaging(false);
   }
 
-  load = dropTask(async () => {
-    await this.setBuffers();
-  });
-
   save = dropTask(async () => {
-    await timeout(10);
     this.args.report.set('administrators', this.administrators);
     this.args.expand();
+    this.resetBuffers();
     await this.args.report.save();
     this.args.setIsManaging(false);
   });
-
-  cancel = dropTask(async () => {
-    await this.setBuffers();
-    this.args.setIsManaging(false);
-  });
 }

packages/frontend/app/components/curriculum-inventory/report-details.hbs

@@ -38,7 +38,7 @@
   {{#if @leadershipDetails}}
     <CurriculumInventory::LeadershipExpanded
       @report={{@report}}
-      @canUpdate={{this.canUpdate}}
+      @editable={{this.canUpdate}}
       @collapse={{fn @setLeadershipDetails false}}
       @expand={{fn @setLeadershipDetails true}}
       @isManaging={{@manageLeadership}}

packages/frontend/app/components/program-year/leadership-expanded.hbs

@@ -1,11 +1,7 @@
 <div
   class="program-year-leadership-expanded"
   data-test-program-year-leadership-expanded
-  {{did-insert (perform this.load) @programYear}}
 >
-{{#if this.load.isRunning}}
-    <LoadingSpinner />
-{{else}}
   <div class="program-year-leadership-expanded-header">
     {{#if @isManaging}}
       <h3 class="title" data-test-title>
@@ -31,11 +27,11 @@
             @spin={{this.save.isRunning}}
           />
         </button>
-        <button type="button" class="bigcancel" {{on "click" (perform this.cancel)}} data-test-cancel>
+        <button type="button" class="bigcancel" {{on "click" this.close}} data-test-cancel>
           <FaIcon @icon="arrow-rotate-left" />
         </button>
       {{else if @editable}}
-        <button type="button" {{on "click" this.manage}} data-test-manage>
+        <button type="button" {{on "click" (fn @setIsManaging true)}} data-test-manage>
           {{t "general.manageLeadership"}}
         </button>
       {{/if}}
@@ -58,5 +54,4 @@
       />
     {{/if}}
   </div>
-{{/if}}
 </div>

packages/frontend/app/components/program-year/leadership-expanded.js

@@ -1,48 +1,62 @@
 import Component from '@glimmer/component';
-import { dropTask, timeout } from 'ember-concurrency';
+import { dropTask } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
+import { TrackedAsyncData } from 'ember-async-data';
+import { cached } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class ProgramYearLeadershipExpandedComponent extends Component {
-  @tracked directors = [];
+  @tracked directorsToAdd = [];
+  @tracked directorsToRemove = [];
 
+  @cached
   get count() {
     return this.directors.length;
   }
 
+  @cached
+  get programYearDirectors() {
+    return new TrackedAsyncData(this.args.programYear.directors);
+  }
+
+  @cached
+  get directors() {
+    const directors = this.programYearDirectors.isResolved
+      ? this.programYearDirectors.value.slice()
+      : [];
+    return [...directors, ...this.directorsToAdd].filter(
+      (user) => !this.directorsToRemove.includes(user),
+    );
+  }
+
+  resetBuffers() {
+    this.directorsToAdd = [];
+    this.directorsToRemove = [];
+  }
+
   @action
   addDirector(user) {
-    this.directors = [...this.directors, user];
+    this.directorsToAdd = [...this.directorsToAdd, user];
+    this.directorsToRemove = this.directorsToRemove.filter((d) => d !== user);
   }
 
   @action
   removeDirector(user) {
-    this.directors = this.directors.filter((obj) => obj !== user);
+    this.directorsToRemove = [...this.directorsToRemove, user];
+    this.directorsToAdd = this.directorsToAdd.filter((d) => d !== user);
   }
 
   @action
-  manage() {
-    this.args.setIsManaging(true);
-  }
-
-  async setBuffers() {
-    this.directors = (await this.args.programYear.directors).slice();
+  close() {
+    this.resetBuffers();
+    this.args.setIsManaging(false);
   }
 
-  load = dropTask(async () => {
-    await this.setBuffers();
-  });
-
   save = dropTask(async () => {
-    await timeout(10);
     this.args.programYear.set('directors', this.directors);
     this.args.expand();
+    this.resetBuffers();
     await this.args.programYear.save();
     this.args.setIsManaging(false);
   });
-
-  cancel = dropTask(async () => {
-    await this.setBuffers();
-    this.args.setIsManaging(false);
-  });
 }