diff options
Diffstat (limited to 'catalog-ui/app/scripts/view-models/forms/resource-instance-name-form')
3 files changed, 206 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/forms/resource-instance-name-form/resource-instance-name-model.ts b/catalog-ui/app/scripts/view-models/forms/resource-instance-name-form/resource-instance-name-model.ts new file mode 100644 index 0000000000..b69bf4a2a6 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/forms/resource-instance-name-form/resource-instance-name-model.ts @@ -0,0 +1,105 @@ +/*- + * ============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'; + + interface IResourceInstanceViewModelScope extends ng.IScope { + + componentInstanceModel: Sdc.Models.ComponentsInstances.ComponentInstance; + validationPattern: RegExp; + oldName:string; + isAlreadyPressed:boolean; + footerButtons: Array<any>; + forms:any; + modalInstanceName:ng.ui.bootstrap.IModalServiceInstance; + + save(): void; + close(): void; + } + + export class ResourceInstanceNameViewModel { + + static '$inject' = [ + '$scope', + 'ValidationPattern', + '$modalInstance', + 'ComponentInstanceFactory', + 'component' + ]; + + + constructor(private $scope:IResourceInstanceViewModelScope, + private ValidationPattern:RegExp, + private $modalInstance:ng.ui.bootstrap.IModalServiceInstance, + private ComponentInstanceFactory:Utils.ComponentInstanceFactory, + private component:Models.Components.Component) { + + this.initScope(); + } + + + private initScope = ():void => { + this.$scope.forms = {}; + this.$scope.validationPattern = this.ValidationPattern; + this.$scope.componentInstanceModel = Utils.ComponentInstanceFactory.createComponentInstance(this.component.selectedInstance); + this.$scope.oldName = this.component.selectedInstance.name; + this.$scope.modalInstanceName = this.$modalInstance; + + this.$scope.isAlreadyPressed = false; + + + this.$scope.close = ():void => { + this.$modalInstance.dismiss(); + }; + + this.$scope.save = ():void => { + + let onFailed = () => { + this.$scope.isAlreadyPressed = true; + }; + + let onSuccess = (componentInstance:Models.ComponentsInstances.ComponentInstance) => { + this.$modalInstance.close(); + this.$scope.isAlreadyPressed = false; + this.$scope.componentInstanceModel = componentInstance; + //this.component.name = componentInstance.name;//DE219124 + this.component.selectedInstance.name = componentInstance.name; + + }; + + this.$scope.isAlreadyPressed = true; + if (this.$scope.oldName != this.$scope.componentInstanceModel.name) { + this.component.updateComponentInstance(this.$scope.componentInstanceModel).then(onSuccess, onFailed); + } + }; + + this.$scope.footerButtons = [ + {'name': 'OK', 'css': 'blue', 'callback': this.$scope.save, 'disabled': (!this.$scope.componentInstanceModel.name || this.$scope.componentInstanceModel.name === this.$scope.oldName) || this.$scope.isAlreadyPressed}, + {'name': 'Cancel', 'css': 'grey', 'callback': this.$scope.close} + ]; + + this.$scope.$watch("forms.editNameForm.$invalid", (newVal, oldVal) => { + this.$scope.footerButtons[0].disabled = this.$scope.forms.editNameForm.$invalid; + }); + } + } +} diff --git a/catalog-ui/app/scripts/view-models/forms/resource-instance-name-form/resource-instance-name-view.html b/catalog-ui/app/scripts/view-models/forms/resource-instance-name-form/resource-instance-name-view.html new file mode 100644 index 0000000000..e04343adbd --- /dev/null +++ b/catalog-ui/app/scripts/view-models/forms/resource-instance-name-form/resource-instance-name-view.html @@ -0,0 +1,72 @@ +<sdc-modal modal="modalInstanceName" type="classic" class="w-sdc-modal-resource-instance-name modal-type-confirmation" buttons="footerButtons" header="Instance Name" show-close-button="true"> + + <form novalidate class="w-sdc-form" name="forms.editNameForm"> + <div class="i-sdc-form-item" data-ng-class="{error:(editNameForm.componentInstanceName.$dirty && editNameForm.resourceInstanceName.$invalid)}"> + <label class="i-sdc-form-label required">Instance Name</label> + <input class="w-sdc-modal-resource-instance-input i-sdc-form-input" + name="componentInstanceName" + data-ng-maxlength="50" + data-ng-model="componentInstanceModel.name" + type="text" + data-required + data-ng-pattern="validationPattern" + maxlength="50" + autofocus + placeholder="Enter instance name..." + data-tests-id="instanceName" + /> + + <div class="input-error" data-ng-show="forms.editNameForm.componentInstanceName.$dirty && forms.editNameForm.componentInstanceName.$invalid"> + <span ng-show="forms.editNameForm.componentInstanceName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Resource name' }"></span> + <span ng-show="forms.editNameForm.componentInstanceName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> + <span ng-show="forms.editNameForm.componentInstanceName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + + </div> + </form> + +</sdc-modal> + + + +<!-- + +<div class="w-sdc-modal w-sdc-modal-resource-instance-name"> + <header> + <div class="w-sdc-modal-head"> + Instance Name + </div> + </header> + <div> + <form novalidate class="w-sdc-modal-body w-sdc-form" name="editNameForm"> + <div class="i-sdc-form-item" data-ng-class="{error:(editNameForm.componentInstanceName.$dirty && editNameForm.resourceInstanceName.$invalid)}"> + <label class="i-sdc-form-label required">Instance Name</label> + <input class="w-sdc-modal-resource-instance-input i-sdc-form-input" + name="componentInstanceName" + data-ng-maxlength="50" + data-ng-model="componentInstanceModel.name" + type="text" + data-required + data-ng-pattern="validationPattern" + maxlength="50" + autofocus + placeholder="Enter instance name..." + data-tests-id="instanceName" + /> + + <div class="input-error" data-ng-show="editNameForm.componentInstanceName.$dirty && editNameForm.componentInstanceName.$invalid"> + <span ng-show="editNameForm.componentInstanceName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Resource name' }"></span> + <span ng-show="editNameForm.componentInstanceName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> + <span ng-show="editNameForm.componentInstanceName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + + </div> + </form> + + <div class="w-sdc-modal-action"> + <button class="w-sdc-btn-blue" data-ng-click="save()" type="button" data-ng-disabled="(!componentInstanceModel.name || componentInstanceModel.name === oldName) || isAlreadyPressed">Ok</button> + <button class="w-sdc-btn-dark-gray" data-ng-click="close()" type="button">Cancel</button> + </div> + </div> +</div> +--> diff --git a/catalog-ui/app/scripts/view-models/forms/resource-instance-name-form/resource-instance-name.less b/catalog-ui/app/scripts/view-models/forms/resource-instance-name-form/resource-instance-name.less new file mode 100644 index 0000000000..57698bef17 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/forms/resource-instance-name-form/resource-instance-name.less @@ -0,0 +1,29 @@ +.w-sdc-modal-resource-instance-name { + + .w-sdc-modal-body { + overflow: visible; + } + + .w-sdc-modal-action { + display: flex; + align-items: center; + justify-content: center; + } + + .w-sdc-modal-resource-instance-input { + .p_1; + border: solid 1px @color_p; + height: 45px; + padding: 0 20px; + margin: 0 auto 0 auto; + display: block; + } + .w-sdc-modal-body { + border-bottom: none; + } + + .w-sdc-form .i-sdc-form-item.error::after { + top: 13px; + } + +} |