Feature/osmt 38 import directly to collection

ui/src/app/app-routing.module.ts

@@ -25,7 +25,9 @@ import {BatchImportComponent} from "./richskill/import/batch-import.component"
 import { ActionByRoles, ButtonAction } from "./auth/auth-roles"
 import {MyWorkspaceComponent} from "./my-workspace/my-workspace.component"
 import {ConvertToCollectionComponent} from "./my-workspace/convert-to-collection/convert-to-collection.component"
-
+import {
+  BatchImportCollectionComponent
+} from "./collection/create-collection/batch-import-collection/batch-import-collection.component"
 
 const routes: Routes = [
   { path: "", redirectTo: "/skills", pathMatch: "full" },
@@ -106,6 +108,14 @@ const routes: Routes = [
     },
     canDeactivate: [FormDirtyGuard]
   },
+  {path: "collections/create/batch-import",
+    component: BatchImportCollectionComponent,
+    canActivate: [AuthGuard],
+    data: {
+      roles: ActionByRoles.get(ButtonAction.CollectionCreate)
+    },
+    canDeactivate: [FormDirtyGuard]
+  },
   // collection search results
   {path: "collections/search",
     component: CollectionSearchResultsComponent,

ui/src/app/app.module.ts

@@ -84,7 +84,11 @@ import {PublishCollectionComponent} from "./collection/detail/publish-collection
 import {BlockingLoaderComponent} from "./core/blocking-loader.component"
 import {CollectionSkillSearchComponent} from "./collection/collection-skill-search.component"
 import {BatchImportComponent} from "./richskill/import/batch-import.component"
-import {FieldMappingSelectComponent, FieldMappingTableComponent} from "./richskill/import/field-mapping-table.component"
+import {
+  FieldMappingSelectComponent,
+  FieldMappingTableComponent,
+  BatchImportDestinationSelectComponent
+} from "./richskill/import/field-mapping-table.component"
 import {
   ImportPreviewTableComponent,
   NamedReferenceComponent
@@ -111,6 +115,7 @@ import {OsmtTableModule} from "./table/osmt-table.module"
 import { getBaseApi } from "./api-versions"
 import { InlineHeadingComponent } from './richskill/import/inline-heading/inline-heading.component'
 import { InlineErrorComponent } from "./richskill/import/inline-error/inline-error.component"
+import { BatchImportCollectionComponent } from './collection/create-collection/batch-import-collection/batch-import-collection.component'
 
 export function initializeApp(
   appConfig: AppConfig,
@@ -217,8 +222,10 @@ export function initializeApp(
     CollectionSkillSearchComponent,
     BatchImportComponent,
     FieldMappingTableComponent,
+    BatchImportDestinationSelectComponent,
     FieldMappingSelectComponent,
     ImportPreviewTableComponent,
+    InlineHeadingComponent,
     NamedReferenceComponent,
     InlineErrorComponent,
     AuditLogComponent,
@@ -229,7 +236,7 @@ export function initializeApp(
     CollectionPipe,
     ConvertToCollectionComponent,
     SizePaginationComponent,
-    InlineHeadingComponent,
+    BatchImportCollectionComponent,
   ],
   imports: [
     NgIdleKeepaliveModule.forRoot(),

ui/src/app/collection/create-collection/batch-import-collection/batch-import-collection.component.spec.ts

@@ -0,0 +1,83 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRouteStubSpec } from "@test/util/activated-route-stub.spec";
+import { Type } from "@angular/core";
+import { RouterTestingModule } from "@angular/router/testing";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { Location } from "@angular/common";
+import { Title } from "@angular/platform-browser";
+import { BatchImportCollectionComponent } from './batch-import-collection.component';
+import { AppConfig } from "../../../app.config";
+import { ToastService } from "../../../toast/toast.service";
+import { EnvironmentService } from "../../../core/environment.service";
+import { CollectionServiceStub, EnvironmentServiceStub, RouterStub } from "@test/resource/mock-stubs";
+import { CollectionService } from "../../service/collection.service";
+
+
+let activatedRoute: ActivatedRouteStubSpec
+let component: BatchImportCollectionComponent
+let fixture: ComponentFixture<BatchImportCollectionComponent>
+
+export function createComponent(T: Type<BatchImportCollectionComponent>): Promise<void> {
+  fixture = TestBed.createComponent(T)
+  component = fixture.componentInstance
+
+  // 1st change detection triggers ngOnInit which gets a hero
+  fixture.detectChanges()
+
+  return fixture.whenStable().then(() => {
+    // 2nd change detection displays the async-fetched hero
+    fixture.detectChanges()
+  })
+}
+
+describe('BatchImportCollectionComponent', () => {
+  beforeEach(() => {
+    activatedRoute = new ActivatedRouteStubSpec()
+  })
+
+  let fixture: ComponentFixture<BatchImportCollectionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BatchImportCollectionComponent],
+      imports: [
+        RouterTestingModule,
+        HttpClientTestingModule
+      ],
+      providers: [
+        AppConfig,
+        Location,
+        Title,
+        ToastService,
+        { provide: EnvironmentService, useClass: EnvironmentServiceStub },
+        { provide: CollectionService, useClass: CollectionServiceStub },
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: Router, useClass: RouterStub },
+      ]
+    })
+      .compileComponents()
+
+    const appConfig = TestBed.inject(AppConfig)
+    AppConfig.settings = appConfig.defaultConfig()
+
+    const environmentService = TestBed.inject(EnvironmentService)
+    environmentService.environment.editableAuthor = true
+    AppConfig.settings.editableAuthor = true  // Doubly sure
+
+    activatedRoute.setParams({ uuid: "uuid1" })
+    createComponent(BatchImportCollectionComponent)
+  }));
+
+  it("should be created", () => {
+    expect(component).toBeTruthy()
+  })
+
+  it("nameLabel should return", () => {
+    component.collectionUuid = ""
+    expect(component.nameLabel).toEqual("New Collection Name")
+
+    component.collectionUuid = "uuid"
+    expect(component.nameLabel).toEqual("Collection Name")
+  })
+});

