refactor(VLE): Convert all components to standalone

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/components/animation/animation-student/animation-student.component.html

@@ -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"

src/assets/wise5/components/animation/animation-student/animation-student.component.spec.ts

@@ -1,12 +1,13 @@
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDialogModule } from '@angular/material/dialog';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { Component } from '../../../common/Component';
 import { AnimationService } from '../animationService';
 import { AnimationStudent } from './animation-student.component';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
+import { MockComponents } from 'ng-mocks';
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
+import { ComponentSaveSubmitButtonsComponent } from '../../../directives/component-save-submit-buttons/component-save-submit-buttons.component';
+import { ComponentAnnotationsComponent } from '../../../directives/componentAnnotations/component-annotations.component';
 
 let component: AnimationStudent;
 const componentId = 'component1';
@@ -38,11 +39,17 @@ const object1 = {
 describe('AnimationStudent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [AnimationStudent],
-    schemas: [NO_ERRORS_SCHEMA],
-    imports: [MatDialogModule, StudentTeacherCommonServicesModule],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-});
+      imports: [
+        AnimationStudent,
+        StudentTeacherCommonServicesModule,
+        MockComponents(
+          ComponentHeaderComponent,
+          ComponentSaveSubmitButtonsComponent,
+          ComponentAnnotationsComponent
+        )
+      ],
+      providers: [provideHttpClient()]
+    });
     fixture = TestBed.createComponent(AnimationStudent);
     component = fixture.componentInstance;
     const componentContent = TestBed.inject(AnimationService).createComponent();

src/assets/wise5/components/animation/animation-student/animation-student.component.ts

