diff options
Diffstat (limited to 'catalog-ui/app/scripts/view-models/forms/env-parameters-form')
3 files changed, 262 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.html b/catalog-ui/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.html new file mode 100644 index 0000000000..69367dc68c --- /dev/null +++ b/catalog-ui/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.html @@ -0,0 +1,39 @@ +<sdc-modal modal="envParametersModal" type="classic" class="sdc-env-form-container" buttons="saveButton" header="{{isInstance()?'HEAT Template':'Update Parameters'}}" show-close-button="true"> + <div class="sdc-env-form-container"> + <div class="w-sdc-modal-body"> + <span class="w-sdc-modal-body-content" data-ng-if="!isInstance()" translate="UPDATE_PARAMETERS_TEXT"></span> + <form novalidate class="" name="editForm"> + <perfect-scrollbar class="perfect-scrollbar w-sdc-form w-sdc-env-form-container"> + <div class="i-sdc-form-item" data-ng-repeat="parameter in heatParameters track by $index"> + <div class="left-column-container"> + <ng-form name="editForm"> + <label class="i-sdc-env-form-label" data-ng-class="{required:parameter.defaultValue}" + data-ng-bind="parameter.name +' (' + parameter.type + ')'" tooltips tooltip-content="{{parameter.name +' (' + parameter.type + ')'}}"></label> + <input class="i-sdc-form-input" data-ng-class="{error:(editForm.currentValue.$invalid)}" + data-ng-model-options="{ debounce: 200 }" + data-ng-model="parameter.currentValue" + type="text" + name="currentValue" + data-ng-pattern="getValidationPattern(parameter.type, 'heat')" + data-ng-required="parameter.defaultValue" + data-ng-change="'json'==parameter.type && editForm.currentValue.$setValidity('pattern', validateJson(parameter.currentValue))" + data-ng-blur="(editForm.currentValue.$error.required && (parameter.currentValue=parameter.defaultValue))" + /> + + <div class="input-error" data-ng-show="editForm.currentValue.$invalid"> + <span ng-show="editForm.currentValue.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value'}"></span> + <span ng-show="editForm.currentValue.$error.pattern && parameter.type==='string'" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + <span ng-show="editForm.currentValue.$error.pattern && !(parameter.type==='string')" translate="VALIDATION_ERROR_TYPE" translate-values="{'type': '{{parameter.type}}'}"></span> + </div> + </ng-form> + </div> + <div class="i-sdc-env-form-label-description"> + <label class="i-sdc-env-form-label" data-ng-bind="parameter.description" tooltips tooltip-content="{{parameter.description}}"></label> + </div> + </div> + </perfect-scrollbar> + <div class="env-file-generation-label" data-ng-if="isInstance()" translate="ENV_FILE_GENERATION"></div> + </form> + </div> + </div> +</sdc-modal> diff --git a/catalog-ui/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.less b/catalog-ui/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.less new file mode 100644 index 0000000000..c58c94ab22 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.less @@ -0,0 +1,74 @@ + +.sdc-env-form-container{ + .w-sdc-modal-body{ + padding: 20px 10px 2px 10px; + } + .w-sdc-modal-body-content{ + .b_6; + display: block; + } + + .env-file-generation-label{ + .p_9; + .bold; + margin-bottom: 20px; + } +} + +.w-sdc-env-form-container { + border-top: 1px solid #cdcdcd; + border-bottom: 1px solid #cdcdcd; + height: 356px; + margin: 35px 0 10px 0; + + .w-sdc-form { + text-align: left; + } + .i-sdc-form-item{ + display: inline-block; + .description{ + margin-bottom: 2px; + vertical-align: baseline; + padding: 32px 0 0 0; + text-transform: capitalize; + .b_1; + } + } + .left-column-container{ + width: 250px; + float: left; + .i-sdc-env-form-label { + overflow: hidden; + max-width: 100%; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + + &.required::before { + color: #f33; + content: '*'; + margin-right: 4px; + } + } + } + .i-sdc-env-form-label-description { + float: right; + + .i-sdc-env-form-label { + .p_9; + // height: 20px; + margin: 30px 0px 0px 30px; + overflow: hidden; + max-width: 245px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + + &.required::before { + color: #f33; + content: '*'; + margin-right: 4px; + } + } + } +} diff --git a/catalog-ui/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.ts b/catalog-ui/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.ts new file mode 100644 index 0000000000..d1bae440cc --- /dev/null +++ b/catalog-ui/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.ts @@ -0,0 +1,149 @@ +/*- + * ============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========================================================= + */ +/// <reference path="../../../references"/> + +module Sdc.ViewModels { + 'use strict'; + + export interface IEnvParametersFormViewModelScope extends ng.IScope { + isLoading: boolean; + type:string; + heatParameters:any; + editForm:ng.IFormController; + artifactResource:Models.ArtifactModel; + saveButton: Array<any>; + envParametersModal: ng.ui.bootstrap.IModalServiceInstance; + + getValidationPattern(type:string):RegExp; + isInstance():boolean; + validateJson(json:string):boolean; + close(): void; + save():void; + } + + export class EnvParametersFormViewModel { + + + static '$inject' = [ + '$scope', + '$state', + '$modalInstance', + 'artifact', + // 'ArtifactsUtils', + 'ValidationUtils', + 'component' + ]; + + + constructor(private $scope:IEnvParametersFormViewModelScope, + private $state:any, + private $modalInstance:ng.ui.bootstrap.IModalServiceInstance, + private artifact:Models.ArtifactModel, + // private artifactsUtils:Sdc.Utils.ArtifactsUtils, + private ValidationUtils: Sdc.Utils.ValidationUtils, + private component:Models.Components.Component) { + + + this.initScope(); + } + + private updateInstanceHeat = ():void => { + let success =(responseArtifact:Models.ArtifactModel): void => { + this.$scope.isLoading = false; + this.$modalInstance.close(); + }; + + let error = ():void => { + this.$scope.isLoading = false; + console.info('Failed to load save artifact'); + }; + + this.component.addOrUpdateInstanceArtifact(this.$scope.artifactResource).then(success, error); + + }; + + private initScope = ():void => { + this.$scope.envParametersModal = this.$modalInstance; + this.$scope.artifactResource= this.artifact; + this.$scope.heatParameters = angular.copy(this.artifact.heatParameters); + + this.$scope.getValidationPattern = (validationType:string , parameterType?:string):RegExp => { + return this.ValidationUtils.getValidationPattern(validationType, parameterType); + }; + + this.$scope.validateJson = (json:string):boolean => { + if(!json){ + return true; + } + return this.ValidationUtils.validateJson(json); + }; + + this.$scope.isInstance =(): boolean =>{ + return !!this.component.selectedInstance; + }; + + + this.$scope.save = ():void => { + this.$scope.isLoading = true; + this.artifact.heatParameters = this.$scope.heatParameters; + this.artifact.heatParameters.forEach((parameter:any):void => { + /* if ("" === parameter.currentValue) { + parameter.currentValue = null; + }else */ + if(!parameter.currentValue && parameter.defaultValue) { + parameter.currentValue = parameter.defaultValue; + } + }); + + if(this.$scope.isInstance()){ + this.updateInstanceHeat(); + return; + } + + let success =(responseArtifact:Models.ArtifactModel): void => { + this.$scope.isLoading = false; + this.$modalInstance.close(); + + }; + + let error = ():void => { + this.$scope.isLoading = false; + console.info('Failed to load save artifact'); + }; + + this.component.addOrUpdateArtifact(this.$scope.artifactResource).then(success, error); + }; + + this.$scope.saveButton = [ + {'name': 'Save', 'css': 'blue', 'callback': this.$scope.save} + ]; + + this.$scope.close = ():void => { + //this.artifact.heatParameters.forEach((parameter:any):void => { + // if (!parameter.currentValue && parameter.defaultValue) { + // parameter.currentValue = parameter.defaultValue; + // } + //}); + this.$modalInstance.dismiss(); + }; + + }; + } +} |