refactor(NodeComponent): Convert to standalone (#1888)

Author: hirokiterashima

src/app/student/vle/student-vle.module.ts

@@ -14,7 +14,6 @@ import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { StudentDataService } from '../../../assets/wise5/services/studentDataService';
 import { NavigationComponent } from '../../../assets/wise5/themes/default/navigation/navigation.component';
 import { StepToolsComponent } from '../../../assets/wise5/themes/default/themeComponents/stepTools/step-tools.component';
-import { NodeModule } from '../../../assets/wise5/vle/node/node.module';
 import { StudentAssetsDialogModule } from '../../../assets/wise5/vle/studentAsset/student-assets-dialog/student-assets-dialog.module';
 import { VLEComponent } from '../../../assets/wise5/vle/vle.component';
 import { VLEProjectService } from '../../../assets/wise5/vle/vleProjectService';
@@ -34,6 +33,7 @@ import { StudentPeerGroupService } from '../../../assets/wise5/services/studentP
 import { PeerGroupService } from '../../../assets/wise5/services/peerGroupService';
 import { TopBarComponent } from '../top-bar/top-bar.component';
 import { NodeStatusIconComponent } from '../../../assets/wise5/themes/default/themeComponents/nodeStatusIcon/node-status-icon.component';
+import { NodeComponent } from '../../../assets/wise5/vle/node/node.component';
 
 @NgModule({
   declarations: [
@@ -50,7 +50,7 @@ import { NodeStatusIconComponent } from '../../../assets/wise5/themes/default/th
     ComponentStudentModule,
     MatDialogModule,
     NavigationComponent,
-    NodeModule,
+    NodeComponent,
     NodeStatusIconComponent,
     RunEndedAndLockedMessageComponent,
     SimpleDialogModule,

src/assets/wise5/vle/node/node.component.html

@@ -4,64 +4,64 @@
     style="border-color: {{ nodeStatus?.icon?.color }}; position: relative;"
     fxLayout="row wrap"
   >
-    <div
-      *ngIf="showRubric"
-      class="node-content__rubric"
-      fxLayout="row"
-      fxLayoutAlign="center center"
-    >
-      <help-icon [content]="node.rubric" label="Step Info" i18n-label icon="info" />
-    </div>
-    <div
-      *ngFor="let component of components"
-      id="component_{{ component.id }}"
-      class="component"
-      fxFlex="100"
-      fxFlex.gt-sm="{{ component.componentWidth ? component.componentWidth : 100 }}"
-    >
-      <component
-        *ngIf="componentToVisible[component.id]"
-        [nodeId]="node.id"
-        [componentId]="component.id"
-        [componentState]="getComponentStateByComponentId(component.id)"
-        [workgroupId]="workgroupId"
-        (saveComponentStateEvent)="saveComponentState($event)"
-      />
-    </div>
+    @if (showRubric) {
+      <div class="node-content__rubric" fxLayout="row" fxLayoutAlign="center center">
+        <help-icon [content]="node.rubric" label="Step Info" i18n-label icon="info" />
+      </div>
+    }
+    @for (component of components; track component.id) {
+      <div
+        id="component_{{ component.id }}"
+        class="component"
+        fxFlex="100"
+        fxFlex.gt-sm="{{ component.componentWidth ? component.componentWidth : 100 }}"
+      >
+        @if (componentToVisible[component.id]) {
+          <component
+            [nodeId]="node.id"
+            [componentId]="component.id"
+            [componentState]="getComponentStateByComponentId(component.id)"
+            [workgroupId]="workgroupId"
+            (saveComponentStateEvent)="saveComponentState($event)"
+          />
+        }
+      </div>
+    }
     <div
       class="node-content__actions"
       fxLayout="row"
       fxLayoutAlign="start center"
       fxLayoutGap="12px"
     >
-      <button
-        *ngIf="node.showSaveButton"
-        mat-raised-button
-        color="primary"
-        (click)="saveButtonClicked()"
-        [disabled]="isDisabled || !dirtyComponentIds.length"
-        aria-label="Save"
-        i18n-aria-label
-        i18n
-      >
-        Save
-      </button>
-      <button
-        *ngIf="node.showSubmitButton"
-        mat-raised-button
-        color="primary"
-        (click)="submitButtonClicked()"
-        [disabled]="isDisabled || !dirtySubmitComponentIds.length"
-        aria-label="Submit"
-        i18n-aria-label
-        i18n
-      >
-        Submit
-      </button>
-      <component-state-info
-        *ngIf="latestComponentState && (node.showSaveButton || node.showSubmitButton)"
-        [componentState]="latestComponentState"
-      ></component-state-info>
+      @if (node.showSaveButton) {
+        <button
+          mat-raised-button
+          color="primary"
+          (click)="save()"
+          [disabled]="disabled || !dirtyComponentIds.length"
+          aria-label="Save"
+          i18n-aria-label
+          i18n
+        >
+          Save
+        </button>
+      }
+      @if (node.showSubmitButton) {
+        <button
+          mat-raised-button
+          color="primary"
+          (click)="submit()"
+          [disabled]="disabled || !dirtySubmitComponentIds.length"
+          aria-label="Submit"
+          i18n-aria-label
+          i18n
+        >
+          Submit
+        </button>
+      }
+      @if (latestComponentState && (node.showSaveButton || node.showSubmitButton)) {
+        <component-state-info [componentState]="latestComponentState" />
+      }
     </div>
   </div>
 </div>

src/assets/wise5/vle/node/node.component.spec.ts

@@ -1,6 +1,4 @@
-import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDialogModule } from '@angular/material/dialog';
 import { ConfigService } from '../../services/configService';
 import { StudentDataService } from '../../services/studentDataService';
 import { VLEProjectService } from '../vleProjectService';
@@ -15,9 +13,8 @@ let fixture: ComponentFixture<NodeComponent>;
 describe('NodeComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [NodeComponent],
-      imports: [MatDialogModule, StudentTeacherCommonServicesModule],
-      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+      imports: [NodeComponent, StudentTeacherCommonServicesModule],
+      providers: [provideHttpClient(withInterceptorsFromDi())]
     }).compileComponents();
   });
 

