Add indeterminate checkboxes to scopes tree

Each checkbox may have child checkboxes. If all those children are
checked, it be checked. If none are checked, it is unchecked. If some of
them are checked, then it’s in an indeterminate state (in this case
symbolically meaning “partially” checked).

2 files changed, 21 insertions, 0 deletions

diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index ac31c65..86a9282 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -37,6 +37,25 @@ function storeCheckboxStatus(checkbox) {
             localStorage.removeItem(checkbox.name);
 }
 
+function checkParentsCheckboxes() {
+    const checkboxes = $('input:checkbox[form|="scopesForm"]');
+    const reversedCheckboxes = $(checkboxes.get().reverse())
+
+    reversedCheckboxes.each(function() {
+        const checkbox = this;
+        const checkboxChildren = $('input:checkbox', this.parentNode).not(this);
+
+        if (checkboxChildren.length == 0) return;
+
+        const unCheckedChildren = checkboxChildren.filter(":not(:checked)");
+
+        checkbox.indeterminate =
+          unCheckedChildren.length > 0 &&
+          unCheckedChildren.length < checkboxChildren.length;
+        checkbox.checked = unCheckedChildren.length === 0;
+    });
+}
+
 function checkChildrenCheckboxes() {
     const checkboxes = $('input:checkbox[form|="scopesForm"]')
 
@@ -48,6 +67,7 @@ function checkChildrenCheckboxes() {
             storeCheckboxStatus(this);
             $(this).trigger('show-client');
         });
+        checkParentsCheckboxes();
     });
 }
 
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 6f19a30..ba500b3 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -13,6 +13,7 @@
             keepScopesTreeState();
             keepSelectedClients();
             checkChildrenCheckboxes();
+            checkParentsCheckboxes();
         }
     });
 </script>