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/attribute-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/attribute-form')
-rw-r--r-- | catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html | 152 | ||||
-rw-r--r-- | catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts | 241 |
2 files changed, 393 insertions, 0 deletions
diff --git a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html b/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html new file mode 100644 index 0000000000..90b8f67df4 --- /dev/null +++ b/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html @@ -0,0 +1,152 @@ +<sdc-modal modal="modalInstanceAttribute" type="classic" class="sdc-edit-attribute-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Attribute" show-close-button="true"> + + <div class="sdc-edit-attribute-form-container" > + <form novalidate 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.attributeName.$dirty && forms.editForm.attributeName.$invalid)}"> + <label class="i-sdc-form-label required">Name</label> + <input class="i-sdc-form-input" + data-tests-id="attributeName" + data-ng-maxlength="50" + data-ng-disabled="!isNew" + maxlength="50" + data-ng-model="editAttributeModel.attribute.name" + type="text" + name="attributeName" + data-ng-pattern="propertyNameValidationPattern" + data-required + data-ng-model-options="{ debounce: 200 }" + data-ng-change="validateName()" + autofocus /> + <div class="input-error" data-ng-show="forms.editForm.attributeName.$dirty && forms.editForm.attributeName.$invalid"> + <span ng-show="forms.editForm.attributeName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Attribute name' }"></span> + <span ng-show="forms.editForm.attributeName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '128' }"></span> + <span ng-show="forms.editForm.attributeName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + <span ng-show="forms.editForm.attributeName.$error.nameExist" translate="NEW_ATTRIBUTE_ERROR_NAME_EXISTS"></span> + </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="editAttributeModel.attribute.readonly" + maxlength="256" + data-ng-pattern="commentValidationPattern" + name="description" + data-ng-model="editAttributeModel.attribute.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> + + + </div> + + <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 required">Type</label> + <select class="i-sdc-form-select" + data-tests-id="type-field" + data-required + data-ng-disabled="editAttributeModel.attribute.readonly" + name="type" + data-ng-change="onTypeChange()" + data-ng-model="editAttributeModel.attribute.type" + data-ng-options="type for type in editAttributeModel.types"> + <option value="">Choose Type</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> + + <!-- schema --> + <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.schema.$dirty && forms.editForm.schema.$invalid)}" + data-ng-if="showSchema()"> + <label class="i-sdc-form-label required">Entry Schema</label> + <select class="i-sdc-form-select" ng-if="isSchemaEditable()" + data-required + name="schema" + data-ng-disabled="editAttributeModel.attribute.readonly" + data-ng-change="onTypeChange(false)" + data-ng-model="editAttributeModel.attribute.schema.property.type" + data-ng-options="type for type in editAttributeModel.simpleTypes"> + <option value="">Choose Schema Type</option> + </select> + <input class="i-sdc-form-input" + ng-if="!isSchemaEditable()" + data-tests-id="schema" + data-ng-disabled="true" + data-ng-model="editAttributeModel.attribute.schema.property.type" + type="text" + name="schema"/> + <div class="input-error" data-ng-show="forms.editForm.schema.$dirty && forms.editForm.schema.$invalid"> + <span ng-show="forms.editForm.schema.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Entry schema' }"></span> + </div> + </div> + + <!-- Default value --> + <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}"> + <label class="i-sdc-form-label">Default Value</label> + <input class="i-sdc-form-input" + data-tests-id="defaultvalue" + ng-if="!(editAttributeModel.attribute.type == 'boolean')" + data-ng-maxlength="100" + data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()" + maxlength="100" + data-ng-model="attributeValue.value" + type="text" + name="value" + data-custom-validation="" data-validation-func="validateUniqueKeys" + data-ng-pattern="validationPattern" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="!forms.editForm.value.$error.pattern && ('integer'==editAttributeModel.attribute.type && forms.editForm.value.$setValidity('pattern', validateIntRange(editAttributeModel.attribute.value)) || onValueChange())" + autofocus /> + <select class="i-sdc-form-select" + data-tests-id="booleantype" + ng-if="editAttributeModel.attribute.type == 'boolean'" + data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()" + name="value" + data-ng-change="onValueChange()" + data-ng-model="attributeValue.value"> + <option value="true">true</option> + <option value="false">false</option> + </select> + <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid"> + <span ng-show="forms.editForm.value.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Default value' }"></span> + <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> + <span ng-show="forms.editForm.value.$error.pattern" translate="{{getValidationTranslate()}}"></span> + <span ng-show="forms.editForm.value.$error.customValidation" translate="ATTRIBUTE_EDIT_MAP_UNIQUE_KEYS"></span> + </div> + </div> + + <!-- hidden --> + <div class="i-sdc-form-item" data-ng-if="isAttributeValueOwner()"> + <label class="i-sdc-form-label">Hidden</label> + <input class="i-sdc-form-input" + data-tests-id="hidden" + data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()" + data-ng-model="editAttributeModel.attribute.hidden" + type="checkbox" + name="hidden"/> + </div> + </div> + + </div> + + </form> + </div> + +</sdc-modal> diff --git a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts b/catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts new file mode 100644 index 0000000000..122cf10ed2 --- /dev/null +++ b/catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts @@ -0,0 +1,241 @@ +'use strict'; +import {AttributeModel, Component} from "app/models"; +import {IMapRegex, ValidationUtils, FormState, PROPERTY_TYPES} from "app/utils"; + +export interface IEditAttributeModel { + attribute:AttributeModel; + types:Array<string>; + simpleTypes:Array<string>; +} + +export class attributeValue {//in order to solve DE226783, we update the value on another obj + value:string; +} + +interface IAttributeFormViewModelScope extends ng.IScope { + $$childTail:any; + forms:any; + editForm:ng.IFormController; + footerButtons:Array<any>; + isService:boolean; + editAttributeModel:IEditAttributeModel; + modalInstanceAttribute:ng.ui.bootstrap.IModalServiceInstance; + isNew:boolean; + listRegex:IMapRegex; + mapRegex:IMapRegex; + propertyNameValidationPattern:RegExp; + commentValidationPattern:RegExp; + isLoading:boolean; + validationPattern:RegExp; + attributeValue:attributeValue; + + save():void; + close():void; + onTypeChange():void; + onValueChange():void; + isAttributeValueOwner():boolean; + validateIntRange(value:string):boolean; + validateUniqueKeys(viewValue:string):boolean; + getValidationTranslate():string; + showSchema():boolean; + isSchemaEditable():boolean; + validateName():void; +} + +export class AttributeFormViewModel { + + static '$inject' = [ + '$scope', + '$uibModalInstance', + 'attribute', + 'ValidationUtils', + 'CommentValidationPattern', + 'PropertyNameValidationPattern', + 'component' + ]; + + private formState:FormState; + + + constructor(private $scope:IAttributeFormViewModelScope, + private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, + private attribute:AttributeModel, + private ValidationUtils:ValidationUtils, + private CommentValidationPattern:RegExp, + private PropertyNameValidationPattern:RegExp, + private component:Component) { + this.formState = angular.isDefined(attribute.name) ? FormState.UPDATE : FormState.CREATE; + this.initScope(); + } + + private initResource = ():void => { + this.$scope.editAttributeModel.attribute = new AttributeModel(this.attribute); + if (this.$scope.editAttributeModel.types.indexOf(this.attribute.type) === -1) {//attribute defaulte type is string too? + this.attribute.type = "string"; + } + }; + + private initEditAttributeModel = ():void => { + this.$scope.editAttributeModel = { + attribute: null, + types: ['integer', 'string', 'float', 'boolean', 'list', 'map'], + simpleTypes: ['integer', 'string', 'float', 'boolean'] + }; + + this.initResource(); + }; + + private initScope = ():void => { + + //scope attributes + this.$scope.forms = {}; + this.$scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; + this.$scope.commentValidationPattern = this.CommentValidationPattern; + + this.$scope.modalInstanceAttribute = this.$uibModalInstance; + this.$scope.listRegex = this.ValidationUtils.getPropertyListPatterns(); + this.$scope.mapRegex = this.ValidationUtils.getPropertyMapPatterns(); + + this.$scope.isNew = (this.formState === FormState.CREATE); + this.$scope.isLoading = false; + this.$scope.attributeValue = new attributeValue(); + + this.initEditAttributeModel(); + this.setValidationPattern(); + + //scope methods + this.$scope.save = ():void => { + if (!this.$scope.forms.editForm.$invalid) { + let attribute:AttributeModel = this.$scope.editAttributeModel.attribute; + this.$scope.editAttributeModel.attribute.description = this.ValidationUtils.stripAndSanitize(this.$scope.editAttributeModel.attribute.description); + ////if read only - just closes the modal + if (this.$scope.editAttributeModel.attribute.readonly && !this.$scope.isAttributeValueOwner()) { + this.$uibModalInstance.close(); + return; + } + this.$scope.isLoading = true; + let onAttributeFaild = (response):void => { + console.info('onFaild', response); + this.$scope.isLoading = false; + }; + + let onAttributeSuccess = (attributeFromBE:AttributeModel):void => { + console.info('onAttributeResourceSuccess : ', attributeFromBE); + this.$scope.isLoading = false; + this.$uibModalInstance.close(); + }; + + //in case we have uniqueId we call update method + if (this.$scope.isAttributeValueOwner()) { + attribute.value = this.$scope.attributeValue.value; + this.component.updateInstanceAttribute(attribute).then(onAttributeSuccess, onAttributeFaild); + } else { + attribute.defaultValue = this.$scope.attributeValue.value; + this.component.addOrUpdateAttribute(attribute).then(onAttributeSuccess, onAttributeFaild); + } + } + }; + + this.$scope.close = ():void => { + this.$uibModalInstance.close(); + }; + + this.$scope.validateName = ():void => { + let existsAttr:AttributeModel = _.find(this.component.attributes, (attribute:AttributeModel) => { + return attribute.name === this.$scope.editAttributeModel.attribute.name; + }); + if (existsAttr) { + this.$scope.forms.editForm["attributeName"].$setValidity('nameExist', false); + } else { + this.$scope.forms.editForm["attributeName"].$setValidity('nameExist', true); + } + + }; + + this.$scope.onTypeChange = ():void => { + this.$scope.editAttributeModel.attribute.value = ''; + this.$scope.editAttributeModel.attribute.defaultValue = ''; + this.setValidationPattern(); + }; + + this.$scope.isAttributeValueOwner = ():boolean=> { + return this.component.isService() || !!this.component.selectedInstance; + }; + + this.$scope.onValueChange = ():void => { + if (!this.$scope.editAttributeModel.attribute.value) { + if (this.$scope.isAttributeValueOwner()) { + this.$scope.editAttributeModel.attribute.value = this.$scope.editAttributeModel.attribute.defaultValue; + } + } + }; + + + this.$scope.validateUniqueKeys = (viewValue:string):boolean => { + if (this.$scope.editAttributeModel.attribute.type === 'map') { + return this.ValidationUtils.validateUniqueKeys(viewValue); + } + else { + return true; //always valid if not a map + } + }; + + this.$scope.validateIntRange = (value:string):boolean => { + return !value || this.ValidationUtils.validateIntRange(value); + }; + + this.$scope.isSchemaEditable = ():boolean => { + let schemaType = this.$scope.editAttributeModel.attribute.schema.property.type; + return this.$scope.editAttributeModel.simpleTypes.indexOf(schemaType) > -1 || !schemaType; + }; + + this.$scope.showSchema = ():boolean => { + return ['list', 'map'].indexOf(this.$scope.editAttributeModel.attribute.type) > -1; + }; + + this.$scope.getValidationTranslate = ():string => { + let result = "ATTRIBUTE_EDIT_PATTERN"; + if (this.$scope.showSchema()) { + + result = "ATTRIBUTE_EDIT_" + this.$scope.editAttributeModel.attribute.type.toUpperCase(); + + if (this.$scope.editAttributeModel.attribute.schema.property.type === PROPERTY_TYPES.STRING) { + result += "_STRING"; + } else if (this.$scope.editAttributeModel.attribute.schema.property.type === PROPERTY_TYPES.BOOLEAN) { + result += "_BOOLEAN"; + } else { + result += "_GENERIC"; + } + } + + return result; + }; + + // Add the done button at the footer. + this.$scope.footerButtons = [ + {'name': 'Done', 'css': 'blue', 'callback': this.$scope.save}, + {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close} + ]; + + this.$scope.$watchCollection("forms.editForm.$invalid", (newVal, oldVal) => { + this.$scope.footerButtons[0].disabled = this.$scope.forms.editForm.$invalid; + }); + + this.$scope.attributeValue.value = this.$scope.isAttributeValueOwner() ? this.$scope.editAttributeModel.attribute.value : this.$scope.editAttributeModel.attribute.defaultValue; + }; + + + private setValidationPattern = ():void => { + + if (this.$scope.editAttributeModel.attribute.type === 'list') { + this.$scope.validationPattern = this.$scope.listRegex[this.$scope.editAttributeModel.attribute.schema.property.type]; + } + else if (this.$scope.editAttributeModel.attribute.type === 'map') { + this.$scope.validationPattern = this.$scope.mapRegex[this.$scope.editAttributeModel.attribute.schema.property.type]; + } + else { + this.$scope.validationPattern = this.ValidationUtils.getValidationPattern(this.$scope.editAttributeModel.attribute.type); + } + + }; +} |