refactor(NodeInfoComponent): Convert to standalone

src/app/classroom-monitor/show-node-info-dialog/show-node-info-dialog.component.html

@@ -1,8 +1,8 @@
 <h2 mat-dialog-title>{{ stepNumberAndTitle }}</h2>
 <mat-dialog-content #nodeInfoDiv class="dialog-content-scroll">
-  <node-info [nodeId]="nodeId"></node-info>
+  <node-info [nodeId]="nodeId" />
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <button mat-button (click)="openInNewWindow()" i18n>Open in New Window</button>
   <button mat-button (click)="close()" i18n>Close</button>
-</mat-dialog-actions>
+</mat-dialog-actions>

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([]);

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,

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.html

@@ -1,62 +1,61 @@
-<mat-card appearance="outlined" *ngIf="nodeContent.rubric" class="rubric">
-  <mat-card-title fxLayoutAlign="start center" fxLayoutGap="8px">
-    <mat-icon class="mat-24 info">info</mat-icon>
-    <span class="mat-subtitle-2" i18n>Step Info</span>
-  </mat-card-title>
-  <mat-card-content [innerHTML]="nodeContent.rubric"> </mat-card-content>
-</mat-card>
+@if (node.rubric) {
+  <mat-card appearance="outlined" class="rubric">
+    <mat-card-title fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-icon class="mat-24 info">info</mat-icon>
+      <span class="mat-subtitle-2" i18n>Step Info</span>
+    </mat-card-title>
+    <mat-card-content [innerHTML]="node.rubric" />
+  </mat-card>
+}
 <mat-card appearance="outlined" class="node-info">
   <mat-card-content>
-    <div
-      id="component_{{ component.id }}"
-      class="component"
-      *ngFor="let component of nodeContent.components; first as isFirst"
-    >
-      <mat-divider class="item-divider divider--dashed" *ngIf="!isFirst"></mat-divider>
-      <h3
-        *ngIf="component.isStudentWorkGenerated"
-        class="accent-1 mat-subtitle-2 gray-lightest-bg component-header"
-      >
-        {{ component.assessmentItemIndex + '. ' + component.typeLabel }}&nbsp;
-      </h3>
-      <preview-component [component]="component.component" [periodId]="periodId" />
-      <mat-card
-        appearance="outlined"
-        *ngIf="component.rubric"
-        class="rubric component-rubric mat-elevation-z0 notice-bg-bg"
-      >
-        <mat-card-title class="mat-subtitle-2" fxLayoutAlign="start center" fxLayoutGap="8px">
-          <mat-icon class="mat-24 info">info</mat-icon>
-          <span i18n>Item Info</span>
-        </mat-card-title>
-        <mat-card-content class="app-bg-bg" [innerHTML]="component.rubric"> </mat-card-content>
-      </mat-card>
-      <div *ngIf="component.hasResponsesSummary">
-        <teacher-summary-display
-          *ngIf="component.type === 'MultipleChoice'"
-          [nodeId]="nodeId"
-          [componentId]="component.id"
-          [periodId]="periodId"
-          [studentDataType]="'responses'"
-          [source]="source"
-          [highlightCorrectAnswer]="component.hasCorrectAnswer"
-          [chartType]="'column'"
-          [doRender]="true"
-        >
-        </teacher-summary-display>
-      </div>
-      <div *ngIf="component.hasScoresSummary && component.hasScoreAnnotation">
-        <teacher-summary-display
-          [nodeId]="nodeId"
-          [componentId]="component.id"
-          [periodId]="periodId"
-          [studentDataType]="'scores'"
-          [source]="source"
-          [chartType]="'column'"
-          [doRender]="true"
-        >
-        </teacher-summary-display>
+    @for (component of node.components; track component.id; let isFirst = $first) {
+      <div id="component_{{ component.id }}" class="component">
+        @if (!isFirst) {
+          <mat-divider class="item-divider divider--dashed" />
+        }
+        @if (component.isStudentWorkGenerated) {
+          <h3 class="accent-1 mat-subtitle-2 gray-lightest-bg component-header">
+            {{ component.assessmentItemIndex + '. ' + component.typeLabel }}&nbsp;
+          </h3>
+        }
+        <preview-component [component]="component.component" [periodId]="periodId" />
+        @if (component.rubric) {
+          <mat-card
+            appearance="outlined"
+            class="rubric component-rubric mat-elevation-z0 notice-bg-bg"
+          >
+            <mat-card-title class="mat-subtitle-2" fxLayoutAlign="start center" fxLayoutGap="8px">
+              <mat-icon class="mat-24 info">info</mat-icon>
+              <span i18n>Item Info</span>
+            </mat-card-title>
+            <mat-card-content class="app-bg-bg" [innerHTML]="component.rubric" />
+          </mat-card>
+        }
+        @if (component.hasResponsesSummary && component.type === 'MultipleChoice') {
+          <teacher-summary-display
+            [nodeId]="nodeId"
+            [componentId]="component.id"
+            [periodId]="periodId"
+            [studentDataType]="'responses'"
+            [source]="source"
+            [highlightCorrectAnswer]="component.hasCorrectAnswer"
+            [chartType]="'column'"
+            [doRender]="true"
+          />
+        }
+        @if (component.hasScoresSummary && component.hasScoreAnnotation) {
+          <teacher-summary-display
+            [nodeId]="nodeId"
+            [componentId]="component.id"
+            [periodId]="periodId"
+            [studentDataType]="'scores'"
+            [source]="source"
+            [chartType]="'column'"
+            [doRender]="true"
+          />
+        }
       </div>
-    </div>
+    }
   </mat-card-content>
 </mat-card>

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.ts

