[#13174] Add toggle to hide self responses on feedback results page

angular.json

@@ -34,6 +34,7 @@
               "src/web/robots.txt"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/web/styles.scss"
             ]
           },

package.json

@@ -34,6 +34,7 @@
     "@ng-bootstrap/ng-bootstrap": "^15.1.2",
     "@popperjs/core": "^2.11.8",
     "@tinymce/tinymce-angular": "^7.0.0",
+    "bootstrap": "^5.3.3",
     "d3": "^7.8.5",
     "file-saver": "^2.0.5",
     "firebase": "^10.7.2",

src/web/app/components/question-response-panel/question-response-panel.component.html

@@ -35,7 +35,7 @@
               <strong>Other responses (to you): </strong>Responses are not visible to you.
             </div>
           </ng-template>
-          <div class="given-responses mt-4" *ngIf="question.responsesFromSelf.length">
+          <div class="given-responses mt-4" *ngIf="question.responsesFromSelf.length && !hideSelfResponses">
             <strong>Your own responses (to others):</strong>
             <div *ngFor="let responseFromSelf of question.responsesFromSelf">
               <tm-student-view-responses [responses]="[responseFromSelf]" [isSelfResponses]="true" [feedbackQuestion]="question.feedbackQuestion" [timezone]="session.timeZone" [statistics]="question.questionStatistics"></tm-student-view-responses>

src/web/app/components/question-response-panel/question-response-panel.component.ts

@@ -25,6 +25,9 @@ import { FeedbackQuestionModel } from '../../pages-session/session-result-page/s
 })
 export class QuestionResponsePanelComponent {
 
+  @Input()
+  hideSelfResponses: boolean = false;
+
   readonly RESPONSE_HIDDEN_QUESTIONS: FeedbackQuestionType[] = [
     FeedbackQuestionType.CONTRIB,
   ];

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

@@ -1,3 +1,8 @@
+<!-- Add 'Hide my own responses' Switch-->
+<div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" id="hideOwnResponses" [(ngModel)]="hideSelfResponses">
+    <label class="form-check-label" for="hideOwnResponses">Hide my own responses</label>
+</div>
 <h1>
   Feedback Session Results
 </h1>
@@ -82,6 +87,7 @@ <h4>Previewing Session Results as
     </div>
     <tm-question-response-panel [questions]="questions" [session]="session"
                                 [intent]="intent" [regKey]="regKey" [previewAsPerson]="previewAsPerson"
+                                [hideSelfResponses]="hideSelfResponses"
     ></tm-question-response-panel>
   </div>
 </tm-loading-retry>

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

@@ -59,6 +59,7 @@ export class SessionResultPageComponent implements OnInit {
 
   // enum
   Intent: typeof Intent = Intent;
+  hideSelfResponses: boolean = false;
 
   session: FeedbackSession = {
     courseId: '',
@@ -96,7 +97,6 @@ export class SessionResultPageComponent implements OnInit {
 
   previewAsPerson: string = '';
   isPreviewHintExpanded: boolean = false;
-
   isCourseLoading: boolean = true;
   isFeedbackSessionDetailsLoading: boolean = true;
   isFeedbackSessionResultsLoading: boolean = true;

src/web/app/pages-session/session-result-page/session-result-page.module.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 
 import { SessionResultPageComponent } from './session-result-page.component';
@@ -23,16 +24,17 @@ const routes: Routes = [
  * Module for feedback session result page.
  */
 @NgModule({
-  imports: [
-    CommonModule,
-    QuestionTextWithInfoModule,
-    StudentViewResponsesModule,
-    SingleStatisticsModule,
-    RouterModule.forChild(routes),
-    LoadingSpinnerModule,
-    LoadingRetryModule,
-    QuestionResponsePanelModule,
-  ],
+    imports: [
+        CommonModule,
+        QuestionTextWithInfoModule,
+        StudentViewResponsesModule,
+        SingleStatisticsModule,
+        RouterModule.forChild(routes),
+        LoadingSpinnerModule,
+        LoadingRetryModule,
+        QuestionResponsePanelModule,
+        FormsModule,
+    ],
   declarations: [
     SessionResultPageComponent,
   ],