SF-3322 Allow selecting book and chapter in community checking

Author: RaymondLuong3

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking-questions/checking-questions.component.ts

@@ -166,7 +166,8 @@ export class CheckingQuestionsComponent implements OnInit, OnChanges {
     // Handle changes to questionDocs in ngOnChanges instead of setter to ensure other @Inputs are set
     // when 'activateStoredQuestion' is called, such as 'routeBookChapter'.
     const questionDocs: Readonly<QuestionDoc[] | undefined> = changes.questionDocs?.currentValue;
-    if (questionDocs != null) {
+    if (questionDocs != null && this.activeQuestionDoc == null) {
+      // Only activate the stored question if no previous question was selected
       if (questionDocs.length > 0) {
         this.activateStoredQuestion({ isQuestionListChange: true });
       } else {

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.html

@@ -71,9 +71,7 @@ <h2 matSubheader>{{ t("filter_questions") }}</h2>
                 [book]="book"
                 [chapters]="chapters"
                 [chapter]="chapter"
-                [bookSelectDisabled]="activeQuestionScope === 'all'"
-                [chapterSelectDisabled]="activeQuestionScope !== 'chapter'"
-                [prevNextHidden]="activeQuestionScope !== 'chapter' || isScreenSmall"
+                [prevNextHidden]="isScreenSmall"
                 (bookChange)="onBookSelect($event)"
                 (chapterChange)="onChapterSelect($event)"
               >

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.spec.ts

@@ -374,6 +374,7 @@ describe('CheckingComponent', () => {
       env.setBookChapter('JHN', 2);
       expect(env.getQuestionText(question)).toBe('John 2');
       expect(await env.getCurrentBookAndChapter()).toBe('John 2');
+      env.waitForQuestionTimersToComplete();
     }));
 
     it('start question respects route book/chapter', fakeAsync(async () => {
@@ -569,8 +570,7 @@ describe('CheckingComponent', () => {
       expect(env.isSegmentHighlighted(1, 5)).toBe(true);
       expect(env.segmentHasQuestion(1, 5)).toBe(true);
       expect(env.component.questionVerseRefs.some(verseRef => verseRef.equals(new VerseRef('JHN 1:5')))).toBe(true);
-      tick();
-      flush();
+      env.waitForQuestionTimersToComplete();
     }));
 
     it('records audio for question when button clicked', fakeAsync(() => {
@@ -851,6 +851,38 @@ describe('CheckingComponent', () => {
       env.waitForQuestionTimersToComplete();
     }));
 
+    it('resets filter after a user changes chapter', fakeAsync(() => {
+      const env = new TestEnvironment({
+        user: ADMIN_USER,
+        projectBookRoute: 'JHN',
+        projectChapterRoute: 1,
+        questionScope: 'chapter'
+      });
+      expect(env.questions.length).toEqual(14);
+      env.setQuestionScope('all');
+      env.setBookChapter('JHN', 2);
+      tick();
+      env.fixture.detectChanges();
+      expect(env.component.activeQuestionScope).toEqual('all');
+      env.waitForQuestionTimersToComplete();
+    }));
+
+    it('resets filter after a user changes book', fakeAsync(() => {
+      const env = new TestEnvironment({
+        user: ADMIN_USER,
+        projectBookRoute: 'JHN',
+        projectChapterRoute: 1,
+        questionScope: 'chapter'
+      });
+      expect(env.questions.length).toEqual(14);
+      env.setQuestionScope('all');
+      env.setBookChapter('MAT', 1);
+      tick();
+      env.fixture.detectChanges();
+      expect(env.component.activeQuestionScope).toEqual('all');
+      env.waitForQuestionTimersToComplete();
+    }));
+
     it('can narrow questions scope', fakeAsync(() => {
       const env = new TestEnvironment({
         user: ADMIN_USER,
@@ -921,7 +953,8 @@ describe('CheckingComponent', () => {
       env.waitForQuestionTimersToComplete();
 
       expect(spyUpdateQuestionRefs).toHaveBeenCalledTimes(1);
-      expect(spyRefreshSummary).toHaveBeenCalledTimes(1);
+      // Called at least once or more depending on if another question replaces the archived question
+      expect(spyRefreshSummary).toHaveBeenCalled();
     }));
   });
 
@@ -1913,8 +1946,9 @@ describe('CheckingComponent', () => {
       const env = new TestEnvironment({ user: CHECKER_USER });
       const questionDoc = spy(env.getQuestionDoc('q6Id'));
       env.selectQuestion(6);
+      verify(questionDoc!.updateAnswerFileCache()).times(1);
       env.simulateRemoteEditAnswer(0, 'Question 6 edited answer');
-      verify(questionDoc!.updateAnswerFileCache()).times(3);
+      verify(questionDoc!.updateAnswerFileCache()).times(2);
       expect().nothing();
       tick();
       flush();
@@ -1924,8 +1958,9 @@ describe('CheckingComponent', () => {
       const env = new TestEnvironment({ user: ADMIN_USER });
       const questionDoc = spy(env.getQuestionDoc('q6Id'));
       env.selectQuestion(6);
+      verify(questionDoc!.updateAnswerFileCache()).times(1);
       env.simulateRemoteDeleteAnswer('q6Id', 0);
-      verify(questionDoc!.updateAnswerFileCache()).times(3);
+      verify(questionDoc!.updateAnswerFileCache()).times(2);
       expect().nothing();
       tick();
       flush();

src/SIL.XForge.Scripture/ClientApp/src/app/checking/checking/checking.component.ts

@@ -580,7 +580,6 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
             };
           } else {
             const suggestedBookChapter: BookChapter = await this.getSuggestedNavBookChapter(routeBookNum);
-
             this.navigateBookChapter(
               routeProjectId,
               routeScope!,
@@ -603,11 +602,10 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
           if (
             routeProjectId !== prevProjectId ||
             routeScope !== prevScope ||
-            (routeScope !== 'all' && routeBookNum !== prevBookNum) ||
-            (routeScope === 'chapter' && (routeChapter == null ? undefined : parseInt(routeChapter)) !== prevChapterNum)
+            routeBookNum !== prevBookNum ||
+            (routeChapter == null ? undefined : parseInt(routeChapter)) !== prevChapterNum
           ) {
             this.cleanup();
-
             this.questionsQuery = await this.checkingQuestionsService.queryQuestions(
               routeProjectId,
               {
@@ -733,7 +731,6 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
       .pipe(quietTakeUntilDestroyed(this.destroyRef))
       .subscribe((state: BreakpointState) => {
         this.calculateScriptureSliderPosition();
-
         // `questionsPanel` is undefined until ngAfterViewInit, but setting `isQuestionListPermanent`
         // here causes `ExpressionChangedAfterItHasBeenCheckedError`, so wrap in setTimeout
         setTimeout(() => {
@@ -746,7 +743,8 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
       .observe(this.mediaBreakpointService.width('<', Breakpoint.MD))
       .pipe(quietTakeUntilDestroyed(this.destroyRef))
       .subscribe((state: BreakpointState) => {
-        this.isScreenSmall = state.matches;
+        // setting isScreenSmall causes `ExpressionChangedAfterItHasBeenCheckedError`, so wrap in setTimeout
+        setTimeout(() => (this.isScreenSmall = state.matches));
       });
   }
 
@@ -900,11 +898,11 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
 
   onBookSelect(book: number): void {
     const navChapterNum: number = this.projectDoc!.data!.texts.find(t => t.bookNum === book)?.chapters[0].number ?? 1;
-    this.navigateBookChapter(this.projectDoc!.id, this.activeQuestionScope!, book, navChapterNum);
+    this.navigateBookChapter(this.projectDoc!.id, 'all', book, navChapterNum);
   }
 
   onChapterSelect(chapter: number): void {
-    this.navigateBookChapter(this.projectDoc!.id, this.activeQuestionScope!, this.book!, chapter);
+    this.navigateBookChapter(this.projectDoc!.id, 'all', this.book!, chapter);
   }
 
   questionUpdated(_questionDoc: QuestionDoc): void {
@@ -940,9 +938,7 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
       }
 
       // Ensure navigation is set to book/chapter of selected question
-      if (this.navigateQuestionChapter(questionDoc)) {
-        return;
-      }
+      this.navigateQuestionChapter(questionDoc);
     }
   }
 
@@ -1098,12 +1094,11 @@ export class CheckingComponent extends DataLoadingComponent implements OnInit, A
       if (withFilterReset) {
         this.resetFilter();
       }
-
-      this.questionsList?.activateQuestion(questionDoc);
     } else if (withFilterReset) {
       // Reset filter, but don't update visible questions yet if navigating
       this.activeQuestionFilter = QuestionFilter.None;
     }
+    this.questionsList?.activateQuestion(questionDoc);
   }
 
   /**