forked from WISE-Community/WISE-DEPRECATED
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #51 from WISE-Community/issue-47-add-new-step-wiza…
…rd-sequence Changed add step into a wizard
- Loading branch information
Showing
9 changed files
with
230 additions
and
58 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
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,40 @@ | ||
| import * as angular from 'angular'; | ||
| import { downgradeComponent } from '@angular/upgrade/static'; | ||
| import { ChooseNewNode } from './choose-new-node/choose-new-node.component'; | ||
| import { ChooseNewNodeLocation } from './choose-new-node-location/choose-new-node-location.component'; | ||
|
|
||
| export default angular | ||
| .module('addNodeModule', ['ui.router']) | ||
| .directive( | ||
| 'chooseNewNode', | ||
| downgradeComponent({ component: ChooseNewNode }) as angular.IDirectiveFactory | ||
| ) | ||
| .directive( | ||
| 'chooseNewNodeLocation', | ||
| downgradeComponent({ component: ChooseNewNodeLocation }) as angular.IDirectiveFactory | ||
| ) | ||
| .config([ | ||
| '$stateProvider', | ||
| ($stateProvider) => { | ||
| $stateProvider | ||
| .state('root.at.project.add-node', { | ||
| url: '/add-node', | ||
| abstract: true, | ||
| resolve: {} | ||
| }) | ||
| .state('root.at.project.add-node.choose-node', { | ||
| url: '/choose-node', | ||
| component: 'chooseNewNode', | ||
| params: { | ||
| title: '' | ||
| } | ||
| }) | ||
| .state('root.at.project.add-node.choose-location', { | ||
| url: '/choose-location', | ||
| component: 'chooseNewNodeLocation', | ||
| params: { | ||
| title: '' | ||
| } | ||
| }); | ||
| } | ||
| ]); |
40 changes: 40 additions & 0 deletions
40
...e5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.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,40 @@ | ||
| <h5 i18n>Choose a location for the new step</h5> | ||
| <div style="margin-top: 20px; margin-left: 20px"> | ||
| <div *ngFor="let nodeId of nodeIds" | ||
| class="project-item" | ||
| [ngClass]="{'node-select--group': isGroupNode(nodeId), 'node-select--node': !isGroupNode(nodeId)}"> | ||
| <div id="{{nodeId}}" | ||
| [ngClass]="{'groupHeader': isGroupNode(nodeId), 'stepHeader': !isGroupNode(nodeId), 'branchPathStepHeader': isNodeInAnyBranchPath(nodeId) && !isGroupNode(nodeId)}"> | ||
| <div fxLayout="row" fxLayoutGap="8px" class="projectItemTitleDiv"> | ||
| <div fxLayout="row" fxLayoutAlign="start center"> | ||
| <node-icon [nodeId]="nodeId" size="18"></node-icon> | ||
| <p style="display:inline; cursor:pointer;"> | ||
| {{getNodePositionById(nodeId)}}: {{getNodeTitleByNodeId(nodeId)}} | ||
| </p> | ||
| </div> | ||
| <button mat-button class="mat-raised-button mat-primary" | ||
| *ngIf="isGroupNode(nodeId)" | ||
| matTooltip="Insert As First Step" | ||
| i18n-matTooltip | ||
| matTooltipPosition="above" | ||
| (click)="addNode(nodeId); $event.stopPropagation();"> | ||
| <mat-icon>call_received</mat-icon> | ||
| </button> | ||
| <button mat-button class="mat-raised-button mat-primary" | ||
| *ngIf="!isGroupNode(nodeId)" | ||
| matTooltip="Insert After" | ||
| i18n-matTooltip | ||
| matTooltipPosition="above" | ||
| (click)="addNode(nodeId); $event.stopPropagation();"> | ||
| <mat-icon>subdirectory_arrow_left</mat-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <hr> | ||
| <button mat-button | ||
| class="mat-primary" | ||
| (click)="cancel()" | ||
| aria-label="Cancel" | ||
| i18n>Cancel</button> |
88 changes: 88 additions & 0 deletions
88
...ise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.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,88 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { UpgradeModule } from '@angular/upgrade/static'; | ||
| import { TeacherDataService } from '../../../services/teacherDataService'; | ||
| import { TeacherProjectService } from '../../../services/teacherProjectService'; | ||
|
|
||
| @Component({ | ||
| templateUrl: 'choose-new-node-location.component.html' | ||
| }) | ||
| export class ChooseNewNodeLocation { | ||
| nodeIds: string[]; | ||
|
|
||
| constructor( | ||
| private upgrade: UpgradeModule, | ||
| private TeacherDataService: TeacherDataService, | ||
| private ProjectService: TeacherProjectService | ||
| ) {} | ||
|
|
||
| ngOnInit() { | ||
| this.nodeIds = Object.keys(this.ProjectService.idToOrder); | ||
| this.nodeIds.shift(); // remove the 'group0' master root node from consideration | ||
| } | ||
|
|
||
| addNode(nodeId: string) { | ||
| const newNode = this.ProjectService.createNode( | ||
| this.upgrade.$injector.get('$stateParams').title | ||
| ); | ||
| if (this.isGroupNode(nodeId)) { | ||
| this.ProjectService.createNodeInside(newNode, nodeId); | ||
| } else { | ||
| this.ProjectService.createNodeAfter(newNode, nodeId); | ||
| } | ||
| this.save(newNode.id).then(() => { | ||
| this.goToNode(newNode.id); | ||
| }); | ||
| } | ||
|
|
||
| save(newNodeId: string) { | ||
| return this.ProjectService.checkPotentialStartNodeIdChangeThenSaveProject().then(() => { | ||
| this.ProjectService.refreshProject(); | ||
| this.saveEvent('stepCreated', 'Authoring', { | ||
| nodeId: newNodeId, | ||
| title: this.ProjectService.getNodePositionAndTitleByNodeId(newNodeId) | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| goToNode(nodeId: string) { | ||
| this.upgrade.$injector.get('$state').go('root.at.project.node', { nodeId: nodeId }); | ||
| } | ||
|
|
||
| isGroupNode(nodeId: string) { | ||
| return this.ProjectService.isGroupNode(nodeId); | ||
| } | ||
|
|
||
| getNodeTitleByNodeId(nodeId: string) { | ||
| return this.ProjectService.getNodeTitleByNodeId(nodeId); | ||
| } | ||
|
|
||
| getNodePositionById(nodeId: string) { | ||
| return this.ProjectService.getNodePositionById(nodeId); | ||
| } | ||
|
|
||
| isNodeInAnyBranchPath(nodeId: string) { | ||
| return this.ProjectService.isNodeInAnyBranchPath(nodeId); | ||
| } | ||
|
|
||
| saveEvent(eventName: string, category: string, data: any): any { | ||
| const context = 'AuthoringTool'; | ||
| const nodeId = null; | ||
| const componentId = null; | ||
| const componentType = null; | ||
| return this.TeacherDataService.saveEvent( | ||
| context, | ||
| nodeId, | ||
| componentId, | ||
| componentType, | ||
| category, | ||
| eventName, | ||
| data | ||
| ).then((result) => { | ||
| return result; | ||
| }); | ||
| } | ||
|
|
||
| cancel() { | ||
| this.upgrade.$injector.get('$state').go('root.at.project'); | ||
| } | ||
| } |
17 changes: 17 additions & 0 deletions
17
src/assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.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,17 @@ | ||
| <div fxLayout="row wrap" fxLayoutAlign="start center"> | ||
| <mat-form-field> | ||
| <mat-label i18n>Step Title</mat-label> | ||
| <input #titleField autofocus matInput type='text' [(ngModel)]='title'> | ||
| </mat-form-field> | ||
| </div> | ||
| <hr> | ||
| <div fxLayout="row" fxLayoutAlign="end center"> | ||
| <button mat-button class="mat-primary" | ||
| (click)="cancel()" | ||
| aria-label="cancel" | ||
| i18n>Cancel</button> | ||
| <button mat-button class="mat-raised-button mat-primary" | ||
| (click)="chooseLocation()" | ||
| aria-label="next" | ||
| i18n>Next</button> | ||
| </div> |
26 changes: 26 additions & 0 deletions
26
src/assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.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,26 @@ | ||
| import { Component, ElementRef, ViewChild } from '@angular/core'; | ||
| import { UpgradeModule } from '@angular/upgrade/static'; | ||
|
|
||
| @Component({ | ||
| templateUrl: 'choose-new-node.component.html' | ||
| }) | ||
| export class ChooseNewNode { | ||
| title: string; | ||
|
|
||
| constructor(private upgrade: UpgradeModule) {} | ||
|
|
||
| @ViewChild('titleField') titleField: ElementRef; | ||
| ngAfterViewInit() { | ||
| this.titleField.nativeElement.focus(); | ||
| } | ||
|
|
||
| chooseLocation() { | ||
| this.upgrade.$injector.get('$state').go('root.at.project.add-node.choose-location', { | ||
| title: this.title | ||
| }); | ||
| } | ||
|
|
||
| cancel() { | ||
| this.upgrade.$injector.get('$state').go('root.at.project'); | ||
| } | ||
| } |
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
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.