[TEAMMATES#11588] Fix incorrect loading for student result page (TEAM…

…MATES#11604)
kaixin-hc · Mar 10, 2022 · 9f2f4c7 · 9f2f4c7
1 parent 33cfa21
commit 9f2f4c7
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 5 deletions.
diff --git a/...ages-session/session-result-page/__snapshots__/session-result-page.component.spec.ts.snap b/...ages-session/session-result-page/__snapshots__/session-result-page.component.spec.ts.snap
@@ -14,6 +14,7 @@ exports[`SessionResultPageComponent should snap when session results failed to l
   hasFeedbackSessionResultsLoadingFailed={[Function Boolean]}
   instructorService={[Function InstructorService]}
   intent={[Function String]}
+  isFeedbackSessionDetailsLoading="false"
   isFeedbackSessionResultsLoading="false"
   logService={[Function LogService]}
   loggedInUser=""
@@ -168,6 +169,7 @@ exports[`SessionResultPageComponent should snap with an open feedback session wi
   hasFeedbackSessionResultsLoadingFailed="false"
   instructorService={[Function InstructorService]}
   intent={[Function String]}
+  isFeedbackSessionDetailsLoading="false"
   isFeedbackSessionResultsLoading="false"
   logService={[Function LogService]}
   loggedInUser=""
@@ -321,6 +323,7 @@ exports[`SessionResultPageComponent should snap with default fields 1`] = `
   hasFeedbackSessionResultsLoadingFailed="false"
   instructorService={[Function InstructorService]}
   intent={[Function String]}
+  isFeedbackSessionDetailsLoading="false"
   isFeedbackSessionResultsLoading="false"
   logService={[Function LogService]}
   loggedInUser=""
@@ -472,6 +475,7 @@ exports[`SessionResultPageComponent should snap with feedback session with quest
   hasFeedbackSessionResultsLoadingFailed="false"
   instructorService={[Function InstructorService]}
   intent={[Function String]}
+  isFeedbackSessionDetailsLoading="false"
   isFeedbackSessionResultsLoading="false"
   logService={[Function LogService]}
   loggedInUser=""
@@ -1037,6 +1041,7 @@ exports[`SessionResultPageComponent should snap with feedback session with quest
   hasFeedbackSessionResultsLoadingFailed="false"
   instructorService={[Function InstructorService]}
   intent={[Function String]}
+  isFeedbackSessionDetailsLoading="false"
   isFeedbackSessionResultsLoading="false"
   logService={[Function LogService]}
   loggedInUser=""
@@ -1453,7 +1458,7 @@ exports[`SessionResultPageComponent should snap with feedback session with quest
 </tm-session-result-page>
 `;
 
-exports[`SessionResultPageComponent should snap with session results are loading 1`] = `
+exports[`SessionResultPageComponent should snap with session details and results are loading 1`] = `
 <tm-session-result-page
   Intent={[Function Object]}
   authService={[Function AuthService]}
@@ -1467,6 +1472,83 @@ exports[`SessionResultPageComponent should snap with session results are loading
   hasFeedbackSessionResultsLoadingFailed="false"
   instructorService={[Function InstructorService]}
   intent={[Function String]}
+  isFeedbackSessionDetailsLoading={[Function Boolean]}
+  isFeedbackSessionResultsLoading={[Function Boolean]}
+  logService={[Function LogService]}
+  loggedInUser=""
+  navigationService={[Function NavigationService]}
+  ngbModal={[Function NgbModal]}
+  personEmail=""
+  personName=""
+  questions={[Function Array]}
+  regKey={[Function String]}
+  retryAttempts={[Function Number]}
+  route={[Function Object]}
+  router={[Function Router]}
+  session={[Function Object]}
+  statusMessageService={[Function StatusMessageService]}
+  studentService={[Function StudentService]}
+  timezoneService={[Function TimezoneService]}
+  visibilityRecipient={[Function String]}
+>
+  <h1>
+     Feedback Session Results
+  </h1><div
+    class="row"
+  >
+    <div
+      class="col-12"
+    >
+      <div
+        class="alert alert-primary"
+        role="alert"
+      >
+        <div>
+           You are viewing feedback results as . You may submit feedback for sessions that are currently open and view results without logging in. To access other features you need to 
+          <a
+            href="#"
+          >
+            login using a Google account
+          </a>
+           (recommended). 
+        </div>
+      </div>
+    </div>
+  </div><tm-loading-retry>
+    <tm-loading-spinner>
+      <div
+        class="loading-container"
+      >
+        <div
+          class="row spinner-border text-primary"
+          role="status"
+        />
+        <div
+          class="row text-secondary"
+        >
+          Loading...
+        </div>
+      </div>
+    </tm-loading-spinner>
+  </tm-loading-retry>
+</tm-session-result-page>
+`;
+
+exports[`SessionResultPageComponent should snap with session details loaded and results are loading 1`] = `
+<tm-session-result-page
+  Intent={[Function Object]}
+  authService={[Function AuthService]}
+  backendUrl={[Function String]}
+  courseId={[Function String]}
+  entityType={[Function String]}
+  feedbackSessionName={[Function String]}
+  feedbackSessionsService={[Function FeedbackSessionsService]}
+  formattedSessionClosingTime=""
+  formattedSessionOpeningTime=""
+  hasFeedbackSessionResultsLoadingFailed="false"
+  instructorService={[Function InstructorService]}
+  intent={[Function String]}
+  isFeedbackSessionDetailsLoading="false"
   isFeedbackSessionResultsLoading={[Function Boolean]}
   logService={[Function LogService]}
   loggedInUser=""
@@ -1618,6 +1700,7 @@ exports[`SessionResultPageComponent should snap with user that is logged in and
   hasFeedbackSessionResultsLoadingFailed="false"
   instructorService={[Function InstructorService]}
   intent={[Function String]}
+  isFeedbackSessionDetailsLoading="false"
   isFeedbackSessionResultsLoading="false"
   logService={[Function LogService]}
   loggedInUser={[Function String]}
@@ -1770,6 +1853,7 @@ exports[`SessionResultPageComponent should snap with user that is not logged in
   hasFeedbackSessionResultsLoadingFailed="false"
   instructorService={[Function InstructorService]}
   intent={[Function String]}
+  isFeedbackSessionDetailsLoading="false"
   isFeedbackSessionResultsLoading="false"
   logService={[Function LogService]}
   loggedInUser=""

diff --git a/src/web/app/pages-session/session-result-page/session-result-page.component.html b/src/web/app/pages-session/session-result-page/session-result-page.component.html
@@ -18,7 +18,7 @@ <h1>
 <div *ngIf="!isFeedbackSessionResultsLoading && questions.length !== 0" class="alert alert-primary" role="alert">
   <i class="fas fa-exclamation-circle"></i> Note: Questions without responses (i.e., no responses received or responses are not meant to be visible to you) are not shown below.
 </div>
-<div class="card card-plain mt-3">
+<div *ngIf="!isFeedbackSessionDetailsLoading" class="card card-plain mt-3">
   <div class="card-body">
     <br/>
     <div class="row text-center">

diff --git a/src/web/app/pages-session/session-result-page/session-result-page.component.spec.ts b/src/web/app/pages-session/session-result-page/session-result-page.component.spec.ts
@@ -243,6 +243,9 @@ describe('SessionResultPageComponent', () => {
     feedbackSessionService = TestBed.inject(FeedbackSessionsService);
     logService = TestBed.inject(LogService);
     component = fixture.componentInstance;
+    // Set both loading flags to false initially for testing purposes only
+    component.isFeedbackSessionDetailsLoading = false;
+    component.isFeedbackSessionResultsLoading = false;
     fixture.detectChanges();
   });
 
@@ -254,13 +257,22 @@ describe('SessionResultPageComponent', () => {
     expect(fixture).toMatchSnapshot();
   });
 
-  it('should snap with session results are loading', () => {
+  it('should snap with session details and results are loading', () => {
+    component.isFeedbackSessionDetailsLoading = true;
+    component.isFeedbackSessionResultsLoading = true;
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+
+  it('should snap with session details loaded and results are loading', () => {
+    component.isFeedbackSessionDetailsLoading = false;
     component.isFeedbackSessionResultsLoading = true;
     fixture.detectChanges();
     expect(fixture).toMatchSnapshot();
   });
 
   it('should snap when session results failed to load', () => {
+    component.isFeedbackSessionDetailsLoading = false;
     component.isFeedbackSessionResultsLoading = false;
     component.hasFeedbackSessionResultsLoadingFailed = true;
     fixture.detectChanges();

diff --git a/src/web/app/pages-session/session-result-page/session-result-page.component.ts b/src/web/app/pages-session/session-result-page/session-result-page.component.ts
@@ -69,7 +69,8 @@ export class SessionResultPageComponent implements OnInit {
 
   intent: Intent = Intent.STUDENT_RESULT;
 
-  isFeedbackSessionResultsLoading: boolean = false;
+  isFeedbackSessionDetailsLoading: boolean = true;
+  isFeedbackSessionResultsLoading: boolean = true;
   hasFeedbackSessionResultsLoadingFailed: boolean = false;
   retryAttempts: number = DEFAULT_NUMBER_OF_RETRY_ATTEMPTS;
 
@@ -201,13 +202,16 @@ export class SessionResultPageComponent implements OnInit {
   }
 
   private loadFeedbackSession(): void {
+    this.isFeedbackSessionDetailsLoading = true;
     this.isFeedbackSessionResultsLoading = true;
     this.feedbackSessionsService.getFeedbackSession({
       courseId: this.courseId,
       feedbackSessionName: this.feedbackSessionName,
       intent: this.intent,
       key: this.regKey,
-    }).subscribe((feedbackSession: FeedbackSession) => {
+    })
+    .pipe(finalize(() => { this.isFeedbackSessionDetailsLoading = false; }))
+    .subscribe((feedbackSession: FeedbackSession) => {
       const TIME_FORMAT: string = 'ddd, DD MMM, YYYY, hh:mm A zz';
       this.session = feedbackSession;
       this.formattedSessionOpeningTime = this.timezoneService