@@ -7,46 +7,63 @@ import { TeacherDataService } from '../../../../services/teacherDataService';
 import { TeacherProjectService } from '../../../../services/teacherProjectService';
 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',
-  styleUrls: ['node-info.component.scss'],
+  standalone: true,
+  styleUrl: 'node-info.component.scss',
   templateUrl: 'node-info.component.html'
 })
 export class NodeInfoComponent {
-  nodeContent: any;
+  protected node: Node;
   @Input() nodeId: string;
-  periodId: number;
-  source: string;
+  protected periodId: number;
+  protected source: 'allPeriods' | 'period';
 
   constructor(
     private annotationService: AnnotationService,
     private componentServiceLookupService: ComponentServiceLookupService,
     private componentTypeService: ComponentTypeService,
+    private dataService: TeacherDataService,
     private projectService: TeacherProjectService,
-    private summaryService: SummaryService,
-    private teacherDataService: TeacherDataService
+    private summaryService: SummaryService
   ) {}
 
-  ngOnInit() {
-    this.periodId = this.teacherDataService.getCurrentPeriodId();
+  ngOnInit(): void {
+    this.periodId = this.dataService.getCurrentPeriodId();
     this.source = this.periodId === -1 ? 'allPeriods' : 'period';
-    this.nodeContent = this.projectService.getNodeById(this.nodeId);
-    if (this.nodeContent.rubric != null) {
-      this.nodeContent.rubric = this.projectService.replaceAssetPaths(this.nodeContent.rubric);
+    this.node = this.projectService.getNode(this.nodeId);
+    if (this.node.rubric != null) {
+      this.node.rubric = this.projectService.replaceAssetPaths(this.node.rubric);
     }
     this.populateComponentFields();
   }
 
   private populateComponentFields(): void {
     let assessmentItemIndex = 1;
-    for (const component of this.nodeContent.components) {
+    for (const component of this.node.components) {
       component.typeLabel = this.componentTypeService.getComponentTypeLabel(component.type);
       component.rubric = this.projectService.replaceAssetPaths(component.rubric);
       component.hasCorrectAnswer = this.componentHasCorrectAnswer(component);
-      component.hasResponsesSummary = this.summaryService.isResponsesSummaryAvailableForComponentType(
-        component.type
-      );
+      component.hasResponsesSummary =
+        this.summaryService.isResponsesSummaryAvailableForComponentType(component.type);
       component.hasScoresSummary = this.summaryService.isScoresSummaryAvailableForComponentType(
         component.type
       );
@@ -59,8 +76,7 @@ export class NodeInfoComponent {
       if (component.isStudentWorkGenerated) {
         component.assessmentItemIndex = assessmentItemIndex++;
       }
-      const factory = new ComponentFactory();
-      component.component = factory.getComponent(
+      component.component = new ComponentFactory().getComponent(
         this.projectService.injectAssetPaths(component),
         this.nodeId
       );
@@ -78,7 +94,8 @@ export class NodeInfoComponent {
   }
 
   private componentHasCorrectAnswer(component: any): boolean {
-    const service = this.componentServiceLookupService.getService(component.type);
-    return service.componentHasCorrectAnswer(component);
+    return this.componentServiceLookupService
+      .getService(component.type)
+      .componentHasCorrectAnswer(component);
   }
 }

src/messages.xlf

@@ -13865,7 +13865,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.html</context>
-          <context context-type="linenumber">4</context>
+          <context context-type="linenumber">5</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/node/node.component.html</context>