diff options
Diffstat (limited to 'ecomp-portal-FE-common/client/app/views/functionalMenu')
4 files changed, 186 insertions, 151 deletions
diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js index 69fe6e4d..a425297a 100644 --- a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js +++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js @@ -4,8 +4,8 @@ 'use strict'; (function () { class MenuDetailsModalCtrl { - constructor($scope, $log, functionalMenuService, errorMessageByCode, ECOMP_URL_REGEX,$rootScope,confirmBoxService) { - + constructor($scope, $log, functionalMenuService, errorMessageByCode, ECOMP_URL_REGEX,$rootScope,confirmBoxService,items) { + $scope.ngDialogData=items; $scope.isAllApplications = false; let newMenuModel = { name: null, @@ -21,6 +21,8 @@ functionalMenuService.getManagedRolesMenu(appid).then(rolesObj => { $log.debug("MenuDetailsModalCtrl::getAvailableRoles: Roles returned = " + JSON.stringify(rolesObj)) this.availableRoles = rolesObj; + + this.preSelectedRoles = {roles:[]}; if(($scope.ngDialogData.source==='edit') && this.isMidLevelMenuItem()){ @@ -42,8 +44,20 @@ } } } + $rootScope.$broadcast('availableRolesReady'); this.isSaving = false; + for(var i=0; i<rolesObj.length;i++){ + this.availableRoles[i].isApplied = false; + for(var j=0;j<this.preSelectedRoles.roles.length;j++){ + if(this.preSelectedRoles.roles[j].roleId==this.availableRoles[i].roleId){ + this.availableRoles[i].isApplied=true; + break; + } + } + + + } }).catch(err => { $log.error("MenuDetailsModalCtrl::getAvailableRoles: error: " + err); }); @@ -89,6 +103,7 @@ this.formEditable = $scope.ngDialogData.source==='view' ? false : true; this.selectedRole = []; this.availableRoles = []; + this.selectedApp={}; this.menuItem = _.clone($scope.ngDialogData.menuItem); $log.info('MenuDetailsModalCtrl::getAvailableApps: Within init, about to check menuDetails for defined'); if(!angular.isUndefined(this.menuItem.menuDetails) && @@ -98,7 +113,7 @@ $log.debug("MenuDetailsModalCtrl::init: menuItem: "); $log.debug('MenuDetailsModalCtrl::init: ',this.menuItem); this.menuItem.menu.url = this.menuItem.menuDetails.url; - this.selectedApp={}; + this.selectedAppIndex=this.menuItem.menuDetails.appid; this.selectedApp.index = this.menuItem.menuDetails.appid; getAvailableRoles(this.selectedApp.index); @@ -186,17 +201,40 @@ this.isParentMenuItem = () => { return this.menuItem.menu.parentMenuId!=null ? false : true; }; + + this.isRoleSelected=()=>{ + var selectedRoleIds=[]; + for(var i=0;i<this.availableRoles.length;i++){ + if(this.availableRoles[i].isApplied){ + selectedRoleIds.push(this.availableRoles[i].roleId); + return true; + } + } + return false; + + }; this.updateSelectedApp = (appItem) => { + /*var appItemobj= JSON.parse(appItem); + this.selectedApp=JSON.parse(this.selectedApp);*/ if (!appItem) { return; } + var appobj={}; + for(var i=0;i<this.availableApps.length;i++ ){ + if(this.availableApps[i].index==appItem){ + appobj=this.availableApps[i]; + break; + } + } + debugger; $log.debug('MenuDetailsModalCtrl::updateSelectedApp: drop down app item = ' + JSON.stringify(appItem.index)); $log.debug("MenuDetailsModalCtrl::updateSelectedApp: appItem in updateSelectedApp: "); $log.debug('MenuDetailsModalCtrl::updateSelectedApp: ',appItem); - this.selectedApp.isDisabled = ! appItem.enabled; - $log.debug("MenuDetailsModalCtrl::updateSelectedApp: isDisabled: "+this.selectedApp.isDisabled); - getAvailableRoles(appItem.index); + this.selectedApp.isDisabled = ! appobj.enabled; + this.selectedApp.index=appobj.index; + $log.debug("MenuDetailsModalCtrl::updateSelectedApp: isDisabled: "+this.selectedApp.isDisabled); + getAvailableRoles(appobj.index); }; this.continue = () => { @@ -210,7 +248,6 @@ /*if($scope.functionalMenuForm.$invalid){ return; }*/ - if(!!this.menuItem.menu.url && (angular.isUndefined(this.selectedApp) || !this.selectedApp.index>0)) { confirmBoxService.showInformation('Please select the appropriate app, or remove the url').then(isConfirmed => {}); return; @@ -227,15 +264,25 @@ if ($scope.ngDialogData.source === 'edit') { // Edit Menu Item $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving an edit menu item'); + var selectedRoleIds=[]; + for(var i=0;i<this.availableRoles.length;i++){ + if(this.availableRoles[i].isApplied){ + selectedRoleIds.push(this.availableRoles[i].roleId); + } + } activeMenuItem = { menuId:this.menuItem.menu.menuId, column:this.menuItem.menu.column, text:this.menutitle, parentMenuId:this.menuItem.menu.parentMenuId, url:this.menuItem.menu.url, + appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index, - roles:this.selectedRole + + roles:selectedRoleIds }; + + // alert(activeMenuItem); // If we have removed the url and appid, we must remove the roles if (!activeMenuItem.appid && !activeMenuItem.url) { activeMenuItem.roles = null; @@ -243,7 +290,9 @@ functionalMenuService.saveEditedMenuItem(activeMenuItem) .then(() => { $log.debug('MenuDetailsModalCtrl::saveChanges: Menu Item saved'); - $scope.closeThisDialog(true); + // $scope.closeThisDialog(true); + $scope.$dismiss('cancel'); + }).catch(err => { if(err.status === 409){//Conflict handleConflictErrors(err); @@ -259,6 +308,12 @@ $log.debug("MenuDetailsModalCtrl::saveChanges: Edit Menu output will be: " + JSON.stringify(activeMenuItem)); } else { // New Menu Item $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving a New menu item'); + var selectedRoleIds=[]; + for(var i=0;i<this.availableRoles.length;i++){ + if(this.availableRoles[i].isApplied){ + selectedRoleIds.push(this.availableRoles[i].roleId); + } + } var newMenuItem = { menuId:null, // this is a new menu item column:this.menuItem.menu.column, @@ -267,14 +322,15 @@ parentMenuId:this.menuItem.menu.menuId, url:this.menuItem.menu.url, appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index, - roles:this.selectedRole + roles:selectedRoleIds }; $log.debug("MenuDetailsModalCtrl::saveChanges: New Menu output will be: " + JSON.stringify(newMenuItem)); functionalMenuService.saveMenuItem(newMenuItem) .then(() => { $log.debug('MenuDetailsModalCtrl::saveChanges: Menu Item saved'); - $scope.closeThisDialog(true); + // $scope.closeThisDialog(true); + $scope.$dismiss('cancel'); }).catch(err => { if(err.status === 409){//Conflict handleConflictErrors(err); @@ -298,103 +354,7 @@ }); } } - MenuDetailsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'errorMessageByCode', 'ECOMP_URL_REGEX','$rootScope','confirmBoxService']; + MenuDetailsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'errorMessageByCode', 'ECOMP_URL_REGEX','$rootScope','confirmBoxService','items']; angular.module('ecompApp').controller('MenuDetailsModalCtrl', MenuDetailsModalCtrl); - angular.module('ecompApp').directive('dropdownMultiselect', ['functionalMenuService',function(){ - return { - restrict: 'E', - scope: { - model: '=', - options: '=', - populated_roles: '=preSelected', - dropdownTitle: '@', - source: '=' - }, - template: "<div class='btn-group' data-ng-class='{open: open}'>" + - "<button class='btn btn-medium'>{{dropdownTitle}}</button>" + - "<button class='btn dropdown-toggle' data-ng-click='open=!open;openDropDown()'><span class='caret'></span></button>" + - "<ul class='dropdown-menu dropdown-menu-medium' aria-labelledby='dropdownMenu'>" + - "<li data-ng-repeat='option in options'> <input ng-disabled='setDisable(source)' type='checkbox' data-ng-change='setSelectedItem(option.roleId)' ng-model='selectedItems[option.roleId]'>{{option.rolename}}</li>" + - "</ul>" + - "</div>", - controller: function ($scope) { - $scope.selectedItems = {}; - $scope.checkAll = false; - $scope.$on('availableRolesReady', function() { - init(); - }); - - function init() { - console.log('dropdownMultiselect init'); - $scope.dropdownTitle = $scope.source ==='view' ? 'View Roles' : 'Select Roles'; - console.log('$scope.populated_roles = ' + $scope.populated_roles); - } - - $scope.$watch('populated_roles', function(){ - if ($scope.populated_roles && $scope.populated_roles.length>0) { - for (var i = 0; i < $scope.populated_roles.length; i++) { - $scope.model.push($scope.populated_roles[i].roleId); - $scope.selectedItems[$scope.populated_roles[i].roleId] = true; - } - if ($scope.populated_roles.length === $scope.options.length) { - $scope.checkAll = true; - } - }else{ - deselectAll(); - } - }); - - $scope.openDropDown = function () { - - }; - - $scope.checkAllClicked = function () { - if ($scope.checkAll) { - selectAll(); - } else { - deselectAll(); - } - }; - - function selectAll() { - $scope.model = []; - $scope.selectedItems = {}; - angular.forEach($scope.options, function (option) { - $scope.model.push(option.roleId); - }); - angular.forEach($scope.model, function (id) { - $scope.selectedItems[id] = true; - }); - console.log($scope.model); - }; - - function deselectAll() { - $scope.model = []; - $scope.selectedItems = {}; - console.log($scope.model); - }; - - $scope.setSelectedItem = function (id) { - var filteredArray = []; - if ($scope.selectedItems[id] === true) { - $scope.model.push(id); - } else { - filteredArray = $scope.model.filter(function (value) { - return value != id; - }); - $scope.model = filteredArray; - $scope.checkAll = false; - } - console.log(filteredArray); - return false; - }; - - $scope.setDisable = function(source){ - return source ==='view' ? true : false; - } - } - } - }]); - -})();
\ No newline at end of file + })();
\ No newline at end of file diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html index 7ba444eb..bae0e776 100644 --- a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html +++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html @@ -1,9 +1,18 @@ <div class="functionalMenu-details-modal"> - <div class="title">{{ngDialogData.title}}</div> + <div class="b2b-modal-header"> + <h2 class="titles" id="microservice-add-details-title">{{ngDialogData.title}}</h2> - <div class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi"> - <form name="functionalMenuForm"> + <div class="corner-button in"> + <button type="button" class="close" aria-label="Close" + ng-click="$dismiss('cancel')"></button> + </div> + </div> + + <div class="b2b-modal-body"> + <div class="functionalMenu-properties-main" scroll-top="functionalMenuDetails.scrollApi"> + + <form name="functionalMenuForm"> <div class="span6" > <div class="item-label">Parent</div> @@ -26,43 +35,50 @@ <div class="item-label">URL</div> <input id="input-url" ddh-reset ng-readonly="!functionalMenuDetails.formEditable ? 'checked':'' " class="functionalMenu-height" placeholder="http://" class="input-field" ng-model="functionalMenuDetails.menuItem.menu.url" type="url" name="url"/> <div id="error-url-conflict" ng-show="functionalMenuForm.url.$error.url"> - <small class="err-message" style="color: Red; font-size: 11px;">Not valid URL!</small> + <small class="err-message error-msg-txt">Not valid URL!</small> </div> </div> </div> <div class="right-item"> <div class="item-label">App</div> - <div class="custom-select-wraps" ng-readonly="checked"> + <div class="custom-select-wraps" ng-readonly="checked"> <div id='ecomp-small-spinner' class="ecomp-small-spinner" ng-if="isAllApplications"></div> <div ng-if="!isAllApplications"> - <select id="select-app" class="select-field" - ng-model="functionalMenuDetails.selectedApp" - ng-change="functionalMenuDetails.updateSelectedApp(functionalMenuDetails.selectedApp);" - ng-options="app.title for app in functionalMenuDetails.availableApps track by app.index" - - required> - <option value="" >No Application</option> - </select> + + <div class="table-dropdown" > + <select id="select-app" b2b-dropdown placeholder-text="Select Application" ng-model="functionalMenuDetails.selectedAppIndex" ng-change="functionalMenuDetails.updateSelectedApp(functionalMenuDetails.selectedAppIndex);"> + <option b2b-dropdown-list option-repeat="app in functionalMenuDetails.availableApps track by app.index" value="{{app.index}}">{{app.title}}</option> + </select> + </div> </div> </div> + + <!--<span class="err-message" ng-show="functionalMenuForm.app.$dirty && functionalMenuForm.app.$error.required"> Please select App!</span>--> <!-- <pre>{{functionalMenuDetails.menuItem | json}}</pre> --> </div> - - - <div class="item" ng-show="functionalMenuDetails.displayRoles==true"> - <div class="item-label">Roles</div> - <dropdown-multiselect id="dropdown-roles" dropdown-title="Select Roles" pre-selected="functionalMenuDetails.preSelectedRoles.roles" - model="functionalMenuDetails.selectedRole" - options="functionalMenuDetails.availableRoles" source="ngDialogData.source" > - </dropdown-multiselect> - </div> + + <div class="item" + ng-show="functionalMenuDetails.displayRoles==true"> + <div class="item-label">Roles</div> + <div> + <multiple-select id="dropdown-roles" unique-data="{{$index}}" + placeholder="Select Roles" + on-change="functionalMenuDetails.preSelectedRoles.roles" + ng-model="functionalMenuDetails.availableRoles" name-attr="rolename" + value-attr="isApplied"> </multiple-select> + </div> + </div> <div ng-show="functionalMenuDetails.selectedApp && functionalMenuDetails.selectedApp.isDisabled" class="err-message">Application is disabled</div> - </div> + </form> - </div> - <div class="dialog-control"> + </div> + + </div> + <br> + <div class="b2b-modal-footer"> + <div class="dialog-control"> <div ng-if="ngDialogData.source!='view'"> <span class="ecomp-save-spinner" ng-show="functionalMenuDetails.isSaving"></span> <span ng-if="ngDialogData.source=='edit' && functionalMenuDetails.isLeafMenuItem()"> @@ -82,16 +98,21 @@ <span ng-if="ngDialogData.source=='add' || (ngDialogData.source=='edit' && !functionalMenuDetails.isLeafMenuItem())"> <button id="button-save-add" class="btn btn-alt btn-small" ng-show="!functionalMenuDetails.menuItem.menu.url || !(functionalMenuDetails.selectedApp.index>0) - || functionalMenuDetails.selectedRole.length>0 || !functionalMenuDetails.menutitle" ng-disabled="!functionalMenuForm.text.$valid || !functionalMenuDetails.menutitle" + || functionalMenuDetails.isRoleSelected() || !functionalMenuDetails.menutitle" ng-disabled="!functionalMenuForm.text.$valid || !functionalMenuDetails.menutitle" ng-click="functionalMenuDetails.saveChanges()">Save</button> - <button id="button-save-continue" class="save-button" ng-show="!!functionalMenuDetails.menuItem.menu.url && functionalMenuDetails.selectedApp.index>0 && functionalMenuDetails.menutitle - && !functionalMenuDetails.selectedRole.length>0" ng-disabled="!functionalMenuForm.url.$valid" + <button id="button-save-continue" class="btn btn-alt btn-small" ng-show="!!functionalMenuDetails.menuItem.menu.url && functionalMenuDetails.selectedApp.index>0 && functionalMenuDetails.menutitle + && !functionalMenuDetails.isRoleSelected()" ng-disabled="!functionalMenuForm.url.$valid" ng-click="functionalMenuDetails.continue()">Continue</button> </span> - <button id="button-cancel-close-dialog" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button> + <button id="button-cancel-close-dialog" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Cancel</button> </div> <div ng-if="ngDialogData.source=='view'"> - <div id="div-close-dialog" class="btn btn-alt btn-small" ng-click="closeThisDialog()">Close</div> + <div id="div-close-dialog" class="btn btn-alt btn-small" ng-click="$dismiss('cancel')">Close</div> </div> </div> -</div>
\ No newline at end of file + </div> + + + + +</div> diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less index ce434b47..c63a63e9 100644 --- a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less +++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu-dialog/modal-details.modal.less @@ -1,11 +1,11 @@ .functionalMenu-details-modal { - height: 520px; + //height: 520px; .title { //.n18r; .dGray18r; //ECOMP Dark Gray - border-bottom: @blue-active 3px solid; + // border-bottom: @blue-active 3px solid; } .span6{ @@ -23,17 +23,20 @@ padding-top: 10px; .functionalMenu-height{ height:35px; width:140%; +font-family:Omnes-ECOMP-W02, Arial; + } select { max-width: 150%; - width: 380px; + width: 70%; } -.btn{ -font-family: clearview_att_regular; - font-size: 14px !important; -} + + .multiple-select{ + width:70%; + } + .btn-group.open .dropdown-toggle { -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); box-shadow: inset 0 0px 0px rgba(0,0,0,.125); @@ -88,8 +91,8 @@ font-family: clearview_att_regular; .functionalMenu-properties-main { padding: 16px; - height: 306px; - overflow-y: visible; + height: 359px; + overflow: auto; input[type=checkbox][disabled]{ height:13px; } @@ -151,10 +154,15 @@ font-family: clearview_att_regular; color: @funcGreen; font-size: 9px; } + } } } - + .dialog-control{ + position: relative; + bottom: 16px; + float: right; + } } diff --git a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu.less b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu.less index 8452590f..8554fadc 100644 --- a/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu.less +++ b/ecomp-portal-FE-common/client/app/views/functionalMenu/functionalMenu.less @@ -22,6 +22,46 @@ margin-left:0px; } + .dropdown-menu{ + + position:absolute; + top:100%; + left:0; + z-index:1000; + display:none; + float:left; + min-width:160px; + padding:5px 0; + margin:2px 0 0; + list-style:none; + font-size:14px; + background-color:#fff; + border:1px solid #ccc; + border:1px solid rgba(0,0,0,.15); + border-radius:6px; + -webkit-box-shadow:0 6px 12px rgba(0,0,0,.175); + box-shadow:0 6px 12px rgba(0,0,0,.175); + background-clip:padding-box; + + } + + .dropdown-menu .divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: #e5e5e5; +} + +.dropdown-menu>li>a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: 400; + line-height: 1.428571429; + color: #333; + white-space: nowrap; +} + .tree { margin:auto; width: @table-width; @@ -54,7 +94,13 @@ } } + .error-msg-txt { + color: red; + font-size: 11px; + } } - + .regenerate-functionalmenu-btn-txt { + color:black; + } }
\ No newline at end of file |