chore(Authoring): Convert WISE link authoring to Angular

#1360

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

@@ -82,6 +82,7 @@ import { ConstraintAuthoringModule } from '../../assets/wise5/authoringTool/cons
 import { EditComponentAdvancedComponent } from '../authoring-tool/edit-component-advanced/edit-component-advanced.component';
 import { ComponentAuthoringComponent } from '../../assets/wise5/authoringTool/components/component-authoring.component';
 import { WiseTinymceEditorModule } from '../../assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.module';
+import { WiseLinkAuthoringDialogComponent } from '../../assets/wise5/authoringTool/wise-link-authoring-dialog/wise-link-authoring-dialog.component';
 
 @NgModule({
   declarations: [
@@ -163,7 +164,8 @@ import { WiseTinymceEditorModule } from '../../assets/wise5/directives/wise-tiny
     ShowMyWorkAuthoringComponent,
     SelectStepAndComponentComponent,
     SummaryAuthoring,
-    TableAuthoring
+    TableAuthoring,
+    WiseLinkAuthoringDialogComponent
   ],
   imports: [
     ConstraintAuthoringModule,

src/assets/wise5/authoringTool/wise-link-authoring-dialog/wise-link-authoring-dialog.component.html

@@ -0,0 +1,52 @@
+<h1 mat-dialog-title i18n>Create a WISE Link</h1>
+<div mat-dialog-content>
+  <div fxLayout="row wrap" fxLayoutGap="20px">
+    <mat-form-field class="choose-step">
+      <mat-label i18n>Step</mat-label>
+      <mat-select
+        [(ngModel)]="wiseLinkNodeId"
+        placeholder="Choose a Step"
+        i18n-placeholder
+        (ngModelChange)="wiseLinkNodeIdChanged()"
+      >
+        <ng-container *ngFor="let item of items">
+          <mat-option *ngIf="item.key !== 'group0'" [value]="item.key">
+            {{ getNodePositionById(item.key) }}: {{ getNodeTitle(item.key) }} ({{ item.key }})
+          </mat-option>
+        </ng-container>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="choose-component">
+      <mat-label i18n>Component (Optional)</mat-label>
+      <mat-select
+        [(ngModel)]="wiseLinkComponentId"
+        placeholder="Choose a Component"
+        i18n-placeholder
+      >
+        <mat-option
+          *ngFor="let component of getComponents(wiseLinkNodeId); let componentIndex = index"
+          [value]="component.id"
+        >
+          {{ componentIndex + 1 }}. {{ component.type }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div fxLayout="row wrap">
+    <mat-form-field class="link-text">
+      <mat-label i18n>Link Text</mat-label>
+      <input matInput [(ngModel)]="wiseLinkText" />
+    </mat-form-field>
+  </div>
+  <div class="type-div">
+    <mat-radio-group [(ngModel)]="wiseLinkType" color="primary">
+      <mat-radio-button value="link" i18n>Link</mat-radio-button>
+      <mat-radio-button value="button" i18n>Button</mat-radio-button>
+    </mat-radio-group>
+  </div>
+</div>
+<div mat-dialog-actions fxLayoutGap="20px">
+  <div fxFlex></div>
+  <button mat-stroked-button (click)="cancelWISELinkAuthoring()" i18n>Cancel</button>
+  <button mat-raised-button color="primary" (click)="createWISELink()" i18n>Create</button>
+</div>

src/assets/wise5/authoringTool/wise-link-authoring-dialog/wise-link-authoring-dialog.component.scss

@@ -0,0 +1,15 @@
+.choose-step {
+  width: 400px;
+}
+
+.choose-component {
+  width: 250px;
+}
+
+.type-div {
+  margin-bottom: 20px;
+}
+
+.link-text {
+  width: 500px;
+}

src/assets/wise5/authoringTool/wise-link-authoring-dialog/wise-link-authoring-dialog.component.spec.ts

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { WiseLinkAuthoringDialogComponent } from './wise-link-authoring-dialog.component';
+import { MatDialogRef } from '@angular/material/dialog';
+import { ProjectService } from '../../services/projectService';
+import { StudentTeacherCommonServicesModule } from '../../../../app/student-teacher-common-services.module';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('WiseLinkAuthoringDialogComponent', () => {
+  let component: WiseLinkAuthoringDialogComponent;
+  let fixture: ComponentFixture<WiseLinkAuthoringDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [WiseLinkAuthoringDialogComponent],
+      imports: [
+        BrowserAnimationsModule,
+        FormsModule,
+        HttpClientTestingModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatRadioModule,
+        MatSelectModule,
+        StudentTeacherCommonServicesModule
+      ],
+      providers: [{ provide: MatDialogRef, useValue: {} }, ProjectService]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(WiseLinkAuthoringDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/assets/wise5/authoringTool/wise-link-authoring-dialog/wise-link-authoring-dialog.component.ts

@@ -0,0 +1,75 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { ProjectService } from '../../services/projectService';
+
+@Component({
+  selector: 'wise-link-authoring-dialog',
+  templateUrl: './wise-link-authoring-dialog.component.html',
+  styleUrls: ['./wise-link-authoring-dialog.component.scss']
+})
+export class WiseLinkAuthoringDialogComponent {
+  items: any[];
+  wiseLinkComponentId: string = '';
+  wiseLinkNodeId: string = '';
+  wiseLinkText: string = '';
+  wiseLinkType: string = 'link';
+
+  constructor(
+    protected dialogRef: MatDialogRef<WiseLinkAuthoringDialogComponent>,
+    private projectService: ProjectService
+  ) {}
+
+  ngOnInit(): void {
+    this.items = Object.entries(this.projectService.idToOrder)
+      .map((entry: any) => {
+        return { key: entry[0], order: entry[1].order };
+      })
+      .sort((a: any, b: any) => {
+        return a.order - b.order;
+      });
+  }
+
+  protected wiseLinkNodeIdChanged(): void {
+    if (this.wiseLinkNodeId != null && this.wiseLinkNodeId !== '') {
+      this.wiseLinkComponentId = '';
+      const position = this.getNodePositionById(this.wiseLinkNodeId);
+      const title = this.getNodeTitle(this.wiseLinkNodeId);
+      this.wiseLinkText = `${position}: ${title}`;
+    }
+  }
+
+  private getNodePositionById(nodeId: string): string {
+    return this.projectService.getNodePositionById(nodeId);
+  }
+
+  private getNodeTitle(nodeId: string): string {
+    return this.projectService.getNodeTitle(nodeId);
+  }
+
+  protected isGroupNode(nodeId: string): boolean {
+    return this.projectService.isGroupNode(nodeId);
+  }
+
+  protected getComponents(nodeId: string): any[] {
+    return this.projectService.getComponents(nodeId);
+  }
+
+  protected createWISELink(): void {
+    if (this.wiseLinkNodeId == null || this.wiseLinkNodeId === '') {
+      alert($localize`You must select a step.`);
+    } else if (this.wiseLinkText == null || this.wiseLinkText === '') {
+      alert($localize`You must enter text.`);
+    } else {
+      this.dialogRef.close({
+        wiseLinkNodeId: this.wiseLinkNodeId,
+        wiseLinkComponentId: this.wiseLinkComponentId,
+        wiseLinkType: this.wiseLinkType,
+        wiseLinkText: this.wiseLinkText
+      });
+    }
+  }
+
+  protected cancelWISELinkAuthoring(): void {
+    this.dialogRef.close();
+  }
+}

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

@@ -28,7 +28,6 @@ import { EditComponentSubmitButtonComponent } from '../../../app/authoring-tool/
 import { EditComponentTagsComponent } from '../../../app/authoring-tool/edit-component-tags/edit-component-tags.component';
 import { EditComponentWidthComponent } from '../../../app/authoring-tool/edit-component-width/edit-component-width.component';
 import { EditComponentExcludeFromTotalScoreComponent } from '../../../app/authoring-tool/edit-component-exclude-from-total-score/edit-component-exclude-from-total-score.component';
-import WISELinkAuthoringController from '../authoringTool/wiseLink/wiseLinkAuthoringController';
 import { EditComponentDefaultFeedback } from '../../../app/authoring-tool/edit-advanced-component/edit-component-default-feedback/edit-component-default-feedback.component';
 import { AuthorUrlParametersComponent } from '../../../app/authoring-tool/author-url-parameters/author-url-parameters.component';
 import { EditConnectedComponentsComponent } from '../../../app/authoring-tool/edit-connected-components/edit-connected-components.component';
@@ -62,7 +61,6 @@ export default angular
     'summaryAuthoringComponentModule',
     'tableAuthoringComponentModule'
   ])
-  .controller('WISELinkAuthoringController', WISELinkAuthoringController)
   .directive(
     'authorUrlParameters',
     downgradeComponent({