Add property mapping feature to ONAP

Add service property assignment

Change-Id: I29748ce12bacab06b8bc27f8875b39d80ffe5af7
Issue-ID: SDC-1988
Signed-off-by: Talio <tali.orenbach@amdocs.com>

4 files changed, 186 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.html
new file mode 100644
index 0000000000..e97ec79c04
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.html
@@ -0,0 +1,46 @@
+<div class="property-creator">
+    <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
+    <form class="w-sdc-form">
+
+        <div class="side-by-side">
+            <div class="i-sdc-form-item">
+                <label class="i-sdc-form-label required">Name</label>
+                <input class="i-sdc-form-input"
+                       type="text"
+                       name="propertyName"
+                       data-tests-id="property-name"
+                       [(ngModel)]="propertyModel.name"
+                       [ngModelOptions]="{ debounce: 200 }"
+                       autofocus/>
+            </div>
+            <!-- Type -->
+            <div class="i-sdc-form-item">
+                <label class="i-sdc-form-label required">Type</label>
+                <ui-element-dropdown [testId]="'property-type'"
+                                     class="cell link-selector"
+                                     [values]="typesProperties"
+                                     [(value)]="propertyModel.type"></ui-element-dropdown>
+            </div>
+            <div class="i-sdc-form-item propertySchemaType" *ngIf="showSchema()">
+                <label class="i-sdc-form-label required">Schema Type</label>
+                <ui-element-dropdown [testId]="'property-type'"
+                                     class="cell link-selector"
+                                     [values]="typesSchemaProperties"
+                                     [(value)]="propertyModel.schema.property.type"></ui-element-dropdown>
+            </div>
+        </div>
+
+        <!-- Description -->
+        <div class="i-sdc-form-item">
+            <label class="i-sdc-form-label">Description</label>
+            <textarea  class="i-sdc-form-textarea"
+                       [pattern]="commentValidationPattern"
+                       name="propertyDescription"
+                       [(ngModel)]="propertyModel.description"
+                       [ngModelOptions]="{ debounce: 200 }"
+                       data-tests-id="property-description"
+            ></textarea>
+        </div>
+
+    </form>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.less
new file mode 100644
index 0000000000..d17a45e2c9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.less
@@ -0,0 +1,35 @@
+@import '../../../../../assets/styles/variables.less';
+
+.property-creator {
+    font-family: @font-opensans-regular;
+    user-select: none;
+    padding-top: 12px;
+    padding-bottom: 20px;
+
+    .i-sdc-form-label {
+        font-size: 12px;
+    }
+
+    .w-sdc-form .i-sdc-form-item {
+        margin-bottom: 15px;
+    }
+
+    .side-by-side {
+        display: flex;
+
+        .i-sdc-form-item {
+            flex-basis: 100%;
+
+            &:first-child {
+                flex-basis: 50%;
+                margin-right: 10px;
+            }
+
+        }
+        .propertySchemaType{
+            margin-left: 10px;
+        }
+    }
+
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts
new file mode 100644
index 0000000000..d5946d2e4a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.component.ts
@@ -0,0 +1,78 @@
+import * as _ from "lodash";
+import {Component} from '@angular/core';
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import { DataTypeService } from "app/ng2/services/data-type.service";
+import {PropertyBEModel, DataTypesMap} from "app/models";
+import {PROPERTY_DATA} from "app/utils";
+import {PROPERTY_TYPES} from "../../../../utils";
+
+
+
+@Component({
+    selector: 'property-creator',
+    templateUrl: './property-creator.component.html',
+    styleUrls:['./property-creator.component.less'],
+})
+
+export class PropertyCreatorComponent {
+
+    typesProperties: Array<DropdownValue>;
+    typesSchemaProperties: Array<DropdownValue>;
+    propertyModel: PropertyBEModel;
+    //propertyNameValidationPattern:RegExp = /^[a-zA-Z0-9_:-]{1,50}$/;
+    //commentValidationPattern:RegExp = /^[\u0000-\u00BF]*$/;
+    //types:Array<string>;
+    dataTypes:DataTypesMap;
+    isLoading:boolean;
+
+    constructor(protected dataTypeService:DataTypeService) {}
+
+    ngOnInit() {
+        this.propertyModel = new PropertyBEModel();
+        this.propertyModel.type = '';
+        this.propertyModel.schema.property.type = '';
+        const types: Array<string> =  PROPERTY_DATA.TYPES; //All types - simple type + map + list
+        this.dataTypes = this.dataTypeService.getAllDataTypes(); //Get all data types in service
+        const nonPrimitiveTypes :Array<string> = _.filter(Object.keys(this.dataTypes), (type:string)=> {
+            return types.indexOf(type) == -1;
+        });
+
+        this.typesProperties = _.map(PROPERTY_DATA.TYPES,
+            (type: string) => new DropdownValue(type, type)
+        );
+        let typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES,
+            (type: string) => new DropdownValue(type, type)
+        );
+        let nonPrimitiveTypesValues = _.map(nonPrimitiveTypes,
+            (type: string) => new DropdownValue(type,
+                    type.replace("org.openecomp.datatypes.heat.",""))
+        );
+        this.typesProperties = _.concat(this.typesProperties,nonPrimitiveTypesValues);
+        this.typesSchemaProperties = _.concat(typesSimpleProperties,nonPrimitiveTypesValues);
+        this.typesProperties.unshift(new DropdownValue('','Select Type...'));
+        this.typesSchemaProperties.unshift(new DropdownValue('','Select Schema Type...'));
+
+    }
+
+    checkFormValidForSubmit(){
+        const showSchema:boolean = this.showSchema();
+        let isSchemaValid: boolean = (showSchema && !this.propertyModel.schema.property.type)? false : true;
+        if (!showSchema){
+            this.propertyModel.schema.property.type = '';
+        }
+        return this.propertyModel.name && this.propertyModel.type && isSchemaValid;
+    }
+
+    showSchema():boolean {
+        return [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP].indexOf(this.propertyModel.type) > -1;
+    };
+
+    onSchemaTypeChange():void {
+        if (this.propertyModel.type == PROPERTY_TYPES.MAP) {
+            this.propertyModel.value = JSON.stringify({'': null});
+        } else if (this.propertyModel.type == PROPERTY_TYPES.LIST) {
+            this.propertyModel.value = JSON.stringify([]);
+        }
+    };
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts
new file mode 100644
index 0000000000..92accb26b5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/property-creator/property-creator.module.ts
@@ -0,0 +1,27 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {PropertyCreatorComponent} from "./property-creator.component";
+import {FormsModule} from "@angular/forms";
+import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {TranslateModule} from "../../../shared/translator/translate.module";
+
+@NgModule({
+    declarations: [
+        PropertyCreatorComponent,
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        FormElementsModule,
+        UiElementsModule,
+        TranslateModule
+    ],
+    exports: [],
+    entryComponents: [
+        PropertyCreatorComponent
+    ],
+    providers: []
+})
+
+export class PropertyCreatorModule {}