refactor(VLE): Convert all components to standalone (#2241)

Needed to change GenerateImageDialogComponent so it is opened by messages instead of by a function call in ComponentStudentComponent because this was causing circular dependency.

Author: hirokiterashima

src/app/services/notebookService.spec.ts

@@ -25,9 +25,9 @@ const teacherNotebookURL = 'http://localhost:8080/teacher/notebook/run/1';
 describe('NotebookService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    imports: [MatDialogModule, StudentTeacherCommonServicesModule],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-});
+      imports: [MatDialogModule, StudentTeacherCommonServicesModule],
+      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+    });
     http = TestBed.inject(HttpTestingController);
     configService = TestBed.inject(ConfigService);
     service = TestBed.inject(NotebookService);

src/app/student-teacher-common.module.ts

@@ -31,7 +31,6 @@ import { NotebookModule } from './notebook/notebook.module';
 import { MatSliderModule } from '@angular/material/slider';
 import { DialogResponsesComponent } from '../assets/wise5/components/dialogGuidance/dialog-responses/dialog-responses.component';
 import { HighchartsChartModule } from 'highcharts-angular';
-import { EditNotebookItemDialogModule } from '../assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.module';
 import { StudentTeacherCommonServicesModule } from './student-teacher-common-services.module';
 import { MathModule } from './math/math.module';
 import { MatMenuModule } from '@angular/material/menu';
@@ -42,7 +41,6 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
     CommonModule,
     DialogResponsesComponent,
     DragDropModule,
-    EditNotebookItemDialogModule,
     EditorModule,
     FormsModule,
     HighchartsChartModule,

src/app/student/top-bar/top-bar.component.html

@@ -62,7 +62,7 @@ <h3 class="title flex-grow px-2" [title]="projectName">{{ projectName }}</h3>
           i18n-aria-label
         >
         </mat-progress-spinner>
-        <student-account-menu #accountMenu></student-account-menu>
+        <student-account-menu #accountMenu />
         <button
           mat-icon-button
           [matMenuTriggerFor]="accountMenu?.menu"

src/app/student/top-bar/top-bar.component.ts

@@ -14,10 +14,8 @@ import { getAvatarColorForWorkgroupId } from '../../../assets/wise5/common/workg
 import { Language } from '../../domain/language';
 import { StudentProjectTranslationService } from '../../../assets/wise5/services/studentProjectTranslationService';
 import { ProjectLocale } from '../../domain/projectLocale';
-import { StudentAccountMenuModule } from '../../../assets/wise5/vle/student-account-menu/student-account-menu.module';
 import { MatButtonModule } from '@angular/material/button';
 import { CommonModule } from '@angular/common';
