Select a Model when Importing a VSP

Change-Id: I7537af4c7279636de7e450ec398210ace376eade
Issue-ID: SDC-3670
Signed-off-by: andre.schmid <andre.schmid@est.tech>

2 files changed, 61 insertions, 23 deletions

diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
index c78852de4c..c319b806c0 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
@@ -81,6 +81,7 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     componentModel:componentModel;
     instantiationTypes:Array<instantiationType>;
     isHiddenCategorySelected: boolean;
+    isModelRequired: boolean;
 
     save():Promise<any>;
     revert():void;
@@ -102,6 +103,7 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     updateIcon():void;
     possibleToUpdateIcon():boolean;
     initModel():void;
+    isVspImport(): boolean;
 }
 
 // tslint:disable-next-line:max-classes-per-file
@@ -465,12 +467,48 @@ export class GeneralViewModel {
         };
 
         this.$scope.initModel = ():void => {
-            this.$scope.models = new Array();
+            this.$scope.isModelRequired = false;
+            this.$scope.models = [{id: '', name: 'SDC AID'}];
+            if (this.$scope.isCreateMode() && this.$scope.isVspImport()) {
+                if (this.$scope.component.componentMetadata.models) {
+                    this.$scope.isModelRequired = true;
+                    const modelOptions = this.$scope.component.componentMetadata.models.map(value => {
+                        return {id: value, name: value};
+                    });
+                    if (modelOptions.length == 1) {
+                        this.$scope.models = modelOptions;
+                        this.$scope.component.model = modelOptions[0].id;
+                    } else {
+                        this.$scope.models = [{id: '', name: 'Select'}, ...modelOptions];
+                    }
+                }
+                return;
+            }
+
             this.modelService.getModels().subscribe((modelsFound: Model[]) => {
-                modelsFound.forEach(model => {this.$scope.models.push(model.name)});})
-            this.$scope.models.filter(model => model.name === this.$scope.component).model;
+                modelsFound.forEach(model => {this.$scope.models.push({id: model.name, name: model.name})});
+            });
+
+            this.$scope.models.sort(function (model1, model2) {
+                if (model1.id > model2.id) {
+                    return 1;
+                }
+                if (model1.id < model2.id) {
+                    return -1;
+                }
+                return 0;
+            });
         };
 
+        this.$scope.isVspImport = (): boolean => {
+            if (!this.$scope.component || !this.$scope.component.isResource()) {
+                return false;
+            }
+
+            const resource = <Resource>this.$scope.component;
+            return resource.isCsarComponent();
+        }
+
         this.$scope.initEnvironmentContext = ():void => {
             if (this.$scope.componentType === ComponentType.SERVICE) {
                 this.$scope.environmentContextObj = this.cacheService.get('UIConfiguration').environmentContext;
@@ -725,15 +763,15 @@ export class GeneralViewModel {
 
         this.$scope.onModelChange = (): void => {
             if (this.$scope.componentType === ComponentType.SERVICE && this.$scope.component && this.$scope.component.categories) {
-	             let modelName = this.$scope.component.model ? this.$scope.component.model : null;
-                 this.elementService.getCategoryBasetypes(this.$scope.component.categories[0].name, modelName).subscribe((data: BaseTypeResponse[]) => {
-		                this.$scope.baseTypes = []
-                        this.$scope.baseTypeVersions = []
-                        data.forEach(baseType => this.$scope.baseTypes.push(baseType.toscaResourceName));
-                        data[0].versions.reverse().forEach(version => this.$scope.baseTypeVersions.push(version));
-                        this.$scope.component.derivedFromGenericType = data[0].toscaResourceName;
-                        this.$scope.component.derivedFromGenericVersion = data[0].versions[0];
-                 })
+                let modelName = this.$scope.component.model ? this.$scope.component.model : null;
+                this.elementService.getCategoryBasetypes(this.$scope.component.categories[0].name, modelName).subscribe((data: BaseTypeResponse[]) => {
+                    this.$scope.baseTypes = []
+                    this.$scope.baseTypeVersions = []
+                    data.forEach(baseType => this.$scope.baseTypes.push(baseType.toscaResourceName));
+                    data[0].versions.reverse().forEach(version => this.$scope.baseTypeVersions.push(version));
+                    this.$scope.component.derivedFromGenericType = data[0].toscaResourceName;
+                    this.$scope.component.derivedFromGenericVersion = data[0].versions[0];
+                });
             }
         };
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
index fa4af6d6f5..f9854e2256 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
@@ -611,17 +611,17 @@
 
                   <!--------------------- Model -------------------->
                   <div class="i-sdc-form-item">
-                    <label class="i-sdc-form-label">Model</label>
-                    <select class="i-sdc-form-select"
-                            name="modelName"
-                            data-ng-class="{'view-mode': isViewMode()}"
-                            data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
-                            data-ng-model="component.model"
-                            data-ng-change="onModelChange()"
-                            data-tests-id="modelName">
-                      <option value="">SDC AID</option>
-                      <option ng-repeat="model in models | orderBy:[name]">{{model}}</option>
-                    </select>
+                      <label class="i-sdc-form-label required">Model</label>
+                      <select class="i-sdc-form-select"
+                              name="modelName"
+                              data-ng-class="{'view-mode': isViewMode()}"
+                              data-ng-disabled="!isCreateMode()"
+                              data-ng-model="component.model"
+                              data-ng-change="onModelChange()"
+                              data-tests-id="modelName"
+                              ng-required="isModelRequired">
+                          <option ng-repeat="model in models" value="{{model.id}}">{{model.name}}</option>
+                      </select>
                   </div>
                   <!--------------------- Model -------------------->