Merge branch 'master' of gitlab.cip.ifi.lmu.de:jost/UniWorX

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

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;
+}

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);

templates/widgets/communication/recipientLayout.hamlet

@@ -1,14 +1,22 @@
 $newline never
-$forall category <- activeCategories
+$if not (null activeCategories)
-  <div .recipient-category>
+  <div .recipient-categories>
-    <input type=checkbox id=#{checkedIdent category} :elem category checkedCategories:checked>
+    $forall category <- activeCategories
-    <label .recipient-category__label for=#{checkedIdent category}>
+      <div .recipient-category>
-      _{category}
+        <input type=checkbox id=#{checkedIdent category} .recipient-category__checkbox :elem category checkedCategories:checked>
+        <label .recipient-category__label for=#{checkedIdent category}>
+          _{category}
 
-    $if hasContent category
+        $if hasContent category
-      <fieldset .recipient-category__fieldset uw-interactive-fieldset .interactive-fieldset__target data-conditional-input=#{checkedIdent category}>
+          <fieldset .recipient-category__fieldset uw-interactive-fieldset .interactive-fieldset__target data-conditional-input=#{checkedIdent category}>
-        $forall optIx <- categoryIndices category
+            $if not (null (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))
+            $maybe addWdgt <- addWdgts !? (1, (EnumPosition category, 0))
-          ^{addWdgt}
+              ^{addWdgt}

templates/widgets/communication/recipientLayout.julius

@@ -0,0 +1,87 @@
+(function() {
+
+  var MASS_INPUT_SELECTOR = '.massinput';
+  var RECIPIENT_CATEGORIES_SELECTOR = '.recipient-categories';
+  var RECIPIENT_CATEGORY_SELECTOR = '.recipient-category';
+  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);
+    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 categoryCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_CHECKBOX_SELECTOR);
+    var categoryOptions = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_OPTIONS_SELECTOR);
+    if (categoryOptions) {
+
+      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() {
+          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;
+  }
+
+})();

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,7 @@
   padding: 5px 0 10px;
   border-left: 1px solid #bcbcbc;
   padding-left: 16px;
-  max-height: 200px;
+  position: relative;
-  overflow-y: auto;
 }
 
 .recipient-category__option-add {
@@ -42,3 +46,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: 5px;
+  top: 5px;
+}