feat(GradeByStep): Sync class responses with summary (#2269)

Only show first component when the page is first rendered, and synchronize component displayed between summary and class responses.

Author: hirokiterashima

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.spec.ts

@@ -35,6 +35,8 @@ function onlyOneComponent() {
           type: 'MultipleChoice'
         } as ComponentContent
       ];
+      component.selectedComponents = component.components;
+      component.ngOnChanges();
       fixture.detectChanges();
       select = await loader.getHarness(MatSelectHarness);
     });
@@ -57,6 +59,7 @@ function moreThanOneComponent() {
           type: 'OpenResponse'
         } as ComponentContent
       ];
+      component.selectedComponents = [component.components[0]];
       component.ngOnChanges();
       fixture.detectChanges();
       select = await loader.getHarness(MatSelectHarness);
@@ -66,14 +69,18 @@ function moreThanOneComponent() {
       const options = await select.getOptions();
       expect(options.length).toBe(2);
       expect(await options[0].isSelected()).toBe(true);
-      expect(await options[1].isSelected()).toBe(true);
+      expect(await options[1].isSelected()).toBe(false);
     });
     it('clicking on an option should emit selected components', async () => {
       const spy = spyOn(component.componentsChange, 'emit').and.callThrough();
       await select.open();
       const options = await select.getOptions();
-      await options[0].click();
+      await options[1].click();
       expect(spy).toHaveBeenCalledWith([
+        {
+          id: 'c1',
+          type: 'MultipleChoice'
+        } as ComponentContent,
         {
           id: 'c2',
           type: 'OpenResponse'

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.ts

@@ -19,13 +19,12 @@ export class FilterComponentsComponent {
   @Output() componentsChange: EventEmitter<ComponentContent[]> = new EventEmitter<
     ComponentContent[]
   >();
-  protected selectedComponents: ComponentContent[];
+  @Input() selectedComponents: ComponentContent[];
   protected selectedText: string;
 
   constructor(private componentTypeService: ComponentTypeService) {}
 
   ngOnChanges(): void {
-    this.selectedComponents = this.components;
     this.updateSelectedText();
   }
 

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

@@ -37,7 +37,7 @@ <h3 class="mat-body-1" i18n>Question Summaries</h3>
         <div class="mat-elevation-z1 app-background mt-4 mb-2">
           <mat-tab-group
             [selectedIndex]="selectedComponent.value"
-            (selectedIndexChange)="selectedComponent.setValue($event)"
+            (selectedIndexChange)="selectSummary($event)"
             mat-stretch-tabs="false"
             animationDuration="0"
           >
@@ -56,6 +56,7 @@ <h3 class="mat-body-1" i18n>Question Summaries</h3>
       <h3 class="mat-body-1" i18n>Class Responses</h3>
       <filter-components
         [components]="components"
+        [selectedComponents]="visibleComponents"
         (componentsChange)="setVisibleComponents($event)"
       />
     </div>

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

@@ -103,7 +103,7 @@ export class NodeGradingComponent implements OnInit, OnDestroy, OnChanges {
         component['displayIndex'] = index + 1;
         return component;
       });
-    this.visibleComponents = this.components;
+    this.visibleComponents = [this.components[0]];
     this.numRubrics = this.node.getNumRubrics();
     this.setPeriod();
   }
@@ -144,4 +144,9 @@ export class NodeGradingComponent implements OnInit, OnDestroy, OnChanges {
     event.preventDefault();
     this.summariesVisible = !this.summariesVisible;
   }
+
+  protected selectSummary(componentIndex: number): void {
+    this.selectedComponent.setValue(componentIndex);
+    this.visibleComponents = [this.components[componentIndex]];
+  }
 }

src/messages.xlf

@@ -14629,7 +14629,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         <source>Showing <x id="PH" equiv-text="this.selectedComponents.length"/>/<x id="PH_1" equiv-text="this.components.length"/> questions</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.ts</context>
-          <context context-type="linenumber">33</context>
+          <context context-type="linenumber">32</context>
         </context-group>
       </trans-unit>
       <trans-unit id="214737279674024315" datatype="html">