From f898fc614142c44559b42cc8865a6f11caa81295 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 6 Apr 2021 10:44:14 -0700 Subject: [PATCH] Changed add step into a wizard. Adding a step in the AT is now done with a wizard. It will prompt you for a title on the first page, and a location on the next page. Cleaned up code related to add step and add group toggle. #47 --- src/app/teacher-hybrid-angular.module.ts | 4 + .../authoringTool/addNode/addNodeModule.ts | 40 +++++++++ .../choose-new-node-location.component.html | 40 +++++++++ .../choose-new-node-location.component.ts | 88 +++++++++++++++++++ .../choose-new-node.component.html | 17 ++++ .../choose-new-node.component.ts | 26 ++++++ .../project/projectAuthoring.html | 30 ++----- .../project/projectAuthoringComponent.ts | 41 ++------- .../teacher/teacher-angular-js-module.ts | 2 + 9 files changed, 230 insertions(+), 58 deletions(-) create mode 100644 src/assets/wise5/authoringTool/addNode/addNodeModule.ts create mode 100644 src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.html create mode 100644 src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.ts create mode 100644 src/assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.component.html create mode 100644 src/assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.component.ts diff --git a/src/app/teacher-hybrid-angular.module.ts b/src/app/teacher-hybrid-angular.module.ts index 33a5b969df..1aabfad5bd 100644 --- a/src/app/teacher-hybrid-angular.module.ts +++ b/src/app/teacher-hybrid-angular.module.ts @@ -22,6 +22,8 @@ import { ManageStudentsComponent } from '../assets/wise5/classroomMonitor/manage import { AdvancedProjectAuthoringComponent } from '../assets/wise5/authoringTool/advanced/advanced-project-authoring.component'; import { ChooseNewComponent } from './authoring-tool/add-component/choose-new-component/choose-new-component.component'; import { ChooseNewComponentLocation } from './authoring-tool/add-component/choose-new-component-location/choose-new-component-location.component'; +import { ChooseNewNode } from '../assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.component'; +import { ChooseNewNodeLocation } from '../assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component'; import { ChooseImportStepComponent } from './authoring-tool/import-step/choose-import-step/choose-import-step.component'; import { ChooseImportStepLocationComponent } from './authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component'; import { ComponentNewWorkBadgeComponent } from './classroom-monitor/component-new-work-badge/component-new-work-badge.component'; @@ -85,6 +87,8 @@ import { EmbeddedGrading } from '../assets/wise5/components/embedded/embedded-gr ChooseImportStepLocationComponent, ChooseNewComponent, ChooseNewComponentLocation, + ChooseNewNode, + ChooseNewNodeLocation, ComponentNewWorkBadgeComponent, ComponentSelectComponent, ConceptMapAuthoring, diff --git a/src/assets/wise5/authoringTool/addNode/addNodeModule.ts b/src/assets/wise5/authoringTool/addNode/addNodeModule.ts new file mode 100644 index 0000000000..88e31cca8b --- /dev/null +++ b/src/assets/wise5/authoringTool/addNode/addNodeModule.ts @@ -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: '' + } + }); + } + ]); diff --git a/src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.html b/src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.html new file mode 100644 index 0000000000..578b690520 --- /dev/null +++ b/src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.html @@ -0,0 +1,40 @@ +
Choose a location for the new step
+
+
+
+
+
+   +

+ {{getNodePositionById(nodeId)}}: {{getNodeTitleByNodeId(nodeId)}} +