-import { DismissAmbientNotificationDialogModule } from '../../../assets/wise5/vle/dismiss-ambient-notification-dialog/dismiss-ambient-notification-dialog.module';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatBadgeModule } from '@angular/material/badge';
@@ -28,7 +26,6 @@ import { ProjectLanguageChooserComponent } from '../../common/project-language-c
 @Component({
   imports: [
     CommonModule,
-    DismissAmbientNotificationDialogModule,
     MatBadgeModule,
     MatButtonModule,
     MatDialogModule,
@@ -37,10 +34,10 @@ import { ProjectLanguageChooserComponent } from '../../common/project-language-c
     MatProgressSpinnerModule,
     MatToolbarModule,
     ProjectLanguageChooserComponent,
-    StudentAccountMenuModule
+    StudentAccountMenuComponent
   ],
   selector: 'top-bar',
-  styleUrls: ['./top-bar.component.scss'],
+  styleUrl: './top-bar.component.scss',
   templateUrl: 'top-bar.component.html'
 })
 export class TopBarComponent {
@@ -70,7 +67,7 @@ export class TopBarComponent {
     private projectTranslationService: StudentProjectTranslationService
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.avatarColor = getAvatarColorForWorkgroupId(this.configService.getWorkgroupId());
     this.logoURL = `${this.projectService.getThemePath()}/images/WISE-logo-ffffff.svg`;
     this.isPreview = this.configService.isPreview();
@@ -85,7 +82,7 @@ export class TopBarComponent {
     this.setHomeURL();
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }
 

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

@@ -3,8 +3,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { ComponentStudentModule } from '../../../assets/wise5/components/component/component-student.module';
-import { GenerateImageDialogComponent } from '../../../assets/wise5/directives/generate-image-dialog/generate-image-dialog.component';
-import { SimpleDialogModule } from '../../../assets/wise5/directives/simple-dialog.module';
 import { InitializeVLEService } from '../../../assets/wise5/services/initializeVLEService';
 import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { StudentDataService } from '../../../assets/wise5/services/studentDataService';
@@ -21,21 +19,22 @@ import { VLEParentComponent } from '../../../assets/wise5/vle/vle-parent/vle-par
 import { StudentPeerGroupService } from '../../../assets/wise5/services/studentPeerGroupService';
 import { PeerGroupService } from '../../../assets/wise5/services/peerGroupService';
 import { StudentAssetsDialogComponent } from '../../../assets/wise5/vle/studentAsset/student-assets-dialog/student-assets-dialog.component';
+import { GenerateImageService } from '../../../assets/wise5/services/generateImageService';
 
 @NgModule({
-  declarations: [GenerateImageDialogComponent, VLEParentComponent],
   imports: [
     CommonModule,
     ComponentStudentModule,
     MatDialogModule,
-    SimpleDialogModule,
     StudentAssetsDialogComponent,
     StudentComponentModule,
     StudentTeacherCommonModule,
     StudentVLERoutingModule,
-    VLEComponent
+    VLEComponent,
+    VLEParentComponent
   ],
   providers: [
+    GenerateImageService,
     InitializeVLEService,
     PauseScreenService,
     { provide: DataService, useExisting: StudentDataService },

src/assets/wise5/authoringTool/project-asset-authoring/project-asset-authoring.component.ts

@@ -7,19 +7,19 @@ import { isImage, isVideo } from '../../common/file/file';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AssetChooserDialogData } from './asset-chooser-dialog-data';
 import { CommonModule } from '@angular/common';
-import { DragAndDropModule } from '../../common/drag-and-drop/drag-and-drop.module';
 import { FileSizePipe } from '../file-size/filesize.pipe';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { DragAndDropDirective } from '../../common/drag-and-drop/drag-and-drop.directive';
 
 @Component({
   imports: [
     CommonModule,
-    DragAndDropModule,
+    DragAndDropDirective,
     FileSizePipe,
     FormsModule,
     MatButtonModule,

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/notifications-menu/notifications-menu.component.spec.ts

@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDialog } from '@angular/material/dialog';
 import { of } from 'rxjs';
 import { Notification } from '../../../../../../app/domain/notification';
-import { DialogWithConfirmComponent } from '../../../../directives/dialog-with-confirm/dialog-with-confirm.component';
 import { NotificationService } from '../../../../services/notificationService';
 import { ClassroomMonitorTestingModule } from '../../../classroom-monitor-testing.module';
 import { NotificationsMenuComponent } from './notifications-menu.component';
@@ -19,7 +18,6 @@ const notification2 = new Notification({ nodeId: NODE_ID_2 });
 describe('NotificationsMenuComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DialogWithConfirmComponent],
       imports: [ClassroomMonitorTestingModule, NotificationsMenuComponent],
       providers: [
         { provide: MatDialog, useValue: { open: () => {} } },

src/assets/wise5/common/drag-and-drop/drag-and-drop.directive.ts

@@ -1,9 +1,6 @@
 import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';
 
-@Directive({
-    selector: '[dragAndDrop]',
-    standalone: false
-})
+@Directive({ selector: '[dragAndDrop]' })
 export class DragAndDropDirective {
   constructor() {}
 

src/assets/wise5/common/drag-and-drop/drag-and-drop.module.ts

@@ -54,7 +54,6 @@
     <span class="flex flex-row items-center gap-2">
       <span i18n>Slower</span>
       <mat-slider
-        [ngModel]="speedSliderValue"
         [disabled]="isDisabled"
         (ngModelChange)="speedSliderChanged($event)"
         min="1"