feat(Import Step): Add dedicated choose unit page before choosing step

#1429

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

@@ -1,90 +1,65 @@
-<h4 i18n>Import Step(s)</h4>
+<h5 i18n>Choose the step(s) that you want to import, then click next.</h5>
 <br />
-<div i18n>Choose a unit to import from:</div>
-<mat-form-field style="margin-right: 20px; width: 100%">
-  <mat-label i18n>My Units</mat-label>
-  <mat-select
-    [(ngModel)]="importMyProjectId"
-    (selectionChange)="showMyProject()"
-    style="width: 100%"
-  >
-    <mat-option *ngFor="let project of myProjectsList" value="{{ project.id }}">
-      {{ project.id + ' - ' + project.name }}
-      <span *ngIf="project.runId != null"> (<span i18n>Run ID</span>: {{ project.runId }})</span>
-    </mat-option>
-  </mat-select>
-</mat-form-field>
-<br />
-<mat-form-field style="margin-right: 20px; width: 100%">
-  <mat-label i18n>Library Units</mat-label>
-  <mat-select
-    [(ngModel)]="importLibraryProjectId"
-    (selectionChange)="showLibraryProject()"
-    style="width: 100%"
+<div fxLayout="row wrap" fxLayoutGap="8px">
+  <h4 style="display: inline"><span i18n>Selected unit:</span> {{ project.metadata.title }}</h4>
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="previewProject()"
+    matTooltip="Preview Unit"
+    i18n-matTooltip
+    matTooltipPosition="above"
   >
-    <mat-option *ngFor="let project of libraryProjectsList" value="{{ project.id }}">
-      {{ project.id + ' - ' + project.name }}
-    </mat-option>
-  </mat-select>
-</mat-form-field>
-<br />
-<div *ngIf="importProject != null">
-  <div i18n>Choose the step(s) that you want to import, then click next.</div>
-  <br />
-  <div fxLayout="row wrap" fxLayoutGap="8px">
-    <h4 style="display: inline">{{ importProject.metadata.title }}</h4>
+    <mat-icon>visibility</mat-icon>
+  </button>
+</div>
+<div
+  *ngFor="let item of projectIdToOrder"
+  [ngClass]="{
+    groupHeader: item.node.type == 'group',
+    stepHeader: item.node.type != 'group'
+  }"
+>
+  <h6 *ngIf="item.order != 0 && item.node.type == 'group'">
+    {{ item.stepNumber }}: {{ item.node.title }}
+  </h6>
+  <div fxLayout="row wrap" fxLayoutGap="8px" *ngIf="item.order != 0 && item.node.type != 'group'">
+    <mat-checkbox name="item" ngDefaultControl [(ngModel)]="item.checked">
+      <h6 style="display: inline">{{ item.stepNumber }}: {{ item.node.title }}</h6>
+    </mat-checkbox>
     <button
       mat-raised-button
       color="primary"
-      (click)="previewImportProject()"
-      matTooltip="Preview Unit"
+      class="regularButton mat-raised-button mat-primary"
+      style="margin-top: -5"
+      (click)="previewNode(item.node)"
+      aria-label="Preview Step"
+      matTooltip="Preview Step"
       i18n-matTooltip
       matTooltipPosition="above"
     >
       <mat-icon>visibility</mat-icon>
     </button>
   </div>
-  <div
-    *ngFor="let importItem of importProjectIdToOrder"
-    [ngClass]="{
-      groupHeader: importItem.node.type == 'group',
-      stepHeader: importItem.node.type != 'group'
-    }"
-  >
-    <h6 *ngIf="importItem.order != 0 && importItem.node.type == 'group'">
-      {{ importItem.stepNumber }}: {{ importItem.node.title }}
-    </h6>
-    <div
-      fxLayout="row wrap"
-      fxLayoutGap="8px"
-      *ngIf="importItem.order != 0 && importItem.node.type != 'group'"
-    >
-      <mat-checkbox name="importItem" ngDefaultControl [(ngModel)]="importItem.checked">
-        <h6 style="display: inline">{{ importItem.stepNumber }}: {{ importItem.node.title }}</h6>
-      </mat-checkbox>
-      <button
-        mat-raised-button
-        color="primary"
-        class="regularButton mat-raised-button mat-primary"
-        style="margin-top: -5"
-        (click)="previewImportNode(importItem.node)"
-        aria-label="Preview Step"
-        matTooltip="Preview Step"
-        i18n-matTooltip
-        matTooltipPosition="above"
-      >
-        <mat-icon>visibility</mat-icon>
-      </button>
-    </div>
-  </div>
 </div>
 <hr />
 <div class="nav-controls" fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="end center">
