From 5d51ab0a43c1166016e9bc7e3d03262dea6cfb95 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Mon, 25 Nov 2024 16:35:33 -0800
Subject: [PATCH] refactor(SummaryDisplay): Convert components to standalone
 (#2002)

---
 src/app/teacher/classroom-monitor.module.ts   |  6 ++---
 .../student-summary-display.component.spec.ts | 11 +++-----
 .../student-summary-display.component.ts      |  9 +++++--
 .../summary-display.component.html            | 10 ++++---
 .../summary-display.component.ts              |  8 ++++--
 .../summary-display/summary-display.module.ts |  9 +++++--
 .../teacher-summary-display.component.ts      | 11 +++++---
 src/messages.xlf                              | 26 +++++++++----------
 8 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/src/app/teacher/classroom-monitor.module.ts b/src/app/teacher/classroom-monitor.module.ts
index fbb3501002a..d37ecd42cfc 100644
--- a/src/app/teacher/classroom-monitor.module.ts
+++ b/src/app/teacher/classroom-monitor.module.ts
@@ -6,7 +6,7 @@ import { ComponentNewWorkBadgeComponent } from '../classroom-monitor/component-n
 import { ComponentSelectComponent } from '../classroom-monitor/component-select/component-select.component';
 import { StepInfoComponent } from '../classroom-monitor/step-info/step-info.component';
 import { PeerGroupGradingModule } from './peer-group-grading.module';
-import { TeacherSummaryDisplay } from '../../assets/wise5/directives/teacher-summary-display/teacher-summary-display.component';
+import { TeacherSummaryDisplayComponent } from '../../assets/wise5/directives/teacher-summary-display/teacher-summary-display.component';
 import { HighchartsChartModule } from 'highcharts-angular';
 import { StudentTeacherCommonModule } from '../student-teacher-common.module';
 import { NodeInfoComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component';
@@ -55,7 +55,6 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     StudentGradingComponent,
     StudentGradingToolsComponent,
     StudentProgressComponent,
-    TeacherSummaryDisplay,
     ToolBarComponent,
     TopBarComponent,
     ViewComponentRevisionsComponent
@@ -79,7 +78,8 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     SelectPeriodComponent,
     StepInfoComponent,
     StepToolsComponent,
-    StudentTeacherCommonModule
+    StudentTeacherCommonModule,
+    TeacherSummaryDisplayComponent
   ]
 })
 export class ClassroomMonitorModule {}
diff --git a/src/assets/wise5/directives/student-summary-display/student-summary-display.component.spec.ts b/src/assets/wise5/directives/student-summary-display/student-summary-display.component.spec.ts
index 23f21b5c8df..fcbfaaebc09 100644
--- a/src/assets/wise5/directives/student-summary-display/student-summary-display.component.spec.ts
+++ b/src/assets/wise5/directives/student-summary-display/student-summary-display.component.spec.ts
@@ -1,7 +1,4 @@
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDialogModule } from '@angular/material/dialog';
 import { StudentTeacherCommonServicesModule } from '../../../../app/student-teacher-common-services.module';
 import { ComponentContent } from '../../common/ComponentContent';
 import { ConfigService } from '../../services/configService';
@@ -15,11 +12,9 @@ let fixture: ComponentFixture<StudentSummaryDisplay>;
 describe('StudentSummaryDisplayComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [StudentSummaryDisplay],
-    schemas: [NO_ERRORS_SCHEMA],
-    imports: [MatDialogModule, StudentTeacherCommonServicesModule],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-});
+      imports: [StudentSummaryDisplay, StudentTeacherCommonServicesModule],
+      providers: [provideHttpClient(withInterceptorsFromDi())]
+    });
     fixture = TestBed.createComponent(StudentSummaryDisplay);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/src/assets/wise5/directives/student-summary-display/student-summary-display.component.ts b/src/assets/wise5/directives/student-summary-display/student-summary-display.component.ts