src/assets/wise5/vle/node/node.component.ts

@@ -13,29 +13,41 @@ import { SessionService } from '../../services/sessionService';
 import { StudentDataService } from '../../services/studentDataService';
 import { VLEProjectService } from '../vleProjectService';
 import { copy } from '../../common/object/object';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ComponentComponent } from '../../components/component/component.component';
+import { MatButtonModule } from '@angular/material/button';
+import { ComponentStateInfoComponent } from '../../common/component-state-info/component-state-info.component';
+import { HelpIconComponent } from '../../themes/default/themeComponents/helpIcon/help-icon.component';
 
 @Component({
+  imports: [
+    CommonModule,
+    ComponentComponent,
+    ComponentStateInfoComponent,
+    FlexLayoutModule,
+    HelpIconComponent,
+    MatButtonModule
+  ],
   selector: 'node',
-  templateUrl: './node.component.html',
-  styleUrls: ['./node.component.scss']
+  standalone: true,
+  styleUrl: './node.component.scss',
+  templateUrl: './node.component.html'
 })
 export class NodeComponent implements OnInit {
-  autoSaveInterval: number = 60000; // in milliseconds;
-  autoSaveIntervalId: any;
-  components: any[];
-  componentToVisible = {};
-  dirtyComponentIds: any = [];
-  dirtySubmitComponentIds: any = [];
-  isDisabled: boolean;
+  private autoSaveInterval: number = 60000; // in milliseconds;
+  private autoSaveIntervalId: any;
+  protected components: any[];
+  protected componentToVisible = {};
+  protected dirtyComponentIds: any = [];
+  protected dirtySubmitComponentIds: any = [];
+  protected disabled: boolean;
+  protected latestComponentState: ComponentState;
   @Input() node: Node;
-  nodeContent: any;
-  nodeStatus: any;
-  latestComponentState: ComponentState;
-  showRubric: boolean;
-  submit: boolean = false;
-  subscriptions: Subscription = new Subscription();
-  teacherWorkgroupId: number;
-  workComponents: string[] = [
+  protected nodeStatus: any;
+  protected showRubric: boolean;
+  private subscriptions: Subscription = new Subscription();
+  private workComponents: string[] = [
     'Animation',
     'AudioOscillator',
     'ConceptMap',
@@ -52,7 +64,7 @@ export class NodeComponent implements OnInit {
     'Summary',
     'Table'
   ];
-  workgroupId: number;
+  protected workgroupId: number;
 
   constructor(
     private componentService: ComponentService,
@@ -72,8 +84,7 @@ export class NodeComponent implements OnInit {
 
   ngOnInit(): void {
     this.workgroupId = this.configService.getWorkgroupId();
-    this.teacherWorkgroupId = this.configService.getTeacherWorkgroupId();
-    this.isDisabled = !this.configService.isRunActive();
+    this.disabled = !this.configService.isRunActive();
 
     this.initializeNode();
     this.startAutoSaveInterval();
@@ -82,18 +93,15 @@ export class NodeComponent implements OnInit {
     this.subscriptions.add(
       this.studentDataService.componentSaveTriggered$.subscribe(({ nodeId, componentId }) => {
         if (nodeId == this.node.id && this.node.hasComponent(componentId)) {
-          const isAutoSave = false;
-          this.createAndSaveComponentData(isAutoSave, componentId);
+          this.createAndSaveComponentData(false, componentId);
         }
       })
     );
 
     this.subscriptions.add(
       this.studentDataService.componentSubmitTriggered$.subscribe(({ nodeId, componentId }) => {
         if (nodeId == this.node.id && this.node.hasComponent(componentId)) {
-          const isAutoSave = false;
-          const isSubmit = true;
-          this.createAndSaveComponentData(isAutoSave, componentId, isSubmit);
+          this.createAndSaveComponentData(false, componentId, true);
         }
       })
     );
@@ -155,9 +163,8 @@ export class NodeComponent implements OnInit {
     );
   }
 
-  initializeNode(): void {
+  private initializeNode(): void {
     this.clearLatestComponentState();
-    this.nodeContent = this.projectService.getNodeById(this.node.id);
     this.components = this.getComponents();
     this.nodeStatus = this.nodeStatusService.getNodeStatusByNodeId(this.node.id);
     this.dirtyComponentIds = [];
@@ -178,7 +185,8 @@ export class NodeComponent implements OnInit {
       this.showRubric = this.node.rubric != null && this.node.rubric != '';
     }
 
-    const script = this.nodeContent.script;
+    const nodeContent = this.projectService.getNodeById(this.node.id);
+    const script = nodeContent.script;
     if (script != null) {
       this.projectService.retrieveScript(script).then((script: string) => {
         new Function(script).call(this);
@@ -198,21 +206,18 @@ export class NodeComponent implements OnInit {
     this.subscriptions.unsubscribe();
   }
 
-  saveButtonClicked(): void {
-    const isAutoSave = false;
-    this.createAndSaveComponentData(isAutoSave);
+  protected save(): void {
+    this.createAndSaveComponentData(false);
   }
 
-  submitButtonClicked(): void {
+  protected submit(): void {
     this.nodeService.broadcastNodeSubmitClicked({ nodeId: this.node.id });
-    const isAutoSave = false;
-    const isSubmit = true;
-    this.createAndSaveComponentData(isAutoSave, null, isSubmit);
+    this.createAndSaveComponentData(false, null, true);
   }
 
   private getComponents(): any[] {
     return this.node.components.map((component) => {
-      if (this.isDisabled) {
+      if (this.disabled) {
         component.isDisabled = true;
       }
       return component;
@@ -226,8 +231,7 @@ export class NodeComponent implements OnInit {
   private startAutoSaveInterval(): void {
     this.autoSaveIntervalId = setInterval(() => {
       if (this.dirtyComponentIds.length) {
-        const isAutoSave = true;
-        this.createAndSaveComponentData(isAutoSave);
+        this.createAndSaveComponentData(true);
       }
     }, this.autoSaveInterval);
   }
@@ -247,7 +251,7 @@ export class NodeComponent implements OnInit {
    * that needs saving
    */
   private createAndSaveComponentData(
-    isAutoSave,
+    isAutoSave: boolean,
     componentId = null,
     isSubmit = null
   ): Promise<any> {
@@ -256,7 +260,11 @@ export class NodeComponent implements OnInit {
     );
   }
 
-  private createComponentStatesResponseHandler(isAutoSave, componentId = null, isSubmit = null) {
+  private createComponentStatesResponseHandler(
+    isAutoSave: boolean,
+    componentId: string = null,
+    isSubmit: boolean = null
+  ) {
     return (componentStates) => {
       const componentAnnotations = this.getAnnotationsFromComponentStates(componentStates);
       componentStates.forEach((componentState: any) => {
@@ -400,7 +408,7 @@ export class NodeComponent implements OnInit {
   ): any {
     componentState.runId = this.configService.getRunId();
     componentState.periodId = this.configService.getPeriodId();
-    componentState.workgroupId = this.configService.getWorkgroupId();
+    componentState.workgroupId = this.workgroupId;
     componentState.isAutoSave = isAutoSave === true;
     componentState.isSubmit ??= isSubmit;
   }
@@ -429,7 +437,7 @@ export class NodeComponent implements OnInit {
     }
   }
 
-  getComponentStateByComponentId(componentId: string): any {
+  protected getComponentStateByComponentId(componentId: string): any {
     return this.studentDataService.getLatestComponentStateByNodeIdAndComponentId(
       this.node.id,
       componentId
@@ -444,7 +452,7 @@ export class NodeComponent implements OnInit {
     );
   }
 
-  saveComponentState($event: any): Promise<any> {
+  protected saveComponentState($event: any): Promise<any> {
     return Promise.all([$event.componentStatePromise]).then(
       this.createComponentStatesResponseHandler(true)
     );