Only see sensible depths of the access tree

Gemfile

@@ -66,6 +66,7 @@ gem "uuidtools", require: false
 gem "view_component"
 gem "whenever", require: false
 gem "wkhtmltoimage-binary"
+gem "memery"
 
 group :development, :test do
   gem "byebug", platforms: [:mri, :mingw, :x64_mingw]

Gemfile.lock

@@ -251,6 +251,8 @@ GEM
       mini_mime (>= 0.1.1)
     marcel (0.3.3)
       mimemagic (~> 0.3.2)
+    memery (1.3.0)
+      ruby2_keywords (~> 0.0.2)
     method_source (1.0.0)
     mimemagic (0.3.5)
     mini_mime (1.0.2)
@@ -435,6 +437,7 @@ GEM
     ruby-graphviz (1.2.5)
       rexml
     ruby-progressbar (1.10.1)
+    ruby2_keywords (0.0.2)
     ruby_dep (1.5.0)
     rubyzip (2.3.0)
     safe_yaml (1.0.5)
@@ -580,6 +583,7 @@ DEPENDENCIES
   launchy
   listen (>= 3.0.5, < 3.2)
   lodash-rails
+  memery
   newrelic_rpm
   parallel_tests
   passenger

app/assets/javascripts/invite_admin.js

@@ -0,0 +1,138 @@
+//
+// loads at page refresh
+//
+window.addEventListener("DOMContentLoaded", inviteAdmin);
+window.addEventListener("DOMContentLoaded", editAdmin);
+
+function inviteAdmin() {
+  selectAllListener()
+  checkboxItemListener()
+  resourceRowCollapseListener()
+}
+
+function editAdmin() {
+  const SELECTOR = "input.access-input"
+  const facilityAccessDiv = document.getElementById("facility-access")
+
+  // list of all checkboxes under facilityAccessDiv
+  const checkboxes = nodeListToArray(SELECTOR, facilityAccessDiv)
+  const checkedCheckboxes = checkboxes.filter(check => check.checked)
+
+  for (let checkbox of checkedCheckboxes) {
+    updateParentCheckedState(checkbox, SELECTOR)
+  }
+}
+
+//
+// listeners
+//
+function selectAllListener() {
+  const selectAllDiv = document.getElementById("select_all_facilities")
+  const SELECTOR = "input.access-input"
+  const facilityAccessDiv = document.getElementById("facility-access")
+  const checkboxes = nodeListToArray(SELECTOR, facilityAccessDiv)
+
+  selectAllDiv.addEventListener("change", _ => {
+    if (selectAllDiv.checked) {
+      for (let checkbox of checkboxes) {
+        checkbox.checked = true
+      }
+    } else {
+      for (let checkbox of checkboxes) {
+        checkbox.checked = false
+      }
+    }
+  })
+}
+
+function checkboxItemListener() {
+  const SELECTOR = "input.access-input"
+  const facilityAccessDiv = document.getElementById("facility-access")
+
+  // list of all checkboxes under facilityAccessDiv
+  const checkboxes = nodeListToArray(SELECTOR, facilityAccessDiv)
+
+  addEventListener("change", e => {
+    const targetCheckbox = e.target
+
+    // exit if change event did not come from list of checkboxes
+    if (checkboxes.indexOf(targetCheckbox) === -1) return
+    updateChildrenCheckedState(targetCheckbox, SELECTOR)
+    updateParentCheckedState(targetCheckbox, SELECTOR)
+  })
+}
+
+function resourceRowCollapseListener() {
+  const facilityAccessItems = document.getElementsByClassName("access-ratio")
+
+  for (const item of facilityAccessItems) {
+    item.addEventListener("click", onFacilityAccessItemToggled)
+  }
+}
+
+//
+// behaviour
+//
+
+function toggleItemCollapsed(element) {
+  const collapsed = element.classList.contains("collapsed")
+
+  if (collapsed) {
+    element.classList.remove("collapsed")
+  } else {
+    element.classList.add("collapsed")
+  }
+}
+
+function onFacilityAccessItemToggled({ target }) {
+  const children = Array.from(target.closest("li").childNodes)
+  const parentItem = target.closest(".access-item")
+  const wrapper = children.find(containsClass("access-item-wrapper"))
+
+  if (wrapper) {
+    toggleItemCollapsed(parentItem)
+  }
+}
+
+function updateParentCheckedState(element, selector) {
+  // find parent and sibling checkboxes
+  const parent = (element.closest(["ul"]).parentNode).querySelector(selector)
+  const siblings = nodeListToArray(selector, parent.closest("li").querySelector(["ul"]))
+
+  // get checked state of siblings
+  // are every or some siblings checked (using Boolean as test function)
+  const checkStatus = siblings.map(check => check.checked)
+  const every = checkStatus.every(Boolean)
+  const some = checkStatus.some(Boolean)
+
+  // check parent if all siblings are checked
+  // set indeterminate if not all and not none are checked
+  parent.checked = every
+  parent.indeterminate = some && !every
+
+  // recurse until check is the top most parent
+  if (element !== parent) updateParentCheckedState(parent, selector)
+}
+
+function updateChildrenCheckedState(parent, selector) {
+  // check/uncheck children (includes check itself)
+  const children = nodeListToArray(selector, parent.closest("li"))
+
+  children.forEach(child => {
+    // reset indeterminate state for children
+    child.indeterminate = false
+    child.checked = parent.checked
+  })
+}
+
+//
+// helpers
+//
+
+// helper function to create nodeArrays (not collections)
+const nodeListToArray = (selector, parent = document) =>
+  [].slice.call(parent.querySelectorAll(selector))
+
+// returns a function that checks if element contains class
+const containsClass = (className) => ({ classList }) =>
+  classList && classList.contains(className)

