From 48e42d41e1273c6c59afec7fbdf0dc9a5705c951 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 23 Apr 2019 22:20:13 +0200
Subject: [PATCH 1/6] add julius file for communication recipientLayout

---
 templates/widgets/communication/recipientLayout.julius | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 templates/widgets/communication/recipientLayout.julius

diff --git a/templates/widgets/communication/recipientLayout.julius b/templates/widgets/communication/recipientLayout.julius
new file mode 100644
index 000000000..d38d48a6d
--- /dev/null
+++ b/templates/widgets/communication/recipientLayout.julius
@@ -0,0 +1 @@
+// TODO: js utility to check all/none of the checkboxes in a recipient category at once

From 60c9de44c5c7210a5d9cff5b12c342741abb4c43 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Wed, 24 Apr 2019 19:16:58 +0200
Subject: [PATCH 2/6] special styling for checkboxes in table headers

---
 static/css/utils/checkbox.scss | 6 ++++++
 static/js/utils/checkAll.js    | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/static/css/utils/checkbox.scss b/static/css/utils/checkbox.scss
index 9a73b01e7..6db7f97e3 100644
--- a/static/css/utils/checkbox.scss
+++ b/static/css/utils/checkbox.scss
@@ -74,3 +74,9 @@
     filter: grayscale(1);
   }
 }
+
+/* special treatment for checkboxes in table headers */
+th .checkbox {
+  margin-right: 7px;
+  vertical-align: bottom;
+}
diff --git a/static/js/utils/checkAll.js b/static/js/utils/checkAll.js
index 86749f2a9..5a15e0ac7 100644
--- a/static/js/utils/checkAll.js
+++ b/static/js/utils/checkAll.js
@@ -96,9 +96,9 @@
       checkAllCheckbox.setAttribute('id', getCheckboxId());
       th.insertBefore(checkAllCheckbox, th.firstChild);
 
-      // manually set up newly created checkbox
+      // manually set up new checkbox
       if (UtilRegistry) {
-        UtilRegistry.setup(UtilRegistry.find('checkbox'));
+        UtilRegistry.setup(UtilRegistry.find('checkbox'), th);
       }
 
       checkAllCheckbox.addEventListener('input', onCheckAllCheckboxInput);

From 7e7ba291f20981af58c9c67aa339bcd20ae7f95f Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 23 Apr 2019 13:38:08 +0200
Subject: [PATCH 3/6] wrap recipient form categories in wrapper and only show
 when necessary

---
 .../communication/recipientLayout.hamlet      | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/templates/widgets/communication/recipientLayout.hamlet b/templates/widgets/communication/recipientLayout.hamlet
index c52ff534d..f3f759de1 100644
--- a/templates/widgets/communication/recipientLayout.hamlet
+++ b/templates/widgets/communication/recipientLayout.hamlet
@@ -1,14 +1,16 @@
 $newline never
-$forall category <- activeCategories
-  <div .recipient-category>
-    <input type=checkbox id=#{checkedIdent category} :elem category checkedCategories:checked>
-    <label .recipient-category__label for=#{checkedIdent category}>
-      _{category}
+$if not (null activeCategories)
+  <div .recipient-categories>
+    $forall category <- activeCategories
+      <div .recipient-category>
+        <input type=checkbox id=#{checkedIdent category} :elem category checkedCategories:checked>
+        <label .recipient-category__label for=#{checkedIdent category}>
+          _{category}
 
-    $if hasContent category
-      <fieldset .recipient-category__fieldset uw-interactive-fieldset .interactive-fieldset__target data-conditional-input=#{checkedIdent category}>
-        $forall optIx <- categoryIndices category
-          ^{cellWdgts ! optIx}
+        $if hasContent category
+          <fieldset .recipient-category__fieldset uw-interactive-fieldset .interactive-fieldset__target data-conditional-input=#{checkedIdent category}>
+            $forall optIx <- categoryIndices category
+              ^{cellWdgts ! optIx}
 
-        $maybe addWdgt <- addWdgts !? (1, (EnumPosition category, 0))
-          ^{addWdgt}
+            $maybe addWdgt <- addWdgts !? (1, (EnumPosition category, 0))
+              ^{addWdgt}

