From 956115f696f64c805f3a316c9439d6fcac721ff4 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Mon, 11 Sep 2023 14:59:54 -0700 Subject: [PATCH 1/3] Move highlightAndScroll to dom.ts --- .../project-authoring.component.ts | 24 ++----------------- src/assets/wise5/common/dom/dom.ts | 18 ++++++++++++++ src/messages.xlf | 4 ++-- 3 files changed, 22 insertions(+), 24 deletions(-) diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts index 71b63dc7b2d..55a65b6e929 100644 --- a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts +++ b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts @@ -3,11 +3,10 @@ import { ConfigService } from '../../services/configService'; import { DeleteNodeService } from '../../services/deleteNodeService'; import { TeacherProjectService } from '../../services/teacherProjectService'; import { TeacherDataService } from '../../services/teacherDataService'; -import * as $ from 'jquery'; import { Subscription, filter } from 'rxjs'; import { Message } from '@stomp/stompjs'; import { RxStomp } from '@stomp/rx-stomp'; -import { temporarilyHighlightElement } from '../../common/dom/dom'; +import { highlightNodesAndScroll } from '../../common/dom/dom'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; @Component({ @@ -40,7 +39,7 @@ export class ProjectAuthoringComponent { this.subscriptions.add( this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => { this.updateShowProjectView(); - this.temporarilyHighlightNewNodes(history.state.newNodes); + highlightNodesAndScroll(history.state.newNodes); }) ); } @@ -214,25 +213,6 @@ export class ProjectAuthoringComponent { ); } - /** - * Temporarily highlight the new nodes to draw attention to them - * @param newNodes the new nodes to highlight - */ - private temporarilyHighlightNewNodes(newNodes = []): void { - if (newNodes.length > 0) { - setTimeout(() => { - newNodes.forEach((newNode) => temporarilyHighlightElement(newNode.id)); - const firstNodeElementAdded = $('#' + newNodes[0].id); - $('#content').animate( - { - scrollTop: firstNodeElementAdded.prop('offsetTop') - 60 - }, - 1000 - ); - }); - } - } - protected getStepBackgroundColor(nodeId: string): string { return this.projectService.getBackgroundColor(nodeId); } diff --git a/src/assets/wise5/common/dom/dom.ts b/src/assets/wise5/common/dom/dom.ts index 8c28807b9a3..4739803a050 100644 --- a/src/assets/wise5/common/dom/dom.ts +++ b/src/assets/wise5/common/dom/dom.ts @@ -31,3 +31,21 @@ export function temporarilyHighlightElement(id: string, duration: number = 1000) }, 2000); }, duration); } + +/** + * Temporarily highlight the nodes and scroll to the first node to draw attention to them + * @param nodes the nodes to highlight + */ +export function highlightNodesAndScroll(nodes = []): void { + if (nodes.length > 0) { + setTimeout(() => { + nodes.forEach((node) => temporarilyHighlightElement(node.id)); + $('#content').animate( + { + scrollTop: $('#' + nodes[0].id).prop('offsetTop') - 60 + }, + 1000 + ); + }); + } +} diff --git a/src/messages.xlf b/src/messages.xlf index 0bd4267c218..896b4181760 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -11991,14 +11991,14 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Are you sure you want to delete the selected item? src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts - 132 + 131 Are you sure you want to delete the selected items? src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts - 133 + 132 From 0f68fd404446e5448bfbc21f07c41d8636020f26 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Mon, 11 Sep 2023 15:30:27 -0700 Subject: [PATCH 2/3] feat(Project Authoring): don't open imported step for editing #1414 --- .../choose-import-step-location.component.ts | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts b/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts index 93552bb18b4..54f39bb8f3c 100644 --- a/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts +++ b/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts @@ -37,17 +37,10 @@ export class ChooseImportStepLocationComponent { this.insertNodesService.insertNodes(nodesWithNewNodeIds, nodeIdToInsertInsideOrAfter); this.projectService.checkPotentialStartNodeIdChangeThenSaveProject().then(() => { this.projectService.refreshProject(); - if (nodesWithNewNodeIds.length === 1) { - const newNode = nodesWithNewNodeIds[0]; - this.router.navigate(['../../node', newNode.id], { - relativeTo: this.route, - state: { - newComponents: newNode.components - } - }); - } else { - this.router.navigate(['../..'], { relativeTo: this.route }); - } + this.router.navigate(['../..'], { + relativeTo: this.route, + state: { newNodes: nodesWithNewNodeIds } + }); }); }); } From 1a79a16fb10a659fe238b1d1c8e2dd7842bd3e56 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 19 Sep 2023 08:39:44 -0700 Subject: [PATCH 3/3] Refactor code: make ChooseImportStepLocation component extend ChooseNodeLocationComponent. This necessitated changes to make the insertAfter() and insertInside() functions returns Promises. #1414 --- ...choose-import-step-location.component.html | 31 ++------- .../choose-import-step-location.component.ts | 64 ++++++++----------- .../choose-copy-node-location.component.ts | 12 ++-- .../choose-move-node-location.component.ts | 12 ++-- .../choose-node-location.component.ts | 13 ++-- src/messages.xlf | 62 ++++++++---------- 6 files changed, 86 insertions(+), 108 deletions(-) diff --git a/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html b/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html index a21436ea62f..786b1f56c1a 100644 --- a/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html +++ b/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html @@ -11,33 +11,16 @@
Choose a location for the imported steps
>
-   -