+
+ + +
+
+
+
+
+ diff --git a/src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.ts b/src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.ts new file mode 100644 index 0000000000..f143cca01a --- /dev/null +++ b/src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.ts @@ -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'); + } +} diff --git a/src/assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.component.html b/src/assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.component.html new file mode 100644 index 0000000000..f80346ab31 --- /dev/null +++ b/src/assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.component.html @@ -0,0 +1,17 @@ +
+ + Step Title + + +
+
+
+ + +
diff --git a/src/assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.component.ts b/src/assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.component.ts new file mode 100644 index 0000000000..15dab6777a --- /dev/null +++ b/src/assets/wise5/authoringTool/addNode/choose-new-node/choose-new-node.component.ts @@ -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'); + } +} diff --git a/src/assets/wise5/authoringTool/project/projectAuthoring.html b/src/assets/wise5/authoringTool/project/projectAuthoring.html index d6726c160a..ed16ea6cdd 100644 --- a/src/assets/wise5/authoringTool/project/projectAuthoring.html +++ b/src/assets/wise5/authoringTool/project/projectAuthoring.html @@ -104,7 +104,7 @@ add_box @@ -205,26 +205,6 @@ -
-
- - - - -
-
- - check - {{ ::"create" | translate }} - - - close - {{ ::"CANCEL" | translate }} - -
-
@@ -252,7 +232,7 @@
ng-model='item.checked' ng-change='$ctrl.projectItemClicked(item.$key)' class='check' - ng-disabled='$ctrl.showCreateGroup || $ctrl.showCreateNode || $ctrl.insertNodeMode || $ctrl.insertGroupMode || ($ctrl.isGroupNode(item.$key) && $ctrl.stepNodeSelected) || (!$ctrl.isGroupNode(item.$key) && $ctrl.activityNodeSelected)' + ng-disabled='$ctrl.showCreateGroup || $ctrl.insertNodeMode || $ctrl.insertGroupMode || ($ctrl.isGroupNode(item.$key) && $ctrl.stepNodeSelected) || (!$ctrl.isGroupNode(item.$key) && $ctrl.activityNodeSelected)' aria-label='{{::$ctrl.getNodePositionById(item.$key)}} {{::$ctrl.getNodeTitleByNodeId(item.$key)}}'>
@@ -312,7 +292,7 @@
ng-model='inactiveNode.checked' ng-change='$ctrl.projectItemClicked(inactiveNode.id)' class='check' - ng-disabled='$ctrl.showCreateGroup || $ctrl.showCreateNode || $ctrl.insertNodeMode || $ctrl.insertGroupMode || $ctrl.stepNodeSelected' + ng-disabled='$ctrl.showCreateGroup || $ctrl.insertNodeMode || $ctrl.insertGroupMode || $ctrl.stepNodeSelected' aria-label='{{::$ctrl.getNodeTitleByNodeId(inactiveNode.id)}}'>
@@ -352,7 +332,7 @@
ng-model='$ctrl.idToNode[inactiveChildId].checked' ng-change='$ctrl.projectItemClicked(inactiveChildId)' class='check' - ng-disabled='$ctrl.showCreateGroup || $ctrl.showCreateNode || $ctrl.insertNodeMode || $ctrl.insertGroupMode || $ctrl.activityNodeSelected' + ng-disabled='$ctrl.showCreateGroup || $ctrl.insertNodeMode || $ctrl.insertGroupMode || $ctrl.activityNodeSelected' aria-label='{{::$ctrl.getNodeTitleByNodeId(inactiveChildId.id)}}'> @@ -403,7 +383,7 @@
diff --git a/src/assets/wise5/authoringTool/project/projectAuthoringComponent.ts b/src/assets/wise5/authoringTool/project/projectAuthoringComponent.ts index 3b06a15ff9..163350fa2f 100644 --- a/src/assets/wise5/authoringTool/project/projectAuthoringComponent.ts +++ b/src/assets/wise5/authoringTool/project/projectAuthoringComponent.ts @@ -18,7 +18,6 @@ class ProjectAuthoringController { nodeId: string; projectTitle: string; showCreateGroup: boolean = false; - showCreateNode: boolean = false; inactiveGroupNodes: any[]; inactiveStepNodes: any[]; inactiveNodes: any[]; @@ -26,7 +25,6 @@ class ProjectAuthoringController { insertNodeMode: boolean; idToNode: any; copyMode: boolean; - createNodeTitle: string; createMode: boolean; nodeToAdd: any; projectScriptFilename: string; @@ -247,14 +245,6 @@ class ProjectAuthoringController { this.createMode = true; } - createNode() { - this.nodeToAdd = this.ProjectService.createNode(this.createNodeTitle); - this.showCreateNode = false; - this.createNodeTitle = ''; - this.insertNodeMode = true; - this.createMode = true; - } - insertInside(nodeId) { // TODO check that we are inserting into a group if (this.createMode) { @@ -601,8 +591,8 @@ class ProjectAuthoringController { } creatNewActivityClicked() { - this.createGroupTitle = ''; - this.toggleView('createGroup'); + this.clearGroupTitle(); + this.toggleGroupView(); if (this.showCreateGroup) { this.$timeout(() => { $('#createGroupTitle').focus(); @@ -610,14 +600,8 @@ class ProjectAuthoringController { } } - createNewStepClicked() { - this.createNodeTitle = ''; - this.toggleView('createNode'); - if (this.showCreateNode) { - this.$timeout(() => { - $('#createNodeTitle').focus(); - }); - } + createNewStep() { + this.$state.go('root.at.project.add-node.choose-node'); } addStructure() { @@ -701,25 +685,16 @@ class ProjectAuthoringController { } showProjectView() { - this.clearNodeAndGroupTitle(); + this.clearGroupTitle(); this.showCreateGroup = false; - this.showCreateNode = false; } - toggleView(view) { - this.clearNodeAndGroupTitle(); - if (view === 'createGroup') { - this.showCreateGroup = !this.showCreateGroup; - this.showCreateNode = false; - } else if (view === 'createNode') { - this.showCreateGroup = false; - this.showCreateNode = !this.showCreateNode; - } + toggleGroupView() { + this.showCreateGroup = !this.showCreateGroup; } - clearNodeAndGroupTitle() { + clearGroupTitle() { this.createGroupTitle = ''; - this.createNodeTitle = ''; } goBackToProjectList() { diff --git a/src/assets/wise5/teacher/teacher-angular-js-module.ts b/src/assets/wise5/teacher/teacher-angular-js-module.ts index c07af53030..2d632bb773 100644 --- a/src/assets/wise5/teacher/teacher-angular-js-module.ts +++ b/src/assets/wise5/teacher/teacher-angular-js-module.ts @@ -63,6 +63,7 @@ import '../components/graph/graphAuthoringComponentModule'; import '../components/graph/graphGradingComponentModule'; import '../components/html/htmlAuthoringComponentModule'; import '../authoringTool/addComponent/addComponentModule'; +import '../authoringTool/addNode/addNodeModule'; import '../authoringTool/node/editRubric/editRubricModule'; import '../authoringTool/importComponent/importComponentModule'; import '../authoringTool/importStep/importStepModule'; @@ -84,6 +85,7 @@ angular 'common', 'angular-inview', 'addComponentModule', + 'addNodeModule', 'editRubricModule', 'summaryAuthoringComponentModule', 'animationAuthoringComponentModule',