refactor(ChooseBranchPathDialogComponent): Convert to standalone (#1952)

src/app/preview/modules/choose-branch-path-dialog/choose-branch-path-dialog.component.html

@@ -6,10 +6,12 @@ <h2 mat-dialog-title i18n>Choose a Branch Path</h2>
     chosen a branch, complete the current step and then click the Next arrow.
   </p>
   <mat-list>
-    <mat-list-item *ngFor="let path of paths">
-      <button mat-flat-button [mat-dialog-close]="path.transition">
-        <span>{{ path.nodeTitle }}</span>
-      </button>
-    </mat-list-item>
+    @for (path of paths; track path) {
+      <mat-list-item>
+        <button mat-flat-button [mat-dialog-close]="path.transition">
+          <span>{{ path.nodeTitle }}</span>
+        </button>
+      </mat-list-item>
+    }
   </mat-list>
 </mat-dialog-content>

src/app/preview/modules/choose-branch-path-dialog/choose-branch-path-dialog.component.spec.ts

@@ -1,21 +1,17 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ChooseBranchPathDialogComponent } from './choose-branch-path-dialog.component';
-import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 describe('ChooseBranchPathDialogComponent', () => {
   let component: ChooseBranchPathDialogComponent;
   let fixture: ComponentFixture<ChooseBranchPathDialogComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        providers: [MatDialogModule, { provide: MAT_DIALOG_DATA, useValue: {} }],
-        declarations: [ChooseBranchPathDialogComponent],
-        schemas: [NO_ERRORS_SCHEMA]
-      }).compileComponents();
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      providers: [{ provide: MAT_DIALOG_DATA, useValue: [] }],
+      imports: [ChooseBranchPathDialogComponent]
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ChooseBranchPathDialogComponent);

src/app/preview/modules/choose-branch-path-dialog/choose-branch-path-dialog.component.ts

@@ -1,17 +1,16 @@
-import { Component, OnInit, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatListModule } from '@angular/material/list';
 
 @Component({
+  imports: [CommonModule, MatButtonModule, MatDialogModule, MatListModule],
   selector: 'app-choose-branch-path-dialog',
-  templateUrl: './choose-branch-path-dialog.component.html',
-  styleUrls: ['./choose-branch-path-dialog.component.scss']
+  standalone: true,
+  styleUrl: './choose-branch-path-dialog.component.scss',
+  templateUrl: './choose-branch-path-dialog.component.html'
 })
-export class ChooseBranchPathDialogComponent implements OnInit {
-  paths: any[];
-
-  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
-    this.paths = data.paths;
-  }
-
-  ngOnInit(): void {}
+export class ChooseBranchPathDialogComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) protected paths: any) {}
 }

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

@@ -13,7 +13,6 @@ import { StudentAssetsDialogModule } from '../../../assets/wise5/vle/studentAsse
 import { VLEComponent } from '../../../assets/wise5/vle/vle.component';
 import { VLEProjectService } from '../../../assets/wise5/vle/vleProjectService';
 import { StudentTeacherCommonModule } from '../../student-teacher-common.module';
-import { ChooseBranchPathDialogComponent } from '../../preview/modules/choose-branch-path-dialog/choose-branch-path-dialog.component';
 import { DataService } from '../../services/data.service';
 import { StudentComponentModule } from '../student.component.module';
 import { StudentVLERoutingModule } from './student-vle-routing.module';
@@ -25,7 +24,7 @@ import { StudentPeerGroupService } from '../../../assets/wise5/services/studentP
 import { PeerGroupService } from '../../../assets/wise5/services/peerGroupService';
 
 @NgModule({
-  declarations: [ChooseBranchPathDialogComponent, GenerateImageDialogComponent, VLEParentComponent],
+  declarations: [GenerateImageDialogComponent, VLEParentComponent],
   imports: [
     CommonModule,
     ComponentStudentModule,

src/assets/wise5/services/nodeService.ts

@@ -261,10 +261,7 @@ export class NodeService {
       paths.push(path);
     }
     const dialogRef = this.dialog.open(ChooseBranchPathDialogComponent, {
-      data: {
-        paths: paths,
-        nodeId: nodeId
-      },
+      data: paths,
       disableClose: true
     });
     dialogRef.afterClosed().subscribe((result) => {

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

@@ -29,10 +29,12 @@ import { StepToolsComponent } from '../themes/default/themeComponents/stepTools/
 import { RunEndedAndLockedMessageComponent } from './run-ended-and-locked-message/run-ended-and-locked-message.component';
 import { NodeComponent } from './node/node.component';
 import { NavigationComponent } from '../themes/default/navigation/navigation.component';
+import { ChooseBranchPathDialogComponent } from '../../../app/preview/modules/choose-branch-path-dialog/choose-branch-path-dialog.component';
 
 @Component({
   imports: [
     CommonModule,
+    ChooseBranchPathDialogComponent,
     GroupTabsComponent,
     MatSidenavModule,
     NavigationComponent,

src/messages.xlf

@@ -10026,7 +10026,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/vle.component.ts</context>
-          <context context-type="linenumber">194</context>
+          <context context-type="linenumber">196</context>
         </context-group>
       </trans-unit>
       <trans-unit id="537022937435161177" datatype="html">
@@ -10041,7 +10041,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/vle.component.ts</context>
-          <context context-type="linenumber">195</context>
+          <context context-type="linenumber">197</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3407061818321766940" datatype="html">