energylink/public/app/features/dashboard/acl/acl.html

<div class="editor-row">
	<h5 class="section-heading">Add New Permission</h5>
	<form name="addPermission" class="gf-form-group">
		<div class="gf-form-inline">
      <div class="gf-form">
				<span class="gf-form-label">Type</span>
				<select class="gf-form-input gf-size-auto" ng-model="ctrl.type" ng-options="r for r in ['User', 'User Group']"></select>
			</div>
      <div class="gf-form" ng-show="ctrl.type === 'User'">
        <span class="gf-form-label">User</span>
        <user-picker user-id="ctrl.userId"></user-picker>
      </div>
      <div class="gf-form" ng-show="ctrl.type === 'User Group'">
        <span class="gf-form-label">User Group</span>
        <user-group-picker user-group-id="ctrl.userGroupId"></user-group-picker>
      </div>
			<div class="gf-form">
				<span class="gf-form-label">Permission</span>
				<select class="gf-form-input gf-size-auto" ng-model="ctrl.permission" ng-options="p.value as p.text for p in ctrl.permissionTypeOptions"></select>
			</div>
			<div class="gf-form">
				<button class="btn gf-form-btn btn-success" ng-click="ctrl.addPermission()">Add</button>
			</div>
		</div>
	</form>

  <div class="permissionlist">
    <div class="permissionlist__section">
      <div class="permissionlist__section-header">
        <h6>Users</h6>
      </div>
      <table class="filter-table form-inline">
        <thead>
          <tr>
            <th>User</th>
            <th style="width: 220px;">Permission</th>
            <th style="width: 120px"></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="permission in ctrl.userPermissions" class="permissionlist__item">
            <td>{{permission.userLogin}}</td>
            <td><select class="gf-form-input gf-size-auto" ng-model="permission.permissionType" ng-options="p.value as p.text for p in ctrl.permissionTypeOptions" ng-change="ctrl.updatePermission(permission)"></select></td>
            <td class="text-right">
              <a ng-click="ctrl.removeUserPermission(permission)" class="btn btn-danger btn-small">
                <i class="fa fa-remove"></i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="permissionlist__section">
      <div class="permissionlist__section-header">
        <h6>Groups</h6>
      </div>
      <table class="filter-table form-inline">
        <thead>
          <tr>
            <th>User Group</th>
            <th style="width: 220px;">Permission</th>
            <th style="width: 120px;"></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="permission in ctrl.userGroupPermissions" class="permissionlist__item">
            <td>{{permission.userGroup}}</td>
            <td><select class="gf-form-input gf-size-auto" ng-model="permission.permissionType" ng-options="p.value as p.text for p in ctrl.permissionTypeOptions" ng-change="ctrl.updatePermission(permission)"></select></td>
            <td class="text-right">
              <a ng-click="ctrl.removeUserGroupPermission(permission)" class="btn btn-danger btn-small">
                <i class="fa fa-remove"></i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>