refactor(Student StepTools): Convert to standalone (#1820)

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

@@ -43,21 +43,21 @@ import { NodeStatusIconComponent } from '../../../assets/wise5/themes/default/th
     NodeNavigationComponent,
     RunEndedAndLockedMessageComponent,
     SafeUrl,
-    StepToolsComponent,
     VLEComponent,
     VLEParentComponent
   ],
   imports: [
-    StudentTeacherCommonModule,
     CommonModule,
     ComponentStudentModule,
     MatDialogModule,
     NavigationComponent,
     NodeModule,
     NodeStatusIconComponent,
     SimpleDialogModule,
+    StepToolsComponent,
     StudentAssetsDialogModule,
     StudentComponentModule,
+    StudentTeacherCommonModule,
     StudentVLERoutingModule,
     SummaryDisplayModule,
     TopBarComponent

src/assets/wise5/common/stepTools/step-tools.component.html

@@ -2,8 +2,6 @@
   <button
     id="previousNodeButton"
     mat-icon-button
-    aria-label="Previous Step"
-    i18n-aria-label
     [disabled]="!prevId"
     (click)="goToPrevNode()"
     matTooltip="Previous Step"
@@ -17,8 +15,6 @@
     <mat-select
       id="stepSelectMenu"
       [panelClass]="'select-panel-full-height'"
-      aria-label="Select a Step"
-      i18n-aria-label
       placeholder="Select a Step"
       i18n-placeholder
       [(ngModel)]="nodeId"
@@ -44,8 +40,6 @@
   <button
     id="nextNodeButton"
     mat-icon-button
-    aria-label="Next Step"
-    i18n-aria-label
     [disabled]="!nextId"
     (click)="goToNextNode()"
     matTooltip="Next Step"

src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html

@@ -12,8 +12,9 @@
       <mat-icon>{{ icons.prev }}</mat-icon>
     </button>
     <div class="node-icon-div">
-      <node-icon [nodeId]="nodeId" size="18" [icon]="nodeStatus.icon"></node-icon>
-    </div>&nbsp;
+      <node-icon [nodeId]="nodeId" size="18" [icon]="nodeStatus.icon"/>
+    </div>
+    &nbsp;
     <mat-form-field appearance="fill">
       <mat-select
         [panelClass]="'select-panel-full-height'"
@@ -28,26 +29,27 @@
         <mat-select-trigger>
           {{ getNodePositionAndTitle(nodeId) }}
         </mat-select-trigger>
-        <ng-container *ngFor="let nodeId of nodeIds">
-          <mat-option *ngIf="nodeStatuses[nodeId].isVisible" [value]="nodeId">
-            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-              <node-icon
-                [nodeId]="nodeId"
-                size="18"
-                [icon]="nodeStatuses[nodeId].icon"
-                custom-class="node-select__icon"
-              >
-              </node-icon>
-              <span [ngClass]="{ strong: isGroupNode(nodeId) }">{{
-                getNodePositionAndTitle(nodeId)
-              }}</span>
-            </div>
-          </mat-option>
-        </ng-container>
+        @for (nodeId of nodeIds; track nodeId) {
+          @if (nodeStatuses[nodeId].isVisible) {
+            <mat-option [value]="nodeId">
+              <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+                <node-icon
+                  [nodeId]="nodeId"
+                  size="18"
+                  [icon]="nodeStatuses[nodeId].icon"
+                  custom-class="node-select__icon"
+                />
+                <span [ngClass]="{ strong: isGroupNode(nodeId) }">{{
+                  getNodePositionAndTitle(nodeId)
+                }}</span>
+              </div>
+            </mat-option>
+          }
+        }
       </mat-select>
     </mat-form-field>
     <div class="node-status-div">
-      <node-status-icon [nodeId]="nodeId"></node-status-icon>
+      <node-status-icon [nodeId]="nodeId"/>
     </div>
     <button
       mat-icon-button

src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.spec.ts

@@ -1,23 +1,16 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
-import { NodeIconComponent } from '../../../../vle/node-icon/node-icon.component';
 import { ProjectService } from '../../../../services/projectService';
 import { StudentDataService } from '../../../../services/studentDataService';
-import { NodeStatusIconComponent } from '../nodeStatusIcon/node-status-icon.component';
 import { StepToolsComponent } from './step-tools.component';
 import { StudentTeacherCommonServicesModule } from '../../../../../../app/student-teacher-common-services.module';
 import { NodeStatusService } from '../../../../services/nodeStatusService';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 const nodeId1 = 'node1';
-const nodeId2 = 'node2';
 const nodeStatus1 = { icon: '', isCompleted: true };
 const nodeStatus2 = { icon: '', isCompleted: false };
-let getCurrentNodeIdSpy;
+let getCurrentNodeIdSpy: jasmine.Spy;
 
 describe('StepToolsComponent', () => {
   let component: StepToolsComponent;
@@ -26,17 +19,11 @@ describe('StepToolsComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        FormsModule,
         HttpClientTestingModule,
-        MatDialogModule,
-        MatIconModule,
-        MatSelectModule,
-        NodeIconComponent,
-        NodeStatusIconComponent,
         NoopAnimationsModule,
+        StepToolsComponent,
         StudentTeacherCommonServicesModule
-      ],
-      declarations: [StepToolsComponent]
+      ]
     }).compileComponents();
   });
 
