[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 399 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-model.ts
new file mode 100644
index 0000000000..1ba5a90bb4
--- /dev/null
+++ b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-model.ts
@@ -0,0 +1,204 @@
+/**
+ * Created by obarda on 1/19/2017.
+ */
+'use strict';
+import {DataTypesService} from "app/services/data-types-service";
+import {PropertyModel, DataTypesMap, Component} from "app/models";
+import {ValidationUtils, PROPERTY_DATA} from "app/utils";
+
+export interface IPropertyFormBaseViewScope extends ng.IScope {
+
+    forms:any;
+    editForm:ng.IFormController;
+
+    property:PropertyModel;
+    types:Array<string>;
+    nonPrimitiveTypes:Array<string>;
+    simpleTypes:Array<string>;
+
+    footerButtons:Array<any>;
+    modalPropertyFormBase:ng.ui.bootstrap.IModalServiceInstance;
+    currentPropertyIndex:number;
+    isLastProperty:boolean;
+    innerViewSrcUrl:string;
+
+    //Disabling filed - each child controller can change this when needed
+    isNew:boolean;
+    isTypeSelectorDisable:boolean;
+    isDeleteDisable:boolean;
+    isNameDisable:boolean;
+    isDescriptionDisable:boolean;
+    isPropertyValueDisable:boolean;
+    isArrowsDisabled:boolean;
+
+    //Validation pattern
+    validationPattern:RegExp;
+    propertyNameValidationPattern:RegExp;
+    commentValidationPattern:RegExp;
+    numberValidationPattern:RegExp;
+
+    dataTypes:DataTypesMap;
+
+    isLoading:boolean;
+
+    save():void;
+    close():void;
+    getNext():void;
+    getPrev():void;
+    getValidationPattern(type:string):RegExp;
+}
+
+export abstract class PropertyFormBaseView {
+
+
+    constructor(protected $scope:IPropertyFormBaseViewScope,
+                protected $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                protected $injector:ng.auto.IInjectorService,
+                protected originalProperty:PropertyModel,
+                protected component:Component,
+                protected filteredProperties:Array<PropertyModel>,
+                protected DataTypesService:DataTypesService) {
+
+        this.initScope();
+
+    }
+
+    protected validationUtils:ValidationUtils;
+
+    protected isPropertyValueOwner = ():boolean => {
+        return this.component.isService() || !!this.component.selectedInstance;
+    };
+
+    private isDisable = ():boolean => {
+        return this.isPropertyValueOwner() || this.$scope.property.readonly;
+    };
+
+
+    //This is the difault state, Childs screens can change if needed
+    protected initButtonsState = ():void => {
+        let isDisable = this.isDisable();
+
+        this.$scope.isArrowsDisabled = false;
+        this.$scope.isDeleteDisable = isDisable;
+        this.$scope.isDescriptionDisable = isDisable;
+        this.$scope.isNameDisable = isDisable;
+        this.$scope.isTypeSelectorDisable = isDisable;
+        this.$scope.isPropertyValueDisable = this.$scope.property.readonly && !this.isPropertyValueOwner();
+    };
+
+    protected initValidations = ():void => {
+
+        this.$scope.validationPattern = this.$injector.get('ValidationPattern');
+        this.$scope.propertyNameValidationPattern = this.$injector.get('PropertyNameValidationPattern');
+        this.$scope.commentValidationPattern = this.$injector.get('CommentValidationPattern');
+        this.$scope.numberValidationPattern = this.$injector.get('NumberValidationPattern');
+        this.validationUtils = this.$injector.get('ValidationUtils');
+    };
+
+    //Functions implemented on child's scope if needed
+    abstract save(doNotCloseModal?:boolean):ng.IPromise<boolean>;
+
+    protected onPropertyChange():void {
+    };
+
+    private updatePropertyByIndex = (index:number):void => {
+        this.$scope.property = new PropertyModel(this.filteredProperties[index]);
+        this.$scope.isLastProperty = this.$scope.currentPropertyIndex == (this.filteredProperties.length - 1);
+        this.onPropertyChange();
+    };
+
+    private initScope = ():void => {
+
+        this.$scope.forms = {};
+        this.$scope.isLoading = false;
+        this.$scope.property = new PropertyModel(this.originalProperty); //we create a new Object so if user press cance we won't update the property
+        this.$scope.types = PROPERTY_DATA.TYPES; //All types - simple type + map + list
+        this.$scope.simpleTypes = PROPERTY_DATA.SIMPLE_TYPES; //All simple types
+        this.$scope.dataTypes = this.DataTypesService.getAllDataTypes(); //Get all data types in service
+        this.$scope.modalPropertyFormBase = this.$uibModalInstance;
+        this.$scope.isNew = !angular.isDefined(this.$scope.property.name);
+
+        this.initValidations();
+        this.initButtonsState();
+        this.filteredProperties = _.sortBy(this.filteredProperties, 'name');
+        this.$scope.currentPropertyIndex = _.findIndex(this.filteredProperties, propety => propety.uniqueId == this.$scope.property.uniqueId);
+        this.$scope.isLastProperty = this.$scope.currentPropertyIndex == (this.filteredProperties.length - 1);
+
+        this.$scope.nonPrimitiveTypes = _.filter(Object.keys(this.$scope.dataTypes), (type:string)=> {
+            return this.$scope.types.indexOf(type) == -1;
+        });
+
+        this.$scope.close = ():void => {
+            this.$uibModalInstance.close();
+        };
+
+        this.$scope.save = ():void => {
+
+            let onSuccess = ():void => {
+                this.$scope.isLoading = false;
+            };
+            let onFailed = ():void => {
+                this.$scope.isLoading = false;
+            };
+
+            this.$scope.isLoading = true;
+            this.save(true).then(onSuccess, onFailed); // Child controller implement save logic
+        };
+
+        // Add the done button at the footer.
+        this.$scope.footerButtons = [
+            {'name': 'Save', 'css': 'blue', 'callback': this.$scope.save},
+            {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close}
+        ];
+
+
+        this.$scope.getPrev = ():void=> {
+
+            let onSuccess = ():void => {
+                this.$scope.isLoading = false;
+                this.updatePropertyByIndex(--this.$scope.currentPropertyIndex);
+            };
+            let onFailed = ():void => {
+                this.$scope.isLoading = false;
+            };
+
+            if (!this.$scope.property.readonly) {
+                this.$scope.isLoading = true;
+                this.save(false).then(onSuccess, onFailed);
+
+            } else {
+                this.updatePropertyByIndex(--this.$scope.currentPropertyIndex);
+            }
+
+        };
+
+        this.$scope.getNext = ():void=> {
+
+            let onSuccess = ():void => {
+                this.$scope.isLoading = false;
+                this.updatePropertyByIndex(++this.$scope.currentPropertyIndex);
+            };
+            let onFailed = ():void => {
+                this.$scope.isLoading = false;
+            };
+
+            if (!this.$scope.property.readonly) {
+                this.$scope.isLoading = true;
+                this.save(false).then(onSuccess, onFailed);
+            } else {
+                this.updatePropertyByIndex(++this.$scope.currentPropertyIndex);
+            }
+
+        };
+
+
+        this.$scope.$watch("forms.editForm.$invalid", (newVal, oldVal) => {
+            this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid;
+        });
+
+
+        this.$scope.getValidationPattern = (type:string):RegExp => {
+            return this.validationUtils.getValidationPattern(type);
+        };
+    }
+}
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html
new file mode 100644
index 0000000000..7cb05bf4ca
--- /dev/null
+++ b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base-view.html
@@ -0,0 +1,132 @@
+<sdc-modal modal="modalPropertyFormBase" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Property" show-close-button="true" data-tests-id="sdc-edit-property-container">
+    <loader data-display="isLoading" relative="false" size="medium"></loader>
+    <div class="sdc-modal-top-bar" data-ng-if="!isNew">
+        <div class="sdc-modal-top-bar-buttons">
+            <span ng-click="delete(property)" data-ng-class="{'disabled' : isDeleteDisable}" class="sprite-new delete-btn" data-tests-id="delete_property"  sdc-smart-tooltip="">Delete</span>
+            <span class="delimiter"></span>
+            <span data-ng-click="getPrev()" data-ng-class="{'disabled' : !currentPropertyIndex ||  forms.editForm.$invalid || isArrowsDisabled}" class="sprite-new left-arrow" data-tests-id="get-prev" sdc-smart-tooltip="">Previous</span>
+            <span data-ng-click="getNext()" data-ng-class="{'disabled' : isLastProperty ||  forms.editForm.$invalid || isArrowsDisabled}" class="sprite-new right-arrow" data-tests-id="get-next" sdc-smart-tooltip="">Next</span>
+        </div>
+    </div>
+
+    <div class="sdc-edit-property-form-container" >
+        <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
+            <form class="w-sdc-form two-columns" name="forms.editForm" >
+
+                <div class="w-sdc-form-columns-wrapper">
+
+                    <div class="w-sdc-form-column">
+
+                        <!-- Name -->
+                        <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.propertyName.$dirty && forms.editForm.propertyName.$invalid)}">
+                            <label class="i-sdc-form-label" ng-class="{'required': !isService}">Name</label>
+                            <input class="i-sdc-form-input"
+                                   data-tests-id="propertyName"
+                                   data-ng-maxlength="50"
+                                   data-ng-disabled="isNameDisable"
+                                   maxlength="50"
+                                   data-ng-model="property.name"
+                                   type="text"
+                                   name="propertyName"
+                                   data-ng-pattern="propertyNameValidationPattern"
+                                   data-required
+                                   data-ng-model-options="{ debounce: 200 }"
+                                   autofocus />
+
+                            <div class="input-error" data-ng-show="forms.editForm.propertyName.$dirty && forms.editForm.propertyName.$invalid">
+                                <span ng-show="forms.editForm.propertyName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Property name' }"></span>
+                                <span ng-show="forms.editForm.propertyName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
+                                <span ng-show="forms.editForm.propertyName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="w-sdc-form-column">
+                        <div class="w-sdc-form-columns-wrapper">
+                            <div class="w-sdc-form-column">
+                                <!-- Type -->
+                                <div class="i-sdc-form-item"  data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}">
+                                    <label class="i-sdc-form-label" ng-class="{'required': !isService}">Type</label>
+                                    <select class="i-sdc-form-select"
+                                            data-tests-id="propertyType"
+                                            data-required
+                                            data-ng-disabled="isTypeSelectorDisable"
+                                            name="type"
+                                            data-ng-change="onTypeChange()"
+                                            data-ng-model="property.type">
+                                        <option value="">Choose Type</option>
+                                        <option data-ng-repeat="type in types"
+                                                value="{{type}}">{{type}}</option>
+                                        <option data-ng-repeat="type in nonPrimitiveTypes"
+                                                value="{{type}}">{{type.replace("org.openecomp.datatypes.heat.","")}}</option>
+                                    </select>
+
+                                    <div class="input-error" data-ng-show="forms.editForm.type.$dirty && forms.editForm.type.$invalid">
+                                        <span ng-show="forms.editForm.type.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Type' }"></span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="w-sdc-form-column" data-ng-if="showSchema()">
+                                <!-- Entry Schema -->
+                                <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.schemaType.$dirty && forms.editForm.schemaType.$invalid)}">
+                                    <label class="i-sdc-form-label required">Entry Schema</label>
+                                    <select class="i-sdc-form-select"
+                                            data-required
+                                            data-tests-id="schema-type"
+                                            data-ng-disabled="isPropertyValueOwner() || property.readonly"
+                                            name="schemaType"
+                                            data-ng-change="onSchemaTypeChange()"
+                                            data-ng-model="property.schema.property.type">
+                                        <option value="">Choose Schema Type</option>
+                                        <option data-ng-repeat="type in simpleTypes"
+                                                value="{{type}}">{{type}}</option>
+                                        <option data-ng-repeat="type in nonPrimitiveTypes"
+                                                value="{{type}}">{{type.replace("org.openecomp.datatypes.heat.","")}}</option>
+                                    </select>
+
+                                    <div class="input-error" data-ng-show="forms.editForm.schemaType.$dirty && forms.editForm.schemaType.$invalid">
+                                        <span ng-show="forms.editForm.schemaType.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Entry schema' }"></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Constraints by type -->
+                        <div class="i-sdc-form-item" data-ng-if="false">
+                            <label class="i-sdc-form-label required">Constraints by type</label>
+                            <div>
+                                Should be constraints by type(TBD)
+                            </div>
+                        </div>
+
+                    </div>
+
+                </div>
+                <!-- Description -->
+                <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.description.$dirty && forms.editForm.description.$invalid)}">
+                    <label class="i-sdc-form-label">Description</label>
+                            <textarea  class="i-sdc-form-textarea"
+                                       data-ng-maxlength="256"
+                                       data-ng-disabled="isDescriptionDisable"
+                                       maxlength="256"
+                                       data-ng-pattern="commentValidationPattern"
+                                       name="description"
+                                       data-ng-model="property.description"
+                                       data-ng-model-options="{ debounce: 200 }"
+                                       data-tests-id="description"
+                            ></textarea>
+
+                    <div class="input-error" data-ng-show="forms.editForm.description.$dirty && forms.editForm.description.$invalid">
+                        <span ng-show="forms.editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+                        <span ng-show="forms.editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        <span ng-show="forms.editForm.description.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Description' }"></span>
+                    </div>
+                </div>
+                <!-- Default value - insert in dynamic template url -->
+                <ng-include src="innerViewSrcUrl"></ng-include>
+                <span  class="w-sdc-form-note"  data-ng-show="forms.editForm.$invalid && false" translate="LABEL_ALL_FIELDS_ARE_MANDATORY"></span>
+            </form>
+        </perfect-scrollbar>
+    </div>
+
+</sdc-modal>
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less
new file mode 100644
index 0000000000..15e30af4ee
--- /dev/null
+++ b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less
@@ -0,0 +1,63 @@
+.sdc-edit-property-container {
+    .scrollbar-container{
+        height: 415px;
+        width: 830px;
+        .perfect-scrollbar;
+    }
+
+    form{
+        width: 813px;
+        [name="description"]{
+            min-height:50px;
+        }
+    }
+
+    .sdc-modal-top-bar{
+        height: 40px;
+        .sdc-modal-top-bar-buttons {
+            float: right;
+
+            > span:not(.delimiter){
+                vertical-align: middle;
+                .hand;
+
+                &.sprite-new {
+                    text-indent: 100%;
+                }
+                &.disabled, &:hover.disabled {
+                    pointer-events: none;
+                }
+            }
+
+            .delete-btn{
+                margin-right: 6px;
+            }
+
+            .left-arrow{
+                margin-right: 8px;
+            }
+
+            .delimiter {
+                height: 20px;
+                width: 1px;
+                background-color: #959595;
+                display: inline-block;
+                vertical-align: middle;
+                margin-right: 10px;
+            }
+        }
+    }
+
+    .w-sdc-form-note {
+        .h_9;
+        display: block;
+        position: relative;
+        top: 13px;
+    }
+
+    .default-value-section{
+        border-top: solid 1px @main_color_a;
+        padding-top: 15px;
+        margin-top: 15px;
+    }
+}