refactor(Project Authoring): Extract move node location selection feature to component

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

@@ -32,6 +32,7 @@ import { ProjectAssetAuthoringComponent } from '../../assets/wise5/authoringTool
 import { NotebookAuthoringComponent } from '../../assets/wise5/authoringTool/notebook-authoring/notebook-authoring.component';
 import { RecoveryAuthoringComponent } from '../../assets/wise5/authoringTool/recovery-authoring/recovery-authoring.component';
 import { ChooseImportComponentComponent } from '../../assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component';
+import { ChooseMoveNodeLocationComponent } from '../../assets/wise5/authoringTool/choose-move-node-location/choose-move-node-location.component';
 
 const routes: Routes = [
   {
@@ -96,6 +97,7 @@ const routes: Routes = [
             path: 'asset',
             component: ProjectAssetAuthoringComponent
           },
+          { path: 'choose-move-location', component: ChooseMoveNodeLocationComponent },
           {
             path: 'import-step',
             children: [

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

@@ -42,6 +42,7 @@ import { AuthoringToolBarComponent } from '../../assets/wise5/authoringTool/comp
 import { StepToolsModule } from '../../assets/wise5/themes/default/themeComponents/stepTools/step-tools.module';
 import { ProjectAuthoringComponent } from '../../assets/wise5/authoringTool/project-authoring/project-authoring.component';
 import { AuthoringToolComponent } from '../../assets/wise5/authoringTool/authoring-tool.component';
+import { ChooseMoveNodeLocationComponent } from '../../assets/wise5/authoringTool/choose-move-node-location/choose-move-node-location.component';
 
 @NgModule({
   declarations: [
@@ -60,6 +61,7 @@ import { AuthoringToolComponent } from '../../assets/wise5/authoringTool/authori
     ChooseNewComponent,
     ChooseNewNodeLocation,
     ChooseNewNodeTemplate,
+    ChooseMoveNodeLocationComponent,
     ChooseSimulationComponent,
     ConcurrentAuthorsMessageComponent,
     ConfigureAutomatedAssessmentComponent,

src/assets/wise5/authoringTool/choose-move-node-location/choose-move-node-location.component.html

@@ -0,0 +1,153 @@
+<ng-template #moveAfterButton let-nodeId="nodeId">
+  <button
+    mat-raised-button
+    color="primary"
+    [disabled]="!canMove(nodeId)"
+    (click)="move(nodeId, true)"
+    matTooltip="Move after"
+    matTooltipPosition="above"
+    i18n-matTooltip
+  >
+    <mat-icon>subdirectory_arrow_left</mat-icon>
+  </button></ng-template
+>
+<ng-template #moveInsideButton let-nodeId="nodeId">
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="move(nodeId, false)"
+    matTooltip="Move as first"
+    matTooltipPosition="above"
+    i18n-matTooltip
+  >
+    <mat-icon>call_received</mat-icon>
+  </button></ng-template
+>
+<ng-template #nodeIconAndTitle let-nodeId="nodeId" let-showPosition="showPosition">
+  <node-icon [nodeId]="nodeId" size="18"></node-icon>&nbsp;
+  <p>
+    <span *ngIf="showPosition">{{ getNodePositionById(nodeId) }}: </span>{{ getNodeTitle(nodeId) }}
+  </p>
+</ng-template>
+<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
+  <h5 i18n>Choose a new location by clicking one of the buttons below</h5>
+  <button mat-raised-button color="primary" routerLink=".." aria-label="Cancel" i18n>Cancel</button>
+</div>
+<div style="margin-top: 20px; margin-left: 20px">
+  <ng-container *ngIf="moveGroup">
+    <ng-container
+      *ngTemplateOutlet="moveInsideButton; context: { nodeId: 'group0' }"
+    ></ng-container>
+  </ng-container>
+  <div
+    *ngFor="let nodeId of nodeIds"
+    [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)
+      }"
+      [ngStyle]="{ 'background-color': getBackgroundColor(nodeId) }"
+    >
+      <div fxLayout="row" fxLayoutGap="8px">
+        <div fxLayout="row" fxLayoutAlign="start center">
+          <ng-container
+            *ngTemplateOutlet="nodeIconAndTitle; context: { nodeId: nodeId, showPosition: true }"
+          ></ng-container>
+        </div>
+        <ng-container *ngIf="isGroupNode(nodeId) && !moveGroup">
+          <ng-container
+            *ngTemplateOutlet="moveInsideButton; context: { nodeId: nodeId }"
+          ></ng-container>
+        </ng-container>
+        <ng-container *ngIf="!isGroupNode(nodeId) || (isGroupNode(nodeId) && moveGroup)">
+          <ng-container
+            *ngTemplateOutlet="moveAfterButton; context: { nodeId: nodeId }"
+          ></ng-container>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
+    <h6 class="underline">Unused Lessons</h6>
+    <ng-container *ngIf="moveGroup">
+      <ng-container
+        *ngTemplateOutlet="moveInsideButton; context: { nodeId: 'inactiveGroups' }"
+      ></ng-container>
+    </ng-container>
+  </div>
+  <div *ngIf="inactiveGroupNodes.length == 0">
+    <span i18n>There are no Unused Lessons</span>
+  </div>
+  <ng-container *ngFor="let inactiveNode of inactiveGroupNodes">
+    <div fxLayout="row" fxLayoutAlign="start center" [ngClass]="{ groupHeader: true, }">
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
+        <ng-container
+          *ngTemplateOutlet="nodeIconAndTitle; context: { nodeId: inactiveNode.id }"
+        ></ng-container>
+        <ng-container *ngIf="!moveGroup">
+          <ng-container
+            *ngTemplateOutlet="moveInsideButton; context: { nodeId: inactiveNode.id }"
+          ></ng-container>
+        </ng-container>
+        <ng-container *ngIf="moveGroup">
+          <ng-container
+            *ngTemplateOutlet="moveAfterButton; context: { nodeId: inactiveNode.id }"
+          ></ng-container>
+        </ng-container>
+      </div>
+    </div>
+    <ng-container *ngFor="let inactiveChildId of inactiveNode.ids">
+      <div *ngIf="!moveGroup">
+        <div
+          fxLayout="row"
+          [ngClass]="{
+            stepHeader: true,
+            branchPathStepHeader: isNodeInAnyBranchPath(inactiveChildId)
+          }"
+          [ngStyle]="{ 'background-color': getBackgroundColor(nodeId) }"
+        >
+          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
+            <ng-container
+              *ngTemplateOutlet="nodeIconAndTitle; context: { nodeId: inactiveChildId }"
+            ></ng-container>
+            <ng-container
+              *ngTemplateOutlet="moveAfterButton; context: { nodeId: inactiveChildId }"
+            ></ng-container>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+  </ng-container>
+  <div *ngIf="!moveGroup">
+    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
+      <h6 class="underline" i18n>Unused Steps</h6>
+      <ng-container
+        *ngTemplateOutlet="moveInsideButton; context: { nodeId: 'inactiveNodes' }"
+      ></ng-container>
+    </div>
+    <div *ngIf="inactiveStepNodes.length == 0">
+      <span i18n>There are no Unused Steps</span>
+    </div>
+    <ng-container *ngFor="let inactiveNode of inactiveStepNodes">
+      <div *ngIf="getParentGroup(inactiveNode.id) == null">
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
+          <ng-container
+            *ngTemplateOutlet="nodeIconAndTitle; context: { nodeId: inactiveNode.id }"
+          ></ng-container>
+          <ng-container
+            *ngTemplateOutlet="moveAfterButton; context: { nodeId: inactiveNode.id }"
+          ></ng-container>
+        </div>
+      </div>
+    </ng-container>
+  </div>
+</div>

src/assets/wise5/authoringTool/choose-move-node-location/choose-move-node-location.component.scss

@@ -0,0 +1,15 @@
+.groupHeader {
+  margin-left: 5px !important;
+}
+
+.stepHeader {
+  margin-left: 30px !important;
+}
+
+.branchPathStepHeader {
+  margin-left: 55px !important;
+}
+
+.mat-icon {
+  margin: 0px;
+}

src/assets/wise5/authoringTool/choose-move-node-location/choose-move-node-location.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChooseMoveNodeLocationComponent } from './choose-move-node-location.component';
+import { MoveNodesService } from '../../services/moveNodesService';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TeacherProjectService } from '../../services/teacherProjectService';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { StudentTeacherCommonServicesModule } from '../../../../app/student-teacher-common-services.module';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+let component: ChooseMoveNodeLocationComponent;
+let fixture: ComponentFixture<ChooseMoveNodeLocationComponent>;
+describe('ChooseMoveNodeLocationComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ChooseMoveNodeLocationComponent],
+      imports: [HttpClientTestingModule, RouterTestingModule, StudentTeacherCommonServicesModule],
+      providers: [MoveNodesService, TeacherProjectService],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+    window.history.pushState(
+      {
+        selectedNodeIds: ['node1']
+      },
+      '',
+      ''
+    );
+    fixture = TestBed.createComponent(ChooseMoveNodeLocationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/assets/wise5/authoringTool/choose-move-node-location/choose-move-node-location.component.ts

@@ -0,0 +1,81 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TeacherProjectService } from '../../services/teacherProjectService';
+import { MoveNodesService } from '../../services/moveNodesService';
+
+@Component({
+  templateUrl: 'choose-move-node-location.component.html',
+  styleUrls: ['./choose-move-node-location.component.scss']
+})
+export class ChooseMoveNodeLocationComponent {
+  protected inactiveGroupNodes: any[];
+  protected inactiveStepNodes: any[];
+  protected moveGroup: boolean;
+  protected nodeIds: string[];
+  private selectedNodeIds: string[];
+
+  constructor(
+    private moveNodesService: MoveNodesService,
+    private projectService: TeacherProjectService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.inactiveGroupNodes = this.projectService.getInactiveGroupNodes();
+    this.inactiveStepNodes = this.projectService.getInactiveStepNodes();
+    this.selectedNodeIds = history.state.selectedNodeIds;
+    this.moveGroup = this.projectService.getNode(this.selectedNodeIds[0]).isGroup();
+    this.nodeIds = Object.keys(this.projectService.idToOrder);
+    this.nodeIds.shift(); // remove the 'group0' root node from consideration
+    if (this.moveGroup) {
+      this.nodeIds = this.nodeIds.filter((nodeId) => this.projectService.isGroupNode(nodeId));
+    }
+  }
+
+  protected canMove(nodeId: string): boolean {
+    return !this.selectedNodeIds.includes(nodeId);
+  }
+
+  protected move(nodeId: string, after: boolean): void {
+    this.saveAndGoToProjectView(
+      after
+        ? this.moveNodesService.moveNodesAfter(this.selectedNodeIds, nodeId)
+        : this.moveNodesService.moveNodesInsideGroup(this.selectedNodeIds, nodeId)
+    );
+  }
+
+  private saveAndGoToProjectView(newNodes: any[]): void {
+    this.projectService.checkPotentialStartNodeIdChangeThenSaveProject().then(() => {
+      this.projectService.refreshProject();
+      this.router.navigate(['..'], {
+        relativeTo: this.route,
+        state: { newNodes: newNodes }
+      });
+    });
+  }
+
+  protected isGroupNode(nodeId: string): boolean {
+    return this.projectService.isGroupNode(nodeId);
+  }
+
+  protected getNodeTitle(nodeId: string): string {
+    return this.projectService.getNodeTitle(nodeId);
+  }
+
+  protected getNodePositionById(nodeId: string): any {
+    return this.projectService.getNodePositionById(nodeId);
+  }
+
+  protected isNodeInAnyBranchPath(nodeId: string): boolean {
+    return this.projectService.isNodeInAnyBranchPath(nodeId);
+  }
+
+  protected getParentGroup(nodeId: string): any {
+    return this.projectService.getParentGroup(nodeId);
+  }
+
+  protected getBackgroundColor(nodeId: string): string {
+    return this.projectService.getBackgroundColor(nodeId);
+  }
+}

src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html

@@ -352,7 +352,7 @@ <h6 class="underline">Unused Lessons</h6>
                 <span i18n>There are no Unused Lessons</span>
               </div>
               <ng-container *ngFor="let inactiveNode of inactiveGroupNodes">
-                <div *ngIf="isGroupNode(inactiveNode.id)">
+                <div *ngIf="isGroupNode(inactiveNode.id)" id="{{ inactiveNode.id }}">
                   <div
                     fxLayout="row"
                     fxLayoutAlign="start center"
@@ -417,7 +417,7 @@ <h6 class="pointer">
                     </div>
                   </div>
                   <ng-container *ngFor="let inactiveChildId of inactiveNode.ids">
-                    <div *ngIf="!insertGroupMode" class="projectItem">
+                    <div *ngIf="!insertGroupMode" class="projectItem" id="{{ inactiveChildId }}">
                       <div
                         fxLayout="row"
                         [ngClass]="{