@@ -11,12 +11,31 @@ import { ComponentStudent } from '../../component-student.component';
 import { ComponentService } from '../../componentService';
 import { AnimationService } from '../animationService';
 import { hasConnectedComponent } from '../../../common/ComponentContent';
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
+import { MatButton } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatIcon } from '@angular/material/icon';
+import { MatSlider, MatSliderThumb } from '@angular/material/slider';
+import { FormsModule } from '@angular/forms';
+import { NgStyle } from '@angular/common';
+import { ComponentSaveSubmitButtonsComponent } from '../../../directives/component-save-submit-buttons/component-save-submit-buttons.component';
+import { ComponentAnnotationsComponent } from '../../../directives/componentAnnotations/component-annotations.component';
 
 @Component({
-    selector: 'animation-student',
-    templateUrl: 'animation-student.component.html',
-    styleUrls: ['animation-student.component.scss'],
-    standalone: false
+  imports: [
+    ComponentHeaderComponent,
+    MatButton,
+    MatTooltip,
+    MatIcon,
+    MatSlider,
+    FormsModule,
+    MatSliderThumb,
+    NgStyle,
+    ComponentSaveSubmitButtonsComponent,
+    ComponentAnnotationsComponent
+  ],
+  styles: ['.mat-icon { margin: 0px; } '],
+  templateUrl: 'animation-student.component.html'
 })
 export class AnimationStudent extends ComponentStudent {
   animationState: any = 'stopped';
@@ -32,7 +51,6 @@ export class AnimationStudent extends ComponentStudent {
   numTimesPlayClicked: number = 0;
   pixelsPerXUnit: number = 1;
   pixelsPerYUnit: number = 1;
-  speedSliderValue: number = 3;
   speedToMillisecondsPerDataTime = {
     1: 10000,
     2: 1000,
@@ -45,42 +63,42 @@ export class AnimationStudent extends ComponentStudent {
   width: number = 800;
 
   constructor(
-    private AnimationService: AnimationService,
-    protected AnnotationService: AnnotationService,
-    protected ComponentService: ComponentService,
-    protected ConfigService: ConfigService,
+    private animationService: AnimationService,
+    protected annotationService: AnnotationService,
+    protected componentService: ComponentService,
+    protected configService: ConfigService,
     protected dialog: MatDialog,
-    protected NodeService: NodeService,
-    protected NotebookService: NotebookService,
-    protected StudentAssetService: StudentAssetService,
-    protected StudentDataService: StudentDataService
+    protected nodeService: NodeService,
+    protected notebookService: NotebookService,
+    protected studentAssetService: StudentAssetService,
+    protected studentDataService: StudentDataService
   ) {
     super(
-      AnnotationService,
-      ComponentService,
-      ConfigService,
+      annotationService,
+      componentService,
+      configService,
       dialog,
-      NodeService,
-      NotebookService,
-      StudentAssetService,
-      StudentDataService
+      nodeService,
+      notebookService,
+      studentAssetService,
+      studentDataService
     );
   }
 
   ngOnInit(): void {
     super.ngOnInit();
-    const domIdEnding = this.AnimationService.getDomIdEnding(
+    const domIdEnding = this.animationService.getDomIdEnding(
       this.nodeId,
       this.componentId,
       this.componentState
     );
-    this.svgId = this.AnimationService.getSvgId(domIdEnding);
+    this.svgId = this.animationService.getSvgId(domIdEnding);
     this.initializeCoordinates();
 
     if (hasConnectedComponent(this.componentContent, 'showWork')) {
       this.handleConnectedComponents();
     } else if (
-      this.AnimationService.componentStateHasStudentWork(this.componentState, this.componentContent)
+      this.animationService.componentStateHasStudentWork(this.componentState, this.componentContent)
     ) {
       this.setStudentWork(this.componentState);
     } else if (this.component.hasConnectedComponent()) {
@@ -416,7 +434,7 @@ export class AnimationStudent extends ComponentStudent {
 
   updateObjectDataFromDataSource(object: any): void {
     const dataSource = object.dataSource;
-    const componentState = this.StudentDataService.getLatestComponentStateByNodeIdAndComponentId(
+    const componentState = this.studentDataService.getLatestComponentStateByNodeIdAndComponentId(
       dataSource.nodeId,
       dataSource.componentId
     );
@@ -740,7 +758,7 @@ export class AnimationStudent extends ComponentStudent {
       t: t
     };
 
-    this.StudentDataService.broadcastComponentStudentData({
+    this.studentDataService.broadcastComponentStudentData({
       nodeId: this.nodeId,
       componentId: this.componentId,
       componentState: componentState
@@ -971,12 +989,12 @@ export class AnimationStudent extends ComponentStudent {
    * @returns {object} The auto score annotation.
    */
   createAutoScoreAnnotation(data: any): any {
-    const runId = this.ConfigService.getRunId();
-    const periodId = this.ConfigService.getPeriodId();
+    const runId = this.configService.getRunId();
+    const periodId = this.configService.getPeriodId();
     const nodeId = this.nodeId;
     const componentId = this.componentId;
-    const toWorkgroupId = this.ConfigService.getWorkgroupId();
-    return this.AnnotationService.createAutoScoreAnnotation(
+    const toWorkgroupId = this.configService.getWorkgroupId();
+    return this.annotationService.createAutoScoreAnnotation(
       runId,
       periodId,
       nodeId,
@@ -991,12 +1009,12 @@ export class AnimationStudent extends ComponentStudent {
    * @returns {object} The auto comment annotation.
    */
   createAutoCommentAnnotation(data: any): any {
-    const runId = this.ConfigService.getRunId();
-    const periodId = this.ConfigService.getPeriodId();
+    const runId = this.configService.getRunId();
+    const periodId = this.configService.getPeriodId();
     const nodeId = this.nodeId;
     const componentId = this.componentId;
-    const toWorkgroupId = this.ConfigService.getWorkgroupId();
-    return this.AnnotationService.createAutoCommentAnnotation(
+    const toWorkgroupId = this.configService.getWorkgroupId();
+    return this.annotationService.createAutoCommentAnnotation(
       runId,
       periodId,
       nodeId,