diff options
Diffstat (limited to 'catalog-ui')
6 files changed, 53 insertions, 17 deletions
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.html index a2e4f48531..3ac4f7a31d 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.html +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.html @@ -6,6 +6,7 @@ <div class="i-sdc-form-item"> <label class="i-sdc-form-label required">{{'PROPERTY_NAME_LABEL' | translate}}</label> <input class="i-sdc-form-input" + [ngClass]="{ 'disabled': property ? true : false }" type="text" data-tests-id="property-name" formControlName="name" @@ -13,7 +14,7 @@ </div> <div class="i-sdc-form-item"> <label class="i-sdc-form-label required">{{'PROPERTY_TYPE_LABEL' | translate}}</label> - <select formControlName="type" (change)="onTypeChange()" [attr.disabled]="readOnly ? readOnly : null"> + <select formControlName="type" (change)="onTypeChange()" [ngClass]="{ 'disabled': property ? true : false }"> <option [ngValue]="null">{{'GENERAL_LABEL_SELECT' | translate}}</option> <option *ngFor="let type of typeList" [ngValue]="type">{{type}}</option> diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.ts index 56db2cefeb..8eb04c0cbb 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.ts +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.ts @@ -45,7 +45,7 @@ export class AddPropertyComponent implements OnInit, OnDestroy { private validConstraints: boolean = true; private valueChangesSub: Subscription; private descriptionForm: FormControl = new FormControl(undefined); - private requiredForm: FormControl = new FormControl(false, Validators.required); + private requiredForm: FormControl = new FormControl(false); nameForm: FormControl = new FormControl(undefined, [Validators.required]); typeForm: FormControl = new FormControl(undefined, Validators.required); schemaForm: FormControl = new FormControl(undefined, (control: AbstractControl): ValidationErrors | null => { @@ -163,9 +163,10 @@ export class AddPropertyComponent implements OnInit, OnDestroy { private emitValidityChange(): void { const isValid: boolean = this.formGroup.valid; + this.findInvalidControls().forEach(name => console.error("Validation error in field: " + name)); this.onValidityChange.emit({ isValid: isValid && this.validConstraints, - property: isValid ? this.buildPropertyFromForm() : undefined + property: isValid ? this.buildPropertyFromForm() : this.nameForm.value }); } @@ -173,6 +174,7 @@ export class AddPropertyComponent implements OnInit, OnDestroy { const property = new PropertyBEModel(); property.name = this.nameForm.value; property.type = this.typeForm.value; + property.required = this.requiredForm.value; property.constraints = this.constraintsForm.value; if (this.schemaForm.value) { property.schemaType = this.schemaForm.value; @@ -241,15 +243,27 @@ export class AddPropertyComponent implements OnInit, OnDestroy { } this.property.constraints = constraints.constraints; } - else { - this.constraintsForm.setValue(constraints.constraints); - } + + this.constraintsForm.setValue(constraints.constraints); + this.validConstraints = constraints.valid; + let formValid = constraints.valid && this.findInvalidControls().length === 0; this.onValidityChange.emit({ - isValid: constraints.valid, - property: constraints.valid ? this.buildPropertyFromForm() : undefined + isValid: formValid, + property: formValid ? this.buildPropertyFromForm() : undefined }); } + + findInvalidControls() { + const invalid = []; + const controls = this.formGroup.controls; + for (const name in controls) { + if (controls[name].invalid) { + invalid.push(name); + } + } + return invalid; + } } export class PropertyValidationEvent { diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html index ec67a02a1b..e657520ee4 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.html @@ -38,9 +38,9 @@ <div *ngIf="filteredProperties.length === 0" class="no-row-text"> {{'PROPERTY_LIST_EMPTY_MESSAGE' | translate}} </div> - <div *ngFor="let property of filteredProperties" [attr.data-tests-id]="'property-row-' + property.name" class="flex-container data-row" (click)="onRowClick(property)"> + <div *ngFor="let property of filteredProperties" [attr.data-tests-id]="'property-row-' + property.name" class="flex-container data-row" (click)="onNameClick(property)"> <div class="table-col-general flex-item text" [title]="property.name"> - <a [attr.data-tests-id]="'property-name-' + property.name" [ngClass]="{'disabled': isViewOnly}">{{property.name}}</a> + <a [attr.data-tests-id]="'property-name-' + property.name" [ngClass]="{'disabled': false}">{{property.name}}</a> </div> <div class="table-col-general flex-item text" [title]="property.type"> <span [attr.data-tests-id]="'property-type-' + property.name">{{property.type}}</span> diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts index 83651fc73c..60edd13c2d 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts @@ -132,12 +132,20 @@ export class TypeWorkspacePropertiesComponent implements OnInit { this.filter(); } + private updateProperty(oldProperty: PropertyBEModel, newProperty: PropertyBEModel) { + this.properties.forEach((value,index)=>{ + if(value.name == oldProperty.name) this.properties.splice(index,1); + }); + this.properties.push(newProperty); + this.filter(); + } + onClickAddProperty() { - this.openAddPropertyModal(); + this.openAddPropertyModal(null, false); } private openAddPropertyModal(property?: PropertyBEModel, readOnly: boolean = false) { - const modalTitle = this.translateService.translate('PROPERTY_ADD_MODAL_TITLE'); + const modalTitle = this.translateService.translate(property ? 'PROPERTY_EDIT_MODAL_TITLE' : 'PROPERTY_ADD_MODAL_TITLE'); const modalButtons = []; let disableSaveButtonFlag = true; let propertyFromModal: PropertyBEModel = undefined; @@ -156,9 +164,16 @@ export class TypeWorkspacePropertiesComponent implements OnInit { modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue', () => { disableSaveButtonFlag = true; - this.dataTypeService.createProperty(this.dataType.uniqueId, propertyFromModal).subscribe(property => { - this.addProperty(new PropertyBEModel(property)); - }); + if (property) { + this.dataTypeService.updateProperty(this.dataType.uniqueId, propertyFromModal).subscribe(property => { + this.updateProperty(propertyFromModal, new PropertyBEModel(property)); + }); + } + else { + this.dataTypeService.createProperty(this.dataType.uniqueId, propertyFromModal).subscribe(property => { + this.addProperty(new PropertyBEModel(property)); + }); + } this.modalService.closeCurrentModal(); }, (): boolean => { @@ -185,8 +200,8 @@ export class TypeWorkspacePropertiesComponent implements OnInit { modal.instance.open(); } - onRowClick(property: PropertyBEModel) { - this.openAddPropertyModal(property, true); + onNameClick(property: PropertyBEModel) { + this.openAddPropertyModal(property, this.isViewOnly); } private showPropertiesMap(properties: Array<PropertyBEModel>): void { diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts index 7e18d0a4ba..38714c96da 100644 --- a/catalog-ui/src/app/ng2/services/data-type.service.ts +++ b/catalog-ui/src/app/ng2/services/data-type.service.ts @@ -92,6 +92,11 @@ export class DataTypeService { return this.httpClient.post<PropertyBEModel>(url, property); } + public updateProperty(id: string, property: PropertyBEModel): Observable<PropertyBEModel> { + const url = `${this.dataTypeUrl}/${id}/properties`; + return this.httpClient.put<PropertyBEModel>(url, property); + } + public createImportedType(model: string, importingFile: File): Observable<any> { const url = `${this.dataTypeUploadUrl}/datatypesyaml`; const formData = new FormData(); diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json index bb2ebd596d..a98bf4c8c1 100644 --- a/catalog-ui/src/assets/languages/en_US.json +++ b/catalog-ui/src/assets/languages/en_US.json @@ -594,6 +594,7 @@ "PROPERTY_LIST_EMPTY_MESSAGE": "There are no properties to display", "PROPERTY_SHOWING_LABEL": "Showing Properties", "PROPERTY_ADD_MODAL_TITLE": "Add Property", + "PROPERTY_EDIT_MODAL_TITLE": "Update Property", "PROPERTY_VIEW_MODAL_TITLE": "View Property", "PROPERTY_DESCRIPTION_LABEL": "Description", "PROPERTY_DEFAULT_VALUE_LABEL": "Default Value", |