@@ -56,23 +43,7 @@ describe('StepToolsComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should calculate node ids', () => {
-    expect(component.nodeIds).toEqual([]);
-    TestBed.inject(ProjectService).idToOrder = {
-      group0: { order: 0 },
-      node1: { order: 1 },
-      node2: { order: 2 }
-    };
-    component.calculateNodeIds();
-    expect(component.nodeIds).toEqual(['node1', 'node2']);
-  });
-
-  it('should update model', () => {
-    expect(component.nodeId).toEqual(nodeId1);
-    expect(component.nodeStatus).toEqual(nodeStatus1);
-    getCurrentNodeIdSpy.and.returnValue(nodeId2);
-    component.updateModel();
-    expect(component.nodeId).toEqual(nodeId2);
-    expect(component.nodeStatus).toEqual(nodeStatus2);
+  it('should create', () => {
+    expect(component).toBeTruthy();
   });
 });

src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.ts

@@ -4,25 +4,47 @@ import { NodeService } from '../../../../services/nodeService';
 import { NodeStatusService } from '../../../../services/nodeStatusService';
 import { ProjectService } from '../../../../services/projectService';
 import { StudentDataService } from '../../../../services/studentDataService';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { NodeIconComponent } from '../../../../vle/node-icon/node-icon.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NodeStatusIconComponent } from '../nodeStatusIcon/node-status-icon.component';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    FormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatSelectModule,
+    MatTooltipModule,
+    NodeIconComponent,
+    NodeStatusIconComponent
+  ],
   selector: 'step-tools',
-  templateUrl: './step-tools.component.html',
-  styleUrls: ['./step-tools.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  standalone: true,
+  styleUrl: './step-tools.component.scss',
+  templateUrl: './step-tools.component.html'
 })
 export class StepToolsComponent implements OnInit {
-  icons: any;
-  idToOrder: any;
-  is_rtl: boolean;
-  nextId: string;
-  nodeId: string;
-  nodeIds: string[];
-  nodeStatus: any;
-  nodeStatuses: any;
-  prevId: string;
-  subscriptions: Subscription = new Subscription();
-  toNodeId: string;
+  protected icons: any;
+  protected is_rtl: boolean;
+  protected nextId: string;
+  protected nodeId: string;
+  protected nodeIds: string[];
+  protected nodeStatus: any;
+  protected nodeStatuses: any;
+  protected prevId: string;
+  private subscriptions: Subscription = new Subscription();
+  protected toNodeId: string;
 
   constructor(
     private nodeService: NodeService,
@@ -39,12 +61,11 @@ export class StepToolsComponent implements OnInit {
     }
     this.calculateNodeIds();
     this.nodeStatuses = this.nodeStatusService.getNodeStatuses();
-    this.idToOrder = this.projectService.idToOrder;
     this.updateModel();
     this.subscribeToChanges();
   }
 
-  subscribeToChanges(): void {
+  private subscribeToChanges(): void {
     this.subscriptions.add(
       this.studentDataService.currentNodeChanged$.subscribe(() => {
         this.updateModel();
@@ -61,16 +82,16 @@ export class StepToolsComponent implements OnInit {
     this.subscriptions.unsubscribe();
   }
 
-  calculateNodeIds(): void {
+  private calculateNodeIds(): void {
     this.nodeIds = Object.keys(this.projectService.idToOrder);
     this.nodeIds.shift(); // remove the 'group0' master root node from consideration
   }
 
-  toNodeIdChanged(): void {
+  protected toNodeIdChanged(): void {
     this.nodeService.setCurrentNode(this.toNodeId);
   }
 
-  updateModel(): void {
+  private updateModel(): void {
     const nodeId = this.studentDataService.getCurrentNodeId();
     if (!this.projectService.isGroupNode(nodeId)) {
       this.nodeId = nodeId;
@@ -84,35 +105,23 @@ export class StepToolsComponent implements OnInit {
     }
   }
 
-  getTemplateUrl(): string {
-    return this.projectService.getThemePath() + '/themeComponents/stepTools/stepTools.html';
-  }
-
-  getNodeTitle(nodeId: string): string {
-    return this.projectService.getNodeTitle(nodeId);
-  }
-
-  getNodePositionById(nodeId: string): string {
-    return this.projectService.getNodePositionById(nodeId);
-  }
-
-  getNodePositionAndTitle(nodeId: string): string {
+  protected getNodePositionAndTitle(nodeId: string): string {
     return this.projectService.getNodePositionAndTitle(nodeId);
   }
 
-  isGroupNode(nodeId: string): boolean {
+  protected isGroupNode(nodeId: string): boolean {
     return this.projectService.isGroupNode(nodeId);
   }
 
-  goToPrevNode(): void {
+  protected goToPrevNode(): void {
     this.nodeService.goToPrevNode();
   }
 
-  goToNextNode(): void {
+  protected goToNextNode(): void {
     this.nodeService.goToNextNode();
   }
 
-  closeNode(): void {
+  protected closeNode(): void {
     this.nodeService.closeNode();
   }
 }

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

@@ -22,7 +22,7 @@
 <div id="wise-link-communicator" class="wise-link-communicator"></div>
 
 <ng-template #defaultVLETemplate>
-  <step-tools *ngIf="layoutState === 'node'" class="control-bg-bg mat-elevation-z1"></step-tools>
+  <step-tools *ngIf="layoutState === 'node'" class="control-bg-bg mat-elevation-z1"/>
   <div
     id="content"
     class="vle-content"

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

@@ -54,16 +54,11 @@ describe('VLEComponent', () => {
         NavigationComponent,
         NodeIconComponent,
         NodeStatusIconComponent,
+        StepToolsComponent,
         StudentTeacherCommonServicesModule,
         TopBarComponent
       ],
-      declarations: [
-        NodeComponent,
-        NotebookNotesComponent,
-        SafeUrl,
-        StepToolsComponent,
-        VLEComponent
-      ],
+      declarations: [NodeComponent, NotebookNotesComponent, SafeUrl, VLEComponent],
       providers: [
         InitializeVLEService,
         PauseScreenService,