chore(Preview Component): Convert to Angular

Create PreviewComponentButton to launch Angular Material Dialog
that renders PreviewComponent

src/app/teacher/authoring-tool.module.ts

@@ -19,6 +19,8 @@ import { ChooseImportStepLocationComponent } from '../authoring-tool/import-step
 import { ChooseImportStepComponent } from '../authoring-tool/import-step/choose-import-step/choose-import-step.component';
 import { AngularJSModule } from '../common-hybrid-angular.module';
 import { ComponentAuthoringModule } from './component-authoring.module';
+import { ComponentStudentModule } from '../../assets/wise5/components/component/component-student.module';
+import { PreviewComponentModule } from '../../assets/wise5/authoringTool/components/preview-component/preview-component.module';
 
 @NgModule({
   declarations: [
@@ -40,6 +42,12 @@ import { ComponentAuthoringModule } from './component-authoring.module';
     RequiredErrorLabelComponent,
     RubricAuthoringComponent
   ],
-  imports: [AngularJSModule, ComponentAuthoringModule, RouterModule]
+  imports: [
+    AngularJSModule,
+    ComponentAuthoringModule,
+    ComponentStudentModule,
+    PreviewComponentModule,
+    RouterModule
+  ]
 })
 export class AuthoringToolModule {}

src/assets/wise5/authoringTool/components/component-authoring.component.ts

@@ -53,6 +53,13 @@ export abstract class ComponentAuthoring {
         }
       })
     );