From 8fd16c35459e21fa923560b6e38225727a04527f Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Thu, 25 Apr 2019 10:03:08 +0200
Subject: [PATCH 4/6] preparation for toggle all/none checkbox in
 recipientLayout

---
 .../communication/recipientLayout.hamlet      |  8 +++--
 .../communication/recipientLayout.julius      | 33 +++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/templates/widgets/communication/recipientLayout.hamlet b/templates/widgets/communication/recipientLayout.hamlet
index f3f759de1..646bc7e01 100644
--- a/templates/widgets/communication/recipientLayout.hamlet
+++ b/templates/widgets/communication/recipientLayout.hamlet
@@ -9,8 +9,12 @@ $if not (null activeCategories)
 
         $if hasContent category
           <fieldset .recipient-category__fieldset uw-interactive-fieldset .interactive-fieldset__target data-conditional-input=#{checkedIdent category}>
-            $forall optIx <- categoryIndices category
-              ^{cellWdgts ! optIx}
+            $if not (null (categoryIndices category))
+              $# TODO: unique id for this all/none checkbox
+              <input type=checkbox id=tbd .recipient-category__toggle-all>
+              <label for=tbd>Label
+              $forall optIx <- categoryIndices category
+                ^{cellWdgts ! optIx}
 
             $maybe addWdgt <- addWdgts !? (1, (EnumPosition category, 0))
               ^{addWdgt}
diff --git a/templates/widgets/communication/recipientLayout.julius b/templates/widgets/communication/recipientLayout.julius
index d38d48a6d..87dfead6b 100644
--- a/templates/widgets/communication/recipientLayout.julius
+++ b/templates/widgets/communication/recipientLayout.julius
@@ -1 +1,34 @@
 // TODO: js utility to check all/none of the checkboxes in a recipient category at once
+(function() {
+
+  var RECIPIENT_CATEGORIES_SELECTOR = '.recipient-categories';
+  var RECIPIENT_CATEGORY_SELECTOR = '.recipient-category';
+  var RECIPIENT_CATEGORY_FIELDSET_SELECTOR = '.recipient-category__fieldset';
+  var RECIPIENT_CATEGORY_TOGGLE_ALL_SELECTOR = '.recipient-category__toggle-all';
+
+  document.addEventListener('DOMContentLoaded', function() {
+
+    var recipientCategoriesElement = document.querySelector(RECIPIENT_CATEGORIES_SELECTOR);
+    var recipientCategoryElements = Array.from(recipientCategoriesElement.querySelectorAll(RECIPIENT_CATEGORY_SELECTOR));
+
+    recipientCategoryElements.forEach(function(element) {
+      setupRecipientCategory(element);
+    });
+  });
+
+  function setupRecipientCategory(recipientCategoryElement) {
+    var fieldset = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_FIELDSET_SELECTOR);
+    var categoryCheckboxes = Array.from(fieldset.querySelectorAll('[type="checkbox"]'));
+
+    if (categoryCheckboxes) {
+      var toggleAllCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_TOGGLE_ALL_SELECTOR);
+
+      if (toggleAllCheckbox) {
+        toggleAllCheckbox.addEventListener('change', function() {
+          console.log('TBD: setting up toggle all checkbox');
+        });
+      }
+    }
+  }
+
+})();

From 016566d06e533f8529d75eff1e01261024a27e75 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Thu, 25 Apr 2019 15:18:29 +0200
Subject: [PATCH 5/6] add toggle all checkbox and checked counter to
 recipientLayout

---
 messages/uniworx/de.msg                       |  1 +
 .../communication/recipientLayout.hamlet      | 14 ++--
 .../communication/recipientLayout.julius      | 73 ++++++++++++++++---
 .../communication/recipientLayout.lucius      | 18 +++++
 4 files changed, 90 insertions(+), 16 deletions(-)

diff --git a/messages/uniworx/de.msg b/messages/uniworx/de.msg
index c29f933d6..1de52b772 100644
--- a/messages/uniworx/de.msg
+++ b/messages/uniworx/de.msg
@@ -775,6 +775,7 @@ CommSuccess n@Int: Nachricht wurde an #{tshow n} Empfänger versandt
 CommCourseHeading: Kursmitteilung
 
 RecipientCustom: Weitere Empfänger
+RecipientToggleAll: Alle/Keine
 
 RGCourseParticipants: Kursteilnehmer
 RGCourseLecturers: Kursverwalter