- {{ getNodePositionById(nodeId) }}: {{ getNodeTitle(nodeId) }} -

+
- - + (insertEvent)="insert(nodeId, true)" + >
diff --git a/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts b/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts index 54f39bb8f3c..b6180a3e007 100644 --- a/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts +++ b/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts @@ -4,60 +4,52 @@ import { CopyNodesService } from '../../../../assets/wise5/services/copyNodesSer import { InsertNodesService } from '../../../../assets/wise5/services/insertNodesService'; import { TeacherProjectService } from '../../../../assets/wise5/services/teacherProjectService'; import { ActivatedRoute, Router } from '@angular/router'; +import { ChooseNodeLocationComponent } from '../../../../assets/wise5/authoringTool/choose-node-location/choose-node-location.component'; +import { lastValueFrom, map } from 'rxjs'; @Component({ selector: 'choose-import-step-location', styleUrls: ['choose-import-step-location.component.scss'], templateUrl: 'choose-import-step-location.component.html' }) -export class ChooseImportStepLocationComponent { +export class ChooseImportStepLocationComponent extends ChooseNodeLocationComponent { protected nodeIds: string[]; constructor( private configService: ConfigService, private copyNodesService: CopyNodesService, private insertNodesService: InsertNodesService, - private projectService: TeacherProjectService, - private route: ActivatedRoute, - private router: Router + protected projectService: TeacherProjectService, + protected route: ActivatedRoute, + protected router: Router ) { - this.nodeIds = Object.keys(this.projectService.idToOrder); - this.nodeIds.shift(); // remove the 'group0' master root node from consideration + super(projectService, route, router); + this.pathToProjectAuthoringView = '../..'; } - protected importSelectedNodes(nodeIdToInsertInsideOrAfter: string): void { - this.copyNodesService - .copyNodes( - history.state.selectedNodes, - history.state.importFromProjectId, - this.configService.getProjectId() - ) - .subscribe((copiedNodes: any[]) => { - const nodesWithNewNodeIds = this.projectService.getNodesWithNewIds(copiedNodes); - this.insertNodesService.insertNodes(nodesWithNewNodeIds, nodeIdToInsertInsideOrAfter); - this.projectService.checkPotentialStartNodeIdChangeThenSaveProject().then(() => { - this.projectService.refreshProject(); - this.router.navigate(['../..'], { - relativeTo: this.route, - state: { newNodes: nodesWithNewNodeIds } - }); - }); - }); + protected insertAfter(nodeId: string): Promise { + return this.importSelectedNodes(nodeId); } - protected isGroupNode(nodeId: string): boolean { - return this.projectService.isGroupNode(nodeId); + protected insertInside(groupNodeId: string): Promise { + return this.importSelectedNodes(groupNodeId); } - protected getNodeTitle(nodeId: string): string { - return this.projectService.getNodeTitle(nodeId); - } - - protected getNodePositionById(nodeId: string): string { - return this.projectService.getNodePositionById(nodeId); - } - - protected isNodeInAnyBranchPath(nodeId: string): boolean { - return this.projectService.isNodeInAnyBranchPath(nodeId); + protected importSelectedNodes(nodeIdToInsertInsideOrAfter: string): Promise { + return lastValueFrom( + this.copyNodesService + .copyNodes( + history.state.selectedNodes, + history.state.importFromProjectId, + this.configService.getProjectId() + ) + .pipe( + map((copiedNodes: any[]): any[] => { + const nodesWithNewNodeIds = this.projectService.getNodesWithNewIds(copiedNodes); + this.insertNodesService.insertNodes(nodesWithNewNodeIds, nodeIdToInsertInsideOrAfter); + return nodesWithNewNodeIds; + }) + ) + ); } } diff --git a/src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.ts b/src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.ts index 9e57a53f1b6..0fbf8db1f32 100644 --- a/src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.ts +++ b/src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.ts @@ -18,11 +18,15 @@ export class ChooseCopyNodeLocationComponent extends ChooseNodeLocationComponent super(projectService, route, router); } - protected insertAfter(nodeId: string): any[] { - return this.copyNodesService.copyNodesAfter(this.selectedNodeIds, nodeId); + protected insertAfter(nodeId: string): Promise { + return new Promise((resolve) => { + resolve(this.copyNodesService.copyNodesAfter(this.selectedNodeIds, nodeId)); + }); } - protected insertInside(groupNodeId: string): any[] { - return this.copyNodesService.copyNodesInsideGroup(this.selectedNodeIds, groupNodeId); + protected insertInside(groupNodeId: string): Promise { + return new Promise((resolve) => { + resolve(this.copyNodesService.copyNodesInsideGroup(this.selectedNodeIds, groupNodeId)); + }); } } diff --git a/src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.ts b/src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.ts index 1d8f371fa9c..3da392ff842 100644 --- a/src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.ts +++ b/src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.ts @@ -32,11 +32,15 @@ export class ChooseMoveNodeLocationComponent extends ChooseNodeLocationComponent return !this.selectedNodeIds.includes(nodeId); } - protected insertAfter(nodeId: string): any[] { - return this.moveNodesService.moveNodesAfter(this.selectedNodeIds, nodeId); + protected insertAfter(nodeId: string): Promise { + return new Promise((resolve) => { + resolve(this.moveNodesService.moveNodesAfter(this.selectedNodeIds, nodeId)); + }); } - protected insertInside(groupNodeId: string): any[] { - return this.moveNodesService.moveNodesInsideGroup(this.selectedNodeIds, groupNodeId); + protected insertInside(groupNodeId: string): Promise { + return new Promise((resolve) => { + resolve(this.moveNodesService.moveNodesInsideGroup(this.selectedNodeIds, groupNodeId)); + }); } } diff --git a/src/assets/wise5/authoringTool/choose-node-location/choose-node-location.component.ts b/src/assets/wise5/authoringTool/choose-node-location/choose-node-location.component.ts index 68c6415ac45..91ff6367b1c 100644 --- a/src/assets/wise5/authoringTool/choose-node-location/choose-node-location.component.ts +++ b/src/assets/wise5/authoringTool/choose-node-location/choose-node-location.component.ts @@ -9,6 +9,7 @@ export abstract class ChooseNodeLocationComponent { protected inactiveGroupNodes: any[]; protected inactiveStepNodes: any[]; protected nodeIds: string[]; + protected pathToProjectAuthoringView = '..'; protected selectedNodeIds: string[]; constructor( @@ -25,18 +26,20 @@ export abstract class ChooseNodeLocationComponent { this.selectedNodeIds = history.state.selectedNodeIds; } - protected insert(nodeId: string, after: boolean): void { - this.saveAndGoToProjectView(after ? this.insertAfter(nodeId) : this.insertInside(nodeId)); + protected async insert(nodeId: string, after: boolean): Promise { + this.saveAndGoToProjectView( + after ? await this.insertAfter(nodeId) : await this.insertInside(nodeId) + ); } - protected abstract insertAfter(nodeId: string): any[]; + protected abstract insertAfter(nodeId: string): Promise; - protected abstract insertInside(groupNodeId: string): any[]; + protected abstract insertInside(groupNodeId: string): Promise; protected saveAndGoToProjectView(newNodes: any[]): void { this.projectService.checkPotentialStartNodeIdChangeThenSaveProject().then(() => { this.projectService.refreshProject(); - this.router.navigate(['..'], { + this.router.navigate([this.pathToProjectAuthoringView], { relativeTo: this.route, state: { newNodes: newNodes } }); diff --git a/src/messages.xlf b/src/messages.xlf index 6dbb4d663b2..df41bc6eee4 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -391,7 +391,7 @@ src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html - 46 + 29 src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html @@ -1362,40 +1362,6 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.1 - - Insert As First Step - - src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html - 23 - - - src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.html - 23 - - - - Insert After - - src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html - 34 - - - src/assets/wise5/authoringTool/addLesson/add-lesson-choose-location/add-lesson-choose-location.component.html - 34 - - - src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.html - 34 - - - src/assets/wise5/authoringTool/node/chooseComponentLocation/choose-component-location.component.html - 38 - - - src/assets/wise5/authoringTool/structure/choose-structure-location/choose-structure-location.component.html - 22 - - Import Step(s) @@ -8850,6 +8816,25 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.35,37 + + Insert After + + src/assets/wise5/authoringTool/addLesson/add-lesson-choose-location/add-lesson-choose-location.component.html + 34 + + + src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.html + 34 + + + src/assets/wise5/authoringTool/node/chooseComponentLocation/choose-component-location.component.html + 38 + + + src/assets/wise5/authoringTool/structure/choose-structure-location/choose-structure-location.component.html + 22 + + Insert at the Beginning @@ -9071,6 +9056,13 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.1 + + Insert As First Step + + src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.html + 23 + + Start from scratch or choose a step template: