<md-button has-permission="!UpdateHotelStaticDetails" action-type="disable" ng-click="$ctrl.onClickSaveAllBtn()"> <custom-icon="save" size="24"></custom-icon> Save</md-button>
<add-button-component title="Add New Group" on-add-new="$ctrl.addNewGroup()" has-permission="!ManageGroups" action-type="disable" ></add-button-component>
module.exports = function (app) { 'use strict'; app.directive('hasPermission', hasPermission); var actionTypes = { hide: 'hide', disable: 'disable' };
hasPermission.$inject = ['userService', 'loggerService']; function hasPermission(userService, loggerService) { return { restrict: 'EA', link: function (scope, element, attrs) { //Checking if attribute "has-permission" value is a string AT THE HTML if (!_.isString(attrs.hasPermission)) { loggerService.logWarn('hasPermission value at Html attribute must be a string'); }
//@value - permission name //@notPermissionFlag - true if user not premitted. var value = attrs.hasPermission.trim(); var notPermissionFlag = value[0] === '!'; if (notPermissionFlag) { value = value.slice(1).trim(); } /* each new logging to system, @rootscope event is fired 'permissionsChanged'. */ toggleVisibilityBasedOnPermission(); scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
function toggleVisibilityBasedOnPermission() { var hasPermission = userService.hasPermission(value); //getting permission from service
/** * Value notPermissionFlag hasPermission result * ---------------------------------------------------------------------------------------------------- * * Edit (show html if user has "edit permission") | false | true | show * * Edit (show html if user dosent have "edit permission") | false | false | hide * * !Edit(show html if user has "edit permission") | true | true | hide * * !Edit(show html if user dosent have "edit permission") | true | false | show * * ---------------------------------------------------------------------------------------------------- * */ if (!hasPermission && !notPermissionFlag || hasPermission && notPermissionFlag) { if (attrs.actionType) { attrs.actionType.toLowerCase() === actionTypes.disable ? attrs.$set('disabled', 'disabled') : false; attrs.actionType.toLowerCase() === actionTypes.disable ? element.find('button').attr('disabled', 'disabled') : false; } else { element[0].parentNode.removeChild(element[0]); } } } } }; }};
describe('hasPermission', function() { var self = {}, loggerService, controller, configurationService, userService;
var $rootScope, $compile;
beforeEach(angular.mock.module('core')); beforeEach(angular.mock.module(function($provide) { $provide.constant('configurationService', { "AUTH_TEST_MODE": true, }); }));
function injectFn($injector, _$controller_, _$rootScope_, _$compile_) { loggerService = $injector.get('loggerService'); configurationService = $injector.get("configurationService"); userService = $injector.get("userService"); $rootScope = _$rootScope_; $compile = _$compile_; }
/** * helper function gets html as string compiles and returns element; * @param htmlCode (String) * @returns (object) compiledElement */ function getCompiledElement(htmlCode) { var element = angular.element(htmlCode); var compiledElement = $compile(element)($rootScope); $rootScope.$digest(); return compiledElement; }
beforeEach(inject(injectFn));
it('should get a UpdateHotelStaticDetails permission and show the inner button', function() { var element = getCompiledElement('<button has-permission id="permissionBtn" permission="UpdateHotelStaticDetails">Save</button>'); var x = element.find('button'); var xx = document.getElementById('permissionBtn'); console.log(element); console.log(xx);
}); });