enable/disable show/hide element if permission is true/false

src/luhaspermission.js

+/**
+ * Created by robin on 11/5/15.
+ */
+
+angular.module('luticateUtils')
+    .directive('luShowPermission', ['luticateAuthCache',
+        function(luticateAuthCache) {
+            return {
+                restrict: 'A',
+                link: function ($scope, element, attrs) {
+
+                    $scope.$watch(function()
+                    {
+                        var permissions = luticateAuthCache.getEffectivePermissions();
+                        if (permissions == null) {
+                            return null;
+                        }
+                        var permission_name = attrs.luShowPermission;
+                        if ($scope[permission_name] != null) {
+                            permission_name = $scope[permission_name];
+                        }
+
+                        var value = permissions[permission_name];
+                        return value == null ? null : value;
+                    }, function(newValue, oldValue)
+                    {
+                        if (newValue == true) {
+                            element.show();
+                        }
+                        else {
+                            element.hide();
+                        }
+                    })
+                }
+            };
+        }])
+    .directive('luEnablePermission', ['luticateAuthCache',
+        function(luticateAuthCache) {
+            return {
+                restrict: 'A',
+                scope: {
+                    luEnablePermission: '@'
+                },
+                link: function ($scope, element, attrs) {
+
+                    $scope.$watch(function() {
+                        return luticateAuthCache.hasEffectivePermissions($scope.luEnablePermission);
+                    }, function(newValue)
+                    {
+                        if (newValue == true) {
+                            element.removeAttr("disabled");
+                        }
+                        else {
+                            element.attr("disabled", "disabled");
+                        }
+                    })
+                }
+            };
+        }]);

src/lupermissionsedit.js

                         Name: "",
                         Value: true
                     };
-                    var luModel = $scope.luModel();
+                    $scope.luModelOptions = $scope.luModel();
+                    console.log();
 
                     $scope.editPermission = function(permission, value)
                     {
                             id: "promiseEditPermission_" + permission.Name,
                             loaderGroups: ['permission_' + permission.Name]
                         };
