decouples start/end academic level init and state tracking from load …

…method()

form validation is hinky for these two, as it was before.
there's a slight change in behaviour here - if both are in edit-mode and
you save one, the other one closes as well. infuriating!
might as well lock one down while the other is in edit-mode.
that's probably going to be the next commit.

packages/frontend/app/components/curriculum-inventory/sequence-block-overview.hbs

@@ -366,7 +366,7 @@
           </div>
           <div class="block starting-academic-level" data-test-starting-academic-level>
             <label for="academic-level-{{templateId}}">{{t "general.startLevel"}}:</label>
-            {{#if @canUpdate}}
+            {{#if (and @canUpdate this.startingAndEndingAcademicLevelsLoaded)}}
               <EditableField
                 @value={{this.startingAcademicLevel.name}}
                 @save={{perform this.changeStartingAcademicLevel}}
@@ -383,15 +383,15 @@
                     >{{obj.name}}</option>
                   {{/each}}
                 </select>
-                <ValidationError @validatable={{this}} @property="startingAcademicLevel" />
+                <ValidationError @validatable={{this}} @property="selectedStartingAcademicLevel" />
               </EditableField>
             {{else}}
               <span>{{this.startingAcademicLevel.name}}</span>
             {{/if}}
           </div>
           <div class="block ending-academic-level" data-test-ending-academic-level>
             <label for="academic-level-{{templateId}}">{{t "general.endLevel"}}:</label>
-            {{#if @canUpdate}}
+            {{#if (and @canUpdate this.startingAndEndingAcademicLevelsLoaded)}}
               <EditableField
                 @value={{this.endingAcademicLevel.name}}
                 @save={{perform this.changeEndingAcademicLevel}}
@@ -408,7 +408,7 @@
                     >{{obj.name}}</option>
                   {{/each}}
                 </select>
-                <ValidationError @validatable={{this}} @property="endingAcademicLevel" />
+                <ValidationError @validatable={{this}} @property="selectedEndingAcademicLevel" />
               </EditableField>
             {{else}}
               <span>{{this.endingAcademicLevel.name}}</span>

packages/frontend/app/components/curriculum-inventory/sequence-block-overview.js

@@ -23,11 +23,11 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
   @service intl;
   @service store;
   @tracked
-  @Custom('validateStartingEndingLevelCallback', 'validateStartingLevelMessageCallback')
-  startingAcademicLevel;
+  @Custom('_validateStartingEndingLevelCallback', '_validateStartingLevelMessageCallback')
+  _startingAcademicLevel;
   @tracked
-  @Custom('validateStartingEndingLevelCallback', 'validateEndingLevelMessageCallback')
-  endingAcademicLevel;
+  @Custom('_validateStartingEndingLevelCallback', '_validateEndingLevelMessageCallback')
+  _endingAcademicLevel;
   @tracked _academicLevels = [];
   @tracked childSequenceOrder;
   @tracked _course;
@@ -66,6 +66,12 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
   @AfterDate('startDate', { granularity: 'day' })
   endDate;
   @tracked selectedCourse;
+  @tracked
+  @Custom('validateStartingEndingLevelCallback', 'validateStartingLevelMessageCallback')
+  selectedStartingAcademicLevel;
+  @tracked
+  @Custom('validateStartingEndingLevelCallback', 'validateEndingLevelMessageCallback')
+  selectedEndingAcademicLevel;
 
   constructor() {
     super(...arguments);
@@ -95,8 +101,8 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
       }
     }
     this.linkedSessions = await sequenceBlock.sessions;
-    this.startingAcademicLevel = await sequenceBlock.startingAcademicLevel;
-    this.endingAcademicLevel = await sequenceBlock.endingAcademicLevel;
+    this._startingAcademicLevel = await sequenceBlock.startingAcademicLevel;
+    this._endingAcademicLevel = await sequenceBlock.endingAcademicLevel;
     this._course = await sequenceBlock.course;
     this.sessions = await this.getSessions(this._course);
     this._linkableCourses = await this.getLinkableCourses(this._report, this._course);
@@ -120,6 +126,28 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
     return this.academicLevelsData.isResolved ? this.academicLevelsData.value : [];
   }
 
+  @cached
+  get startingAcademicLevelData() {
+    return new TrackedAsyncData(this.args.sequenceBlock.startingAcademicLevel);
+  }
+
+  get startingAcademicLevel() {
+    return this.startingAcademicLevelData.isResolved ? this.startingAcademicLevelData.value : null;
+  }
+
+  @cached
+  get endingAcademicLevelData() {
+    return new TrackedAsyncData(this.args.sequenceBlock.endingAcademicLevel);
+  }
+
+  get endingAcademicLevel() {
+    return this.endingAcademicLevelData.isResolved ? this.endingAcademicLevelData.value : null;
+  }
+
+  get startingAndEndingAcademicLevelsLoaded() {
+    return this.startingAcademicLevelData.isResolved && this.endingAcademicLevelData.isResolved;
+  }
+
   @cached
   get courseData() {
     return new TrackedAsyncData(this.args.sequenceBlock.course);
@@ -353,45 +381,47 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
   }
 
   changeStartingAcademicLevel = dropTask(async () => {
-    this.addErrorDisplaysFor(['startingAcademicLevel']);
+    this.addErrorDisplaysFor(['selectedStartingAcademicLevel']);
     const isValid = await this.isValid();
     if (!isValid) {
       return false;
     }
-    this.args.sequenceBlock.set('startingAcademicLevel', this.startingAcademicLevel);
+    this.args.sequenceBlock.set('startingAcademicLevel', this.selectedStartingAcademicLevel);
     await this.args.sequenceBlock.save();
+    this.revertStartingAcademicLevelChanges();
   });
 
   @action
   setStartingAcademicLevel(event) {
     const id = event.target.value;
-    this.startingAcademicLevel = findById(this._academicLevels, id);
+    this.selectedStartingAcademicLevel = findById(this.academicLevels, id);
   }
 
   @action
   revertStartingAcademicLevelChanges() {
-    this.startingAcademicLevel = this.args.sequenceBlock.startingAcademicLevel;
+    this.selectedStartingAcademicLevel = null;
   }
 
   changeEndingAcademicLevel = dropTask(async () => {
-    this.addErrorDisplaysFor(['endingAcademicLevel']);
+    this.addErrorDisplaysFor(['selectedEndingAcademicLevel']);
     const isValid = await this.isValid();
     if (!isValid) {
       return false;
     }
-    this.args.sequenceBlock.set('endingAcademicLevel', this.endingAcademicLevel);
+    this.args.sequenceBlock.set('endingAcademicLevel', this.selectedEndingAcademicLevel);
     await this.args.sequenceBlock.save();
+    this.revertEndingAcademicLevelChanges();
   });
 
   @action
   setEndingAcademicLevel(event) {
     const id = event.target.value;
-    this.endingAcademicLevel = findById(this._academicLevels, id);
+    this.selectedEndingAcademicLevel = findById(this.academicLevels, id);
   }
 
   @action
   revertEndingAcademicLevelChanges() {
-    this.endingAcademicLevel = this.args.sequenceBlock.endingAcademicLevel;
+    this.selectedStartingAcademicLevel = null;
   }
 
   @action
@@ -478,9 +508,32 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
     });
   }
 
+  @action
+  _validateStartingEndingLevelCallback() {
+    return this._endingAcademicLevel.level >= this._startingAcademicLevel.level;
+  }
+
+  @action
+  _validateEndingLevelMessageCallback() {
+    return this.intl.t('errors.greaterThanOrEqualTo', {
+      gte: this.intl.t('general.startLevel'),
+      description: this.intl.t('general.endLevel'),
+    });
+  }
+
+  @action
+  _validateStartingLevelMessageCallback() {
+    return this.intl.t('errors.lessThanOrEqualTo', {
+      lte: this.intl.t('general.endLevel'),
+      description: this.intl.t('general.startLevel'),
+    });
+  }
+
   @action
   validateStartingEndingLevelCallback() {
-    return this.endingAcademicLevel.level >= this.startingAcademicLevel.level;
+    const startingAcademicLevel = this.selectedStartingAcademicLevel || this.startingAcademicLevel;
+    const endingAcademicLevel = this.selectedEndingAcademicLevel || this.endingAcademicLevel;
+    return endingAcademicLevel.level >= startingAcademicLevel.level;
   }
 
   @action