diff --git a/templates/widgets/communication/recipientLayout.hamlet b/templates/widgets/communication/recipientLayout.hamlet
index 646bc7e01..5f47cb7b7 100644
--- a/templates/widgets/communication/recipientLayout.hamlet
+++ b/templates/widgets/communication/recipientLayout.hamlet
@@ -3,18 +3,20 @@ $if not (null activeCategories)
   <div .recipient-categories>
     $forall category <- activeCategories
       <div .recipient-category>
-        <input type=checkbox id=#{checkedIdent category} :elem category checkedCategories:checked>
+        <input type=checkbox id=#{checkedIdent category} .recipient-category__checkbox :elem category checkedCategories:checked>
         <label .recipient-category__label for=#{checkedIdent category}>
           _{category}
 
         $if hasContent category
           <fieldset .recipient-category__fieldset uw-interactive-fieldset .interactive-fieldset__target data-conditional-input=#{checkedIdent category}>
             $if not (null (categoryIndices category))
-              $# TODO: unique id for this all/none checkbox
-              <input type=checkbox id=tbd .recipient-category__toggle-all>
-              <label for=tbd>Label
-              $forall optIx <- categoryIndices category
-                ^{cellWdgts ! optIx}
+              <div .recipient-category__checked-counter>
+              <div .recipient-category__toggle-all>
+                <input type=checkbox id=#{checkedIdent category}-toggle-all>
+                <label for=#{checkedIdent category}-toggle-all .recipient-category__option-label>_{MsgRecipientToggleAll}
+              <div .recipient-category__options>
+                $forall optIx <- categoryIndices category
+                  ^{cellWdgts ! optIx}
 
             $maybe addWdgt <- addWdgts !? (1, (EnumPosition category, 0))
               ^{addWdgt}
diff --git a/templates/widgets/communication/recipientLayout.julius b/templates/widgets/communication/recipientLayout.julius
index 87dfead6b..d2fc512ab 100644
--- a/templates/widgets/communication/recipientLayout.julius
+++ b/templates/widgets/communication/recipientLayout.julius
@@ -1,34 +1,87 @@
-// TODO: js utility to check all/none of the checkboxes in a recipient category at once
 (function() {
 
+  var MASS_INPUT_SELECTOR = '.massinput';
   var RECIPIENT_CATEGORIES_SELECTOR = '.recipient-categories';
   var RECIPIENT_CATEGORY_SELECTOR = '.recipient-category';
-  var RECIPIENT_CATEGORY_FIELDSET_SELECTOR = '.recipient-category__fieldset';
-  var RECIPIENT_CATEGORY_TOGGLE_ALL_SELECTOR = '.recipient-category__toggle-all';
+  var RECIPIENT_CATEGORY_CHECKBOX_SELECTOR = '.recipient-category__checkbox ';
+  var RECIPIENT_CATEGORY_OPTIONS_SELECTOR = '.recipient-category__options';
+  var RECIPIENT_CATEGORY_TOGGLE_ALL_SELECTOR = '.recipient-category__toggle-all [type="checkbox"]';
+  var RECIPIENT_CATEGORY_CHECKED_COUNTER_SELECTOR = '.recipient-category__checked-counter';
+
+  var massInputElement;
 
   document.addEventListener('DOMContentLoaded', function() {
-
     var recipientCategoriesElement = document.querySelector(RECIPIENT_CATEGORIES_SELECTOR);
-    var recipientCategoryElements = Array.from(recipientCategoriesElement.querySelectorAll(RECIPIENT_CATEGORY_SELECTOR));
+    massInputElement = recipientCategoriesElement.closest(MASS_INPUT_SELECTOR);
+
+    setupRecipientCategories();
+
+    var recipientObserver = new MutationObserver(setupRecipientCategories);
+    recipientObserver.observe(massInputElement, { childList: true });
+  });
+
+  function setupRecipientCategories() {
+    var recipientCategoryElements = Array.from(massInputElement.querySelectorAll(RECIPIENT_CATEGORY_SELECTOR));
 
     recipientCategoryElements.forEach(function(element) {
       setupRecipientCategory(element);
     });
-  });
+  }
 
   function setupRecipientCategory(recipientCategoryElement) {
-    var fieldset = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_FIELDSET_SELECTOR);
-    var categoryCheckboxes = Array.from(fieldset.querySelectorAll('[type="checkbox"]'));
+    var categoryCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_CHECKBOX_SELECTOR);
+    var categoryOptions = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_OPTIONS_SELECTOR);
+    if (categoryOptions) {
 
-    if (categoryCheckboxes) {
+      var categoryCheckboxes = Array.from(categoryOptions.querySelectorAll('[type="checkbox"]'));
       var toggleAllCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_TOGGLE_ALL_SELECTOR);
 
+      // setup category checkbox to toggle all child checkboxes if changed
+      categoryCheckbox.addEventListener('change', function() {
+        categoryCheckboxes.forEach(function(checkbox) {
+          checkbox.checked = categoryCheckbox.checked;
+        });
+        updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
+        updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
+      });
+
+      // update counter and toggle checkbox initially
+      updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
+      updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
+
+      // register change listener for individual checkboxes
+      categoryCheckboxes.forEach(function(checkbox) {
+        checkbox.addEventListener('change', function() {
+          updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
+          updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
+        });
+      });
+
+      // register change listener for toggle all checkbox
       if (toggleAllCheckbox) {
         toggleAllCheckbox.addEventListener('change', function() {
-          console.log('TBD: setting up toggle all checkbox');
+          categoryCheckboxes.forEach(function(checkbox) {
+            checkbox.checked = toggleAllCheckbox.checked;
+          });
+          updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
         });
       }
     }
   }
 
