refactor(VLEComponent): Convert to standalone (#1951)

WISE-Community · Sep 20, 2024 · 81815fe · 81815fe
1 parent 23add31
commit 81815fe
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 114 deletions.
diff --git a/src/app/student/vle/student-vle.module.ts b/src/app/student/vle/student-vle.module.ts
@@ -1,19 +1,14 @@
 import '../../../assets/wise5/lib/jquery/jquery-global';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
-import { MatListModule } from '@angular/material/list';
 import { ComponentStudentModule } from '../../../assets/wise5/components/component/component-student.module';
 import { GenerateImageDialogComponent } from '../../../assets/wise5/directives/generate-image-dialog/generate-image-dialog.component';
-import { SafeUrl } from '../../../assets/wise5/directives/safeUrl/safe-url.pipe';
 import { SimpleDialogModule } from '../../../assets/wise5/directives/simple-dialog.module';
 import { SummaryDisplayModule } from '../../../assets/wise5/directives/summary-display/summary-display.module';
 import { InitializeVLEService } from '../../../assets/wise5/services/initializeVLEService';
 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 { 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';
@@ -26,41 +21,22 @@ import { PauseScreenService } from '../../../assets/wise5/services/pauseScreenSe
 import { StudentNotificationService } from '../../../assets/wise5/services/studentNotificationService';
 import { NotificationService } from '../../../assets/wise5/services/notificationService';
 import { VLEParentComponent } from '../../../assets/wise5/vle/vle-parent/vle-parent.component';
-import { RunEndedAndLockedMessageComponent } from '../../../assets/wise5/vle/run-ended-and-locked-message/run-ended-and-locked-message.component';
-import { NodeNavigationComponent } from '../../../assets/wise5/directives/node-navigation/node-navigation.component';
-import { GroupTabsComponent } from '../../../assets/wise5/directives/group-tabs/group-tabs.component';
 import { StudentPeerGroupService } from '../../../assets/wise5/services/studentPeerGroupService';
 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: [
-    ChooseBranchPathDialogComponent,
-    GenerateImageDialogComponent,
-    SafeUrl,
-    VLEComponent,
-    VLEParentComponent
-  ],
+  declarations: [ChooseBranchPathDialogComponent, GenerateImageDialogComponent, VLEParentComponent],
   imports: [
     CommonModule,
     ComponentStudentModule,
-    GroupTabsComponent,
     MatDialogModule,
-    NavigationComponent,
-    NodeComponent,
-    NodeNavigationComponent,
-    NodeStatusIconComponent,
-    RunEndedAndLockedMessageComponent,
     SimpleDialogModule,
-    StepToolsComponent,
     StudentAssetsDialogModule,
     StudentComponentModule,
     StudentTeacherCommonModule,
     StudentVLERoutingModule,
     SummaryDisplayModule,
-    TopBarComponent
+    VLEComponent
   ],
   providers: [
     InitializeVLEService,
@@ -71,7 +47,6 @@ import { NodeComponent } from '../../../assets/wise5/vle/node/node.component';
     { provide: ProjectService, useExisting: VLEProjectService },
     StudentNotificationService,
     VLEProjectService
-  ],
-  exports: [CommonModule, MatButtonModule, MatDialogModule, MatListModule]
+  ]
 })
 export class StudentVLEModule {}
