Edit properties of non-normative data types

Develop all necessary changes in the UI to allow editing of non-normative data types

Issue-ID: SDC-4373
Signed-off-by: franciscovila <javier.paradela.vila@est.tech>
Change-Id: I37749fd3d2992f3134a09c07bb43c0208ce12a23

5 files changed, 52 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();