+  // update checked state of toggle all checkbox based on all other checkboxes
+  function updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes) {
+    var allChecked = categoryCheckboxes.reduce(function(acc, checkbox) {
+      return acc && checkbox.checked;
+    }, true);
+    toggleAllCheckbox.checked = allChecked;
+  }
+
+  // update value of checked counter
+  function updateCheckedCounter(recipientCategoryElement, categoryCheckboxes) {
+    var checkedCounter = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_CHECKED_COUNTER_SELECTOR);
+    var checkedCheckboxes = categoryCheckboxes.reduce(function(acc, checkbox) { return checkbox.checked ? acc + 1 : acc; }, 0);
+    checkedCounter.innerHTML = checkedCheckboxes + '/' + categoryCheckboxes.length;
+  }
+
 })();
diff --git a/templates/widgets/communication/recipientLayout.lucius b/templates/widgets/communication/recipientLayout.lucius
index df68114dd..a48065a68 100644
--- a/templates/widgets/communication/recipientLayout.lucius
+++ b/templates/widgets/communication/recipientLayout.lucius
@@ -32,6 +32,7 @@
   padding-left: 16px;
   max-height: 200px;
   overflow-y: auto;
+  position: relative;
 }
 
 .recipient-category__option-add {
@@ -42,3 +43,20 @@
     padding: 10px 0;
   }
 }
+
+.recipient-category__options + .recipient-category__option-add {
+  margin-top: 10px;
+}
+
+.recipient-category__toggle-all {
+  display: flex;
+  border-bottom: 1px solid #bcbcbc;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+}
+
+.recipient-category__checked-counter {
+  position: absolute;
+  right: 0;
+  top: 0;
+}

From 7f38137f5367bbca7ceb6a6b459a47cb92151ca4 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Thu, 25 Apr 2019 15:24:39 +0200
Subject: [PATCH 6/6] recipientLayout: restrict height of options instead of
 whole fieldset

---
 .../widgets/communication/recipientLayout.lucius      | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/templates/widgets/communication/recipientLayout.lucius b/templates/widgets/communication/recipientLayout.lucius
index a48065a68..aa4cb072d 100644
--- a/templates/widgets/communication/recipientLayout.lucius
+++ b/templates/widgets/communication/recipientLayout.lucius
@@ -11,6 +11,11 @@
   }
 }
 
+.recipient-category__options {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
 .recipient-category__option {
   display: flex;
 
@@ -30,8 +35,6 @@
   padding: 5px 0 10px;
   border-left: 1px solid #bcbcbc;
   padding-left: 16px;
-  max-height: 200px;
-  overflow-y: auto;
   position: relative;
 }
 
@@ -57,6 +60,6 @@
 
 .recipient-category__checked-counter {
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 5px;
+  top: 5px;
 }