diff options
author | ys9693 <ys9693@att.com> | 2020-01-19 13:50:02 +0200 |
---|---|---|
committer | Ofir Sonsino <ofir.sonsino@intl.att.com> | 2020-01-22 12:33:31 +0000 |
commit | 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch) | |
tree | 03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/view-models/forms/attribute-form | |
parent | aa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff) |
Catalog alignment
Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
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 | 168 | ||||
-rw-r--r-- | catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts | 262 |
2 files changed, 0 insertions, 430 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 deleted file mode 100644 index 902d564935..0000000000 --- a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-form-view.html +++ /dev/null @@ -1,168 +0,0 @@ -<!-- - ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. - ~ - ~ Licensed under the Apache License, Version 2.0 (the "License"); - ~ you may not use this file except in compliance with the License. - ~ You may obtain a copy of the License at - ~ - ~ http://www.apache.org/licenses/LICENSE-2.0 - ~ - ~ Unless required by applicable law or agreed to in writing, software - ~ distributed under the License is distributed on an "AS IS" BASIS, - ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - ~ See the License for the specific language governing permissions and - ~ limitations under the License. ---> - -<ng1-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="2500" - data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()" - maxlength="2500" - 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> - -</ng1-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 deleted file mode 100644 index 0e4a851aa6..0000000000 --- a/catalog-ui/src/app/view-models/forms/attribute-form/attribute-from-view-model.ts +++ /dev/null @@ -1,262 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -'use strict'; -import * as _ from "lodash"; -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); - } - - }; -} |