diff options
Diffstat (limited to 'catalog-ui/src/app/view-models/forms/input-form')
-rw-r--r-- | catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts | 126 | ||||
-rw-r--r-- | catalog-ui/src/app/view-models/forms/input-form/input-form-view.html | 125 |
2 files changed, 251 insertions, 0 deletions
diff --git a/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts b/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts new file mode 100644 index 0000000000..e87e5c6c7d --- /dev/null +++ b/catalog-ui/src/app/view-models/forms/input-form/input-form-view-modal.ts @@ -0,0 +1,126 @@ +'use strict'; +import {FormState, PROPERTY_TYPES, ValidationUtils, PROPERTY_VALUE_CONSTRAINTS} from "app/utils"; +import {InputModel} from "app/models"; + +export interface IInputEditModel { + editInput:InputModel; +} + +export interface IInputFormViewModelScope extends ng.IScope { + forms:any; + editForm:ng.IFormController; + footerButtons:Array<any>; + isService:boolean; + modalInstanceInput:ng.ui.bootstrap.IModalServiceInstance; + isLoading:boolean; + inputEditModel:IInputEditModel; + myValue:any; + maxLength:number; + + save():void; + close():void; + validateIntRange(value:string):boolean; + validateJson(json:string):boolean; + getValidationPattern(type:string):RegExp; + showSchema():boolean; +} + +export class InputFormViewModel { + + static '$inject' = [ + '$scope', + '$uibModalInstance', + 'ValidationUtils', + 'input' + ]; + + private formState:FormState; + + + constructor(private $scope:IInputFormViewModelScope, + private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, + private ValidationUtils:ValidationUtils, + private input:InputModel) { + this.initScope(); + this.initMyValue(); + } + + private initMyValue = ():void => { + switch (this.$scope.inputEditModel.editInput.type) { + case PROPERTY_TYPES.MAP: + this.$scope.myValue = this.$scope.inputEditModel.editInput.defaultValue ? JSON.parse(this.$scope.inputEditModel.editInput.defaultValue) : {'': null}; + break; + case PROPERTY_TYPES.LIST: + this.$scope.myValue = this.$scope.inputEditModel.editInput.defaultValue ? JSON.parse(this.$scope.inputEditModel.editInput.defaultValue) : []; + break; + } + }; + + private initDefaultValueMaxLength = ():void => { + switch (this.$scope.inputEditModel.editInput.type) { + case PROPERTY_TYPES.MAP: + case PROPERTY_TYPES.LIST: + this.$scope.maxLength = this.$scope.inputEditModel.editInput.schema.property.type == PROPERTY_TYPES.JSON ? + PROPERTY_VALUE_CONSTRAINTS.JSON_MAX_LENGTH : + PROPERTY_VALUE_CONSTRAINTS.MAX_LENGTH; + break; + case PROPERTY_TYPES.JSON: + this.$scope.maxLength = PROPERTY_VALUE_CONSTRAINTS.JSON_MAX_LENGTH; + break; + default: + this.$scope.maxLength = PROPERTY_VALUE_CONSTRAINTS.MAX_LENGTH; + } + }; + + private initScope = ():void => { + this.$scope.forms = {}; + this.$scope.modalInstanceInput = this.$uibModalInstance; + this.$scope.inputEditModel = { + editInput: null + }; + this.$scope.inputEditModel.editInput = this.input; + this.initDefaultValueMaxLength(); + + //scope methods + this.$scope.save = ():void => { + if (this.$scope.showSchema()) { + this.$scope.inputEditModel.editInput.defaultValue = JSON.stringify(this.$scope.myValue); + } + }; + + this.$scope.close = ():void => { + this.$uibModalInstance.close(); + }; + + this.$scope.validateIntRange = (value:string):boolean => { + return !value || this.ValidationUtils.validateIntRange(value); + }; + + this.$scope.validateJson = (json:string):boolean => { + if (!json) { + return true; + } + return this.ValidationUtils.validateJson(json); + }; + + this.$scope.showSchema = ():boolean => { + return ['list', 'map'].indexOf(this.$scope.inputEditModel.editInput.type) > -1; + }; + + this.$scope.getValidationPattern = (type:string):RegExp => { + return this.ValidationUtils.getValidationPattern(type); + }; + + // 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; + }); + + }; +} + diff --git a/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html b/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html new file mode 100644 index 0000000000..1bf6dc4ca9 --- /dev/null +++ b/catalog-ui/src/app/view-models/forms/input-form/input-form-view.html @@ -0,0 +1,125 @@ +<sdc-modal modal="modalInstanceInput" type="classic" class="sdc-edit-input-container" buttons="footerButtons" header="Update Input" show-close-button="true"> + + <div class="sdc-edit-input-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"> + <label class="i-sdc-form-label">Name</label> + <input class="i-sdc-form-input" + data-tests-id="inputName" + data-ng-maxlength="50" + data-ng-disabled="true" + maxlength="50" + data-ng-model="inputEditModel.editInput.name" + type="text" + name="inputName" + autofocus /> + </div> + + <!-- Description --> + <div class="i-sdc-form-item"> + <label class="i-sdc-form-label">Description</label> + <textarea class="i-sdc-form-textarea" + data-ng-disabled="true" + name="description" + data-ng-model="inputEditModel.editInput.description" + data-tests-id="description"></textarea> + </div> + + + </div> + + <div class="w-sdc-form-column"> + <!-- Type --> + <div class="i-sdc-form-item"> + <label class="i-sdc-form-label">Type</label> + <input class="i-sdc-form-input" + data-tests-id="type" + data-ng-disabled="true" + data-ng-model="inputEditModel.editInput.type" + type="text" + name="type"/> + </div> + <!-- schema --> + <div class="i-sdc-form-item" + data-ng-if="showSchema()"> + <label class="i-sdc-form-label">Entry Schema</label> + <input class="i-sdc-form-input" + data-tests-id="schema" + data-ng-disabled="true" + data-ng-model="inputEditModel.editInput.schema.property.type" + type="text" + name="schema"/> + </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> + <div data-ng-switch="inputEditModel.editInput.type"> + <div ng-switch-when="map"> + <type-map value-obj-ref="myValue" + schema-property="inputEditModel.editInput.schema.property" + parent-form-obj="forms.editForm" + fields-prefix-name="'input-value-'" + read-only="true" + default-value="" + types="[]" + max-length="maxLength"></type-map> + </div> + <div ng-switch-when="list"> + <type-list value-obj-ref="myValue" + schema-property="inputEditModel.editInput.schema.property" + parent-form-obj="forms.editForm" + fields-prefix-name="'input-value-'" + read-only="true" + default-value="" + types="[]" + max-length="maxLength"></type-list> + </div> + <div ng-switch-default> + <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}"> + <input class="i-sdc-form-input" + data-tests-id="defaultvalue" + ng-if="inputEditModel.editInput.type != 'boolean'" + data-ng-maxlength="maxLength" + data-ng-disabled="true" + maxlength="{{maxLength}}" + data-ng-model="inputEditModel.editInput.defaultValue" + type="text" + name="value" + data-ng-pattern="getValidationPattern(input.type)" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="('json'==inputEditModel.editInput.type && forms.editForm.value.$setValidity('pattern', validateJson(inputEditModel.editInput.defaultValue))) + ||(!forms.editForm.value.$error.pattern && ('integer'==inputEditModel.editInput.type && forms.editForm.value.$setValidity('pattern', validateIntRange(inputEditModel.editInput.defaultValue)) || onValueChange()))" + autofocus /> + <select class="i-sdc-form-select" + data-tests-id="booleantype" + ng-if="inputEditModel.editInput.type == 'boolean'" + data-ng-disabled="true" + name="value" + data-ng-model="inputEditModel.editInput.defaultValue"> + <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.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span> + <span ng-show="forms.editForm.value.$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> + </div> + </div> + </div> + </div> + </div> + + </div> + + </div> + + </form> + </div> + +</sdc-modal> |