diff options
Diffstat (limited to 'catalog-ui/src/app/directives/edit-name-popover')
4 files changed, 183 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-module-name-popover.html b/catalog-ui/src/app/directives/edit-name-popover/edit-module-name-popover.html new file mode 100644 index 0000000000..d90c52d9a6 --- /dev/null +++ b/catalog-ui/src/app/directives/edit-name-popover/edit-module-name-popover.html @@ -0,0 +1,31 @@ +<div> + <form name="popoverForm" class="w-sdc-form" data-tests-id="popover-form"> + <span class="tlv-sprite tlv-x-btn close-popover-btn" data-tests-id="popover-x-button" ng-click="closePopover()"></span> + <div class="form-group"> + <span class="popover-label" data-tests-id="popover-vfinstance-name" tooltips tooltip-content="{{module.vfInstanceName}}">{{module.vfInstanceName}}</span> + <div class="popover-input"> + <div class="i-sdc-form-item" data-ng-class="{'error': validateField(popoverForm.heatName)}"> + <input type="text" + data-ng-model="module.heatName" + data-ng-maxlength="50" + maxlength="50" + name="heatName" + placeholder="Enter Name" + autocomplete="off" + data-ng-init="onInit()" + data-ng-pattern="heatNameValidationPattern" + data-tests-id="popover-heat-name" + class="form-control" + /> + </div> + <div class="input-error" data-ng-show="validateField(popoverForm.heatName)"> + <span ng-show="popoverForm.heatName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span> + <span ng-show="popoverForm.heatName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span> + </div> + </div> + <span class="popover-label" data-tests-id="popover-module-name" tooltips tooltip-content="{{module.moduleName}}">{{module.moduleName}}</span> + <button class="tlv-btn grey popover-btn" data-tests-id="popover-close-button" data-ng-click="closePopover()">Cancel</button> + <button class="tlv-btn blue popover-btn" data-tests-id="popover-save-button" data-ng-class="{'disabled': (validateField(popoverForm.heatName) || popoverForm.heatName.$viewValue === originalName)}" data-ng-click="updateHeatName()">Save</button> + </div> + </form> +</div> diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-directive.ts b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-directive.ts new file mode 100644 index 0000000000..b99f11fcf9 --- /dev/null +++ b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-directive.ts @@ -0,0 +1,77 @@ +'use strict'; + +export interface IEditNamePopoverDirectiveScope extends ng.IScope { + isOpen:boolean; + templateUrl:string; + module:any; + direction:string; + header:string; + heatNameValidationPattern:RegExp; + originalName:string; + onSave:any; + + closePopover(isCancel:boolean):void; + validateField(field:any, originalName:string):boolean; + updateHeatName(heatName:string):void; + onInit():void; +} + +export class EditNamePopoverDirective implements ng.IDirective { + + constructor(private ValidationPattern:RegExp,private $templateCache:ng.ITemplateCacheService) { + } + + scope = { + direction: "@?", + module: "=", + header: "@?", + onSave: "&" + }; + + link = (scope:IEditNamePopoverDirectiveScope) => { + if (!scope.direction) { + scope.direction = 'top'; + } + + scope.originalName = ''; + this.$templateCache.put("edit-module-name-popover.html", require('./edit-module-name-popover.html')); + scope.templateUrl = "edit-module-name-popover.html"; + scope.isOpen = false; + + scope.closePopover = (isCancel:boolean = true) => { + scope.isOpen = !scope.isOpen; + + if (isCancel) { + scope.module.heatName = scope.originalName; + } + }; + + scope.onInit = () => { + scope.originalName = scope.module.heatName; + }; + + scope.validateField = (field:any):boolean => { + return !!(field && field.$dirty && field.$invalid); + }; + + scope.heatNameValidationPattern = this.ValidationPattern; + + scope.updateHeatName = () => { + scope.closePopover(false); + scope.onSave(); + } + + }; + + replace = true; + restrict = 'E'; + template = ():string => { + return require('./edit-name-popover-view.html'); + }; + + public static factory = (ValidationPattern:RegExp,$templateCache:ng.ITemplateCacheService)=> { + return new EditNamePopoverDirective(ValidationPattern,$templateCache); + } +} + +EditNamePopoverDirective.factory.$inject = ['ValidationPattern','$templateCache']; diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-view.html b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-view.html new file mode 100644 index 0000000000..23340ccee2 --- /dev/null +++ b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover-view.html @@ -0,0 +1 @@ +<div uib-popover-template="templateUrl" popover-class="edit-name-popover" popover-title="{{header}}" popover-placement="{{direction}}" popover-is-open="isOpen" popover-append-to-body="true"></div> diff --git a/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover.less b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover.less new file mode 100644 index 0000000000..55dcd80a27 --- /dev/null +++ b/catalog-ui/src/app/directives/edit-name-popover/edit-name-popover.less @@ -0,0 +1,74 @@ +.edit-name-popover{ + max-width: none; + width: 310px; + left: initial !important; + right: 10px; + z-index: 100; + + .arrow { + left: 95% !important; + border-width: 7px; + bottom: -8px !important; + } +} + +.popover { + border-radius: 0; + + .top > .arrow { + bottom: -8px !important; + } + + .popover-title { + background-color: transparent; + border-bottom: 2px solid #40b7e4; + margin-left: 20px; + margin-right: 20px; + padding: 8px 14px 8px 0px; + font-family: @font-omnes-medium; + font-weight: bold; + } + + .popover-content { + width: inherit; + padding: 9px 20px; + } + + .form-group { + margin-top: 9px; + } + + .popover-btn { + float:right; + margin-left: 10px; + margin-bottom: 20px; + } + + .close-popover-btn { + position: absolute; + top: 11px; + right: 25px; + } + + .close-popover-btn:hover { + cursor: pointer; + } + + .popover-input { + height: 47px; + margin-bottom:5px; + } + + .popover-label { + text-overflow: ellipsis; + display: block; + white-space: nowrap; + margin-bottom: 10px; + font-family: @font-omnes-medium; + color: @main_color_l; + } + + .w-sdc-form .i-sdc-form-item { + margin-bottom: 0px; + } +} |