-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(Authoring): Convert WISE link authoring to Angular (#1361)
- Loading branch information
1 parent
b89aa71
commit b54a2da
Showing
10 changed files
with
302 additions
and
216 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
.../wise5/authoringTool/wise-link-authoring-dialog/wise-link-authoring-dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)="cancel()" i18n>Cancel</button> | ||
<button mat-raised-button color="primary" (click)="create()" i18n>Create</button> | ||
</div> |
15 changes: 15 additions & 0 deletions
15
.../wise5/authoringTool/wise-link-authoring-dialog/wise-link-authoring-dialog.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
.choose-step { | ||
width: 400px; | ||
} | ||
|
||
.choose-component { | ||
width: 250px; | ||
} | ||
|
||
.type-div { | ||
margin-bottom: 20px; | ||
} | ||
|
||
.link-text { | ||
width: 500px; | ||
} |
42 changes: 42 additions & 0 deletions
42
...se5/authoringTool/wise-link-authoring-dialog/wise-link-authoring-dialog.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
75 changes: 75 additions & 0 deletions
75
...ts/wise5/authoringTool/wise-link-authoring-dialog/wise-link-authoring-dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 { | ||
protected items: any[]; | ||
protected wiseLinkComponentId: string = ''; | ||
protected wiseLinkNodeId: string = ''; | ||
protected wiseLinkText: string = ''; | ||
protected 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 create(): 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 cancel(): void { | ||
this.dialogRef.close(); | ||
} | ||
} |
68 changes: 0 additions & 68 deletions
68
src/assets/wise5/authoringTool/wiseLink/wiseLinkAuthoring.html
This file was deleted.
Oops, something went wrong.
89 changes: 0 additions & 89 deletions
89
src/assets/wise5/authoringTool/wiseLink/wiseLinkAuthoringController.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.