diff options
Diffstat (limited to 'catalog-ui/src/app/ng2')
4 files changed, 491 insertions, 267 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 46d4114250..3bbdaff2cb 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 @@ -20,99 +20,113 @@ --> <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; trackBy:trackByFn"> - <div class="w-sdc-form-column-small"> - <select class="i-sdc-form-select" - data-tests-id="constraints" - [disabled]="isViewOnly" - (change)="onChangeConstraintType(constraintIndex, $event.target.value)"> - <option *ngIf="constraint" [value]="constraint.type" - hidden selected> - {{ConstraintTypesMapping[constraint.type]}} - </option> - <option *ngFor="let constraintType of constraintTypes" - [value]="constraintType" - [disabled]="disableConstraint(constraintType, constraint.type)"> - {{ConstraintTypesMapping[constraintType]}} - </option> - </select> - </div> + <form novalidate class="w-sdc-form two-columns" [formGroup]="constraintForm"> + <div *ngFor="let constraint of constraintsArray.controls; let constraintIndex = index; trackBy:trackByFn"> - <div class="w-sdc-form-columns-wrapper"> + <div formArrayName="constraint"> + <div class="w-sdc-form-columns-wrapper" [formGroupName]="constraintIndex"> + <div class="w-sdc-form-column-small"> + <select class="i-sdc-form-select" + data-tests-id="constraints" + formControlName="type" + [value]="constraintsArray.at(constraintIndex).get('type').value" + (change)="onChangeConstraintType(constraintIndex, $event.target.value)"> + <option *ngIf="constraint" [value]="constraint.value.type" + hidden selected> + {{ConstraintTypesMapping[constraint.value.type]}} + </option> + <option *ngFor="let constraintType of constraintTypes" + [value]="constraintType" + [disabled]="disableConstraint(constraintType, constraint.value.type)"> + {{ConstraintTypesMapping[constraintType]}} + </option> + </select> - <div class="w-sdc-form-column"> - <!-- ConstraintTypes.in_range--> - <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" - (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" - (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 1)" - [disabled]="isViewOnly" - [value]="getInRangeValue(constraintIndex, 1)"/> - </div> + <div class="validation-errors"> + <ng-container *ngFor="let validation of validationMessages.type"> + <div class="input-error" *ngIf="constraintsArray.at(constraintIndex).get('type').hasError(validation.type);"> + {{ validation.message }} + </div> + </ng-container> </div> + </div> - <!-- ConstraintTypes.valid_values--> - <div *ngIf="constraint.type == 'validValues'"> - <div class="w-sdc-form-columns-wrapper-block"> - <div class="add-btn add-list-item w-sdc-form-column-block" - [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; trackBy:trackByFn"> + + <div class="w-sdc-form-columns-wrapper"> + + <div class="w-sdc-form-column"> + <div class="w-sdc-form-columns-wrapper" *ngIf="constraint.value.type == 'inRange'"> <div class="w-sdc-form-column"> - <input type="text" class="i-sdc-form-input" *ngIf="propertyType !== 'boolean'" - [disabled]="isViewOnly" - [value]="value" - (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, valueIndex)"/> - <select class="i-sdc-form-select" *ngIf="propertyType == 'boolean'" - [disabled]="isViewOnly" - [value]="value" - (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, valueIndex)"> - <option ngValue="true">true</option> - <option ngValue="false">false</option> - </select> + <input type="text" class="i-sdc-form-input myClass" required + (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 0)" + [value]="getInRangeValue(constraintIndex, 0)"/> + + <ng-container *ngFor="let validation of validationMessages.constraint"> + <div class="input-error" *ngIf="constraintValuesArray(constraintIndex).controls[0].hasError(validation.type);"> + {{ validation.message }} + </div> + </ng-container> </div> <div class="w-sdc-form-column"> - <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromList(constraintIndex, valueIndex)"></span> + <input type="text" class="i-sdc-form-input myClass" required + (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 1)" + [value]="getInRangeValue(constraintIndex, 1)"/> + + <ng-container *ngFor="let validation of validationMessages.constraint"> + <div class="input-error" *ngIf="constraintValuesArray(constraintIndex).controls[1].hasError(validation.type);"> + {{ validation.message }} + </div> + </ng-container> </div> </div> - </div> - <!-- ConstraintTypes.equal--> - <div *ngIf="constraint.type == 'equal'"> - <input type="text" class="i-sdc-form-input" *ngIf="propertyType !== 'boolean'" - [disabled]="isViewOnly" - (input)="onChangeConstraintValue(constraintIndex, $event.target.value)" - [value]="constraint.value"/> - <select class="i-sdc-form-select" *ngIf="propertyType == 'boolean'" - [disabled]="isViewOnly" - [value]="constraint.value" - (input)="onChangeConstraintValue(constraintIndex, $event.target.value)"> - <option ngValue="true">true</option> - <option ngValue="false">false</option> - </select> - </div> + <div *ngIf="constraint.value.type == 'validValues'"> + <div class="w-sdc-form-columns-wrapper-block"> + <div class="add-btn add-list-item w-sdc-form-column-block" + [ngClass]="{'disabled': isViewOnly}" + (click)="addToList(constraintIndex)">Add to List</div> + </div> + <div class="w-sdc-form-columns-wrapper" *ngFor="let value of constraintValuesArray(constraintIndex).controls; let valueIndex = index; trackBy:trackByFn"> + <div class="w-sdc-form-column"> + <input type="text" class="i-sdc-form-input" required + [value]="value.value" + (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, valueIndex)"/> + </div> + + <ng-container *ngFor="let validation of validationMessages.constraint"> + <div class="input-error" *ngIf="constraintValuesArray(constraintIndex).controls[valueIndex].hasError(validation.type);"> + {{ validation.message }} + </div> + </ng-container> + + <div class="w-sdc-form-column"> + <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromList(constraintIndex, valueIndex)"></span> + </div> + </div> + </div> + + <div *ngIf="constraint.get('type').value != 'inRange' && constraint.get('type').value != 'validValues'"> + <input type="text" class="i-sdc-form-input myClass required" required + formControlName="value" + [value]="constraintsArray.at(constraintIndex).get('value').value" + (input)="onChangeConstraintValue(constraintIndex, $event.target.value)"/> - <!-- all other ConstraintTypes--> - <div *ngIf="constraint.type != 'inRange' && constraint.type != 'validValues' && constraint.type != 'equal'"> - <input type="text" class="i-sdc-form-input myClass" - [disabled]="isViewOnly" - (input)="onChangeConstraintValue(constraintIndex, $event.target.value)" - [value]="constraint.value"/> + <div class="validation-errors"> + <ng-container *ngFor="let validation of validationMessages.constraint"> + <div class="input-error" *ngIf="constraintsArray.at(constraintIndex).get('value').hasError(validation.type);"> + {{ validation.message }} + </div> + </ng-container> + </div> + </div> </div> - </div> - <div class="w-sdc-form-column-vsmall"> - <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeConstraint(constraintIndex)"></span> + <div class="w-sdc-form-column-vsmall" *ngIf="!isViewOnly"> + <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeConstraint(constraintIndex)"></span> + </div> </div> </div> + </div> </div> <div class="w-sdc-form-columns-wrapper-small" *ngIf="!isViewOnly"> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.spec.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.spec.ts index bfee76910e..06112e5830 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.spec.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.spec.ts @@ -19,6 +19,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ConstraintsComponent } from './constraints.component'; describe('ConstraintsComponent', () => { @@ -27,7 +28,8 @@ describe('ConstraintsComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ConstraintsComponent ] + declarations: [ ConstraintsComponent ], + imports: [FormsModule, ReactiveFormsModule] }) .compileComponents(); })); 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 2fb8b64e54..31dbeadd4e 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,15 @@ */ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { PROPERTY_DATA, PROPERTY_TYPES } from "app/utils/constants" +import { + AbstractControl, FormArray, + FormBuilder, + FormControl, + FormGroup, ValidationErrors, + ValidatorFn, + Validators +} from '@angular/forms'; +import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils/constants'; @Component({ selector: 'app-constraints', @@ -32,88 +40,358 @@ export class ConstraintsComponent implements OnInit { @Input() isViewOnly: boolean = false; @Output() onConstraintChange: EventEmitter<any> = new EventEmitter<any>(); - constraints: Constraint[] = new Array(); constraintTypes: string[]; ConstraintTypesMapping = ConstraintTypesMapping; - valid: boolean = true; + valid: boolean = false; + constraintForm: FormGroup; + validationMessages; + init: boolean = true; + + constructor(private formBuilder: FormBuilder) {} + + get constraintsArray() { + return this.constraintForm.get('constraint') as FormArray; + } + + get constraintValidators(): ValidatorFn { + switch (this.propertyType) { + case PROPERTY_TYPES.INTEGER: + console.warn('Add int validator'); + return Validators.compose([ + Validators.required, + intValidator() + ]); + case PROPERTY_TYPES.FLOAT: + console.warn('Add float validator'); + return Validators.compose([ + Validators.required, + floatValidator() + ]); + default: + console.warn('Only required validator'); + return Validators.compose([ + Validators.required + ]); + } +} + + public constraintValuesArray(index: number): FormArray { + return this.constraintsArray.at(index).get('value') as FormArray; + } ngOnInit() { - this.constraintTypes = Object.keys(ConstraintTypes).map(key => ConstraintTypes[key]); + console.groupEnd(); + this.constraintTypes = Object.keys(ConstraintTypes).map((key) => ConstraintTypes[key]); + + // This is only used by the spec test + if (!this.constraintForm) { + this.constraintForm = this.formBuilder.group({ + constraint: this.formBuilder.array([]) + }); + } + + this.validationMessages = { + constraint: [ + { type: 'required', message: 'Constraint value is required'}, + { type: 'invalidInt', message: 'Constraint value is not a valid integer'}, + { type: 'invalidFloat', message: 'Constraint value is not a valid floating point value'} + ], + type : [ + { type: 'required', message: 'Constraint type is required'} + ] + }; + + this.init = false; } ngOnChanges(changes): void { + console.groupEnd(); + + // Changes fires before init so form has to be initialised here + if (this.init) { + this.constraintForm = this.formBuilder.group({ + constraint: this.formBuilder.array([]) + }); + + if (changes.propertyConstraints && changes.propertyConstraints.currentValue) { + changes.propertyConstraints.currentValue.forEach((constraint: any) => { + const prop = this.getConstraintFromPropertyBEModel(constraint); + console.log('constraint from BE model', prop); + this.constraintsArray.push(prop); + }); + } + } + if (changes.propertyType) { + if (!this.init) { + // Reset constraints on property type change + console.warn('Property type changed. Resetting constraints'); + this.constraintForm = this.formBuilder.group({ + constraint: this.formBuilder.array([]) + }); + } + if (!this.propertyType || changes.propertyType.currentValue == this.propertyType) { this.propertyType = changes.propertyType.currentValue; } else { - this.constraints = new Array(); this.propertyType = changes.propertyType; this.emitOnConstraintChange(); } + + this.constraintsArray.controls.forEach((control: AbstractControl) => { + control.get('value').setValidators(this.constraintValidators); + }); } - this.constraints = new Array(); - if(changes.propertyConstraints) { - if (changes.propertyConstraints.currentValue) { - changes.propertyConstraints.currentValue.forEach((constraint: any) => { - this.constraints.push(this.getConstraintFromPropertyBEModel(constraint)); - }); - } + + console.log('constraints', this.constraintsArray); + } + + removeFromList(constraintIndex: number, valueIndex: number) { + this.constraintsArray.at(constraintIndex).get('value').value.splice(valueIndex, 1); + this.emitOnConstraintChange(); + } + + addToList(constraintIndex: number) { + const newConstraint = new FormControl('', this.constraintValidators); + + this.constraintValuesArray(constraintIndex).push(newConstraint); + console.log('constraintsArray', this.constraintsArray); + console.log('constraintValuesArray', this.constraintValuesArray(constraintIndex)); + this.emitOnConstraintChange(); + } + + onChangeConstraintType(constraintIndex: number, newType: ConstraintTypes) { + if ((newType == ConstraintTypes.valid_values)) { + const newConstraint = this.formBuilder.group({ + type: new FormControl({ + value: newType, + disabled: this.isViewOnly + }, Validators.required), + value: this.formBuilder.array([])}); + + this.constraintsArray.removeAt(constraintIndex); + this.constraintsArray.push(newConstraint); + } else if (newType == ConstraintTypes.in_range) { + const newConstraint = this.formBuilder.group({ + type: new FormControl({ + value: newType, + disabled: this.isViewOnly + }, Validators.required), + value: this.formBuilder.array([])}); + + const valRef = newConstraint.get('value') as FormArray; + valRef.push(new FormControl('', this.constraintValidators)); + valRef.push(new FormControl('', this.constraintValidators)); + + this.constraintsArray.removeAt(constraintIndex); + this.constraintsArray.push(newConstraint); + } else { + this.constraintsArray.at(constraintIndex).value.type = newType; } + this.emitOnConstraintChange(); + } + + onChangeConstraintValue(constraintIndex: number, newValue: any) { + this.constraintsArray.at(constraintIndex).get('value').setValue(newValue); + this.emitOnConstraintChange(); + } + + onChangeConstrainValueIndex(constraintIndex: number, newValue: any, valueIndex: number) { + this.constraintValuesArray(constraintIndex).controls[valueIndex].setValue(newValue); + this.emitOnConstraintChange(); } - private getConstraintFromPropertyBEModel(constraint: any):Constraint { + removeConstraint(constraintIndex: number) { + this.constraintsArray.removeAt(constraintIndex); + this.emitOnConstraintChange(); +} + + addConstraint() { + const newConstraint = this.formBuilder.group({ + type: new FormControl({ + value: ConstraintTypes.null, + disabled: this.isViewOnly + }, Validators.required), + value: new FormControl({ + value: '', + disabled: this.isViewOnly + }, this.constraintValidators) + }); + this.constraintsArray.push(newConstraint); + this.valid = false; + this.emitOnConstraintChange(); + } + + getInRangeValue(constraintIndex: number, valueIndex: number): string { + const value = this.constraintsArray.at(constraintIndex).get('value').value; + + if (!value || !value[valueIndex]) { + return ''; + } + + return 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): AbstractControl { + return this.constraintsArray.controls.find((control: AbstractControl) => { + const type = control.get('type').value; + return type == constraintType; + }); + } + + trackByFn(index) { + return index; + } + + isComparable(propType: string): boolean { + if (PROPERTY_DATA.COMPARABLE_TYPES.indexOf(propType) >= 0) { + return true; + } + return false; + } + + private getConstraintFromPropertyBEModel(constraint: any): AbstractControl { + console.log('be model constraints', constraint); let constraintType: ConstraintTypes; let constraintValue: any; if (!constraint) { constraintType = ConstraintTypes.null; - constraintValue = ""; - } else if(constraint.hasOwnProperty(ConstraintTypes.valid_values)){ + constraintValue = ''; + } else if (constraint.hasOwnProperty(ConstraintTypes.valid_values)) { constraintType = ConstraintTypes.valid_values; - constraintValue = constraint.validValues; - } else if(constraint.hasOwnProperty(ConstraintTypes.equal)) { + } else if (constraint.hasOwnProperty(ConstraintTypes.equal)) { constraintType = ConstraintTypes.equal; constraintValue = constraint.equal; - } else if(constraint.hasOwnProperty(ConstraintTypes.greater_than)) { + } else if (constraint.hasOwnProperty(ConstraintTypes.greater_than)) { constraintType = ConstraintTypes.greater_than; constraintValue = constraint.greaterThan; - } else if(constraint.hasOwnProperty(ConstraintTypes.greater_or_equal)) { + } else if (constraint.hasOwnProperty(ConstraintTypes.greater_or_equal)) { constraintType = ConstraintTypes.greater_or_equal; constraintValue = constraint.greaterOrEqual; - } else if(constraint.hasOwnProperty(ConstraintTypes.less_than)) { + } else if (constraint.hasOwnProperty(ConstraintTypes.less_than)) { constraintType = ConstraintTypes.less_than; constraintValue = constraint.lessThan; - } else if(constraint.hasOwnProperty(ConstraintTypes.less_or_equal)) { + } else if (constraint.hasOwnProperty(ConstraintTypes.less_or_equal)) { constraintType = ConstraintTypes.less_or_equal; constraintValue = constraint.lessOrEqual; - } else if(constraint.hasOwnProperty(ConstraintTypes.in_range)) { + } 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) { + } else if (constraint.rangeMaxValue || constraint.rangeMinValue) { constraintType = ConstraintTypes.in_range; constraintValue = new Array(constraint.rangeMinValue, constraint.rangeMaxValue); - } else if(constraint.hasOwnProperty(ConstraintTypes.length)) { + } else if (constraint.hasOwnProperty(ConstraintTypes.length)) { constraintType = ConstraintTypes.length; constraintValue = constraint.length; - } else if(constraint.hasOwnProperty(ConstraintTypes.min_length)) { + } else if (constraint.hasOwnProperty(ConstraintTypes.min_length)) { constraintType = ConstraintTypes.min_length; constraintValue = constraint.minLength; - } else if(constraint.hasOwnProperty(ConstraintTypes.max_length)) { + } else if (constraint.hasOwnProperty(ConstraintTypes.max_length)) { constraintType = ConstraintTypes.max_length; constraintValue = constraint.maxLength; - } else if(constraint.hasOwnProperty(ConstraintTypes.pattern)) { + } else if (constraint.hasOwnProperty(ConstraintTypes.pattern)) { constraintType = ConstraintTypes.pattern; constraintValue = constraint.pattern; } - return { - type:constraintType, - value:constraintValue + + if (!constraint.hasOwnProperty(ConstraintTypes.valid_values) && !constraint.hasOwnProperty(ConstraintTypes.in_range)) { + return this.formBuilder.group({ + type: new FormControl({ + value: constraintType, + disabled: this.isViewOnly + }, Validators.required), + value: new FormControl({ + value: constraintValue, + disabled: this.isViewOnly + }, this.constraintValidators) + }); + } else { + const newForm = this.formBuilder.group({ + type: new FormControl({ + value: constraintType, + disabled: this.isViewOnly + }, Validators.required), + value: this.formBuilder.array([]) + }); + + const valRef = newForm.get('value') as FormArray; + + if (constraint.hasOwnProperty(ConstraintTypes.valid_values)) { + constraint.validValues.forEach((val) => { + valRef.push(new FormControl(val, this.constraintValidators)); + }); + } else { + constraint.inRange.forEach((val) => { + valRef.push(new FormControl(val, this.constraintValidators)); + }); + } + + console.log('new form', newForm); + return newForm; } } private getConstraintsFormat(): any[] { - let constraintArray = new Array(); - this.constraints.forEach((constraint: Constraint) => { - constraintArray.push(this.getConstraintFormat(constraint)) + const constraintArray = new Array(); + this.constraintsArray.controls.forEach((control: AbstractControl) => { + const type = control.get('type').value; + let constraint: Constraint; + + if (type != ConstraintTypes.valid_values && type != ConstraintTypes.in_range) { + constraint = { + type, + value: control.get('value').value + }; + } else { + const valArray = []; + + control.get('value').value.forEach((val) => { + valArray.push(val); + }); + + constraint = { + type, + value: valArray + }; + } + + console.log('New constraint object', constraint); + constraintArray.push(this.getConstraintFormat(constraint)); }); return constraintArray; } @@ -123,224 +401,153 @@ export class ConstraintsComponent implements OnInit { case ConstraintTypes.equal: return { [ConstraintTypes.equal]: constraint.value - } + }; case ConstraintTypes.less_or_equal: return { [ConstraintTypes.less_or_equal]: constraint.value - } + }; case ConstraintTypes.less_than: return { [ConstraintTypes.less_than]: constraint.value - } + }; case ConstraintTypes.greater_or_equal: return { [ConstraintTypes.greater_or_equal]: constraint.value - } + }; case ConstraintTypes.greater_than: return { [ConstraintTypes.greater_than]: constraint.value - } + }; case ConstraintTypes.in_range: return { [ConstraintTypes.in_range]: constraint.value - } + }; case ConstraintTypes.length: return { [ConstraintTypes.length]: constraint.value - } + }; case ConstraintTypes.max_length: return { [ConstraintTypes.max_length]: constraint.value - } + }; case ConstraintTypes.min_length: return { [ConstraintTypes.min_length]: constraint.value - } + }; case ConstraintTypes.pattern: return { [ConstraintTypes.pattern]: constraint.value - } + }; case ConstraintTypes.valid_values: return { [ConstraintTypes.valid_values]: constraint.value - } + }; default: return; } } private validateConstraints(): void { - this.valid = this.constraints.every((constraint: Constraint) => { - if (Array.isArray(constraint.value)) { - return !(constraint.value.length == 0 || this.doesArrayContaintEmptyValues(constraint.value)); + this.valid = this.constraintsArray.controls.every((control: AbstractControl) => { + const value = control.get('value').value; + const type = control.get('type').value; + control.updateValueAndValidity(); + + if (Array.isArray(value)) { + return !(value.length == 0 || this.doesArrayContaintEmptyValues(value)); } - if (constraint.type == ConstraintTypes.pattern) { + if (type == ConstraintTypes.pattern) { try { - new RegExp(constraint.value); + new RegExp(value); this.valid = true; - } catch(e) { + } catch (e) { this.valid = false; } + } else { + this.valid = this.constraintForm.valid; } - return constraint.value && constraint.type != ConstraintTypes.null + + return value && type != ConstraintTypes.null; }); } private doesArrayContaintEmptyValues(arr) { - for(const element of arr) { - if(element === "") return true; + for (const element of arr) { + if (element === '') { return true; } } return false; } private emitOnConstraintChange(): void { + console.log('constraints', this.constraintsArray); + this.validateConstraints(); const newConstraints = this.getConstraintsFormat(); + + this.valid = this.constraintForm.valid; + console.log('emitOnConstraintChange.valid', this.valid); + 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){ - if (!this.constraints[constraintIndex].value) { - this.constraints[constraintIndex].value = new Array(); - } - this.constraints[constraintIndex].value.push(""); - this.emitOnConstraintChange() - } - - onChangeConstraintType(constraintIndex: number, newType: ConstraintTypes) { - this.constraints[constraintIndex].type = newType; - 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) { - if(!this.constraints[constraintIndex].value) { - this.constraints[constraintIndex].value = new Array(); - } - this.constraints[constraintIndex].value[valueIndex] = newValue; - this.emitOnConstraintChange(); - } - - removeConstraint(constraintIndex: number) { - this.constraints.splice(constraintIndex, 1); - this.emitOnConstraintChange(); } - addConstraint() { - let newConstraint: Constraint = { - type: ConstraintTypes.null, - value: "" - } - this.constraints.push(newConstraint); - this.emitOnConstraintChange(); - } - - getInRangeValue(constraintIndex: number, valueIndex: number): string { - if(!this.constraints[constraintIndex].value || !this.constraints[constraintIndex].value[valueIndex]) { - return ""; - } - 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; - } +export enum ConstraintTypes { + null = '', + equal= 'equal', + greater_than = 'greaterThan', + greater_or_equal = 'greaterOrEqual', + less_than = 'lessThan', + less_or_equal = 'lessOrEqual', + in_range = 'inRange', + valid_values = 'validValues', + length = 'length', + min_length = 'minLength', + max_length = 'maxLength', + pattern = 'pattern' +} - getConstraintTypeIfPresent(constraintType: ConstraintTypes): Constraint { - return this.constraints.find((constraint) => { - return constraint.type == constraintType ? true : false; - }) - } +export const ConstraintTypesMapping = { + [ConstraintTypes.equal]: 'equal', + [ConstraintTypes.greater_than]: 'greater_than', + [ConstraintTypes.greater_or_equal]: 'greater_or_equal', + [ConstraintTypes.less_than]: 'less_than', + [ConstraintTypes.less_or_equal]: 'less_or_equal', + [ConstraintTypes.in_range]: 'in_range', + [ConstraintTypes.valid_values]: 'valid_values', + [ConstraintTypes.length]: 'length', + [ConstraintTypes.min_length]: 'min_length', + [ConstraintTypes.max_length]: 'max_length', + [ConstraintTypes.pattern]: 'pattern' +}; - trackByFn(index) { - return index; - } +export interface Constraint { + type: ConstraintTypes; + value: any; +} - isComparable(propType: string): boolean { - if (PROPERTY_DATA.COMPARABLE_TYPES.indexOf(propType) >= 0) { - return true; +export function intValidator(): ValidatorFn { + const intRegex = /^[-+]?\d+$/; + return (control: AbstractControl): ValidationErrors | null => { + if (control.value && !intRegex.test(control.value)) { + return {invalidInt: true}; } - return false; - } + return null; + }; } -export enum ConstraintTypes { - null = "", - equal= "equal", - greater_than = "greaterThan", - greater_or_equal = "greaterOrEqual", - less_than = "lessThan", - less_or_equal = "lessOrEqual", - in_range = "inRange", - valid_values = "validValues", - length = "length", - min_length = "minLength", - max_length = "maxLength", - pattern = "pattern" -} +export function floatValidator(): ValidatorFn { + const floatRegex = /^[-+]?\d+(\.\d+)?$/; -export const ConstraintTypesMapping = { - [ConstraintTypes.equal]: "equal", - [ConstraintTypes.greater_than]: "greater_than", - [ConstraintTypes.greater_or_equal]: "greater_or_equal", - [ConstraintTypes.less_than]: "less_than", - [ConstraintTypes.less_or_equal]: "less_or_equal", - [ConstraintTypes.in_range]: "in_range", - [ConstraintTypes.valid_values]: "valid_values", - [ConstraintTypes.length]: "length", - [ConstraintTypes.min_length]: "min_length", - [ConstraintTypes.max_length]: "max_length", - [ConstraintTypes.pattern]: "pattern" -}; + return (control: AbstractControl): ValidationErrors | null => { + if (control.value && !floatRegex.test(control.value)) { + return {invalidFloat: true}; + } -export interface Constraint { - type:ConstraintTypes, - value:any + return null; + }; } diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.module.ts index 4f14e1f855..48ad24e112 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.module.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.module.ts @@ -19,13 +19,14 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ConstraintsComponent } from './constraints.component'; -import { FormsModule } from '@angular/forms'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ - imports: [ - CommonModule, - FormsModule - ], + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule + ], declarations: [ConstraintsComponent], exports: [ConstraintsComponent], entryComponents: [ |