ui/src/app/collection/create-collection/batch-import-collection/batch-import-collection.component.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { Title } from "@angular/platform-browser";
+import { Location } from "@angular/common";
+import { ActivatedRoute, Router } from "@angular/router";
+import { CollectionFormComponent } from "../collection-form.component";
+import { ExtrasSelectedSkillsState } from "../../add-skills-collection.component";
+import { ApiSearch, ApiSkillListUpdate } from "../../../richskill/service/rich-skill-search.service";
+import { CollectionService } from "../../service/collection.service";
+import { ToastService } from "../../../toast/toast.service";
+
+@Component({
+  selector: 'app-batch-import-collection',
+  templateUrl: "../collection-form.component.html"
+})
+export class BatchImportCollectionComponent extends CollectionFormComponent {
+
+  state?: ExtrasSelectedSkillsState
+
+  constructor(
+    protected collectionService: CollectionService,
+    protected loc: Location,
+    protected router: Router,
+    protected route: ActivatedRoute,
+    protected toastService: ToastService,
+    protected titleService: Title
+  ) {
+    super(collectionService, loc, router, route, toastService, titleService)
+    this.state = this.router.getCurrentNavigation()?.extras.state as ExtrasSelectedSkillsState
+  }
+
+  onSubmit(): void {
+    console.log(this.state?.selectedSkills?.length)
+    const updateObject = this.updateObject()
+    this.collectionSaved = this.collectionService.createCollection(updateObject)
+    const update = new ApiSkillListUpdate({
+      add: new ApiSearch({uuids: this.state?.selectedSkills?.map(it => it.uuid) })
+    })
+
+    if (this.collectionSaved) {
+      this.collectionSaved.subscribe(collection => {
+        this.collectionForm.markAsPristine()
+        this.collectionService.updateSkillsWithResult(collection.uuid, update, undefined).subscribe(result => {
+        if (result) {
+          const message = `You added ${result.modifiedCount} RSDs to the collection.`
+          this.toastService.showToast("Success!", message)
+          this.toastService.hideBlockingLoader()
+          this.router.navigate([`/collections/${collection.uuid}/manage`])
+        }
+        })
+      })
+    }
+  }
+
+}

ui/src/app/richskill/import/BatchImportOptionsEnum.ts

@@ -0,0 +1,5 @@
+export enum BatchImportOptionsEnum {
+  existing = "existing",
+  new = "new",
+  workspace = "workspace",
+}

ui/src/app/richskill/import/batch-import.component.html

@@ -24,8 +24,35 @@ <h2 class="t-type-heading1 t-margin-small t-margin-bottom">Batch Import</h2>
 
   </div>
 