+    this.subscriptions.add(
+      this.NodeService.deleteStarterState$.subscribe((args: any) => {
+        if (this.isForThisComponent(args)) {
+          this.deleteStarterState();
+        }
+      })
+    );
     this.subscriptions.add(
       this.promptChange
         .pipe(debounceTime(1000), distinctUntilChanged())
@@ -91,6 +98,8 @@ export abstract class ComponentAuthoring {
     return object.nodeId == this.nodeId && object.componentId == this.componentId;
   }
 
+  deleteStarterState(): void {}
+
   saveStarterState(starterState: any): void {}
 
   setShowSubmitButtonValue(show: boolean): void {

src/assets/wise5/authoringTool/components/preview-component-button/preview-component-button.component.html

@@ -0,0 +1,8 @@
+<button mat-raised-button
+    color="primary"
+    matTooltip="Preview Component"
+    matTooltipPosition="above"
+    i18n-matTooltip
+    (click)="popUpComponentPreview()">
+  <mat-icon>visibility</mat-icon>
+</button>

src/assets/wise5/authoringTool/components/preview-component-button/preview-component-button.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { PreviewComponentDialogComponent } from '../preview-component-dialog/preview-component-dialog.component';
+
+@Component({
+  templateUrl: 'preview-component-button.component.html'
+})
+export class PreviewComponentButtonComponent implements OnInit {
+  @Input()
+  componentId: string;
+
+  @Input()
+  nodeId: string;
+
+  constructor(private dialog: MatDialog) {}
+
+  ngOnInit(): void {}
+
+  popUpComponentPreview(): void {
+    const dialogRef = this.dialog.open(PreviewComponentDialogComponent, {
+      panelClass: 'dialog-lg'
+    });
+    dialogRef.componentInstance.nodeId = this.nodeId;
+    dialogRef.componentInstance.componentId = this.componentId;
+  }
+}

src/assets/wise5/authoringTool/components/preview-component-dialog/preview-component-dialog.component.html

@@ -0,0 +1,20 @@
+<h2 class="mat-dialog-title" i18n>Preview Component</h2>
+<ng-container *ngIf="canSaveStarterState">
+  <mat-divider></mat-divider>
+  <save-starter-state class="notice-bg-bg"
+      [nodeId]="nodeId"
+      [componentId]="componentId"
+      [starterState]="starterState"></save-starter-state>
+</ng-container>
+<mat-divider></mat-divider>
+<mat-dialog-content>
+  <preview-component
+      [nodeId]="nodeId"
+      [componentId]="componentId"
+      (starterStateChangedEvent)="updateStarterState($event)">
+  </preview-component>
+</mat-dialog-content>
+<mat-divider></mat-divider>
+<mat-dialog-actions fxLayoutAlign="end">
+  <button mat-button mat-dialog-close cdkFocusRegionstart i18n>Close</button>
+</mat-dialog-actions>

src/assets/wise5/authoringTool/components/preview-component-dialog/preview-component-dialog.component.scss

@@ -0,0 +1,13 @@
+.mat-divider {
+  margin: 0 -16px;
+}
+
+mat-dialog-content.mat-dialog-content {
+  padding: 0;
+}
+
+save-starter-state {
+  display: block;
+  margin: 0 -16px;
+  padding: 0 16px;
+}

src/assets/wise5/authoringTool/components/preview-component-dialog/preview-component-dialog.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ProjectService } from '../../../services/projectService';
+
+@Component({
+  templateUrl: 'preview-component-dialog.component.html',
+  styleUrls: ['preview-component-dialog.component.scss']
+})
+export class PreviewComponentDialogComponent implements OnInit {
+  @Input()
+  componentId: string;
+
+  @Input()
+  nodeId: string;
+
+  canSaveStarterState: boolean = false;
+
+  componentTypesWithStarterStates = ['ConceptMap', 'Draw', 'Label'];
+
+  starterState: any;
+
+  constructor(private projectService: ProjectService) {}
+
+  ngOnInit(): void {
+    const component = this.projectService.getComponentByNodeIdAndComponentId(
+      this.nodeId,
+      this.componentId
+    );
+    this.canSaveStarterState = this.componentTypesWithStarterStates.includes(component.type);
+  }
+
+  updateStarterState(starterState: any): void {
+    this.starterState = starterState;
+  }
+}

src/assets/wise5/authoringTool/components/preview-component/preview-component.component.html

@@ -0,0 +1,85 @@
+<div [ngSwitch]="componentContent.type" class="component__wrapper">
+  <animation-student *ngSwitchCase="'Animation'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </animation-student>
+  <audio-oscillator-student *ngSwitchCase="'AudioOscillator'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </audio-oscillator-student>
+  <concept-map-student *ngSwitchCase="'ConceptMap'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      (starterStateChangedEvent)="updateStarterState($event)"
+      mode="preview">
+  </concept-map-student>
+  <dialog-guidance-student *ngSwitchCase="'DialogGuidance'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </dialog-guidance-student>
+  <discussion-student *ngSwitchCase="'Discussion'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </discussion-student>
+  <draw-student *ngSwitchCase="'Draw'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      (starterStateChangedEvent)="updateStarterState($event)"
+      mode="preview">
+  </draw-student>
+  <embedded-student *ngSwitchCase="'Embedded'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </embedded-student>
+  <graph-student *ngSwitchCase="'Graph'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </graph-student>
+  <html-student *ngSwitchCase="'HTML'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </html-student>
+  <label-student *ngSwitchCase="'Label'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      (starterStateChangedEvent)="updateStarterState($event)"
+      mode="preview">
+  </label-student>
+  <match-student *ngSwitchCase="'Match'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </match-student>
+  <multiple-choice-student *ngSwitchCase="'MultipleChoice'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </multiple-choice-student>
+  <open-response-student *ngSwitchCase="'OpenResponse'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </open-response-student>
+  <outside-url-student *ngSwitchCase="'OutsideURL'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </outside-url-student>
+  <summary-student *ngSwitchCase="'Summary'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </summary-student>
+  <table-student *ngSwitchCase="'Table'"
+      [nodeId]="nodeId"
+      [componentContent]="componentContent"
+      mode="preview">
+  </table-student>
+</div>

src/assets/wise5/authoringTool/components/preview-component/preview-component.component.ts

@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ProjectService } from '../../../services/projectService';
+
+@Component({
+  selector: 'preview-component',
+  templateUrl: 'preview-component.component.html'
+})
+export class PreviewComponentComponent implements OnInit {
+  componentContent: any;
+
+  @Input()
+  componentId: string;
+
+  @Input()
+  nodeId: string;
+
+  @Output()
+  starterStateChangedEvent: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(private projectService: ProjectService) {}
+
+  ngOnInit() {
+    this.componentContent = this.projectService.injectAssetPaths(
+      this.projectService.getComponentByNodeIdAndComponentId(this.nodeId, this.componentId)
+    );
+  }
+
+  updateStarterState(starterState: any) {
+    this.starterStateChangedEvent.emit(starterState);
+  }
+}

src/assets/wise5/authoringTool/components/preview-component/preview-component.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { PreviewComponentButtonComponent } from '../preview-component-button/preview-component-button.component';
+import { PreviewComponentDialogComponent } from '../preview-component-dialog/preview-component-dialog.component';
+import { SaveStarterStateComponent } from '../save-starter-state/save-starter-state.component';
+import { ComponentStudentModule } from '../../../../../assets/wise5/components/component/component-student.module';
+import { AngularJSModule } from '../../../../../app/common-hybrid-angular.module';
+
+@NgModule({
+  declarations: [
+    PreviewComponentButtonComponent,
+    PreviewComponentDialogComponent,
+    SaveStarterStateComponent
+  ],
+  imports: [AngularJSModule, ComponentStudentModule]
+})
+export class PreviewComponentModule {}