From 81815feea29a35259d468ab3ea5beba3eef5f59a Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Fri, 20 Sep 2024 10:11:50 -0700 Subject: [PATCH] refactor(VLEComponent): Convert to standalone (#1951) --- src/app/student/vle/student-vle.module.ts | 31 +-------- .../wise5/directives/safeUrl/safe-url.pipe.ts | 3 +- .../vle/vle-parent/vle-parent.component.ts | 1 - src/assets/wise5/vle/vle.component.html | 52 +++++++++------ src/assets/wise5/vle/vle.component.spec.ts | 45 +------------ src/assets/wise5/vle/vle.component.ts | 64 +++++++++++++------ src/messages.xlf | 4 +- 7 files changed, 86 insertions(+), 114 deletions(-) diff --git a/src/app/student/vle/student-vle.module.ts b/src/app/student/vle/student-vle.module.ts index 7410d27bea..a0e927cc6c 100644 --- 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 index 718b801857..4e71acc09a 100644 --- 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 index 13eb1f4a98..d851b22d4d 100644 --- 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 index c4505e182e..cba3fda184 100644 --- a/src/assets/wise5/vle/vle.component.html +++ b/src/assets/wise5/vle/vle.component.html @@ -1,37 +1,47 @@ - - - - - - - - @if (reportEnabled) { - - } - - - +@if (initialized) { + + + + + + + + @if (reportEnabled) { + + } + @if (notesEnabled && !notesVisible) { + + } + + +} - + @if (layoutState === 'node') { + + }
- + @if (runEndedAndLocked) { + + } @if (layoutState === 'node') { } - + @if (layoutState === 'nav') { + + }
@@ -43,7 +53,9 @@ >
- + @if (runEndedAndLocked) { + + } @if (layoutState === 'node') { } diff --git a/src/assets/wise5/vle/vle.component.spec.ts b/src/assets/wise5/vle/vle.component.spec.ts index 61feb49aa3..fb6d7197d6 100644 --- 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 index 6ab4638d3e..b5c1322781 100644 --- 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; @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; - - 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; + protected vleTemplate: TemplateRef; 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 index 26d3cdaabc..5754188d61 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -10026,7 +10026,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/vle/vle.component.ts - 168 + 194 @@ -10041,7 +10041,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/vle/vle.component.ts - 169 + 195