Provide add/edit constraints capability to inputs in properties page

Providing the capability to add or edit constraints to inputs in properies of a service

Issue-ID: SDC-4346
Signed-off-by: Imam hussain <imam.hussain@est.tech>
Change-Id: I56261441022751a191fe057aafa4c681c8db96c5

2 files changed, 33 insertions, 9 deletions

diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
index 151c34f31a..c20d9fc408 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts
@@ -22,9 +22,10 @@
 import * as _ from "lodash";
 import {FormState, PROPERTY_DATA, PROPERTY_TYPES, PROPERTY_VALUE_CONSTRAINTS, ValidationUtils} from "app/utils";
 import {DataTypesService} from "app/services";
-import {DataTypesMap, PropertyModel} from "app/models";
+import {DataTypesMap, PropertyModel, InputBEModel, Component, InputFEModel} from "app/models";
 import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance";
 import {ComponentInstanceServiceNg2} from "app/ng2/services/component-instance-services/component-instance.service";
+import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
 import {SdcUiCommon, SdcUiComponents, SdcUiServices} from "onap-ui-angular";
 import {CompositionService} from "app/ng2/pages/composition/composition.service";
 import {WorkspaceService} from "app/ng2/pages/workspace/workspace.service";
@@ -99,7 +100,7 @@ export class PropertyFormViewModel {
         'PropertyNameValidationPattern',
         'CommentValidationPattern',
         'ValidationUtils',
-        // 'component',
+        'component',
         '$filter',
         'ModalServiceSdcUI',
         'filteredProperties',
@@ -109,9 +110,11 @@ export class PropertyFormViewModel {
         'propertyOwnerType',
         'propertyOwnerId',
         'ComponentInstanceServiceNg2',
+        'ComponentServiceNg2',
         'TopologyTemplateService',
         'CompositionService',
-        'workspaceService'
+        'workspaceService',
+        'inputProperty'
     ];
 
     private formState:FormState;
@@ -124,7 +127,7 @@ export class PropertyFormViewModel {
                 private PropertyNameValidationPattern:RegExp,
                 private CommentValidationPattern:RegExp,
                 private ValidationUtils:ValidationUtils,
-                // private component:Component,
+                private component:Component,
                 private $filter:ng.IFilterService,
                 private modalService:SdcUiServices.ModalService,
                 private filteredProperties:Array<PropertyModel>,
@@ -134,9 +137,11 @@ export class PropertyFormViewModel {
                 private propertyOwnerType:string,
                 private propertyOwnerId:string,
                 private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2,
+                private ComponentServiceNg2: ComponentServiceNg2,
                 private topologyTemplateService: TopologyTemplateService,
                 private compositionService: CompositionService,
-                private workspaceService: WorkspaceService) {
+                private workspaceService: WorkspaceService,
+                private inputProperty : InputFEModel) {
 
         this.formState = angular.isDefined(property.name) ? FormState.UPDATE : FormState.CREATE;
         this.initScope();
@@ -322,6 +327,25 @@ export class PropertyFormViewModel {
         //scope methods
         this.$scope.save = (doNotCloseModal?:boolean):void => {
             let property:PropertyModel = this.$scope.editPropertyModel.property;
+            this.$scope.isLoading = true;
+            if (property.propertyView){
+                if (property.constraints.length == 0) {
+                    return;
+                }
+                let input : InputBEModel = this.inputProperty;
+                input.constraints = property.constraints;
+                this.ComponentServiceNg2.updateComponentInputs(this.component, [input]).subscribe(
+                    (response) => {
+                        console.debug("Input property updated");
+                        this.$uibModalInstance.close();
+                    },
+                    (error) => {
+                        console.debug("Failed to update input property");
+                        this.$uibModalInstance.close();
+                    }
+                );
+                return;
+            }
             this.$scope.editPropertyModel.property.description = this.ValidationUtils.stripAndSanitize(this.$scope.editPropertyModel.property.description);
             //if read only - or no changes made - just closes the modal
             //need to check for property.value changes manually to detect if map properties deleted
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
index dc26d1f6a3..6e6c29b4fc 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
@@ -15,7 +15,7 @@
 -->
 <ng1-modal modal="modalInstanceProperty" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Property" show-close-button="true" data-tests-id="sdc-edit-property-container">
     <loader data-display="isLoading" relative="false" size="medium"></loader>
-    <div class="sdc-modal-top-bar" data-ng-if="!isNew">
+    <div class="sdc-modal-top-bar" data-ng-if="!isNew && !editPropertyModel.property.propertyView">
         <div class="sdc-modal-top-bar-buttons">
             <span ng-click="delete(editPropertyModel.property)" data-ng-class="{'disabled' : isPropertyValueOwner || editPropertyModel.property.readonly || propertyOwnerType == 'group' || propertyOwnerType == 'policy'}" class="sprite-new delete-btn" data-tests-id="delete_property"  sdc-smart-tooltip="">Delete</span>
             <span class="delimiter"></span>
@@ -139,7 +139,7 @@
                 </div>
                 <!-- Default value -->
 
-                <div class="default-value-section i-sdc-form-item">
+                <div class="default-value-section i-sdc-form-item" data-ng-if="!editPropertyModel.property.propertyView">
                     <label class="i-sdc-form-label">Default Value</label>
                     <ng-container ng-if="!componentMetadata.isVfc">
                         <input type="hidden" ng-model="editPropertyModel.isGetFunctionValid" required="required"/>
@@ -248,11 +248,11 @@
                         </div>
                     </div>
                 </div>
-                <div class="constraints-section i-sdc-form-item" data-ng-if="editPropertyModel.property.constraints || !(isViewOnly || componentMetadata.isService)">
+                <div class="constraints-section i-sdc-form-item" data-ng-if="editPropertyModel.property.propertyView || editPropertyModel.property.constraints || !(isViewOnly || componentMetadata.isService)">
                     <label class="i-sdc-form-label">Constraints</label>
                     <ng-container>
                         <app-constraints [property-constraints]="editPropertyModel.property.constraints"
-                                         [is-view-only]="isViewOnly || componentMetadata.isService"
+                                         [is-view-only]="editPropertyModel.property.propertyView? !editPropertyModel.property.propertyView :(isViewOnly || componentMetadata.isService)"
                                          [property-type]="editPropertyModel.property.type"
                                          (on-constraint-change)="onConstraintChange($event)">
                         </app-constraints>