Resolved a bug that caused inputs to lose focus when editing a challe…

…nge spec's properties.
cmu-sei · Oct 6, 2023 · d3bdc3b · d3bdc3b
1 parent f30dd70
commit d3bdc3b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/...rd-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.html b/...rd-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.html
@@ -13,7 +13,7 @@ <h2 class="m-0 p-0 fs-11">{{ spec.name }}</h2>
             <label for="points-input-{{spec.id}}">Points</label>
             <input type="number" class="form-control" id="points-input-{{spec.id}}" name="points"
                 placeholder="Enter a point value for this challenge" [(ngModel)]="spec.points"
-                (ngModelChange)="handleSpecUpdated(spec)">
+                (input)="handleSpecUpdated(spec)">
         </div>
 
         <div class="form-group">

diff --git a/...oard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.ts b/...oard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.ts
@@ -4,7 +4,7 @@ import { fa } from '@/services/font-awesome.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { slug } from '@/tools/functions';
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { Subject, debounceTime, filter, firstValueFrom, switchMap, tap } from 'rxjs';
+import { Subject, debounceTime, filter, switchMap, tap } from 'rxjs';
 
 @Component({
   selector: 'app-challenge-spec-editor',
@@ -20,7 +20,18 @@ export class ChallengeSpecEditorComponent implements OnChanges {
   protected slug = slug;
   protected requestUpdateSpec$ = new Subject<Spec>();
 
-  constructor() { }
+  constructor(
+    private specService: SpecService,
+    private unsub: UnsubscriberService) {
+    this.unsub.add(
+      this.requestUpdateSpec$.pipe(
+        debounceTime(500),
+        filter(s => s.points >= 0),
+        switchMap(s => this.specService.update(s)),
+        tap(s => this.specUpdate.emit(s)),
+      ).subscribe()
+    );
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (!this.spec) {
@@ -29,7 +40,7 @@ export class ChallengeSpecEditorComponent implements OnChanges {
   }
 
   protected handleSpecUpdated(spec: Spec) {
-    this.specUpdate.emit(spec);
+    this.requestUpdateSpec$.next(spec);
   }
 
   protected handleSpecDeleted(spec: Spec) {

diff --git a/projects/gameboard-ui/src/app/admin/game-mapper/game-mapper.component.html b/projects/gameboard-ui/src/app/admin/game-mapper/game-mapper.component.html
@@ -45,7 +45,7 @@
     <div [hidden]="viewing!=='edit'">
       <h4>Challenge Specs</h4>
 
-      <alert *ngIf="hasZeroPointSpecs$ | async" type="warning" class="my-2">
+      <alert *ngIf="hasZeroPointSpecs" type="warning" class="my-2">
         At least one of this game's enabled challenge specs has a point value of <strong>zero</strong>. This makes it
         impossible for Gameboard to determine when a challenge has been completed. We <strong>strongly</strong>
         recommend assigning a non-zero point value to each challenge.
@@ -59,7 +59,7 @@ <h4>Challenge Specs</h4>
       <ul class="spec-list mt-4">
         <li *ngFor="let spec of list$ | async">
           <app-challenge-spec-editor class="d-block mb-3" [spec]="spec" (specDelete)="this.deleting$.next(spec)"
-            (specUpdate)="this.updating$.next(spec)"></app-challenge-spec-editor>
+            (specUpdate)="handleSpecUpdated(spec)"></app-challenge-spec-editor>
         </li>
       </ul>
 

diff --git a/projects/gameboard-ui/src/app/admin/game-mapper/game-mapper.component.ts b/projects/gameboard-ui/src/app/admin/game-mapper/game-mapper.component.ts
@@ -50,7 +50,7 @@ export class GameMapperComponent implements OnInit, AfterViewInit {
   viewing = 'edit';
   addedCount = 0;
 
-  protected hasZeroPointSpecs$: Observable<boolean>;
+  protected hasZeroPointSpecs = false;
 
   constructor(
     private api: SpecService,
@@ -62,10 +62,7 @@ export class GameMapperComponent implements OnInit, AfterViewInit {
       debounceTime(500),
       switchMap(id => gameSvc.retrieveSpecs(id)),
       tap(r => this.list = r),
-    );
-
-    this.hasZeroPointSpecs$ = this.list$.pipe(
-      map(specList => specList.some(s => !s.disabled && (!s.points || s.points <= 0)))
+      tap(r => this.checkForZeroPointActiveSpecs(r))
     );
 
     // Grabs external specs
@@ -166,6 +163,14 @@ export class GameMapperComponent implements OnInit, AfterViewInit {
     return g.id;
   }
 
+  protected handleSpecUpdated(spec: Spec) {
+    this.checkForZeroPointActiveSpecs(this.list);
+  }
+
+  private checkForZeroPointActiveSpecs(specs: Spec[]) {
+    this.hasZeroPointSpecs = specs.some(s => s.points <= 0);
+  }
+
   mousemove(e: MouseEvent) {
     if (!this.specDrag) { return; }