diff options
author | Michael Lando <ml636r@att.com> | 2017-06-09 03:19:04 +0300 |
---|---|---|
committer | Michael Lando <ml636r@att.com> | 2017-06-09 03:19:04 +0300 |
commit | ed64b5edff15e702493df21aa3230b81593e6133 (patch) | |
tree | a4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/src/app/view-models/forms/property-forms/base-property-form | |
parent | 280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff) |
[SDC-29] catalog 1707 rebase commit.
Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/view-models/forms/property-forms/base-property-form')
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; + } +} |