refactor(NodeInfoComponent): Convert to standalone and simplify templ…

…ate structure
WISE-Community · Nov 26, 2024 · 9581e89 · 9581e89
1 parent 220bdbc
commit 9581e89
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 30 deletions.
diff --git a/src/app/classroom-monitor/show-node-info-dialog/show-node-info-dialog.component.spec.ts b/src/app/classroom-monitor/show-node-info-dialog/show-node-info-dialog.component.spec.ts
@@ -1,20 +1,13 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatCardModule } from '@angular/material/card';
 import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { PreviewComponentComponent } from '../../../assets/wise5/authoringTool/components/preview-component/preview-component.component';
 import { ClassroomMonitorTestingModule } from '../../../assets/wise5/classroomMonitor/classroom-monitor-testing.module';
 import { NodeInfoComponent } from '../../../assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component';
-import { OpenResponseStudent } from '../../../assets/wise5/components/openResponse/open-response-student/open-response-student.component';
-import { ComponentHeaderComponent } from '../../../assets/wise5/directives/component-header/component-header.component';
 import { NotebookService } from '../../../assets/wise5/services/notebookService';
 import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { TeacherDataService } from '../../../assets/wise5/services/teacherDataService';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
 import { VLEProjectService } from '../../../assets/wise5/vle/vleProjectService';
 import { ShowNodeInfoDialogComponent } from './show-node-info-dialog.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentTypeServiceModule } from '../../../assets/wise5/services/componentTypeService.module';
 
 let component: ShowNodeInfoDialogComponent;
@@ -42,29 +35,25 @@ const node: any = {
 describe('ShowNodeInfoDialogComponents', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [NodeInfoComponent, OpenResponseStudent, ShowNodeInfoDialogComponent],
+      declarations: [ShowNodeInfoDialogComponent],
       imports: [
         ClassroomMonitorTestingModule,
-        ComponentHeaderComponent,
         ComponentTypeServiceModule,
-        MatCardModule,
         MatDialogModule,
-        MatIconModule,
-        MatToolbarModule,
-        PreviewComponentComponent
+        NodeInfoComponent
       ],
       providers: [
         { provide: MAT_DIALOG_DATA, useValue: nodeId1 },
         { provide: MatDialogRef, useValue: {} }
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
+      ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(ShowNodeInfoDialogComponent);
     component = fixture.componentInstance;
     component.nodeId = nodeId1;
     spyOn(TestBed.inject(TeacherDataService), 'getCurrentPeriodId').and.returnValue(1);
     spyOn(TestBed.inject(TeacherProjectService), 'getNodeById').and.returnValue(node);
+    spyOn(TestBed.inject(ProjectService), 'getThemeSettings').and.returnValue({});
     spyOn(TestBed.inject(ProjectService), 'getNodeById').and.returnValue(node);
     spyOn(TestBed.inject(ProjectService), 'getNodePositionById').and.returnValue('1.1');
     spyOn(TestBed.inject(VLEProjectService), 'getSpaces').and.returnValue([]);

diff --git a/src/app/teacher/classroom-monitor.module.ts b/src/app/teacher/classroom-monitor.module.ts
@@ -43,7 +43,6 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     AlertStatusCornerComponent,
     ClassroomMonitorComponent,
     NavItemComponent,
-    NodeInfoComponent,
     NodeGradingViewComponent,
     NodeProgressViewComponent,
     NotebookGradingComponent,
@@ -70,6 +69,7 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     ManageStudentsModule,
     MilestoneModule,
     NavItemScoreComponent,
+    NodeInfoComponent,
     PeerGroupGradingModule,
     PreviewComponentComponent,
     ProjectProgressComponent,

diff --git a/...se5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.html b/...se5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.html
@@ -42,22 +42,18 @@ <h3 class="accent-1 mat-subtitle-2 gray-lightest-bg component-header">
             [highlightCorrectAnswer]="component.hasCorrectAnswer"
             [chartType]="'column'"
             [doRender]="true"
-          >
-          </teacher-summary-display>
+          />
         }
         @if (component.hasScoresSummary && component.hasScoreAnnotation) {
-          <div>
-            <teacher-summary-display
-              [nodeId]="nodeId"
-              [componentId]="component.id"
-              [periodId]="periodId"
-              [studentDataType]="'scores'"
-              [source]="source"
-              [chartType]="'column'"
-              [doRender]="true"
-            >
-            </teacher-summary-display>
-          </div>
+          <teacher-summary-display
+            [nodeId]="nodeId"
+            [componentId]="component.id"
+            [periodId]="periodId"
+            [studentDataType]="'scores'"
+            [source]="source"
+            [chartType]="'column'"
+            [doRender]="true"
+          />
         }
       </div>
     }

diff --git a/...wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.ts b/...wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.ts
@@ -8,9 +8,26 @@ import { TeacherProjectService } from '../../../../services/teacherProjectServic
 import { ComponentFactory } from '../../../../common/ComponentFactory';
 import { isMatchingPeriods } from '../../../../common/period/period';
 import { Node } from '../../../../common/Node';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { PreviewComponentComponent } from '../../../../authoringTool/components/preview-component/preview-component.component';
+import { TeacherSummaryDisplayComponent } from '../../../../directives/teacher-summary-display/teacher-summary-display.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatIconModule,
+    MatDividerModule,
+    FlexLayoutModule,
+    PreviewComponentComponent,
+    TeacherSummaryDisplayComponent
+  ],
   selector: 'node-info',
+  standalone: true,
   styleUrl: 'node-info.component.scss',
   templateUrl: 'node-info.component.html'
 })