Import data type in UI

Develop all necessary changes in the UI to allow importing a data type from a yaml file

Issue-ID: SDC-4279
Signed-off-by: franciscovila <javier.paradela.vila@est.tech>
Change-Id: Id413386fad8b362e8c4a1d25c859a22178189074

3 files changed, 141 insertions, 10 deletions

diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html
index 877c58bd58..04c334eee1 100644
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html
@@ -33,9 +33,14 @@
 
               <div class="i-sdc-form-item">
                 <label class="i-sdc-form-label" [ngClass]="{'required': !isViewOnly}">{{'MODEL_LABEL' | translate}}:</label>
-                <span>{{dataType.model ? dataType.model : DEFAULT_MODEL_NAME}}</span>
+                <span *ngIf="isViewOnly">{{dataType.model ? dataType.model : DEFAULT_MODEL_NAME}}</span>
+                <select *ngIf="!isViewOnly" formControlName="model" (change)="onModelChange()">
+                  <option *ngFor="let model of models"
+                          [value]="model.name">{{model.name}}</option>
+                </select>
               </div>
 
+
               <div class="i-sdc-form-item">
                 <label class="i-sdc-form-label" [ngClass]="{'required': !isViewOnly}">{{'DERIVED_FROM_LABEL' | translate}}:</label>
                 <span>{{dataType.derivedFromName}}</span>
@@ -44,12 +49,12 @@
           </div>
 
           <div class="i-sdc-form-item description-field">
-            <label class="i-sdc-form-label" [ngClass]="{'required': !isViewOnly}">{{'DESCRIPTION_LABEL' | translate}}:</label>
-            <textarea class="description"
+            <label class="i-sdc-form-label">{{'DESCRIPTION_LABEL' | translate}}:</label>
+            <textarea class="description" #description
                       formControlName="description"
-                      [ngClass]="{'view-mode': isViewOnly}"
-                      [required]="true"
+                      [ngClass]="{'view-mode': true}"
                       [attr.test-id]="description"
+                      [(ngModel)]="dataType.description"
                       [value]="dataType.description"></textarea>
           </div>
         </div>
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts
index fe7b070354..1484954e4b 100644
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts
@@ -25,22 +25,53 @@ import {TypeWorkspaceGeneralComponent} from './type-workspace-general.component'
 import {ReactiveFormsModule} from "@angular/forms";
 import {TranslateModule} from "../../../shared/translator/translate.module";
 import {TranslateService} from "../../../shared/translator/translate.service";
+import {SdcUiComponentsModule} from "onap-ui-angular/dist";
+import {Observable} from "rxjs/Observable";
+import {DataTypeModel} from "../../../../models/data-types";
+import {DataTypeService} from "../../../services/data-type.service";
+import {ModelService} from "../../../services/model.service";
+import {IWorkspaceViewModelScope} from "../../../../view-models/workspace/workspace-view-model";
+import {IScope} from "angular";
+import {States} from "../../../../utils/constants";
 
 describe('TypeWorkspaceGeneralComponent', () => {
   let component: TypeWorkspaceGeneralComponent;
   let fixture: ComponentFixture<TypeWorkspaceGeneralComponent>;
+  let dataTypeServiceMock: Partial<DataTypeService>;
+  let modelServiceMock: Partial<ModelService>;
   let translateServiceMock: Partial<TranslateService> = {
     'translate': jest.fn()
   };
 
+  let importedFileMock: File = null;
+  let stateParamsMock: Partial<ng.ui.IStateParamsService> = {
+      'importedFile': importedFileMock
+  };
+  let resolveMock = {"$stateParams": stateParamsMock};
+  let parentScopeMock: Partial<IScope> = {
+      '$resolve': resolveMock
+  };
+  let scopeMock_: Partial<IWorkspaceViewModelScope> = {
+      '$parent': parentScopeMock,
+      'current': {
+          'name': States.TYPE_WORKSPACE
+      }
+  }
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ TypeWorkspaceGeneralComponent ],
       imports: [
         ReactiveFormsModule,
+        SdcUiComponentsModule,
         TranslateModule
       ],
       providers: [
+        {provide: TranslateService, useValue: translateServiceMock},
+        {provide: "$scope", useValue: scopeMock_ },
+        {provide: "$state", useValue: {}},
+        {provide: DataTypeService, useValue: dataTypeServiceMock},
+        {provide: ModelService, useValue: modelServiceMock},
         {provide: TranslateService, useValue: translateServiceMock}
       ]
     })
@@ -50,6 +81,7 @@ describe('TypeWorkspaceGeneralComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(TypeWorkspaceGeneralComponent);
     component = fixture.componentInstance;
+    component.dataTypeMap$ = new Observable<Map<string, DataTypeModel>>();
     fixture.detectChanges();
   });
 
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts
index 8728c3020e..a6e4d1efeb 100644
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts
@@ -19,10 +19,20 @@
  *  ============LICENSE_END=========================================================
  */
 
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core';
 import {FormControl, FormGroup, Validators} from "@angular/forms";
 import {DataTypeModel} from "../../../../models/data-types";