app/assets/javascripts/polyfill.js

@@ -0,0 +1,31 @@
+// Element.remove(), CharacterData.remove(), DocumentType.remove()
+(function (arr) {
+    arr.forEach(function (item) {
+        if (item.hasOwnProperty('remove')) {
+            return;
+        }
+        Object.defineProperty(item, 'remove', {
+            configurable: true,
+            enumerable: true,
+            writable: true,
+            value: function remove() {
+                this.parentNode.removeChild(this);
+            }
+        });
+    });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
+
+// Element.closest()
+if (window.Element && !Element.prototype.closest) {
+    Element.prototype.closest =
+        function (s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i,
+                el = this;
+            do {
+                i = matches.length;
+                while (--i >= 0 && matches.item(i) !== el) { };
+            } while ((i < 0) && (el = el.parentElement));
+            return el;
+        };
+}

app/assets/stylesheets/application.scss

@@ -14,6 +14,7 @@
 @import "partials/snapshots";
 @import "partials/search";
 @import "partials/reports";
+@import "partials/invite_admin";
 
 #help * {
   scroll-behavior: smooth;

app/assets/stylesheets/partials/_invite_admin.scss

@@ -0,0 +1,122 @@
+@mixin transition($duration) {
+  -webkit-transition: $duration;
+  -moz-transition: $duration;
+  -ms-transition: $duration;
+  -o-transition: $duration;
+  transition: $duration;
+}
+
+#facility-access {
+  .card {
+    &.access-tree {
+      padding: 0px;
+      min-height: 460px;
+    }
+  }
+
+  .select-all-access-items {
+    height: 100%;
+    display: flex;
+    padding: 5px 0 5px 0;
+
+    .form-check {
+      margin: 10px;
+
+      label {
+        font-weight: 100;
+      }
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    display: block;
+    height: 100%;
+    padding-left: 0px;
+    margin: 0px;
+
+    li {
+      height: 100%;
+      padding: 0px;
+      border-top: 1px solid var(--light);
+      position: relative;
+      margin-bottom: -1px;
+    }
+
+    .access-item {
+      height: 100%;
+      display: flex;
+
+      &.organization {
+        div {
+          label {
+            font-weight: 600;
+          }
+        }
+      }
+
+      &.collapsed {
+        .dropdown {
+          i {
+            transform: rotate(-90deg);
+            @include transition(0.3s);
+          }
+        }
+
+        & + .access-item-wrapper {
+          height: 0px;
+          overflow: hidden;
+          @include transition(0.1s);
+        }
+      }
+
+      &:not(.collapsed) {
+        background: #fff8e0;
+      }
+
+      &:hover {
+        background: var(--light);
+        @include transition(0.1s);
+      }
+
+      .spacer {
+        padding-left: 20px;
+      }
+
+      .form-check {
+        margin: 10px;
+
+        label {
+          font-weight: 100;
+        }
+      }
+
+      .dropdown {
+        padding: 10px;
+        margin-left: 5px;
+        margin-right: -20px;
+
+        i {
+          transform: rotate(0deg);
+          margin: 0px 8px 2px 8px;
+          @include transition(0.2s);
+          pointer-events: none;
+        }
+
+        &.hidden {
+          visibility: hidden;
+        }
+      }
+
+      .access-ratio {
+        padding: 12px;
+        margin-left: auto;
+        font-size: 12px;
+        color: var(--secondary);
+        font-weight: normal;
+        font-style: normal;
+        cursor: pointer;
+      }
+    }
+  }
+}