N-Level Delegation Sample

by Pratik Bhattachary

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
  <div ng-controller="delegationCtrl">
    <h1>
      Type I Access
    </h1>
    <h2>{{authLevel.tenant.Name}}</h2>
    <ul class="unstyled">


      <div ng-repeat="child in authLevel.tenant.children" class="level-1">
        <input type="checkbox" ng-model="child.IsSelected" ng-click="levelSelected(child)">
        <span>{{child.Name}}</span>


        <div ng-repeat="child in child.children" class="level-2">
          <input type="checkbox" ng-model="child.IsSelected" ng-click="levelSelected(child)">
          <span>{{child.Name}}</span>


          <div ng-repeat="child in child.children" class="level-3">
            <input type="checkbox" ng-model="child.IsSelected" ng-click="levelSelected(child)">
            <span>{{child.Name}}</span>

            <div ng-repeat="child in child.children" class="level-4">
              <input type="checkbox" ng-model="child.IsSelected" ng-click="levelSelected(child)">
              <span>{{child.Name}}</span>

              <div ng-repeat="child in child.children" class="level-5">
                <input type="checkbox" ng-model="child.IsSelected" ng-click="levelSelected(child)">
                <span>{{child.Name}}</span>

                <div ng-repeat="child in child.children" class="level-6">
                  <input type="checkbox" ng-model="child.IsSelected" ng-click="levelSelected(child)">
                  <span>{{child.Name}}</span>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ul>


    <br />
    <h1>
      Type II Access
    </h1>
    {{selectedEntity}}

    <div ng-repeat="object in objects">
      {{object.Name}}
    </div>
  </div>
</div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

.level-1 {
  padding-left: 10px
}

.level-2 {
  padding-left: 40px
}

.level-3 {
  padding-left: 70px
}

.level-4 {
  padding-left: 100px
}

.level-5 {
  padding-left: 130px
}

.level-6 {
  padding-left: 160px
}

JavaScript

function TodoCtrl($scope) {
  $scope.todos = [{
      text: 'learn angular',
      done: true
    },
    {
      text: 'build an angular app',
      done: false
    }
  ];

  $scope.addTodo = function() {
    $scope.todos.push({
      text: $scope.todoText,
      done: false
    });
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}

var projects = [{
  "Name": "Project 1"
}, {
  "Name": "Project 2"
}]

var engagements = [{
  "Name": "Engagement 1"
}, {
  "Name": "Engagement 2"
}]

var authorizationLevel = {
  tenant: {
    Name: "Enterprise Service",
    children: [{
      "Name": "Project Management",
      "IsSelected": false,
      "children": [{
        "Name": "Project",
        "IsSelected": false,
        "AttachedObject": "Projects",
        "children": [{
          "ID": "Perm1",
          "Name": "View",
          "children": []
        }, {
          "ID": "Perm2",
          "Name": "Edit",
          "children": []
        }, {
          "ID": "Perm3",
          "Name": "Assign",
          "children": []
        }]
      }, {
        "Name": "ProjectAssignment",
        "AttachedObject": "Projects",
        "IsSelected": false,
        "children": [{
          "ID": "Perm1",
          "Name": "View",
          "children": []
        }]
      }]
    }, {
      "Name": "RelationshipManagement",
      "children": [{
        "Name": "Engagement",
        "AttachedObject": "Engagements",
        "children": [{
          "Name": "View",
          "children": []
        }, {
          "Name": "Edit",
          "children": []
        }]
      }, {
        "Name": "Project Financials",
        "AttachedObject":...