From 175ed7819a1647d87d847add71da4d5cf47a02fc Mon Sep 17 00:00:00 2001 From: "andre.schmid" Date: Fri, 10 Jun 2022 15:22:58 +0100 Subject: Disable save for invalid TOSCA function Disable save button for invalid TOSCA functions in the TOSCA function modal. Change-Id: I322f59b20faec17ba0edaa412273ee41c0c2675c Issue-ID: SDC-4047 Signed-off-by: andre.schmid --- catalog-ui/src/app/models/tosca-get-function.ts | 2 +- .../properties-assignment.page.component.ts | 7 ++++++- .../tosca-function/tosca-function.component.ts | 16 ++++++++++------ 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/catalog-ui/src/app/models/tosca-get-function.ts b/catalog-ui/src/app/models/tosca-get-function.ts index 6d5642eaf1..97497fc948 100644 --- a/catalog-ui/src/app/models/tosca-get-function.ts +++ b/catalog-ui/src/app/models/tosca-get-function.ts @@ -31,7 +31,7 @@ export class ToscaGetFunction { functionType: ToscaGetFunctionType; propertyPathFromSource: Array; - constructor(toscaGetFunction: ToscaGetFunction) { + constructor(toscaGetFunction?: ToscaGetFunction) { if (!toscaGetFunction) { return; } diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts index 7feea50d89..ab67b0c827 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts @@ -538,6 +538,7 @@ export class PropertiesAssignmentComponent { private openToscaGetFunctionModal() { const modalTitle = this.translateService.translate('TOSCA_FUNCTION_MODAL_TITLE'); const modalButtons = []; + let disableSaveButtonFlag = true; modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue', () => { const toscaGetFunction: ToscaGetFunction = modal.instance.dynamicContent.instance.toscaGetFunction; @@ -547,7 +548,8 @@ export class PropertiesAssignmentComponent { this.clearCheckedInstancePropertyValue(); } modal.instance.close(); - } + }, + (): boolean => { return disableSaveButtonFlag } )); const checkedInstanceProperty = this.buildCheckedInstanceProperty(); modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => { @@ -565,6 +567,9 @@ export class PropertiesAssignmentComponent { 'property': checkedInstanceProperty, 'componentInstanceMap': this.componentInstanceMap }); + modal.instance.dynamicContent.instance.onValidityChange.subscribe(isValid => { + disableSaveButtonFlag = !isValid; + }); modal.instance.open(); } diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts index 81e5b473a1..8c983b61b8 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts @@ -48,6 +48,10 @@ export class ToscaFunctionComponent implements OnInit { toscaGetFunctionValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { const toscaGetFunction: ToscaGetFunction = control.value; + const hasAnyValue = Object.keys(toscaGetFunction).find(key => toscaGetFunction[key]); + if (!hasAnyValue) { + return null; + } const errors: ValidationErrors = {}; if (!toscaGetFunction.sourceName) { errors.sourceName = { required: true }; @@ -105,15 +109,15 @@ export class ToscaFunctionComponent implements OnInit { this.loadToscaFunctions(); this.loadPropertySourceDropdown(); this.initToscaGetFunction(); + } + + private initToscaGetFunction(): void { this.toscaGetFunctionForm.valueChanges.subscribe(toscaGetFunction => { this.onValidityChange.emit(this.toscaGetFunctionForm.valid); if (this.toscaGetFunctionForm.valid) { this.onValidFunction.emit(toscaGetFunction); } - }) - } - - private initToscaGetFunction(): void { + }); if (!this.property.isToscaGetFunction()) { return; } @@ -177,8 +181,8 @@ export class ToscaFunctionComponent implements OnInit { } private resetForm(): void { - this.toscaGetFunction = new ToscaGetFunction(undefined); - this.toscaGetFunctionForm.setValue(new ToscaGetFunction(undefined)); + this.toscaGetFunction = new ToscaGetFunction(); + this.toscaGetFunctionForm.setValue(new ToscaGetFunction()); this.propertySource = undefined; this.selectedProperty = undefined; } -- cgit 1.2.3-korg