how privileges are consolidated

aaa

by Vasil Svetoslavov

HTML

<h1>
  Privileges
</h1>
  <input type="checkbox" id="showDenyCheckbox">
  <label for="showDenyCheckbox">with DENY</label>
<div class="row">
  <div class="col-md-6">
    <h2>User Management</h2>
    <h3>
      Privileges of <em>user 1</em>
    </h3>
    <table class="privs no-deny">
      <thead>
        <tr>
          <th>Privilege</th>
          <th>Allow</th>
          <th>Deny</th>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="3"><strong>Personal Data</strong></td></tr>
        <tr>
          <td>View Person Profiles</td>
          <td><input type="checkbox" name="group1" value="1" class="editable"></td>
          <td><input type="checkbox" name="group1" value="2" class="editable"></td>
        </tr>
        <tr>
          <td>Create Person Entries</td>
          <td><input type="checkbox" name="group2" value="1" class="editable"></td>
          <td><input type="checkbox" name="group2" value="2" class="editable"></td>
        </tr>
        <tr>
          <td>Modify Personal Data (general, photo, address)</td>
          <td><input type="checkbox" name="group3" value="1" class="editable"></td>
          <td><input type="checkbox" name="group3" value="2" class="editable"></td>
        </tr>
        <tr>
          <td>Request Cards and Products</td>
          <td><input type="checkbox" name="group4" value="1" class="editable"></td>
          <td><input type="checkbox" name="group4" value="2" class="editable"></td>
        </tr>
        <tr>
          <td>View History</td>
          <td><input type="checkbox" name="group5" value="1" class="editable"></td>
          <td><input type="checkbox" name="group5" value="2" class="editable"></td>
        </tr>
        <tr>
          <td>Open Notes</td>
          <td><input type="checkbox" name="group6" value="1" class="editable"></td>
          <td><input type="checkbox" name="group6" value="2" class="editable"></td>
        </tr>
        <tr><td colspan="3"><strong>Configuration...

CSS

table, tr, td, th {
                border-collapse: collapse;
                border: 1px solid gray;
            }
            table {
              width: 100%;
            }
            td[colspan="3"] {
                background-color: #ff6;
            }
            th {
                background-color: #ddd;
                text-align: left;
                padding: 4px;
                white-space: nowrap;
            }
            td:nth-child(2), td:nth-child(3) {
                text-align: center;
            }
            .no-deny td:not([colspan="3"]):last-child, .no-deny th:last-child {
              display: none;
            }
            .col-md-6 {
            	width: calc(50% - 20px);
            	float: left;
              padding: 10px;
              padding-top: 4px;
            }
            .col-md-6:nth-child(1) {
              width: calc(50% - 21px);
              border-right: 1px solid #ccc;
            }
            body {
              font-size: 9pt;
            }
            .col-md-6:nth-child(1) hr {
              height: 0px;
              border-collapse: collapse;
              border: none;
              border-bottom: 1px solid #ccc;
              margin-right: -10px;
              margin-left: -10px;
            }
            h1, h2, h3 {
              margin-top: 4px;
              margin-bottom: 4px;
            }
            h3 {
              font-weight: normal;
            }
            em {
              font-weight: bold;
            }

JavaScript

$(document).ready(function() {
  $('input[type="checkbox"].editable').on({
    'change': function(e) {
      var groupName = e.target.name;
      var checkbox = $(e.target);
      var checked = checkbox.prop('checked');
      var value = checkbox.val();
      $('input[type="checkbox"][name="' + groupName + '"]').each(function(idx, el) {
        var elValue = $(el).val();
        if (elValue != value) {
          $(el).prop('checked', false);
        }
      });

      updateConsolidatedPrivileges(groupName);
    }
  });
  
  $('#showDenyCheckbox').change(function(e){
  	toggleDenyVisibility(e.target); 
  });
  updateConsolidatedPrivileges('group1');
  updateConsolidatedPrivileges('group2');
  updateConsolidatedPrivileges('group3');
  updateConsolidatedPrivileges('group4');
  updateConsolidatedPrivileges('group5');
  updateConsolidatedPrivileges('group6');
  updateConsolidatedPrivileges('group7');
  updateConsolidatedPrivileges('group8');
  updateConsolidatedPrivileges('group9');
  updateConsolidatedPrivileges('groupA');
});

var toggleDenyVisibility = function(checkBox) {
	var cb = $(checkBox);
  var checked = cb.prop('checked');
  if (checked) {
  	$('.privs.no-deny').removeClass('no-deny');
  } else {
  	$('.privs:not(.no-deny)').addClass('no-deny');
    $('input[type="checkbox"][value="2"].editable:checked').each(function(idx, el){
    	var uncheckme = $(el);
      var grName = el.name;
      uncheckme.prop('checked', false);
      updateConsolidatedPrivileges(grName);
    });
  }
}

function updateConsolidatedPrivileges(groupName) {
  var userPrivRegex = /^(?:group)(.)$/;
  var userGroupPrivRegex = /^(?:group1)(.)$/;
  var consolidatedPrivPrivRegex = /^(?:group2)(.)$/;

  var isUserPriv = userPrivRegex.test(groupName);
  var isUserGroupPriv = userGroupPrivRegex.test(groupName);

  var g1 = $('input[type="checkbox"][name="' + groupName + '"]:checked');

  priv1 = 0;
  if (g1.length > 0) {
    //nothing in this group is checked
    g1.each(function(idx, el) {
 ...