Sync Integ to Master

Change-Id: I71e3acc26fa612127756ac04073a522b9cc6cd74
Issue-ID: SDC-977
Signed-off-by: Gitelman, Tal (tg851x) <tg851x@intl.att.com>

3 files changed, 37 insertions, 15 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html
index bcd33efc30..6e0f93f750 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html
@@ -22,7 +22,8 @@
             </div>
         </div>
         <div class="inner-container properties-table-container" *ngIf="selectedReqOrCapOption == 'Capability'" [ngClass]="{'cap-selected':selectedReqOrCapModel}">
-            <properties-table *ngIf="selectedReqOrCapModel"
+            <loader [display]="loadingCapabilityProperties" size="medium" [relative]="true"></loader>
+            <properties-table *ngIf="selectedReqOrCapModel && !loadingCapabilityProperties"
                               class="properties-table"
                               [readonly]="true"
                               [fePropertiesMap]="capabilityProperties"
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
index ab67dc1850..2e3c21c210 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
@@ -1,10 +1,10 @@
 /**
  * Created by rc2122 on 9/4/2017.
  */
+import * as _ from "lodash";
 import {Component, EventEmitter, Input, OnInit, Output, SimpleChanges} from '@angular/core';
-import {RadioButtonModel, Match, PropertyModel, InstanceFePropertiesMap, Component as ComponentModel} from "app/models";
+import {RadioButtonModel, PropertyModel, InstanceFePropertiesMap, Component as ComponentModel} from "app/models";
 import {Dictionary} from "lodash";
-import {DropdownValue} from "../../ui/form-components/dropdown/ui-element-dropdown.component";
 import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service";
 import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils";
 import {Requirement} from "../../../../models/requirement";
@@ -33,7 +33,6 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
     @Input() selectedReqOrCapModel:RequirementCapabilityModel;
 
     @Output() updateSelectedReqOrCap:EventEmitter<RequirementCapabilityModel> = new EventEmitter<RequirementCapabilityModel>();
-    @Output() updateCapabilityProperties:EventEmitter<Array<PropertyModel>> = new EventEmitter<Array<PropertyModel>>();
 
     types:Array<string> = [];
     selectedType:string;
@@ -47,10 +46,14 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
     displayCapReqListFilterByType:RequirementCapabilityModel[];
 
     capabilityProperties:InstanceFePropertiesMap;
+    loadingCapabilityProperties:boolean;
+
+    private _loadingCapabilityProperties: Array<Capability>;
 
     constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2,
                 private propertiesUtils:PropertiesUtils) {
         this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)];
+        this._loadingCapabilityProperties = [];
     }
 
     private initDefaultReqOrCapSelection = (): void => {
@@ -87,14 +90,17 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
     initCapabilityPropertiesTable = ():void => {
         if(this.selectedReqOrCapModel instanceof Capability ) {
             let selectedCapability = <Capability>this.selectedReqOrCapModel;
-            if(selectedCapability.properties){
+            if (selectedCapability.properties && selectedCapability.properties.length) {
                 this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({ CAPABILITY : selectedCapability.properties}, false);
+            } else {
+                this.capabilityProperties = null;
             }
         }
     }
 
     ngOnChanges(changes:SimpleChanges) {
         if (changes.selectedReqOrCapModel) {
+            this.capabilityProperties = null;
             if (this.selectedReqOrCapModel && this.selectedReqOrCapOption === CAPABILITY) {
                 this.setCapabilityProperties();
             }
@@ -168,15 +174,27 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
 
     private setCapabilityProperties = ():void => {
         let selectedCapability = <Capability>this.selectedReqOrCapModel;
-        if (selectedCapability.properties === undefined) {
-            this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability.type, selectedCapability.name)
-                .subscribe((response:Array<PropertyModel>) => {
-                    this.capabilityProperties = (response && response.length) ? this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : response}, false) : null;
-                    this.updateCapabilityProperties.emit(response);
-                }, error => {});
-        }else{
-            this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : selectedCapability.properties}, false);
-            this.updateCapabilityProperties.emit(selectedCapability.properties);
+        if (!selectedCapability.properties) {
+            this.loadingCapabilityProperties = true;
+            if (this._loadingCapabilityProperties.indexOf(selectedCapability) == -1) {
+                this._loadingCapabilityProperties.push(selectedCapability);
+                this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability)
+                    .subscribe((response: Array<PropertyModel>) => {
+                        if (this.selectedReqOrCapModel === selectedCapability) {
+                            delete this.loadingCapabilityProperties;
+                        }
+                        this.initCapabilityPropertiesTable();
+                    }, (error) => {
+                        if (this.selectedReqOrCapModel === selectedCapability) {
+                            delete this.loadingCapabilityProperties;
+                        }
+                    }, () => {
+                        this._loadingCapabilityProperties.splice(this._loadingCapabilityProperties.indexOf(selectedCapability), 1);
+                    });
+            }
+        } else {
+            delete this.loadingCapabilityProperties;
+            this.initCapabilityPropertiesTable();
         }
     }
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts
index cb12dea02a..259ae12380 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts
@@ -5,6 +5,7 @@ import {FormElementsModule} from "../../ui/form-components/form-elements.module"
 import {CommonModule} from "@angular/common";
 import {GlobalPipesModule} from "app/ng2/pipes/global-pipes.module";
 import {PropertyTableModule} from "../properties-table/property-table.module";
+import {UiElementsModule} from "../../ui/ui-elements.module";
 
 @NgModule({
     declarations: [
@@ -15,7 +16,9 @@ import {PropertyTableModule} from "../properties-table/property-table.module";
         FormsModule,
         FormElementsModule,
         GlobalPipesModule,
-        PropertyTableModule],
+        UiElementsModule,
+        PropertyTableModule
+    ],
 
     exports: [SelectRequirementOrCapabilityComponent],
     providers: []