feat(Authoring): Add step buttons navigate to add step route (#1709)

src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html

@@ -1,6 +1,6 @@
 <h5 i18n>Choose the step(s) that you want to import, then select Next.</h5>
 <p fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="8px">
-  <strong i18n>Selected unit: {{ project.metadata.title }}</strong>
+  <strong i18n>Selected unit: {{ project?.metadata.title }}</strong>
   <button
     mat-raised-button
     color="primary"
@@ -48,6 +48,7 @@ <h6 *ngIf="item.order != 0 && item.node.type == 'group'">
       mat-button
       color="primary"
       routerLink="../choose-unit"
+      [state]="{ nodeIdToInsertInsideOrAfter: nodeIdToInsertInsideOrAfter }"
       aria-label="Back"
       i18n-aria-label
       i18n
@@ -59,15 +60,14 @@ <h6 *ngIf="item.order != 0 && item.node.type == 'group'">
     <button
       mat-raised-button
       color="primary"
-      (click)="goToChooseLocation()"
+      (click)="import(getSelectedNodesToImport())"
       [disabled]="getSelectedNodesToImport().length == 0"
-      matTooltip="Next"
+      matTooltip="Submit"
       i18n-matTooltip
       matTooltipPosition="above"
-      aria-label="next"
       i18n
     >
-      Next
+      Submit
     </button>
   </div>
 </div>

src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.ts

@@ -1,27 +1,35 @@
 import { Component } from '@angular/core';
 import { TeacherProjectService } from '../../../../assets/wise5/services/teacherProjectService';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ConfigService } from '../../../../assets/wise5/services/configService';
+import { CopyNodesService } from '../../../../assets/wise5/services/copyNodesService';
+import { InsertNodesService } from '../../../../assets/wise5/services/insertNodesService';
+import { AbstractImportStepComponent } from '../../../../assets/wise5/authoringTool/addNode/abstract-import-step/abstract-import-step.component';
 
 @Component({
   selector: 'choose-import-step',
   styleUrls: ['choose-import-step.component.scss', '../../add-content.scss'],
   templateUrl: 'choose-import-step.component.html'
 })