index e6769fdc384..25cb24e7fa0 100644
--- a/src/assets/wise5/directives/student-summary-display/student-summary-display.component.ts
+++ b/src/assets/wise5/directives/student-summary-display/student-summary-display.component.ts
@@ -6,11 +6,16 @@ import { SummaryService } from '../../components/summary/summaryService';
 import { SummaryDisplay } from '../summary-display/summary-display.component';
 import { StudentDataService } from '../../services/studentDataService';
 import { Subscription } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { HighchartsChartModule } from 'highcharts-angular';
 
 @Component({
+  imports: [CommonModule, HighchartsChartModule, MatCardModule],
   selector: 'student-summary-display',
-  templateUrl: '../summary-display/summary-display.component.html',
-  styleUrls: ['../summary-display/summary-display.component.scss']
+  standalone: true,
+  styleUrl: '../summary-display/summary-display.component.scss',
+  templateUrl: '../summary-display/summary-display.component.html'
 })
 export class StudentSummaryDisplay extends SummaryDisplay {
   private studentWorkSavedToServerSubscription: Subscription;
diff --git a/src/assets/wise5/directives/summary-display/summary-display.component.html b/src/assets/wise5/directives/summary-display/summary-display.component.html
index d5d2cf900ce..d3af9269cd3 100644
--- a/src/assets/wise5/directives/summary-display/summary-display.component.html
+++ b/src/assets/wise5/directives/summary-display/summary-display.component.html
@@ -1,9 +1,11 @@
-<mat-card appearance="outlined" *ngIf="nodeId != null && componentId != null" class="summary-card">
+<mat-card appearance="outlined" class="summary-card">
   <mat-card-content>
-    <p *ngIf="hasWarning" class="warn center">{{ warningMessage }}</p>
-    <div *ngIf="doRender && chartConfig != null">
+    @if (hasWarning) {
+      <p class="warn center">{{ warningMessage }}</p>
+    }
+    @if (doRender && chartConfig != null) {
       <highcharts-chart [Highcharts]="Highcharts" [options]="chartConfig" class="highcharts-chart">
       </highcharts-chart>
-    </div>
+    }
   </mat-card-content>
 </mat-card>
diff --git a/src/assets/wise5/directives/summary-display/summary-display.component.ts b/src/assets/wise5/directives/summary-display/summary-display.component.ts
index 806f3cd6fab..25c08b92de7 100644
--- a/src/assets/wise5/directives/summary-display/summary-display.component.ts
+++ b/src/assets/wise5/directives/summary-display/summary-display.component.ts
@@ -11,11 +11,15 @@ import { copy } from '../../common/object/object';
 import { rgbToHex } from '../../common/color/color';
 import { DataService } from '../../../../app/services/data.service';
 import { StudentDataService } from '../../services/studentDataService';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
+  imports: [CommonModule, MatCardModule],
   selector: 'summary-display',
-  templateUrl: 'summary-display.component.html',
-  styleUrls: ['summary-display.component.scss']
+  standalone: true,
+  styleUrl: 'summary-display.component.scss',
+  templateUrl: 'summary-display.component.html'
 })
 export abstract class SummaryDisplay {
   chartConfig: any;
diff --git a/src/assets/wise5/directives/summary-display/summary-display.module.ts b/src/assets/wise5/directives/summary-display/summary-display.module.ts
index 5fc6ba0e2d6..9287e2cbd5c 100644
--- a/src/assets/wise5/directives/summary-display/summary-display.module.ts
+++ b/src/assets/wise5/directives/summary-display/summary-display.module.ts
@@ -5,8 +5,13 @@ import { StudentComponentModule } from '../../../../app/student/student.componen
 import { StudentSummaryDisplay } from '../student-summary-display/student-summary-display.component';
 
 @NgModule({
-  declarations: [StudentSummaryDisplay],
-  imports: [StudentTeacherCommonModule, HighchartsChartModule, StudentComponentModule],
+  declarations: [],
+  imports: [
+    StudentSummaryDisplay,
+    StudentTeacherCommonModule,
+    HighchartsChartModule,
+    StudentComponentModule
+  ],
   exports: [StudentSummaryDisplay]
 })
 export class SummaryDisplayModule {}
diff --git a/src/assets/wise5/directives/teacher-summary-display/teacher-summary-display.component.ts b/src/assets/wise5/directives/teacher-summary-display/teacher-summary-display.component.ts
index 278e4cae28a..3638200eb0d 100644
--- a/src/assets/wise5/directives/teacher-summary-display/teacher-summary-display.component.ts
+++ b/src/assets/wise5/directives/teacher-summary-display/teacher-summary-display.component.ts
@@ -5,13 +5,18 @@ import { ProjectService } from '../../services/projectService';
 import { SummaryService } from '../../components/summary/summaryService';
 import { SummaryDisplay } from '../summary-display/summary-display.component';
 import { TeacherDataService } from '../../services/teacherDataService';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { HighchartsChartModule } from 'highcharts-angular';
 
 @Component({
+  imports: [CommonModule, HighchartsChartModule, MatCardModule],
   selector: 'teacher-summary-display',
-  templateUrl: '../summary-display/summary-display.component.html',
-  styleUrls: ['../summary-display/summary-display.component.scss']
+  standalone: true,
+  styleUrl: '../summary-display/summary-display.component.scss',
+  templateUrl: '../summary-display/summary-display.component.html'
 })
-export class TeacherSummaryDisplay extends SummaryDisplay {
+export class TeacherSummaryDisplayComponent extends SummaryDisplay {
   constructor(
     protected annotationService: AnnotationService,
     protected configService: ConfigService,
diff --git a/src/messages.xlf b/src/messages.xlf
index 0b82916f1a2..b444f89b30c 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -19706,11 +19706,11 @@ Warning: This will delete all existing choices and buckets in this component.</s
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">570</context>
+          <context context-type="linenumber">574</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">680</context>
+          <context context-type="linenumber">684</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2496818939481806999" datatype="html">
@@ -19721,11 +19721,11 @@ Warning: This will delete all existing choices and buckets in this component.</s
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">570</context>
+          <context context-type="linenumber">574</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">684</context>
+          <context context-type="linenumber">688</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3309404570196522710" datatype="html">
@@ -21574,63 +21574,63 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>The student will see a graph of their individual data here.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">150</context>
+          <context context-type="linenumber">154</context>
         </context-group>
       </trans-unit>
       <trans-unit id="629070935308008546" datatype="html">
         <source>Your Response</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">704</context>
+          <context context-type="linenumber">708</context>
         </context-group>
       </trans-unit>
       <trans-unit id="610707389788117365" datatype="html">
         <source>Your Score</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">706</context>
+          <context context-type="linenumber">710</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1159047178964534522" datatype="html">
         <source>Period Responses</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">713</context>
+          <context context-type="linenumber">717</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6903542619561738551" datatype="html">
         <source>Period Scores</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">718</context>
+          <context context-type="linenumber">722</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2142002953999044695" datatype="html">
         <source>Class Responses</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">727</context>
+          <context context-type="linenumber">731</context>
         </context-group>
       </trans-unit>
       <trans-unit id="489297649750722424" datatype="html">
         <source>Class Scores</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">732</context>
+          <context context-type="linenumber">736</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4270887249744454870" datatype="html">
         <source><x id="PH" equiv-text="this.percentResponded"/>% Responded (<x id="PH_1" equiv-text="this.numResponses"/>/<x id="PH_2" equiv-text="this.totalWorkgroups"/>)</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">743</context>
+          <context context-type="linenumber">747</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8177873832400820695" datatype="html">
         <source>Count</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/summary-display/summary-display.component.ts</context>
-          <context context-type="linenumber">860</context>
+          <context context-type="linenumber">864</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d53b401d14b43833857138029db823612e52f518" datatype="html">