diff --git a/src/assets/wise5/directives/safeUrl/safe-url.pipe.ts b/src/assets/wise5/directives/safeUrl/safe-url.pipe.ts
@@ -2,7 +2,8 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Pipe({
-  name: 'safeUrl'
+  name: 'safeUrl',
+  standalone: true
 })
 export class SafeUrl implements PipeTransform {
   constructor(private sanitizer: DomSanitizer) {}

diff --git a/src/assets/wise5/vle/vle-parent/vle-parent.component.ts b/src/assets/wise5/vle/vle-parent/vle-parent.component.ts
@@ -5,7 +5,6 @@ import { StudentDataService } from '../../services/studentDataService';
 import { VLEProjectService } from '../vleProjectService';
 
 @Component({
-  selector: 'vle-parent',
   templateUrl: './vle-parent.component.html'
 })
 export class VLEParentComponent implements OnInit {

diff --git a/src/assets/wise5/vle/vle.component.html b/src/assets/wise5/vle/vle.component.html
@@ -1,37 +1,47 @@
 <link rel="stylesheet" href="/assets/wise5/themes/default/style/angular-material.css" />
 <link rel="stylesheet" href="/assets/wise5/themes/default/style/vle.css" />
 <link rel="stylesheet" [href]="projectStylePath | safeUrl" />
-<mat-drawer-container [hasBackdrop]="false" *ngIf="initialized">
-  <mat-drawer #drawer mode="over" position="end" (keydown.escape)="closeNotes()">
-    <notebook-notes [config]="notebookConfig" />
-  </mat-drawer>
-  <mat-drawer-content>
-    <top-bar [projectName]="project.metadata.title"></top-bar>
-    <ng-container *ngTemplateOutlet="vleTemplate"></ng-container>
-    @if (reportEnabled) {
-      <notebook-report
-        [ngClass]="{ 'notes-visible': notesVisible, 'report-full': reportFullscreen }"
-        [config]="notebookConfig"
-      />
-    }
-    <notebook-launcher *ngIf="notesEnabled && !notesVisible" [notebookConfig]="notebookConfig" />
-  </mat-drawer-content>
-</mat-drawer-container>
+@if (initialized) {
+  <mat-drawer-container [hasBackdrop]="false">
+    <mat-drawer #drawer mode="over" position="end" (keydown.escape)="closeNotes()">
+      <notebook-notes [config]="notebookConfig" />
+    </mat-drawer>
+    <mat-drawer-content>
+      <top-bar [projectName]="project.metadata.title" />
+      <ng-container *ngTemplateOutlet="vleTemplate"></ng-container>
+      @if (reportEnabled) {
+        <notebook-report
+          [ngClass]="{ 'notes-visible': notesVisible, 'report-full': reportFullscreen }"
+          [config]="notebookConfig"
+        />
+      }
+      @if (notesEnabled && !notesVisible) {
+        <notebook-launcher [notebookConfig]="notebookConfig" />
+      }
+    </mat-drawer-content>
+  </mat-drawer-container>
+}
 
 <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" />
+  @if (layoutState === 'node') {
+    <step-tools class="control-bg-bg mat-elevation-z1" />
+  }
   <div
     id="content"
     class="vle-content"
     [ngClass]="{ 'nav-view': layoutState === 'nav', 'node-view': layoutState === 'node' }"
   >
-    <run-ended-and-locked-message *ngIf="runEndedAndLocked" class="notice" />
+    @if (runEndedAndLocked) {
+      <run-ended-and-locked-message class="notice" />
+    }
     @if (layoutState === 'node') {
       <node class="top" [node]="currentNode" />
     }
-    <navigation *ngIf="layoutState === 'nav'" class="top"></navigation>
+    @if (layoutState === 'nav') {
+      <navigation class="top" />
+    }
   </div>
 </ng-template>
 
@@ -43,7 +53,9 @@
   >
     <group-tabs />
     <div class="tab-content">
-      <run-ended-and-locked-message *ngIf="runEndedAndLocked" />
+      @if (runEndedAndLocked) {
+        <run-ended-and-locked-message />
+      }
       @if (layoutState === 'node') {
         <node class="node-tabbed top" [node]="currentNode" />
       }

diff --git a/src/assets/wise5/vle/vle.component.spec.ts b/src/assets/wise5/vle/vle.component.spec.ts
@@ -1,33 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDialogModule } from '@angular/material/dialog';
 import { ConfigService } from '../services/configService';
 import { NotebookService } from '../services/notebookService';
 import { VLEProjectService } from './vleProjectService';
 import { VLEComponent } from './vle.component';
 import { StudentDataService } from '../services/studentDataService';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { TopBarComponent } from '../../../app/student/top-bar/top-bar.component';
-import { NodeComponent } from './node/node.component';
-import { NotebookNotesComponent } from '../../../app/notebook/notebook-notes/notebook-notes.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatIconModule } from '@angular/material/icon';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatBadgeModule } from '@angular/material/badge';
-import { NavigationComponent } from '../themes/default/navigation/navigation.component';
-import { StepToolsComponent } from '../themes/default/themeComponents/stepTools/step-tools.component';
-import { MatSelectModule } from '@angular/material/select';
-import { NodeStatusIconComponent } from '../themes/default/themeComponents/nodeStatusIcon/node-status-icon.component';
-import { NodeIconComponent } from './node-icon/node-icon.component';
-import { FormsModule } from '@angular/forms';
 import { InitializeVLEService } from '../services/initializeVLEService';
 import { StudentTeacherCommonServicesModule } from '../../../app/student-teacher-common-services.module';
 import { PauseScreenService } from '../services/pauseScreenService';
 import { StudentNotificationService } from '../services/studentNotificationService';
-import { SafeUrl } from '../../../assets/wise5/directives/safeUrl/safe-url.pipe';
 import { provideRouter } from '@angular/router';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
@@ -39,36 +20,14 @@ let saveVLEEventSpy: jasmine.Spy;
 describe('VLEComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SafeUrl, VLEComponent],
-      imports: [
-        BrowserAnimationsModule,
-        FormsModule,
-        MatBadgeModule,
-        MatDialogModule,
-        MatDividerModule,
-        MatIconModule,
-        MatMenuModule,
-        MatProgressSpinnerModule,
-        MatToolbarModule,
-        MatSelectModule,
-        MatSidenavModule,
-        NavigationComponent,
-        NodeComponent,
-        NodeIconComponent,
-        NodeStatusIconComponent,
-        NotebookNotesComponent,
-        StepToolsComponent,
-        StudentTeacherCommonServicesModule,
-        TopBarComponent
-      ],
+      imports: [BrowserAnimationsModule, VLEComponent, StudentTeacherCommonServicesModule],
       providers: [
         InitializeVLEService,
         PauseScreenService,
         provideRouter([]),
         StudentNotificationService,
         VLEProjectService,
-        provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting()
+        provideHttpClient(withInterceptorsFromDi())
       ]
     }).compileComponents();
   });