-export class ChooseImportStepComponent {
+export class ChooseImportStepComponent extends AbstractImportStepComponent {
   protected project: any;
-  private projectId: number;
   protected projectIdToOrder: any;
   private projectItems: any[] = [];
 
   constructor(
-    private projectService: TeacherProjectService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
+    protected configService: ConfigService,
+    protected copyNodesService: CopyNodesService,
+    protected insertNodesService: InsertNodesService,
+    protected projectService: TeacherProjectService,
+    protected route: ActivatedRoute,
+    protected router: Router
+  ) {
+    super(configService, copyNodesService, insertNodesService, projectService, route, router);
+  }
 
   ngOnInit() {
-    this.projectId = history.state.importProjectId;
-    this.projectService.retrieveProjectById(this.projectId).then((projectJSON) => {
+    super.ngOnInit();
+    this.projectService.retrieveProjectById(this.importProjectId).then((projectJSON) => {
       this.project = projectJSON;
       const nodeOrderOfProject = this.projectService.getNodeOrderOfProject(this.project);
       this.projectIdToOrder = Object.values(nodeOrderOfProject.idToOrder);
@@ -37,16 +45,6 @@ export class ChooseImportStepComponent {
     window.open(`${this.project.previewProjectURL}`);
   }
 
-  protected goToChooseLocation(): void {
-    this.router.navigate(['../choose-location'], {
-      relativeTo: this.route,
-      state: {
-        importFromProjectId: this.projectId,
-        selectedNodes: this.getSelectedNodesToImport()
-      }
-    });
-  }
-
   protected getSelectedNodesToImport(): any[] {
     return this.projectItems.filter((item) => item.checked).map((item) => item.node);
   }

src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html

@@ -25,7 +25,15 @@ <h5 i18n>Choose a unit from which to import step(s).</h5>
 <div class="nav-controls">
   <mat-divider></mat-divider>
   <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="end center">
-    <button mat-button color="primary" routerLink="../../choose-template" i18n>Back</button>
+    <button
+      mat-button
+      color="primary"
+      routerLink="../../choose-template"
+      [state]="{ nodeIdToInsertInsideOrAfter: nodeIdToInsertInsideOrAfter }"
+      i18n
+    >
+      Back
+    </button>
     <span fxFlex></span>
     <button mat-button color="primary" routerLink="../../.." i18n>Cancel</button>
   </div>

src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts

@@ -12,6 +12,7 @@ import { Subscription } from 'rxjs';
 export class ChooseImportUnitComponent {
   protected libraryProjects: any[];
   protected myProjects: any[];
+  protected nodeIdToInsertInsideOrAfter: string;
   private subscriptions: Subscription = new Subscription();
 
   constructor(
@@ -22,6 +23,7 @@ export class ChooseImportUnitComponent {
   ) {}
 
   ngOnInit(): void {
+    this.nodeIdToInsertInsideOrAfter = history.state.nodeIdToInsertInsideOrAfter;
     this.myProjects = this.configService.getAuthorableProjects();
     this.subscriptions.add(
       this.projectLibraryService.getLibraryProjects().subscribe((libraryProjects) => {
@@ -37,7 +39,10 @@ export class ChooseImportUnitComponent {
   protected chooseProject(project: any): void {
     this.router.navigate(['../choose-step'], {
       relativeTo: this.route,
-      state: { importProjectId: project.id }
+      state: {
+        importProjectId: project.id,
+        nodeIdToInsertInsideOrAfter: this.nodeIdToInsertInsideOrAfter
+      }
     });
   }
 }

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

@@ -14,10 +14,8 @@ import { AddLessonConfigureComponent } from '../../assets/wise5/authoringTool/ad
 import { AddLessonChooseLocationComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-choose-location/add-lesson-choose-location.component';
 import { ChooseNewNodeTemplate } from '../../assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component';
 import { AddYourOwnNode } from '../../assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component';
-import { ChooseNewNodeLocation } from '../../assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component';
 import { ChooseAutomatedAssessmentComponent } from '../../assets/wise5/authoringTool/addNode/choose-automated-assessment/choose-automated-assessment.component';
 import { ConfigureAutomatedAssessmentComponent } from '../../assets/wise5/authoringTool/addNode/configure-automated-assessment/configure-automated-assessment.component';
-import { ChooseImportStepLocationComponent } from '../authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component';
 import { ChooseSimulationComponent } from '../../assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component';
 import { ChooseImportStepComponent } from '../authoring-tool/import-step/choose-import-step/choose-import-step.component';
 import { AdvancedProjectAuthoringComponent } from '../../assets/wise5/authoringTool/advanced/advanced-project-authoring.component';
@@ -104,17 +102,9 @@ const routes: Routes = [
                 path: 'choose-template',
                 component: ChooseNewNodeTemplate
               },
-              {
-                path: 'choose-location',
-                component: ChooseNewNodeLocation
-              },
               {
                 path: 'import-step',
                 children: [
-                  {
-                    path: 'choose-location',
-                    component: ChooseImportStepLocationComponent
-                  },
                   {
                     path: 'choose-step',
                     component: ChooseImportStepComponent

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

@@ -1,15 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { AddYourOwnNode } from '../../assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component';
-import { ChooseNewNodeLocation } from '../../assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component';
 import { ChooseNewNodeTemplate } from '../../assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component';
 import { AdvancedProjectAuthoringComponent } from '../../assets/wise5/authoringTool/advanced/advanced-project-authoring.component';
 import { CardSelectorComponent } from '../../assets/wise5/authoringTool/components/card-selector/card-selector.component';
 import { RequiredErrorLabelComponent } from '../../assets/wise5/authoringTool/node/advanced/required-error-label/required-error-label.component';
 import { RubricAuthoringComponent } from '../../assets/wise5/authoringTool/rubric/rubric-authoring.component';
 import { NodeIconChooserDialog } from '../../assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component';
 import { ChooseNewComponent } from '../authoring-tool/add-component/choose-new-component/choose-new-component.component';
-import { ChooseImportStepLocationComponent } from '../authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component';
 import { ChooseImportStepComponent } from '../authoring-tool/import-step/choose-import-step/choose-import-step.component';
 import { ComponentAuthoringModule } from './component-authoring.module';
 import { ComponentStudentModule } from '../../assets/wise5/components/component/component-student.module';
@@ -80,10 +78,8 @@ import { AddLessonButtonComponent } from '../../assets/wise5/authoringTool/add-l
     ChooseComponentLocationComponent,
     ChooseCopyNodeLocationComponent,
     ChooseImportStepComponent,
-    ChooseImportStepLocationComponent,
     ChooseImportUnitComponent,
     ChooseNewComponent,
-    ChooseNewNodeLocation,
     ChooseNewNodeTemplate,
     ChooseMoveNodeLocationComponent,
     ChooseSimulationComponent,

src/assets/wise5/authoringTool/addNode/abstract-import-step/abstract-import-step.component.ts

@@ -0,0 +1,39 @@
+import { Directive, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ConfigService } from '../../../services/configService';
+import { CopyNodesService } from '../../../services/copyNodesService';
+import { InsertNodesService } from '../../../services/insertNodesService';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+
+@Directive()
+export abstract class AbstractImportStepComponent implements OnInit {
+  protected importProjectId: number;
+  protected nodeIdToInsertInsideOrAfter: string;
+
+  constructor(
+    protected configService: ConfigService,
+    protected copyNodesService: CopyNodesService,
+    protected insertNodesService: InsertNodesService,
+    protected projectService: TeacherProjectService,
+    protected route: ActivatedRoute,
+    protected router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.nodeIdToInsertInsideOrAfter = history.state.nodeIdToInsertInsideOrAfter;
+    this.importProjectId = history.state.importProjectId;
+  }
+
+  protected import(nodesToImport: any[]): void {
+    this.copyNodesService
+      .copyNodes(nodesToImport, this.importProjectId, this.configService.getProjectId())
+      .subscribe((copiedNodes: any[]) => {
+        const nodesWithNewNodeIds = this.projectService.getNodesWithNewIds(copiedNodes);
+        this.insertNodesService.insertNodes(nodesWithNewNodeIds, this.nodeIdToInsertInsideOrAfter);
+        this.projectService.checkPotentialStartNodeIdChangeThenSaveProject().then(() => {
+          this.projectService.refreshProject();
+          this.router.navigate(['../../..'], { relativeTo: this.route });
+        });
+      });
+  }
+}