Support addition of scalar type constraints

this also supports the addition of
the in_range and the valid_values constraints,
and supports delete and editing of current and
added constraints

Issue-ID: SDC-4223
Change-Id: I5ffb4d17d9f8c2730f650153fb4ff89eccfdd474
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>

2 files changed, 134 insertions, 39 deletions

diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.html
index 301d196d41..6272a4529f 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.html
@@ -21,7 +21,7 @@
 
 <div class="app-constraints">
   <form novalidate class="w-sdc-form two-columns">
-    <div class="w-sdc-form-columns-wrapper" *ngFor="let constraint of constraints; let constraintIndex = index">
+    <div class="w-sdc-form-columns-wrapper" *ngFor="let constraint of constraints; let constraintIndex = index; trackBy:trackByFn">
         <div class="w-sdc-form-column-small">
             <select class="i-sdc-form-select"
                     data-tests-id="constraints"
@@ -31,7 +31,9 @@
                       hidden selected>
                 {{ConstraintTypesMapping[constraint.type]}}
               </option>
-              <option *ngFor="let constraintType of constraintTypes" [value]="constraintType">
+              <option *ngFor="let constraintType of constraintTypes"
+                      [value]="constraintType"
+                      [disabled]="disableConstraint(constraintType, constraint.type)">
                 {{ConstraintTypesMapping[constraintType]}}
               </option>
             </select>
@@ -44,13 +46,13 @@
             <div class="w-sdc-form-columns-wrapper" *ngIf="constraint.type == 'inRange'">
               <div class="w-sdc-form-column">
                 <input type="text" class="i-sdc-form-input myClass"
-                      (change)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 0)"
+                      (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 0)"
                       [disabled]="isViewOnly"
                       [value]="getInRangeValue(constraintIndex, 0)"/>
               </div>
               <div class="w-sdc-form-column">
                 <input type="text" class="i-sdc-form-input myClass"
-                      (change)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 1)"
+                      (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 1)"
                       [disabled]="isViewOnly"
                       [value]="getInRangeValue(constraintIndex, 1)"/>
               </div>
@@ -62,11 +64,11 @@
                     [ngClass]="{'disabled': isViewOnly}"
                     (click)="addToList(constraintIndex)">Add to List</div>
               </div>
-              <div class="w-sdc-form-columns-wrapper" *ngFor="let value of constraint.value; let valueIndex = index">
+              <div class="w-sdc-form-columns-wrapper" *ngFor="let value of constraint.value; let valueIndex = index; trackBy:trackByFn">
                 <div class="w-sdc-form-column">
                   <input type="text" class="i-sdc-form-input" [value]="value"
                         [disabled]="isViewOnly"
-                        (change)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, valueIndex)"/>
+                        (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, valueIndex)"/>
                 </div>
                 <div class="w-sdc-form-column">
                   <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromList(constraintIndex, valueIndex)"></span>
@@ -76,7 +78,7 @@
 
             <div *ngIf="constraint.type != 'inRange' && constraint.type != 'validValues'">
               <input type="text" class="i-sdc-form-input myClass"
-                    (change)="onChangeConstraintValue(constraintIndex, $event.target.value)"
+                    (input)="onChangeConstraintValue(constraintIndex, $event.target.value)"
                     [value]="constraint.value"/>
             </div>
           </div>
@@ -89,9 +91,8 @@
 
     </div>
     <div class="w-sdc-form-columns-wrapper-small" *ngIf="!isViewOnly">
-      <div class="add-btn add-list-item w-sdc-form-column-small" *ngIf="!isViewOnly" [ngClass]="{'disabled': isViewOnly}"
-      (click)="addConstraint()"> Add Constraint </div>
-  </div>
-
+        <div class="add-btn add-list-item w-sdc-form-column-small" *ngIf="!isViewOnly" [ngClass]="{'disabled': isViewOnly}"
+        (click)="addConstraint()"> Add Constraint </div>
+    </div>
   </form>
 </div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts
index ef4d6fd954..2e56ce1580 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.ts
@@ -18,7 +18,7 @@
  */
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { PropertyBEModel } from "app/models";
+import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils/constants"
 
 @Component({
   selector: 'app-constraints',
@@ -27,24 +27,31 @@ import { PropertyBEModel } from "app/models";
 })
 export class ConstraintsComponent implements OnInit {
 
-  @Input() set property(property: PropertyBEModel) {
+  @Input() set propertyConstraints(propertyConstraints: any[]) {
     this.constraints = new Array();
-    if(property.constraints) {
-      this._property = property;
-      property.constraints.forEach((constraint: any) => {
+    if(propertyConstraints) {
+      propertyConstraints.forEach((constraint: any) => {
         this.constraints.push(this.getConstraintFromPropertyBEModel(constraint));
       });
     }
   }
+  @Input() set propertyType(propertyType: string) {
+    if (!this._propertyType || propertyType == this._propertyType) {
+      this._propertyType = propertyType;
+      return;
+    }
+    this.constraints = new Array();
+    this._propertyType = propertyType;
+    this.emitOnConstraintChange();
+  }
   @Input() isViewOnly: boolean = false;
-  @Output() onConstraintChange: EventEmitter<any[]> = new EventEmitter<any[]>();
+  @Output() onConstraintChange: EventEmitter<any> = new EventEmitter<any>();
 
-  constraints: Constraint[];
+  constraints: Constraint[] = new Array();
   constraintTypes: string[];
   ConstraintTypesMapping = ConstraintTypesMapping;
-  newConstraintType: any = ConstraintTypes.equal;
-  newConstraintValue: any = null;
-  _property: PropertyBEModel;
+  valid: boolean = true;
+  _propertyType: string;
 
   ngOnInit() {
     this.constraintTypes = Object.keys(ConstraintTypes).map(key => ConstraintTypes[key]);
@@ -53,37 +60,43 @@ export class ConstraintsComponent implements OnInit {
   private getConstraintFromPropertyBEModel(constraint: any):Constraint {
     let constraintType: ConstraintTypes;
     let constraintValue: any;
-    if(constraint.validValues){
+    if (!constraint) {
+      constraintType = ConstraintTypes.null;
+      constraintValue = "";
+    } else if(constraint.hasOwnProperty(ConstraintTypes.valid_values)){
       constraintType = ConstraintTypes.valid_values;
       constraintValue = constraint.validValues;
-    } else if(constraint.equal) {
+    } else if(constraint.hasOwnProperty(ConstraintTypes.equal)) {
       constraintType = ConstraintTypes.equal;
       constraintValue = constraint.equal;
-    } else if(constraint.greaterThan) {
+    } else if(constraint.hasOwnProperty(ConstraintTypes.greater_than)) {
       constraintType = ConstraintTypes.greater_than;
       constraintValue = constraint.greaterThan;
-    } else if(constraint.greaterOrEqual) {
+    } else if(constraint.hasOwnProperty(ConstraintTypes.greater_or_equal)) {
       constraintType = ConstraintTypes.greater_or_equal;
       constraintValue = constraint.greaterOrEqual;
-    } else if(constraint.lessThan) {
+    } else if(constraint.hasOwnProperty(ConstraintTypes.less_than)) {
       constraintType = ConstraintTypes.less_than;
       constraintValue = constraint.lessThan;
-    } else if(constraint.lessOrEqual) {
+    } else if(constraint.hasOwnProperty(ConstraintTypes.less_or_equal)) {
       constraintType = ConstraintTypes.less_or_equal;
       constraintValue = constraint.lessOrEqual;
-    } else if(constraint.rangeMinValue && constraint.rangeMaxValue) {
+    } else if(constraint.hasOwnProperty(ConstraintTypes.in_range)) {
+      constraintType = ConstraintTypes.in_range;
+      constraintValue = new Array(constraint.inRange[0], constraint.inRange[1]);
+    } else if(constraint.rangeMaxValue || constraint.rangeMinValue) {
       constraintType = ConstraintTypes.in_range;
       constraintValue = new Array(constraint.rangeMinValue, constraint.rangeMaxValue);
-    } else if(constraint.length) {
+    } else if(constraint.hasOwnProperty(ConstraintTypes.length)) {
       constraintType = ConstraintTypes.length;
       constraintValue = constraint.length;
-    } else if(constraint.minLength) {
+    } else if(constraint.hasOwnProperty(ConstraintTypes.min_length)) {
       constraintType = ConstraintTypes.min_length;
       constraintValue = constraint.minLength;
-    } else if(constraint.maxLength) {
+    } else if(constraint.hasOwnProperty(ConstraintTypes.max_length)) {
       constraintType = ConstraintTypes.max_length;
       constraintValue = constraint.maxLength;
-    } else if(constraint.pattern) {
+    } else if(constraint.hasOwnProperty(ConstraintTypes.pattern)) {
       constraintType = ConstraintTypes.pattern;
       constraintValue = constraint.pattern;
     }
@@ -101,7 +114,7 @@ export class ConstraintsComponent implements OnInit {
     return constraintArray;
   }
 
-  private getConstraintFormat(constraint: Constraint) {
+  private getConstraintFormat(constraint: Constraint): any {
     switch (constraint.type) {
       case ConstraintTypes.equal:
         return {
@@ -152,8 +165,34 @@ export class ConstraintsComponent implements OnInit {
     }
   }
 
+  private validateConstraints(): void {
+    this.valid = this.constraints.every((constraint: Constraint) => {
+      if (Array.isArray(constraint.value)) {
+        return !(constraint.value.length == 0 || this.doesArrayContaintEmptyValues(constraint.value));
+      }
+      return constraint.value && constraint.type != ConstraintTypes.null
+    });
+  }
+
+  private doesArrayContaintEmptyValues(arr) {
+    for(const element of arr) {
+      if(element === "") return true;
+    }
+    return false;
+  }
+
+  private emitOnConstraintChange(): void {
+    this.validateConstraints();
+    const newConstraints = this.getConstraintsFormat();
+    this.onConstraintChange.emit({
+      constraints: newConstraints,
+      valid: this.valid
+    });
+  }
+
   removeFromList(constraintIndex: number, valueIndex: number){
     this.constraints[constraintIndex].value.splice(valueIndex, 1);
+    this.emitOnConstraintChange()
   }
 
   addToList(constraintIndex: number){
@@ -161,6 +200,7 @@ export class ConstraintsComponent implements OnInit {
       this.constraints[constraintIndex].value = new Array();
     }
     this.constraints[constraintIndex].value.push("");
+    this.emitOnConstraintChange()
   }
 
   onChangeConstraintType(constraintIndex: number, newType: ConstraintTypes) {
@@ -168,10 +208,12 @@ export class ConstraintsComponent implements OnInit {
     if ((newType == ConstraintTypes.in_range || newType == ConstraintTypes.valid_values) && !Array.isArray(this.constraints[constraintIndex].value)) {
       this.constraints[constraintIndex].value = new Array()
     }
+    this.emitOnConstraintChange();
   }
 
   onChangeConstraintValue(constraintIndex: number, newValue: any) {
     this.constraints[constraintIndex].value = newValue;
+    this.emitOnConstraintChange();
   }
 
   onChangeConstrainValueIndex(constraintIndex: number, newValue: any, valueIndex: number) {
@@ -179,21 +221,21 @@ export class ConstraintsComponent implements OnInit {
       this.constraints[constraintIndex].value = new Array();
     }
     this.constraints[constraintIndex].value[valueIndex] = newValue;
+    this.emitOnConstraintChange();
   }
 
   removeConstraint(constraintIndex: number) {
     this.constraints.splice(constraintIndex, 1);
-    this.onConstraintChange.emit(this.getConstraintsFormat());
+    this.emitOnConstraintChange();
 }
 
   addConstraint() {
     let newConstraint: Constraint = {
-      type:this.newConstraintType,
-      value: this.newConstraintValue
+      type: ConstraintTypes.null,
+      value: ""
     }
     this.constraints.push(newConstraint);
-    this.newConstraintValue = null;
-    this.onConstraintChange.emit(this.getConstraintsFormat());
+    this.emitOnConstraintChange();
   }
 
   getInRangeValue(constraintIndex: number, valueIndex: number): string {
@@ -203,9 +245,62 @@ export class ConstraintsComponent implements OnInit {
     return this.constraints[constraintIndex].value[valueIndex];
   }
 
+  disableConstraint(optionConstraintType: ConstraintTypes): boolean {
+    const invalid = this.notAllowedConstraint(optionConstraintType);
+    return invalid ? invalid : this.getConstraintTypeIfPresent(optionConstraintType) ? true : false;
+  }
+
+  notAllowedConstraint(optionConstraintType: ConstraintTypes): boolean {
+    switch (optionConstraintType) {
+      case ConstraintTypes.less_or_equal:
+      case ConstraintTypes.less_than:
+      case ConstraintTypes.greater_or_equal:
+      case ConstraintTypes.greater_than:
+      case ConstraintTypes.in_range:
+        if (this.isComparable(this._propertyType)){
+          return false;
+        }
+        break;
+      case ConstraintTypes.length:
+      case ConstraintTypes.max_length:
+      case ConstraintTypes.min_length:
+        if (this._propertyType == PROPERTY_TYPES.STRING || this._propertyType == PROPERTY_TYPES.MAP || this._propertyType == PROPERTY_TYPES.LIST){
+          return false;
+        }
+        break;
+      case ConstraintTypes.pattern:
+        if (this._propertyType == PROPERTY_TYPES.STRING){
+          return false;
+        }
+        break;
+      case ConstraintTypes.valid_values:
+      case ConstraintTypes.equal:
+        return false;
+    }
+    return true;
+  }
+
+  getConstraintTypeIfPresent(constraintType: ConstraintTypes): Constraint {
+    return this.constraints.find((constraint) => {
+      return constraint.type == constraintType ? true : false;
+    })
+  }
+
+  trackByFn(index) {
+    return index;
+  }
+
+  isComparable(propType: string): boolean {
+    if (PROPERTY_DATA.COMPARABLE_TYPES.indexOf(propType) >= 0) {
+      return true;
+    }
+    return false;
+  }
+
 }
 
 export enum ConstraintTypes {
+  null = "",
   equal= "equal",
   greater_than = "greaterThan",
   greater_or_equal = "greaterOrEqual",
@@ -236,5 +331,4 @@ export const ConstraintTypesMapping = {
 export interface Constraint {
   type:ConstraintTypes,
   value:any
-
 }
\ No newline at end of file