+  <button
+    mat-button
+    color="primary"
+    routerLink="../choose-unit"
+    aria-label="Back"
+    i18n-aria-label
+    i18n
+  >
+    Back
+  </button>
+  <span fxFlex></span>
   <button mat-button color="primary" routerLink="../.." aria-label="cancel" i18n>Cancel</button>
   <button
     mat-raised-button
     color="primary"
-    (click)="importSteps()"
+    (click)="goToChooseLocation()"
     [disabled]="getSelectedNodesToImport().length == 0"
     matTooltip="Next"
     i18n-matTooltip

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

@@ -1,6 +1,4 @@
 import { Component } from '@angular/core';
-import { ConfigService } from '../../../../assets/wise5/services/configService';
-import { ProjectLibraryService } from '../../../../assets/wise5/services/projectLibraryService';
 import { TeacherProjectService } from '../../../../assets/wise5/services/teacherProjectService';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -10,71 +8,46 @@ import { ActivatedRoute, Router } from '@angular/router';
   templateUrl: 'choose-import-step.component.html'
 })
 export class ChooseImportStepComponent {
-  protected importLibraryProjectId: number;
-  protected importMyProjectId: number;
-  protected importProject: any;
-  private importProjectId: number;
-  protected importProjectIdToOrder: any;
-  private importProjectItems: any[] = [];
-  protected libraryProjectsList: any[];
-  protected myProjectsList: any[];
+  protected project: any;
+  private projectId: number;
+  protected projectIdToOrder: any;
+  private projectItems: any[] = [];
 
   constructor(
-    private configService: ConfigService,
-    private projectLibraryService: ProjectLibraryService,
     private projectService: TeacherProjectService,
     private route: ActivatedRoute,
     private router: Router
   ) {}
 
   ngOnInit() {
-    this.myProjectsList = this.configService.getAuthorableProjects();
-    this.projectLibraryService.getLibraryProjects().then((libraryProjects) => {
-      this.libraryProjectsList = this.projectLibraryService.sortAndFilterUniqueProjects(
-        libraryProjects
-      );
+    this.projectId = history.state.importProjectId;
+    this.projectService.retrieveProjectById(this.projectId).then((projectJSON) => {
+      this.project = projectJSON;
+      const nodeOrderOfProject = this.projectService.getNodeOrderOfProject(this.project);
+      this.projectIdToOrder = Object.values(nodeOrderOfProject.idToOrder);
+      this.projectItems = nodeOrderOfProject.nodes;
     });
   }
 
-  protected showMyProject(): void {
-    this.importLibraryProjectId = null;
-    this.showProject(this.importMyProjectId);
+  protected previewNode(node: any): void {
+    window.open(`${this.project.previewProjectURL}/${node.id}`);
   }
 
-  protected showLibraryProject(): void {
-    this.importMyProjectId = null;
-    this.showProject(this.importLibraryProjectId);
+  protected previewProject(): void {
+    window.open(`${this.project.previewProjectURL}`);
   }
 
-  private showProject(importProjectId: number): void {
-    this.importProjectId = importProjectId;
-    this.projectService.retrieveProjectById(this.importProjectId).then((projectJSON) => {
-      this.importProject = projectJSON;
-      const nodeOrderOfProject = this.projectService.getNodeOrderOfProject(this.importProject);
-      this.importProjectIdToOrder = Object.values(nodeOrderOfProject.idToOrder);
-      this.importProjectItems = nodeOrderOfProject.nodes;
-    });
-  }
-
-  protected previewImportNode(node: any): void {
-    window.open(`${this.importProject.previewProjectURL}/${node.id}`);
-  }
-
-  protected previewImportProject(): void {
-    window.open(`${this.importProject.previewProjectURL}`);
-  }
-
-  protected importSteps(): void {
+  protected goToChooseLocation(): void {
     this.router.navigate(['../choose-location'], {
       relativeTo: this.route,
       state: {
-        importFromProjectId: this.importProjectId,
+        importFromProjectId: this.projectId,
         selectedNodes: this.getSelectedNodesToImport()
       }
     });
   }
 
   protected getSelectedNodesToImport(): any[] {
-    return this.importProjectItems.filter((item) => item.checked).map((item) => item.node);
+    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

@@ -0,0 +1,21 @@
+<ng-template #projects let-projects="projects">
+  <div *ngFor="let project of projects" class="projectItem" (click)="chooseProject(project)">
+    {{ project.id + ' - ' + project.name }}
+    <span *ngIf="project.runId != null"> (<span i18n>Run ID</span>: {{ project.runId }})</span>
+  </div>
+</ng-template>
+<h5 i18n>Choose a unit from which to import step(s).</h5>
+<mat-tab-group>
+  <mat-tab label="My Units" i18n-label>
+    <ng-container *ngTemplateOutlet="projects; context: { projects: myProjects }"></ng-container
+  ></mat-tab>
+  <mat-tab label="Library Units" i18n-label>
+    <ng-container
+      *ngTemplateOutlet="projects; context: { projects: libraryProjects }"
+    ></ng-container
+  ></mat-tab>
+</mat-tab-group>
+<hr />
+<div class="nav-controls" fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="end center">
+  <button mat-button color="primary" routerLink="../.." aria-label="cancel" i18n>Cancel</button>
+</div>

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

@@ -0,0 +1,7 @@
+.projectItem {
+  cursor: pointer;
+}
+
+.projectItem:hover {
+  background-color:#add8e6;
+}

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

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { ConfigService } from '../../../../assets/wise5/services/configService';
+import { ProjectLibraryService } from '../../../../assets/wise5/services/projectLibraryService';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'choose-import-unit',
+  styleUrls: ['./choose-import-unit.component.scss'],
+  templateUrl: './choose-import-unit.component.html'
+})
+export class ChooseImportUnitComponent {
+  protected libraryProjects: any[];
+  protected myProjects: any[];
+
+  constructor(
+    private configService: ConfigService,
+    private projectLibraryService: ProjectLibraryService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.myProjects = this.configService.getAuthorableProjects();
+    this.projectLibraryService.getLibraryProjects().then((libraryProjects) => {
+      this.libraryProjects = this.projectLibraryService.sortAndFilterUniqueProjects(
+        libraryProjects
+      );
+    });
+  }
+
+  protected chooseProject(project: any): void {
+    this.router.navigate(['../choose-step'], {
+      relativeTo: this.route,
+      state: { importProjectId: project.id }
+    });
+  }
+}

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

@@ -35,6 +35,7 @@ import { ChooseImportComponentComponent } from '../../assets/wise5/authoringTool
 import { ChooseMoveNodeLocationComponent } from '../../assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component';
 import { ChooseCopyNodeLocationComponent } from '../../assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component';
 import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component';
+import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-import-unit/choose-import-unit.component';
 
 const routes: Routes = [
   {
@@ -112,6 +113,10 @@ const routes: Routes = [
               {
                 path: 'choose-step',
                 component: ChooseImportStepComponent
+              },
+              {
+                path: 'choose-unit',
+                component: ChooseImportUnitComponent
               }
             ]
           },

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

@@ -49,6 +49,7 @@ import { InsertNodeInsideButtonComponent } from '../../assets/wise5/authoringToo
 import { NodeIconAndTitleComponent } from '../../assets/wise5/authoringTool/choose-node-location/node-icon-and-title/node-icon-and-title.component';
 import { NodeWithMoveAfterButtonComponent } from '../../assets/wise5/authoringTool/choose-node-location/node-with-move-after-button/node-with-move-after-button.component';
 import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component';
+import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-import-unit/choose-import-unit.component';
 
 @NgModule({
   declarations: [
@@ -65,6 +66,7 @@ import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringToo
     ChooseCopyNodeLocationComponent,
     ChooseImportStepComponent,
     ChooseImportStepLocationComponent,
+    ChooseImportUnitComponent,
     ChooseNewComponent,
     ChooseNewNodeLocation,
     ChooseNewNodeTemplate,

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

@@ -153,7 +153,7 @@ export class ProjectAuthoringComponent {
   }
 
   protected importStep(): void {
-    this.router.navigate([`/teacher/edit/unit/${this.projectId}/import-step/choose-step`]);
+    this.router.navigate([`/teacher/edit/unit/${this.projectId}/import-step/choose-unit`]);
   }
 
   protected goToAdvancedAuthoring(): void {