-                        luModel.getEditPermissionPromise(permission.Name, value, promiseEditPermission)
+                        $scope.luModelOptions.getEditPermissionPromise(permission.Name, value, promiseEditPermission)
                             .then(function(data)
                             {
                                 permission.Value = value;
                             id: "promiseDelPermission_" + permission.Name,
                             loaderGroups: ['permission_' + permission.Name]
                         };
-                        luModel.getDelPermissionPromise(permission.Name, promiseDelPermission)
+                        $scope.luModelOptions.getDelPermissionPromise(permission.Name, promiseDelPermission)
                             .then(function(data)
                             {
                                 $scope.loadPermissions();
                             id: "promiseAddPermission_" + permission.Name,
                             loaderGroups: ['permission_add']
                         };
-                        luModel.getAddPermissionPromise(permission.Name, permission.Value, promiseAddPermission)
+                        $scope.luModelOptions.getAddPermissionPromise(permission.Name, permission.Value, promiseAddPermission)
                             .then(function(data)
                             {
                                 $scope.loadPermissions();
                             id: "promiseLoadPermissions_",
                             groups: ['permissionList']
                         };
-                        luModel.getGetAllPromise(null, null, promiseLoadPermissions)
+                        $scope.luModelOptions.getGetAllPromise(null, null, promiseLoadPermissions)
                             .then(function (permissions) {
                                 $scope.permissions = permissions.Data;
                                 $scope.allPermissionsCleared = [];
 '    <label class="col-sm-6 control-label">{{ permission.Name }}</label>' +
 '<div class="col-sm-6">' +
 '    <div class="btn-group">' +
-'    <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="">' +
+'    <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="" lu-enable-permission="{{ luModelOptions.permissions.edit }}">' +
 '    {{ permission.Value ? \'Allow\' : \'Disallow\' }} <span class="caret"></span>' +
 '    </a>' +
 '    <ul class="dropdown-menu">' +
 '</ul>' +
 '</div>' +
 '<div class="btn-group">' +
-'    <button type="button" class="btn btn-default" ng-click="delPermission(permission)">' +
+'    <button type="button" class="btn btn-default" ng-click="delPermission(permission)" lu-show-permission="{{ luModelOptions.permissions.del }}">' +
 '    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>' +
 '    </button>' +
 '    </div>' +
 '    </div>' +
 '    </div>' +
 '    <div class="clearfix"></div>' +
-'    <div class="col-sm-12" lu-busy="permission_add">' +
+'    <div class="col-sm-12" lu-busy="permission_add" lu-show-permission="{{ luModelOptions.permissions.add }}">' +
 '    <div class="btn-group">' +
 '    <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="">' +
 '    {{ tmpPermission.Name }} <span class="caret"></span>' +

src/lutable.js

         function(dialogs, luticateDialogErrorHelper) {
             return {
                 restrict: 'E',
+                scope: {
+                    options: '&'
+                },
                 templateUrl: "/luticate/lutable.html",
                 link: function ($scope, element, attrs) {
                     $scope.page = 0;
                     $scope.pages = [];
                     $scope.selectedItems = [];
 
+                    $scope.tableOptions = $scope.options();
+
                     var promiseLoadItems = {
                         id: "promiseLoadItems",
                         groups: ['itemList']
                     };
 
                     $scope.loadPage = function (page) {
-                        $scope.getLoadPagePromise(page, $scope.perPage, promiseLoadItems)
+                        $scope.tableOptions.getLoadPagePromise(page, $scope.perPage, promiseLoadItems)
                             .then(function (items) {
                                 $scope.page = page;
                                 $scope.items = items;
                     };
 
                     $scope.displayItem = function (item) {
-                        var ctrl = $scope.getEditController();
+                        var ctrl = $scope.tableOptions.getEditController();
                         dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', item)
                             .result.then(function (data) {
                                 $scope.loadPage($scope.page);
                             $scope.loadPage($scope.page);
                             return;
                         }
-                        $scope.getDelPromise($scope.selectedItems[0], promiseDelItems)
+                        $scope.tableOptions.getDelPromise($scope.selectedItems[0], promiseDelItems)
                             .then(function (data) {
                                 $scope.selectedItems.splice(0, 1);
                                 $scope.removeItems();
                     };
 
                     $scope.addItem = function () {
-                        var ctrl = $scope.getEditController();
+                        var ctrl = $scope.tableOptions.getEditController();
                         dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', null)
                             .result.then(function (data) {
                                 $scope.loadPage($scope.page);
                     };
 
                     $scope.toggleSelectedItem = function (item) {
-                        var id = $scope.getItemId(item);
+                        var id = $scope.tableOptions.getItemId(item);
                         var idx = $scope.selectedItems.indexOf(id);
                         if (idx > -1) {
                             $scope.selectedItems.splice(idx, 1);
                         else {
                             $scope.selectedItems = [];
                             for (var i = 0; i < $scope.items.Data.length; ++i) {
-                                $scope.selectedItems.push($scope.getItemId($scope.items.Data[i]));
+                                $scope.selectedItems.push($scope.tableOptions.getItemId($scope.items.Data[i]));
                             }
                         }
                     };
 
                     $scope.isItemChecked = function(item)
                     {
-                        return $scope.selectedItems.indexOf($scope.getItemId(item)) > -1;
+                        return $scope.selectedItems.indexOf($scope.tableOptions.getItemId(item)) > -1;
                     };
 
-                    if (!$scope.getItemId) {
-                        $scope.getItemId = function(item)
+                    if (!$scope.tableOptions.getItemId) {
+                        $scope.tableOptions.getItemId = function(item)
                         {
                             return item.Id;
                         };
 '        <table class="col-sm-12 table table-hover">' +
 '    <thead>' +
 '    <tr>' +
-'    <th>' +
+'    <th lu-show-permission="{{ tableOptions.permissions.del }}">' +
 '    <input type="checkbox" ng-click="toggleSelectAll()"' +
 '    ng-checked="selectedItems.length == items.Data.length && items.Data.length != 0">' +
 '        </th>' +
-'        <th class="col-sm-{{ col.width }}" ng-repeat="col in columns">{{ col.name }}</th>' +
+'        <th class="col-sm-{{ col.width }}" ng-repeat="col in tableOptions.columns">{{ col.name }}</th>' +
 '</tr>' +
 '</thead>' +
 '<tbody>' +
 '<tr ng-repeat="item in items.Data" style="cursor: pointer" ng-click="displayItem(item)">' +
-'    <td>' +
+'    <td lu-show-permission="{{ tableOptions.permissions.del }}">' +
 '    <input name="selectedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
  '   ng-click="$event.stopPropagation();toggleSelectedItem(item)" >' +
 '        </td>' +
-'        <td ng-repeat="col in columns">{{ col.getValue(item) }}</td>' +
+'        <td ng-repeat="col in tableOptions.columns">{{ col.getValue(item) }}</td>' +
 '</tr>' +
 '</tbody>' +
 '</table>' +
 '</div>' +
 
 '<div class="col-sm-12">' +
-'    <button class="btn btn-default" type="button" ng-click="removeItems()" ng-disabled="selectedItems.length == 0">' +
+'    <button class="btn btn-default" type="button" ng-click="removeItems()"' +
+'ng-disabled="selectedItems.length == 0" lu-show-permission="{{ tableOptions.permissions.del }}">' +
 '    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove' +
 '    </button>' +
-'    <button class="btn btn-default" type="button" ng-click="addItem()">' +
+'    <button class="btn btn-default" type="button" ng-click="addItem()" lu-show-permission="{{ tableOptions.permissions.add }}">' +
 '    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add' +
 '    </button>' +
 '    </div>' +