-import { DEFAULT_MODEL_NAME } from "app/utils/constants";
+import {DEFAULT_MODEL_NAME} from "app/utils/constants";
+import {IWorkspaceViewModelScope} from "../../../../view-models/workspace/workspace-view-model";
+import {ServiceDataTypeReader} from "../../../../utils/service-data-type-reader";
+import {TranslateService} from "../../../shared/translator/translate.service";
+import {SdcUiServices} from "onap-ui-angular/dist";
+import {ModelService} from "../../../services/model.service";
+import {Model} from "../../../../models/model";
+import {DataTypesMap} from "../../../../models/data-types-map";
+import {DataTypeService} from "../../../services/data-type.service";
+import {Observable} from "rxjs/Observable";
+import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models";
 
 @Component({
   selector: 'app-type-workspace-general',
@@ -30,9 +40,18 @@ import { DEFAULT_MODEL_NAME } from "app/utils/constants";
   styleUrls: ['./type-workspace-general.component.less']
 })
 export class TypeWorkspaceGeneralComponent implements OnInit {
+
   @Input() isViewOnly = true;
   @Input() dataType: DataTypeModel = new DataTypeModel();
-
+  @Output() onImportedType = new EventEmitter<any>();
+  importedFile: File;
+  models: Array<Model>;
+  selectedModelName: string;
+  dataTypes: DataTypesMap;
+  derivedFromName: string;
+  dataTypeMap$: Observable<Map<string, DataTypeModel>>;
+  dataTypeMap: Map<string, DataTypeModel>;
+  typeOptions: Array<IDropDownOption>;
   DEFAULT_MODEL_NAME = DEFAULT_MODEL_NAME;
 
   type: FormControl = new FormControl(undefined, [Validators.required, Validators.minLength(1), Validators.maxLength(300)]);
@@ -46,17 +65,92 @@ export class TypeWorkspaceGeneralComponent implements OnInit {
     'derivedFrom': this.derivedFrom
   });
 
+  constructor(@Inject('$scope') private $scope: IWorkspaceViewModelScope,
+              @Inject('$state') private $state: ng.ui.IStateService,
+              protected dataTypeService: DataTypeService,
+              private modalServiceSdcUI: SdcUiServices.ModalService,
+              private modelService: ModelService,
+              private translateService: TranslateService) {
+      this.typeOptions = [];
+  }
+
   ngOnInit(): void {
+      this.getImportedFile();
+      if (!this.isViewOnly) {
+          console.log("file size: " + this.importedFile.size);
+          console.log("file type: " + this.importedFile.type);
+          console.log("file lastModifiedDate: " + this.importedFile.lastModifiedDate);
+
+          new ServiceDataTypeReader().read(this.importedFile).then(
+              (serviceType) => {
+                  this.dataType = serviceType;
+                  this.dataType.modificationTime = this.importedFile.lastModifiedDate;
+                  this.dataType.creationTime = this.importedFile.lastModifiedDate;
+                  this.derivedFromName = serviceType.derivedFromName;
+                  this.dataType.uniqueId = this.dataType.model ? this.dataType.model + "." + this.dataType.name : this.dataType.name + ".datatype";
+                  this.$scope.dataType = this.dataType;
+                  this.onImportedType.emit(this.dataType);
+
+                  this.models = [];
+                  this.modelService.getDataTypeModels(this.derivedFromName).subscribe((modelsFound: any) => {
+                      modelsFound.sort().forEach(modelName => {
+                          let model:Model;
+                          if (modelName === null || "" === modelName) {
+                              model = new Model({"name": DEFAULT_MODEL_NAME, "derivedFrom": "", "modelType": "normative"});
+                          }
+                          else {
+                              model = new Model({"name": modelName, "derivedFrom": "", "modelType": "normative"});
+                          }
+                          this.models.push(model);
+                      });
+                      this.onModelChange();
+                      this.$scope.dataType = this.dataType;
+                  });
+
+              },
+              (error) => {
+                  const errorMsg = this.translateService.translate('IMPORT_DATA_TYPE_FAILURE_MESSAGE_TEXT');
+                  console.error(errorMsg, error);
+                  const errorDetails = {
+                      'Error': error.reason,
+                      'Details': error.message
+                  };
+                  console.error(error.reason);
+                  this.modalServiceSdcUI.openErrorDetailModal('Error', errorMsg,
+                      'error-modal', errorDetails);
+                  this.$state.go('dashboard');
+              });
+      }
     this.initForm();
   }
 
+  onModelChange(): void {
+    this.selectedModelName = this.models.filter(x => x.name == this.model.value).pop().name;
+    console.log("selected model: " + this.selectedModelName);
+    this.dataType.model = new Model({"name": this.selectedModelName, "derivedFrom": "", "modelType": "normative"});
+    this.dataType.uniqueId = this.dataType.model.name === DEFAULT_MODEL_NAME ?
+        this.dataType.name + ".datatype" : this.dataType.model.name + "." + this.dataType.name + ".datatype";
+    this.$scope.dataType.derivedFromName = this.derivedFromName;
+    this.$scope.dataType = this.dataType;
+    this.$scope.dataType.model = this.dataType.model;
+  }
+
+  private getImportedFile(): void {
+      let importedFile = this.$scope["$parent"]["$resolve"]["$stateParams"]["importedFile"];
+      this.importedFile = <File>importedFile;
+      this.$scope.importFile = this.importedFile;
+      if (this.importedFile) {
+          this.isViewOnly = false;
+      }
+  }
+
   private initForm(): void {
     if (!this.dataType) {
       return;
     }
     this.type.setValue(this.dataType.name);
     this.description.setValue(this.dataType.description);
-    this.model.setValue(this.dataType.model);
-    this.derivedFrom.setValue(this.dataType.derivedFrom);
+    this.model.setValue(this.dataType.model ? this.dataType.model : this.$scope.dataType && this.$scope.dataType.model ? this.$scope.dataType.model : DEFAULT_MODEL_NAME);
+    this.derivedFrom.setValue(this.dataType.derivedFromName);
   }
 }