diff --git a/src/assets/wise5/vle/vle.component.ts b/src/assets/wise5/vle/vle.component.ts
@@ -16,31 +16,58 @@ import { convertToPNGFile } from '../common/canvas/canvas';
 import { NodeStatusService } from '../services/nodeStatusService';
 import { Node } from '../common/Node';
 import { SafeResourceUrl } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { NotebookNotesComponent } from '../../../app/notebook/notebook-notes/notebook-notes.component';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { SafeUrl } from '../directives/safeUrl/safe-url.pipe';
+import { NodeNavigationComponent } from '../directives/node-navigation/node-navigation.component';
+import { GroupTabsComponent } from '../directives/group-tabs/group-tabs.component';
+import { TopBarComponent } from '../../../app/student/top-bar/top-bar.component';
+import { NotebookReportComponent } from '../../../app/notebook/notebook-report/notebook-report.component';
+import { NotebookLauncherComponent } from '../../../app/notebook/notebook-launcher/notebook-launcher.component';
+import { StepToolsComponent } from '../themes/default/themeComponents/stepTools/step-tools.component';
+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';
 
 @Component({
+  imports: [
+    CommonModule,
+    GroupTabsComponent,
+    MatSidenavModule,
+    NavigationComponent,
+    NodeComponent,
+    NodeNavigationComponent,
+    NotebookLauncherComponent,
+    NotebookNotesComponent,
+    NotebookReportComponent,
+    RunEndedAndLockedMessageComponent,
+    SafeUrl,
+    StepToolsComponent,
+    TopBarComponent
+  ],
   selector: 'vle',
-  templateUrl: './vle.component.html',
-  styleUrls: ['./vle.component.scss']
+  standalone: true,
+  styleUrl: './vle.component.scss',
+  templateUrl: './vle.component.html'
 })
 export class VLEComponent implements AfterViewInit {
+  protected currentNode: Node;
   @ViewChild('defaultVLETemplate') private defaultVLETemplate: TemplateRef<any>;
   @ViewChild('drawer') public drawer: any;
+  protected initialized: boolean;
+  protected layoutState: string;
+  protected notebookConfig: any;
+  protected notesEnabled: boolean = false;
+  protected notesVisible: boolean = false;
+  protected project: any;
+  protected projectStylePath: SafeResourceUrl;
+  protected reportEnabled: boolean = false;
+  protected reportFullscreen: boolean = false;
+  protected runEndedAndLocked: boolean;
+  private subscriptions: Subscription = new Subscription();
   @ViewChild('tabbedVLETemplate') private tabbedVLETemplate: TemplateRef<any>;
-
-  currentNode: Node;
-  initialized: boolean;
-  layoutState: string;
-  notebookConfig: any;
-  notesEnabled: boolean = false;
-  notesVisible: boolean = false;
-  project: any;
-  projectStylePath: SafeResourceUrl;
-  reportEnabled: boolean = false;
-  reportFullscreen: boolean = false;
-  rootNode: any;
-  runEndedAndLocked: boolean;
-  subscriptions: Subscription = new Subscription();
-  vleTemplate: TemplateRef<any>;
+  protected vleTemplate: TemplateRef<any>;
 
   constructor(
     private annotationService: AnnotationService,
@@ -73,7 +100,7 @@ export class VLEComponent implements AfterViewInit {
     this.wiseLinkService.addWiseLinkClickedListener();
   }
 
-  initRestOfVLE() {
+  private initRestOfVLE(): void {
     this.setProject();
     this.vleTemplate =
       this.projectService.project.theme === 'tab'
@@ -122,7 +149,6 @@ export class VLEComponent implements AfterViewInit {
 
   private setProject(): void {
     this.project = this.projectService.getProject();
-    this.rootNode = this.projectService.rootNode;
     this.setCurrentNode();
   }
 

diff --git a/src/messages.xlf b/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">168</context>
+          <context context-type="linenumber">194</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">169</context>
+          <context context-type="linenumber">195</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3407061818321766940" datatype="html">