feat(NodeGrading): Add show/hide toggle for class responses (#2282)

Author: breity

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html

@@ -54,12 +54,19 @@ <h3 class="mat-body-1" i18n>Question Summaries</h3>
     </div>
     <div class="flex gap-2 items-center flex-wrap mt-4 mb-2 mx-2">
       <h3 class="mat-body-1" i18n>Class Responses</h3>
-      <filter-components
-        [components]="components"
-        [selectedComponents]="visibleComponents"
-        (componentsChange)="setVisibleComponents($event)"
-      />
+      @if (classResponsesVisible) {
+        <filter-components
+          [components]="components"
+          [selectedComponents]="visibleComponents"
+          (componentsChange)="setVisibleComponents($event)"
+        />
+        <a href="#" class="mat-caption" (click)="toggleClassResponses($event)" i18n>Hide</a>
+      } @else {
+        <a href="#" class="mat-caption" (click)="toggleClassResponses($event)" i18n>Show</a>
+      }
     </div>
-    <node-class-responses [node]="node" [components]="visibleComponents" />
+    @if (classResponsesVisible) {
+      <node-class-responses [node]="node" [components]="visibleComponents" />
+    }
   </div>
 </div>

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.ts

@@ -44,6 +44,7 @@ import { AnnotationService } from '../../../../services/annotationService';
   templateUrl: './node-grading.component.html'
 })
 export class NodeGradingComponent implements OnInit, OnDestroy, OnChanges {
+  protected classResponsesVisible: boolean = true;
   protected components: ComponentContent[];
   protected hasWork: boolean;
   protected node: Node;
@@ -149,4 +150,9 @@ export class NodeGradingComponent implements OnInit, OnDestroy, OnChanges {
     this.selectedComponent.setValue(componentIndex);
     this.visibleComponents = [this.components[componentIndex]];
   }
+
+  protected toggleClassResponses(event: Event): void {
+    event.preventDefault();
+    this.classResponsesVisible = !this.classResponsesVisible;
+  }
 }

src/messages.xlf

@@ -14696,13 +14696,21 @@ The branches will be removed but the steps will remain in the unit.</source>
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html</context>
           <context context-type="linenumber">32,33</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html</context>
+          <context context-type="linenumber">64,65</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="8461842260159597706" datatype="html">
         <source>Show</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html</context>
           <context context-type="linenumber">34,37</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html</context>
+          <context context-type="linenumber">66,69</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="2142002953999044695" datatype="html">
         <source>Class Responses</source>