+  <div class="l-container l-container-mobile">
+    <!--{{render '@l-submit&#45;&#45;with-twomain'}}-->
+    <div *ngIf="!isSuccessStep()" class="l-submit">
+      <button class="m-button" [attr.disabled]="!isStepValid() ? '' : null" (click)="handleClickNext()">
+        <span class="m-button-x-text">{{nextButtonLabel}}</span>
+      </button>
+      <button class="m-button m-button-tertiary" (click)="handleClickCancel()">
+        <span class="m-button-x-text">{{cancelButtonLabel}}</span>
+      </button>
+    </div>
+
+    <div *ngIf="isSuccessStep()" class="l-submit">
+      <button class="m-button" (click)="resetState()">
+        <span class="m-button-x-text">Import More RSD<span class="t-type-lowercase">s</span></span>
+      </button>
+      <button class="m-button" (click)="getBatchImportAction()"  *ngIf="target && validImportSkillsCount">
+        <span class="m-button-x-text">{{getImportOptionButtonLabel()}} </span>
+      </button>
+      <button class="m-button" routerLink="/skills">
+        <span class="m-button-x-text">View RSD Library</span>
+      </button>
+    </div>
+    <div *ngIf="isMappingStep()" class="l-container l-container-mobileMedium t-margin-medium t-margin-bottom">
+      <app-batch-import-destination-select (mappingChanged)="updateTarget($event)"></app-batch-import-destination-select>
+    </div>
+  </div>
+
   <app-blocking-loader [observables]="[stepLoaded]">
-  <div class="t-margin-medium t-margin-bottom">
+  <div class="t-margin-medium t-import-margin-bottom">
     <div *ngIf="!(isUploadStep() || isSuccessStep())" class="l-container l-container-mobile t-margin-medium t-margin-bottom">
       <!--{{render '@m-fileupload'}}-->
       <div class="m-fileUpload">
@@ -198,6 +225,9 @@ <h3 class="t-type-bodyLargeBold t-type-text1 t-margin-extraSmall t-margin-bottom
       <button class="m-button" (click)="resetState()">
         <span class="m-button-x-text">Import More RSD<span class="t-type-lowercase">s</span></span>
       </button>
+      <button class="m-button" (click)="getBatchImportAction()"  *ngIf="target && validImportSkillsCount">
+        <span class="m-button-x-text">{{getImportOptionButtonLabel()}} </span>
+      </button>
       <button class="m-button" routerLink="/skills">
         <span class="m-button-x-text">View RSD Library</span>
       </button>

ui/src/app/richskill/import/batch-import.component.scss

@@ -0,0 +1,3 @@
+.t-import-margin-bottom {
+  margin-bottom: -133px;
+}

ui/src/app/richskill/import/batch-import.component.spec.ts

@@ -7,12 +7,14 @@ import { ActivatedRoute, Router } from "@angular/router"
 import { Papa, ParseResult } from "ngx-papaparse"
 import { ActivatedRouteStubSpec } from "test/util/activated-route-stub.spec"
 import { TestPage } from "test/util/test-page.spec"
-import { EnvironmentServiceStub, RichSkillServiceStub } from "../../../../test/resource/mock-stubs"
+import {CollectionServiceStub, EnvironmentServiceStub, RichSkillServiceStub} from "../../../../test/resource/mock-stubs"
 import { AppConfig } from "../../app.config"
 import { EnvironmentService } from "../../core/environment.service"
 import { ToastService } from "../../toast/toast.service"
 import { RichSkillService } from "../service/rich-skill.service"
 import { BatchImportComponent, ImportStep } from "./batch-import.component"
+import { CollectionService } from "../../collection/service/collection.service";
+import { BatchImportOptionsEnum } from "./BatchImportOptionsEnum";
 
 
 class Page extends TestPage<BatchImportComponent> {
@@ -43,13 +45,11 @@ export function createComponent(T: Type<BatchImportComponent>): Promise<void> {
   })
 }
 
-
 let activatedRoute: ActivatedRouteStubSpec
 let component: BatchImportComponent
 let fixture: ComponentFixture<BatchImportComponent>
 let page: Page
 
-
 describe("BatchImportComponent", () => {
   beforeEach(() => {
     activatedRoute = new ActivatedRouteStubSpec()
@@ -75,6 +75,7 @@ describe("BatchImportComponent", () => {
         { provide: ActivatedRoute, useValue: activatedRoute },
         { provide: Router, useValue: routerSpy },
         { provide: RichSkillService, useClass: RichSkillServiceStub },
+        { provide: CollectionService, useClass: CollectionServiceStub }
       ]
     })
     .compileComponents()
@@ -318,6 +319,15 @@ describe("BatchImportComponent", () => {
     // Assert
     expect(component.importSimilarSkills).toBeFalse()
   })
+
+  it("getImportOptionButtonLabel() should return correct values", () => {
+    component.target = BatchImportOptionsEnum.new
+    expect(component.getImportOptionButtonLabel()).toEqual("Add to a new Collection")
+    component.target = BatchImportOptionsEnum.workspace
+    expect(component.getImportOptionButtonLabel()).toEqual("Add to Workspace")
+    component.target = BatchImportOptionsEnum.existing
+    expect(component.getImportOptionButtonLabel()).toEqual("Add to existing Collection")
+  })
 })