[#13202] Show/Collapse All button in the student form submission

src/web/app/components/question-submission-form/question-submission-form.component.ts

@@ -8,6 +8,7 @@
 } from './question-submission-form-model';
 import { FeedbackQuestionsService } from '../../../services/feedback-questions.service';
 import { FeedbackResponsesService } from '../../../services/feedback-responses.service';
+import { SessionPageService } from '../../../services/session-page.service';
 import { VisibilityStateMachine } from '../../../services/visibility-state-machine';
 import {
   FeedbackConstantSumResponseDetails,
@@ -178,7 +179,8 @@
   autosaveTimeout: any;
 
   constructor(private feedbackQuestionsService: FeedbackQuestionsService,
-    private feedbackResponseService: FeedbackResponsesService) {
+    private feedbackResponseService: FeedbackResponsesService,
+    private sessionPageService: SessionPageService) {
     this.visibilityStateMachine =
       this.feedbackQuestionsService.getNewVisibilityStateMachine(
         this.model.giverType, this.model.recipientType);
@@ -197,6 +199,16 @@
     return false;
   }
 
+  ngOnInit(): void {
+    this.sessionPageService.isExpandedObservable.subscribe(
+      (toExpand: boolean) => {
+        if (this.model.isTabExpanded !== toExpand) {
+          this.toggleQuestionTab();
+        }
+      },
+    );
+  }
+
   ngDoCheck(): void {
     if (this.model.isLoaded && !this.isEveryRecipientSorted) {
       this.sortRecipientsByName();

src/web/app/pages-session/session-submission-page/__snapshots__/session-submission-page.component.spec.ts.snap

@@ -35,6 +35,7 @@ exports[`SessionSubmissionPageComponent should snap when feedback session questi
   isCourseLoading={[Function Boolean]}
   isFeedbackSessionLoading={[Function Boolean]}
   isFeedbackSessionQuestionsLoading={[Function Boolean]}
+  isFormsExpanded={[Function Boolean]}
   isModerationHintExpanded="false"
   isQuestionCountOne="false"
   isSavingResponses="false"
@@ -56,6 +57,7 @@ exports[`SessionSubmissionPageComponent should snap when feedback session questi
   regKey={[Function String]}
   retryAttempts="0"
   route={[Function Object]}
+  sessionPageService={[Function SessionPageService]}
   simpleModalService={[Function SimpleModalService]}
   statusMessageService={[Function StatusMessageService]}
   studentId=""
@@ -196,6 +198,7 @@ exports[`SessionSubmissionPageComponent should snap when saving responses 1`] =
   isCourseLoading={[Function Boolean]}
   isFeedbackSessionLoading={[Function Boolean]}
   isFeedbackSessionQuestionsLoading={[Function Boolean]}
+  isFormsExpanded={[Function Boolean]}
   isModerationHintExpanded="false"
   isQuestionCountOne="false"
   isSavingResponses={[Function Boolean]}
@@ -217,6 +220,7 @@ exports[`SessionSubmissionPageComponent should snap when saving responses 1`] =
   regKey={[Function String]}
   retryAttempts={[Function Number]}
   route={[Function Object]}
+  sessionPageService={[Function SessionPageService]}
   simpleModalService={[Function SimpleModalService]}
   statusMessageService={[Function StatusMessageService]}
   studentId=""
@@ -354,6 +358,7 @@ exports[`SessionSubmissionPageComponent should snap with default fields 1`] = `
   isCourseLoading={[Function Boolean]}
   isFeedbackSessionLoading={[Function Boolean]}
   isFeedbackSessionQuestionsLoading={[Function Boolean]}
+  isFormsExpanded={[Function Boolean]}
   isModerationHintExpanded="false"
   isQuestionCountOne="false"
   isSavingResponses="false"
@@ -375,6 +380,7 @@ exports[`SessionSubmissionPageComponent should snap with default fields 1`] = `
   regKey={[Function String]}
   retryAttempts={[Function Number]}
   route={[Function Object]}
+  sessionPageService={[Function SessionPageService]}
   simpleModalService={[Function SimpleModalService]}
   statusMessageService={[Function StatusMessageService]}
   studentId=""
@@ -512,6 +518,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session and us
   isCourseLoading="false"
   isFeedbackSessionLoading="false"
   isFeedbackSessionQuestionsLoading={[Function Boolean]}
+  isFormsExpanded={[Function Boolean]}
   isModerationHintExpanded="false"
   isQuestionCountOne="false"
   isSavingResponses="false"
@@ -533,6 +540,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session and us
   regKey={[Function String]}
   retryAttempts={[Function Number]}
   route={[Function Object]}
+  sessionPageService={[Function SessionPageService]}
   simpleModalService={[Function SimpleModalService]}
   statusMessageService={[Function StatusMessageService]}
   studentId=""
@@ -804,6 +812,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
   isCourseLoading="false"
   isFeedbackSessionLoading="false"
   isFeedbackSessionQuestionsLoading="false"
+  isFormsExpanded={[Function Boolean]}
   isModerationHintExpanded="false"
   isQuestionCountOne="false"
   isSavingResponses="false"
@@ -825,6 +834,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
   regKey={[Function String]}
   retryAttempts={[Function Number]}
   route={[Function Object]}
+  sessionPageService={[Function SessionPageService]}
   simpleModalService={[Function SimpleModalService]}
   statusMessageService={[Function StatusMessageService]}
   studentId=""
@@ -1005,6 +1015,15 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
         </div>
       </div>
     </div>
+  </div><div
+    class="w-100 d-flex justify-content-end"
+  >
+    <button
+      class="btn expand-btn btn-light margin-top-30px my-3 px-5"
+      id="btn-collapse-expand"
+    >
+       Collapse All 
+    </button>
   </div><tm-loading-retry>
     <div>
       <tm-question-submission-form
@@ -3900,6 +3919,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
   isCourseLoading="false"
   isFeedbackSessionLoading="false"
   isFeedbackSessionQuestionsLoading="false"
+  isFormsExpanded={[Function Boolean]}
   isModerationHintExpanded="false"
   isQuestionCountOne="false"
   isSavingResponses="false"
@@ -3921,6 +3941,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
   regKey={[Function String]}
   retryAttempts={[Function Number]}
   route={[Function Object]}
+  sessionPageService={[Function SessionPageService]}
   simpleModalService={[Function SimpleModalService]}
   statusMessageService={[Function StatusMessageService]}
   studentId=""
@@ -4101,6 +4122,15 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
         </div>
       </div>
     </div>
+  </div><div
+    class="w-100 d-flex justify-content-end"
+  >
+    <button
+      class="btn expand-btn btn-light margin-top-30px my-3 px-5"
+      id="btn-collapse-expand"
+    >
+       Collapse All 
+    </button>
   </div><tm-loading-retry>
     <div>
       <tm-question-submission-form
@@ -7025,6 +7055,7 @@ exports[`SessionSubmissionPageComponent should snap with user that is logged in
   isCourseLoading={[Function Boolean]}
   isFeedbackSessionLoading={[Function Boolean]}
   isFeedbackSessionQuestionsLoading={[Function Boolean]}
+  isFormsExpanded={[Function Boolean]}
   isModerationHintExpanded="false"
   isQuestionCountOne="false"
   isSavingResponses="false"
@@ -7046,6 +7077,7 @@ exports[`SessionSubmissionPageComponent should snap with user that is logged in
   regKey={[Function String]}
   retryAttempts={[Function Number]}
   route={[Function Object]}
+  sessionPageService={[Function SessionPageService]}
   simpleModalService={[Function SimpleModalService]}
   statusMessageService={[Function StatusMessageService]}
   studentId=""
@@ -7184,6 +7216,7 @@ exports[`SessionSubmissionPageComponent should snap with user that is not logged
   isCourseLoading={[Function Boolean]}
   isFeedbackSessionLoading={[Function Boolean]}
   isFeedbackSessionQuestionsLoading={[Function Boolean]}
+  isFormsExpanded={[Function Boolean]}
   isModerationHintExpanded="false"
   isQuestionCountOne="false"
   isSavingResponses="false"
@@ -7205,6 +7238,7 @@ exports[`SessionSubmissionPageComponent should snap with user that is not logged
   regKey={[Function String]}
   retryAttempts={[Function Number]}
   route={[Function Object]}
+  sessionPageService={[Function SessionPageService]}
   simpleModalService={[Function SimpleModalService]}
   statusMessageService={[Function StatusMessageService]}
   studentId=""

src/web/app/pages-session/session-submission-page/session-submission-page.component.html

@@ -101,6 +101,13 @@ <h4>Previewing Session as
   </div>
 </div>
 
+<div *ngIf="questionSubmissionForms.length > 0" class="w-100 d-flex justify-content-end">
+    <button id="btn-collapse-expand" class="btn expand-btn btn-light margin-top-30px my-3 px-5"
+            (click)="isFormsExpanded ? collapseAllResponses() : expandAllResponses()">
+        {{isFormsExpanded ? "Collapse" : "Expand" }} All Responses
+    </button>
+</div>
+
 <tm-loading-retry [shouldShowRetry]="hasFeedbackSessionQuestionsLoadingFailed" [message]="'Failed to load questions'" (retryEvent)="retryLoadingFeedbackSessionQuestions()">
   <div *tmIsLoading="isFeedbackSessionQuestionsLoading">
     <ng-container *ngIf="currentSelectedSessionView === allSessionViews.GROUP_RECIPIENTS">

src/web/app/pages-session/session-submission-page/session-submission-page.component.spec.ts

@@ -18,6 +18,7 @@ import { FeedbackResponsesService } from '../../../services/feedback-responses.s
 import { FeedbackSessionsService } from '../../../services/feedback-sessions.service';
 import { InstructorService } from '../../../services/instructor.service';
 import { NavigationService } from '../../../services/navigation.service';
+import { SessionPageService } from '../../../services/session-page.service';
 import { SimpleModalService } from '../../../services/simple-modal.service';
 import { StudentService } from '../../../services/student.service';
 import {
@@ -636,6 +637,7 @@ describe('SessionSubmissionPageComponent', () => {
   let feedbackResponsesService: FeedbackResponsesService;
   let feedbackResponseCommentService: FeedbackResponseCommentService;
   let feedbackQuestionsService: FeedbackQuestionsService;
+  let sessionPageService: SessionPageService;
   let simpleModalService: SimpleModalService;
   let ngbModal: NgbModal;
 
@@ -683,6 +685,7 @@ describe('SessionSubmissionPageComponent', () => {
     feedbackResponsesService = TestBed.inject(FeedbackResponsesService);
     feedbackResponseCommentService = TestBed.inject(FeedbackResponseCommentService);
     feedbackSessionsService = TestBed.inject(FeedbackSessionsService);
+    sessionPageService = TestBed.inject(SessionPageService);
     simpleModalService = TestBed.inject(SimpleModalService);
     ngbModal = TestBed.inject(NgbModal);
     component = fixture.componentInstance;
@@ -697,6 +700,22 @@ describe('SessionSubmissionPageComponent', () => {
     expect(fixture).toMatchSnapshot();
   });
 
+  it('should have the contents expanded', () => {
+    expect(component.isFormsExpanded).toBe(true);
+  });
+
+  it('should hide contents when content is collapsed', () => {
+    sessionPageService.hideExpansion();
+    expect(component.isFormsExpanded).toBe(false);
+    sessionPageService.showExpansion();
+  });
+
+  it('should show contents when content is shown', () => {
+    sessionPageService.hideExpansion();
+    sessionPageService.showExpansion();
+    expect(component.isFormsExpanded).toBe(true);
+  });
+
   it('should snap when feedback session questions have failed to load', () => {
     component.retryAttempts = 0;
     component.hasFeedbackSessionQuestionsLoadingFailed = true;
@@ -778,6 +797,7 @@ describe('SessionSubmissionPageComponent', () => {
       testRankRecipientsQuestionSubmissionForm,
     ];
     component.isSubmissionFormsDisabled = true;
+    component.isFormsExpanded = true;
     component.isCourseLoading = false;
     component.isFeedbackSessionLoading = false;
     component.isFeedbackSessionQuestionsLoading = false;

src/web/app/pages-session/session-submission-page/session-submission-page.component.ts

@@ -17,6 +17,7 @@ import { FeedbackSessionsService } from '../../../services/feedback-sessions.ser
 import { InstructorService } from '../../../services/instructor.service';
 import { LogService } from '../../../services/log.service';
 import { NavigationService } from '../../../services/navigation.service';
+import { SessionPageService } from '../../../services/session-page.service';
 import { SimpleModalService } from '../../../services/simple-modal.service';
 import { StatusMessageService } from '../../../services/status-message.service';
 import { StudentService } from '../../../services/student.service';
@@ -107,6 +108,7 @@ export class SessionSubmissionPageComponent implements OnInit, AfterViewInit {
 
   isSavingResponses: boolean = false;
   isSubmissionFormsDisabled: boolean = false;
+  isFormsExpanded: boolean = true;
 
   isModerationHintExpanded: boolean = false;
   moderatedQuestionId: string = '';
@@ -154,6 +156,7 @@ export class SessionSubmissionPageComponent implements OnInit, AfterViewInit {
               private navigationService: NavigationService,
               private commentService: FeedbackResponseCommentService,
               private logService: LogService,
+              private sessionPageService: SessionPageService,
               @Inject(DOCUMENT) private document: any) {
     this.timezoneService.getTzVersion(); // import timezone service to load timezone data
   }
@@ -283,6 +286,12 @@ export class SessionSubmissionPageComponent implements OnInit, AfterViewInit {
         },
       });
     });
+
+    this.sessionPageService.isExpandedObservable.subscribe(
+        (toExpand: boolean) => {
+          this.isFormsExpanded = toExpand;
+        },
+    );
   }
 
   // Solution for checking partial element visibility adapted from
@@ -1229,6 +1238,14 @@ export class SessionSubmissionPageComponent implements OnInit, AfterViewInit {
     }
   }
 
+  expandAllResponses(): void {
+    this.sessionPageService.showExpansion();
+  }
+
+  collapseAllResponses(): void {
+    this.sessionPageService.hideExpansion();
+  }
+
   /**
    * Group questions by recipients in {@code GROUP_RECIPIENTS} view.
    */

src/web/services/session-page.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SessionPageService {
+  private isExpandableBehaviourSubject = new BehaviorSubject<boolean>(true);
+  isExpandedObservable = this.isExpandableBehaviourSubject.asObservable();
+
+  showExpansion(): void {
+    this.isExpandableBehaviourSubject.next(true);
+  }
+
+  hideExpansion(): void {
+    this.isExpandableBehaviourSubject.next(false);
+  }
+}