From ea38ee422f9eb7e7e42c001218c62275659727c6 Mon Sep 17 00:00:00 2001
From: Gregor Kleen <kleen@cip.ifi.lmu.de>
Date: Mon, 22 Apr 2019 12:48:40 +0200
Subject: [PATCH 01/17] Basic short-circuit support for mass-input

---
 src/Handler/Utils/Form/MassInput.hs                       | 8 ++++++++
 src/Utils.hs                                              | 2 +-
 .../widgets/massinput/massinput-standalone-wrapper.hamlet | 8 ++++++++
 templates/widgets/massinput/massinput-standalone.hamlet   | 6 ++++++
 4 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 templates/widgets/massinput/massinput-standalone-wrapper.hamlet
 create mode 100644 templates/widgets/massinput/massinput-standalone.hamlet

diff --git a/src/Handler/Utils/Form/MassInput.hs b/src/Handler/Utils/Form/MassInput.hs
index b89799f9a..6cd67ccc5 100644
--- a/src/Handler/Utils/Form/MassInput.hs
+++ b/src/Handler/Utils/Form/MassInput.hs
@@ -36,6 +36,8 @@ import qualified Data.Foldable as Fold
 
 import Control.Monad.Reader.Class (MonadReader(local))
 
+import Text.Hamlet (hamletFile)
+
 
 $(mapM tupleBoxCoord [2..4])
 
@@ -409,6 +411,12 @@ massInput MassInput{..} FieldSettings{..} fvRequired initialResult csrf = do
 
   MsgRenderer mr <- getMsgRenderer
 
+  whenM (hasCustomHeader HeaderMassInputShortcircuit) . liftHandlerT $ do
+    PageContent{..} <- widgetToPageContent $(widgetFile "widgets/massinput/massinput-standalone")
+    ur <- getUrlRenderParams
+
+    sendResponse $ $(hamletFile "templates/widgets/massinput/massinput-standalone-wrapper.hamlet") ur
+
   let
     fvLabel = toHtml $ mr fsLabel
     fvTooltip = toHtml . mr <$> fsTooltip
diff --git a/src/Utils.hs b/src/Utils.hs
index 40fa580ee..4310da38d 100644
--- a/src/Utils.hs
+++ b/src/Utils.hs
@@ -645,7 +645,7 @@ takeSessionJson key = lookupSessionJson key <* deleteSession (toPathPiece key)
 -- Custom HTTP Request-Headers --
 ---------------------------------
 
-data CustomHeader = HeaderIsModal | HeaderDBTableShortcircuit
+data CustomHeader = HeaderIsModal | HeaderDBTableShortcircuit | HeaderMassInputShortcircuit
   deriving (Eq, Ord, Enum, Bounded, Read, Show, Generic)
 
 instance Universe CustomHeader
diff --git a/templates/widgets/massinput/massinput-standalone-wrapper.hamlet b/templates/widgets/massinput/massinput-standalone-wrapper.hamlet
new file mode 100644
index 000000000..f6cfbcf2a
--- /dev/null
+++ b/templates/widgets/massinput/massinput-standalone-wrapper.hamlet
@@ -0,0 +1,8 @@
+$newline never
+$# Wrapper around massinput-standalone
+$#   pageTitle :: Html
+$#   pageHead  :: HtmlUrl url
+$#   pageBody  :: HtmlUrl url
+$#
+$# Probably only `pageBody` is relevant
+^{pageBody}
diff --git a/templates/widgets/massinput/massinput-standalone.hamlet b/templates/widgets/massinput/massinput-standalone.hamlet
new file mode 100644
index 000000000..6fef23b58
--- /dev/null
+++ b/templates/widgets/massinput/massinput-standalone.hamlet
@@ -0,0 +1,6 @@
+$newline never
+$# Version of `widgets/massinput/massinput` for when short-circuiting happens
+$# i.e. the response is only this widget wrapped in `massinput-standalone-wrapper.hamlet`
+#{csrf}
+^{shapeInput}
+^{miWidget}

From 484b5916c0f8cbea925e58079197ddedaa7832f2 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 23 Apr 2019 13:37:25 +0200
Subject: [PATCH 02/17] remove implicit submit js util for mass-input

---
 templates/widgets/massinput/massinput.julius | 37 --------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 templates/widgets/massinput/massinput.julius

diff --git a/templates/widgets/massinput/massinput.julius b/templates/widgets/massinput/massinput.julius
deleted file mode 100644
index 3c6c2a25b..000000000
--- a/templates/widgets/massinput/massinput.julius
+++ /dev/null
@@ -1,37 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-  var form = document.getElementById(#{String fvId}).closest('form');
-
-
-  var formSubmit = form.querySelector('input[type=submit], button[type=submit]:not(.btn-mass-input-add):not(.btn-mass-input-delete)');
-  var cellInputs = Array.from(form.querySelectorAll('.massinput--cell input:not([type=hidden])'));
-
-  cellInputs.forEach(function(input) {
-      makeImplicitSubmit(input, formSubmit);
-  });
-
-
-  Array.from(form.querySelectorAll('.massinput--add')).forEach(function(wrapper) {
-    var addSubmit = wrapper.querySelector('.btn-mass-input-add');
-    var addInputs = Array.from(wrapper.querySelectorAll('input:not([type=hidden]):not(.btn-mass-input-add)'));
-
-    addInputs.forEach(function(input) {
-      makeImplicitSubmit(input, addSubmit);
-    });
-  });
-
-  // Override implicit submit (pressing enter) behaviour to trigger a specified submit button instead of the default
-  function makeImplicitSubmit(input, submit) {
-    if (!submit) {
-      throw new Error('implicitSubmit(input, options) needs to be passed a submit element via options');
-    }
-
-    var doSubmit = function(event) {
-      if (event.keyCode == 13) {
-        event.preventDefault();
-        submit.click();
-      }
-    };
-
-    input.addEventListener('keypress', doSubmit);
-  }
-});

From c01bfd4fb374519184feaa7a50d6a4bb51786c44 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 03/17] 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 11c5cd36534729c2d03d975be6c7d06a001f3208 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 23 Apr 2019 13:40:03 +0200
Subject: [PATCH 04/17] add massInput js util

---
 src/Foundation.hs                            |   1 +
 static/js/utils/massInput.js                 | 127 +++++++++++++++++++
 templates/widgets/massinput/massinput.hamlet |   2 +-
 3 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 static/js/utils/massInput.js

diff --git a/src/Foundation.hs b/src/Foundation.hs
index 46e176a19..a05a45558 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -1175,6 +1175,7 @@ siteLayout' headingOverride widget = do
       addScript $ StaticR js_utils_checkAll_js
       addScript $ StaticR js_utils_form_js
       addScript $ StaticR js_utils_inputs_js
+      addScript $ StaticR js_utils_massInput_js
       addScript $ StaticR js_utils_modal_js
       addScript $ StaticR js_utils_showHide_js
       -- addScript $ StaticR js_utils_tabber_js
diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js
new file mode 100644
index 000000000..7b58bb625
--- /dev/null
+++ b/static/js/utils/massInput.js
@@ -0,0 +1,127 @@
+(function() {
+  'use strict';
+
+  /**
+   *
+   * Mass Input Utility
+   *  allows form shapes to be manipulated asynchronously:
+   *  will asynchronously submit the form and replace the contents of the
+   *  mass input with the one from the BE response
+   *
+   * Attribute:   uw-mass-input
+   *   (will be set up automatically on tables)
+   *
+   * Example usage:
+   *  (table with one column thats only checkboxes)
+   */
+
+  var MASS_INPUT_UTIL_NAME = 'massInput';
+  var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]';
+
+  var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized';
+
+  var massInputUtil = function(element) {
+    var massInputId;
+    var massInputFormSubmitHandler;
+    var massInputForm;
+
+    function init() {
+      if (!element) {
+        throw new Error('Mass Input utility cannot be setup without an element!');
+      }
+
+      massInputId = element.id;
+      massInputForm = element.closest('form');
+
+      if (!massInputForm) {
+        throw new Error('Mass Input utility cannot be setup without being wrapped in a <form>!');
+      }
+
+      massInputFormSubmitHandler = makeSubmitHandler(massInputForm);
+      massInputForm.addEventListener('submit', massInputFormSubmitHandler);
+
+      // mark initialized
+      element.classList.add(MASS_INPUT_INITIALIZED_CLASS);
+
+      return {
+        name: MASS_INPUT_UTIL_NAME,
+        element: element,
+        destroy: function() {},
+      };
+    }
+
+    function makeSubmitHandler(massInputForm) {
+      if (!HttpClient) {
+        throw new Error('HttpClient not found!');
+      }
+
+      var method = massInputForm.getAttribute('method') || 'POST';
+      var url = massInputForm.getAttribute('action') || window.location.href;
+      var enctype = massInputForm.getAttribute('enctype') || 'application/json';
+
+      var requestFn;
+      if (HttpClient[method.toLowerCase()]) {
+        requestFn = HttpClient[method.toLowerCase()];
+      }
+
+      return function(event) {
+        event.preventDefault();
+        var formData = new FormData(massInputForm);
+
+        var formBody = [];
+
+        for(var formField of formData) {
+          var encodedKey = encodeURIComponent(formField[0]);
+          var encodedValue = encodeURIComponent(formField[1]);
+          formBody.push(encodedKey + "=" + encodedValue);
+        }
+        var requestBody = formBody.join("&");
+
+        if (requestFn) {
+          requestFn(
+            url,
+            {
+              'Content-Type': enctype,
+              'Mass-Input-Shortcircuit': massInputId,
+              'Upgrade-Insecure-Requests': 1,
+            },
+            requestBody,
+          ).then(function(response) {
+            return response.text()
+          }).then(function(response) {
+            processResponse(response);
+          });
+        }
+      };
+    }
+
+    function processResponse(response) {
+      var responseElement = document.createElement('div');
+      responseElement.innerHTML = response;
+      var newWrapperContents = responseElement.querySelector('#' + massInputId);
+      element.innerHTML = newWrapperContents.innerHTML;
+
+      reset()
+
+      if (UtilRegistry) {
+        UtilRegistry.setupAll(element);
+      }
+    }
+
+    function reset() {
+      element.classList.remove(MASS_INPUT_INITIALIZED_CLASS);
+      massInputForm.removeEventListener('submit', massInputFormSubmitHandler)
+    }
+
+    return init();
+  };
+
+  // register mass input util
+  if (UtilRegistry) {
+    UtilRegistry.register({
+      name: MASS_INPUT_UTIL_NAME,
+      selector: MASS_INPUT_UTIL_SELECTOR,
+      setup: massInputUtil
+    });
+  }
+})();
diff --git a/templates/widgets/massinput/massinput.hamlet b/templates/widgets/massinput/massinput.hamlet
index 3dde7384d..9a8ef2534 100644
--- a/templates/widgets/massinput/massinput.hamlet
+++ b/templates/widgets/massinput/massinput.hamlet
@@ -1,5 +1,5 @@
 $newline never
-<div .massinput ##{fvId}>
+<div .massinput uw-mass-input ##{fvId}>
   #{csrf}
   ^{shapeInput}
   ^{miWidget}

From 965e3947f91a785054ee03cefe4eb910c3560164 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 23 Apr 2019 14:19:52 +0200
Subject: [PATCH 05/17] dont async handle massinput if from outside massinput
 element

---
 static/js/utils/massInput.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js
index 7b58bb625..9120f97d2 100644
--- a/static/js/utils/massInput.js
+++ b/static/js/utils/massInput.js
@@ -65,6 +65,13 @@
       }
 
       return function(event) {
+        // check if event occured from either a mass input add/delete button or
+        // from inside one of massinput's inputs (i.e. they are focused/active)
+        var activeElement = element.querySelector(':focus, :active');
+        if (!activeElement) {
+          return false;
+        }
+
         event.preventDefault();
         var formData = new FormData(massInputForm);
 
@@ -83,7 +90,6 @@
             {
               'Content-Type': enctype,
               'Mass-Input-Shortcircuit': massInputId,
-              'Upgrade-Insecure-Requests': 1,
             },
             requestBody,
           ).then(function(response) {

From c36dc6f2619f6dbcddfcecfbd08f5e6afc229243 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 23 Apr 2019 14:20:14 +0200
Subject: [PATCH 06/17] styling for mass input add/delete buttons

---
 messages/uniworx/de.msg                      | 8 ++++----
 templates/widgets/massinput/massinput.lucius | 8 ++++++++
 2 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 templates/widgets/massinput/massinput.lucius

diff --git a/messages/uniworx/de.msg b/messages/uniworx/de.msg
index c29f933d6..75e54f8d6 100644
--- a/messages/uniworx/de.msg
+++ b/messages/uniworx/de.msg
@@ -212,7 +212,7 @@ CorrectorAssignTitle: Korrektor zuweisen
 Unauthorized: Sie haben hierfür keine explizite Berechtigung.
 UnauthorizedAnd l@Text r@Text: (#{l} UND #{r})
 UnauthorizedOr  l@Text r@Text: (#{l} ODER #{r})
-UnauthorizedNoToken: Ihrer Anfrage war kein Authorisierungs-Token beigefügt. 
+UnauthorizedNoToken: Ihrer Anfrage war kein Authorisierungs-Token beigefügt.
 UnauthorizedTokenExpired: Ihr Authorisierungs-Token ist abgelaufen.
 UnauthorizedTokenNotStarted: Ihr Authorisierungs-Token ist noch nicht gültig.
 UnauthorizedTokenInvalid: Ihr Authorisierungs-Token konnte nicht verarbeitet werden.
@@ -760,8 +760,8 @@ DeleteConfirmationWrong: Bestätigung muss genau dem angezeigten Text entspreche
 
 DBTIRowsMissing n@Int: #{pluralDE n "Eine Zeile ist" "Einige Zeilen sind"} aus der Datenbank verschwunden, seit das Formular für Sie generiert wurde
 
-MassInputAddDimension: Hinzufügen
-MassInputDeleteCell: Entfernen
+MassInputAddDimension: +
+MassInputDeleteCell: -
 
 NavigationFavourites: Favoriten
 
@@ -792,4 +792,4 @@ CourseLecInviteExplanation: Sie wurden eingeladen, Verwalter für einen Kurs zu
 CorrectorInvitationAccepted shn@SheetName: Sie wurden als Korrektor für #{shn} eingetragen
 CorrectorInvitationDeclined shn@SheetName: Sie haben die Einladung, Korrektor für #{shn} zu werden, abgelehnt
 SheetCorrInviteHeading shn@SheetName: Einladung zum Korrektor für #{shn}
-SheetCorrInviteExplanation: Sie wurden eingeladen, Korrektor für ein Übungsblatt zu sein.
\ No newline at end of file
+SheetCorrInviteExplanation: Sie wurden eingeladen, Korrektor für ein Übungsblatt zu sein.
diff --git a/templates/widgets/massinput/massinput.lucius b/templates/widgets/massinput/massinput.lucius
new file mode 100644
index 000000000..a0d1208de
--- /dev/null
+++ b/templates/widgets/massinput/massinput.lucius
@@ -0,0 +1,8 @@
+.btn-mass-input-delete,
+.btn-mass-input-add {
+  background-color: #999;
+  min-width: auto;
+  padding: 5px 15px;
+  font-weight: 700;
+  font-size: 1.3rem;
+}

From bdd1878aed7c5da90dc7ecb972b3d6f675d7ab09 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 23 Apr 2019 14:25:37 +0200
Subject: [PATCH 07/17] fix styling for mass input buttons

---
 templates/widgets/massinput/massinput.lucius | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/widgets/massinput/massinput.lucius b/templates/widgets/massinput/massinput.lucius
index a0d1208de..6af5274b0 100644
--- a/templates/widgets/massinput/massinput.lucius
+++ b/templates/widgets/massinput/massinput.lucius
@@ -1,7 +1,7 @@
-.btn-mass-input-delete,
-.btn-mass-input-add {
+.btn.btn-mass-input-delete,
+.btn.btn-mass-input-add {
   background-color: #999;
-  min-width: auto;
+  min-width: 50px;
   padding: 5px 15px;
   font-weight: 700;
   font-size: 1.3rem;

From feb385b418a787ec8a0c495886b9ec5d84c22f19 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 23 Apr 2019 21:44:26 +0200
Subject: [PATCH 08/17] massinput js util cleanup

---
 static/js/utils/massInput.js | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js
index 9120f97d2..2e8b66863 100644
--- a/static/js/utils/massInput.js
+++ b/static/js/utils/massInput.js
@@ -37,7 +37,7 @@
         throw new Error('Mass Input utility cannot be setup without being wrapped in a <form>!');
       }
 
-      massInputFormSubmitHandler = makeSubmitHandler(massInputForm);
+      massInputFormSubmitHandler = makeSubmitHandler();
       massInputForm.addEventListener('submit', massInputFormSubmitHandler);
 
       // mark initialized
@@ -50,7 +50,7 @@
       };
     }
 
-    function makeSubmitHandler(massInputForm) {
+    function makeSubmitHandler() {
       if (!HttpClient) {
         throw new Error('HttpClient not found!');
       }
@@ -73,16 +73,7 @@
         }
 
         event.preventDefault();
-        var formData = new FormData(massInputForm);
-
-        var formBody = [];
-
-        for(var formField of formData) {
-          var encodedKey = encodeURIComponent(formField[0]);
-          var encodedValue = encodeURIComponent(formField[1]);
-          formBody.push(encodedKey + "=" + encodedValue);
-        }
-        var requestBody = formBody.join("&");
+        var requestBody = serializeForm();
 
         if (requestFn) {
           requestFn(
@@ -93,7 +84,7 @@
             },
             requestBody,
           ).then(function(response) {
-            return response.text()
+            return response.text();
           }).then(function(response) {
             processResponse(response);
           });
@@ -114,6 +105,19 @@
       }
     }
 
+    function serializeForm() {
+      var formData = new FormData(massInputForm);
+      var formBody = [];
+
+      for(var formField of formData) {
+        var encodedKey = encodeURIComponent(formField[0]);
+        var encodedValue = encodeURIComponent(formField[1]);
+        formBody.push(encodedKey + "=" + encodedValue);
+      }
+
+      return formBody.join("&");
+    }
+
     function reset() {
       element.classList.remove(MASS_INPUT_INITIALIZED_CLASS);
       massInputForm.removeEventListener('submit', massInputFormSubmitHandler)

From d2aa7e9e3724b459167adf78bcba2334b73eb28e Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 23 Apr 2019 22:00:33 +0200
Subject: [PATCH 09/17] update documentation for mass input js util

---
 static/js/utils/massInput.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js
index 2e8b66863..2ddbda70c 100644
--- a/static/js/utils/massInput.js
+++ b/static/js/utils/massInput.js
@@ -5,14 +5,19 @@
    *
    * Mass Input Utility
    *  allows form shapes to be manipulated asynchronously:
-   *  will asynchronously submit the form and replace the contents of the
-   *  mass input with the one from the BE response
+   *  will asynchronously submit the containing form and replace the contents
+   *  of the mass input element with the one from the BE response
+   *  The utility will only trigger an AJAX request if the mass input element has
+   *  an active/focused element whilst the form is being submitted.
    *
    * Attribute:   uw-mass-input
-   *   (will be set up automatically on tables)
    *
    * Example usage:
-   *  (table with one column thats only checkboxes)
+   *  <form method="POST" action="...">
+   *   <input type="text">
+   *   <div uw-mass-input>
+   *     <input type="text">
+   *     <button type="submit">
    */
 
   var MASS_INPUT_UTIL_NAME = 'massInput';

From 8b9843a321b39b2bb8ef92d1bc16cacee43bef9e Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Thu, 25 Apr 2019 11:15:24 +0200
Subject: [PATCH 10/17] properly handle response from async mass-input requests
 (after moving commits)

---
 static/js/utils/massInput.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js
index 2ddbda70c..302afd995 100644
--- a/static/js/utils/massInput.js
+++ b/static/js/utils/massInput.js
@@ -98,10 +98,7 @@
     }
 
     function processResponse(response) {
-      var responseElement = document.createElement('div');
-      responseElement.innerHTML = response;
-      var newWrapperContents = responseElement.querySelector('#' + massInputId);
-      element.innerHTML = newWrapperContents.innerHTML;
+      element.innerHTML = response;
 
       reset()
 

From 780c99259fb351579d09f38196dae8c9efe32b0b Mon Sep 17 00:00:00 2001
From: Gregor Kleen <kleen@cip.ifi.lmu.de>
Date: Sat, 4 May 2019 14:53:37 +0200
Subject: [PATCH 11/17] Working but incomplete

---
 static/js/utils/massInput.js | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js
index 302afd995..f048e2c93 100644
--- a/static/js/utils/massInput.js
+++ b/static/js/utils/massInput.js
@@ -30,6 +30,8 @@
     var massInputFormSubmitHandler;
     var massInputForm;
 
+    var massInputEnctype;
+
     function init() {
       if (!element) {
         throw new Error('Mass Input utility cannot be setup without an element!');
@@ -62,7 +64,7 @@
 
       var method = massInputForm.getAttribute('method') || 'POST';
       var url = massInputForm.getAttribute('action') || window.location.href;
-      var enctype = massInputForm.getAttribute('enctype') || 'application/json';
+      massInputEnctype = massInputForm.getAttribute('enctype') || 'application/json';
 
       var requestFn;
       if (HttpClient[method.toLowerCase()]) {
@@ -84,7 +86,7 @@
           requestFn(
             url,
             {
-              'Content-Type': enctype,
+              'Content-Type': massInputEnctype,
               'Mass-Input-Shortcircuit': massInputId,
             },
             requestBody,
@@ -109,15 +111,23 @@
 
     function serializeForm() {
       var formData = new FormData(massInputForm);
-      var formBody = [];
 
-      for(var formField of formData) {
-        var encodedKey = encodeURIComponent(formField[0]);
-        var encodedValue = encodeURIComponent(formField[1]);
-        formBody.push(encodedKey + "=" + encodedValue);
+      Array.from(element.querySelectorAll('button:focus, button:active')).forEach(function (el) {
+        if (!el.name || !el.value)
+          return;
+
+        console.log(el);
+
+        formData.append(el.name, el.value);
+      });
+
+      if (massInputEnctype === 'application/x-www-form-urlencoded') {
+        return new URLSearchParams(formData);
+      } else if (massInputEnctype === 'multipart/form-data') {
+        return formData;
+      } else {
+        throw new Error('Unsupported form enctype: ' + massInputEnctype);
       }
-
-      return formBody.join("&");
     }
 
     function reset() {

From 50b040dc41c85813bf67f47cf5efc4744eb20e3c Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 4 May 2019 16:44:33 +0200
Subject: [PATCH 12/17] more BEM like css classes for various mass inputs

---
 templates/course/lecturerMassInput/layout.hamlet | 4 ++--
 templates/sheetCorrectors/layout.hamlet          | 4 ++--
 templates/widgets/massinput/list/layout.hamlet   | 6 +++---
 templates/widgets/massinput/row.hamlet           | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/templates/course/lecturerMassInput/layout.hamlet b/templates/course/lecturerMassInput/layout.hamlet
index 8dc00bc90..223ed386e 100644
--- a/templates/course/lecturerMassInput/layout.hamlet
+++ b/templates/course/lecturerMassInput/layout.hamlet
@@ -2,10 +2,10 @@ $newline never
 <table>
   <tbody>
     $forall coord <- review liveCoords lLength
-      <tr .massinput--cell>
+      <tr .massinput__cell>
         ^{cellWdgts ! coord}
         <td>
           ^{fvInput (delButtons ! coord)}
   <tfoot>
-    <tr .massinput--add>
+    <tr .massinput__cell>
       ^{addWdgts ! (0, 0)}
diff --git a/templates/sheetCorrectors/layout.hamlet b/templates/sheetCorrectors/layout.hamlet
index 3f6bb4f87..bd28b651d 100644
--- a/templates/sheetCorrectors/layout.hamlet
+++ b/templates/sheetCorrectors/layout.hamlet
@@ -9,10 +9,10 @@ $newline never
       <td>
   <tbody>
     $forall coord <- review liveCoords lLength
-      <tr .massinput--cell .table__row>
+      <tr .massinput__cell .table__row>
         ^{cellWdgts ! coord}
         <td>
           ^{fvInput (delButtons ! coord)}
   <tfoot>
-    <tr .massinput--add>
+    <tr .massinput__cell>
       ^{addWdgts ! (0, 0)}
diff --git a/templates/widgets/massinput/list/layout.hamlet b/templates/widgets/massinput/list/layout.hamlet
index 5f5676bb6..5c747e041 100644
--- a/templates/widgets/massinput/list/layout.hamlet
+++ b/templates/widgets/massinput/list/layout.hamlet
@@ -1,14 +1,14 @@
 $newline never
 <table>
   <tbody>
-    <tr .massinput--cell>
+    <tr .massinput__cell>
       $forall coord <- review liveCoords lLength
         <td>
           ^{cellWdgts ! coord}
         <td>
           ^{fvInput (delButtons ! coord)}
   <tfoot>
-    <tr>
+    <tr .massinput__cell>
+      <td>
       <td>
-      <td .massinput--add>
         ^{addWdgts ! (0, 0)}
diff --git a/templates/widgets/massinput/row.hamlet b/templates/widgets/massinput/row.hamlet
index 8c43c9896..17d909baa 100644
--- a/templates/widgets/massinput/row.hamlet
+++ b/templates/widgets/massinput/row.hamlet
@@ -1,7 +1,7 @@
-<ul .massinput--row .#{"massinput--dim" <> toPathPiece dimIx}>
+<ul .massinput__row .#{"massinput--dim" <> toPathPiece dimIx}>
   $forall (cellCoord, cell) <- cells
-    <li .massinput--cell data-massinput-coord=#{toPathPiece cellCoord}>
+    <li .massinput__cell data-massinput-coord=#{toPathPiece cellCoord}>
       ^{cell}
   $maybe add <- addWidget
-    <li .massinput--add>
+    <li .massinput__cell>
       ^{add}

From e77df3063223613ee58a6aacef4501f0de4e7945 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 4 May 2019 16:46:16 +0200
Subject: [PATCH 13/17] more robust mass input form data handling

---
 static/js/utils/massInput.js | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js
index f048e2c93..a861c1c75 100644
--- a/static/js/utils/massInput.js
+++ b/static/js/utils/massInput.js
@@ -23,6 +23,7 @@
   var MASS_INPUT_UTIL_NAME = 'massInput';
   var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]';
 
+  var MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
   var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized';
 
   var massInputUtil = function(element) {
@@ -30,8 +31,6 @@
     var massInputFormSubmitHandler;
     var massInputForm;
 
-    var massInputEnctype;
-
     function init() {
       if (!element) {
         throw new Error('Mass Input utility cannot be setup without an element!');
@@ -64,7 +63,7 @@
 
       var method = massInputForm.getAttribute('method') || 'POST';
       var url = massInputForm.getAttribute('action') || window.location.href;
-      massInputEnctype = massInputForm.getAttribute('enctype') || 'application/json';
+      var enctype = massInputForm.getAttribute('enctype') || 'application/json';
 
       var requestFn;
       if (HttpClient[method.toLowerCase()]) {
@@ -79,14 +78,17 @@
           return false;
         }
 
+        // find the according massinput cell thats hosts the element that triggered the submit
+        var massInputCell = activeElement.closest(MASS_INPUT_CELL_SELECTOR);
+
         event.preventDefault();
-        var requestBody = serializeForm();
+        var requestBody = serializeForm(massInputCell, enctype);
 
         if (requestFn) {
           requestFn(
             url,
             {
-              'Content-Type': massInputEnctype,
+              'Content-Type': enctype,
               'Mass-Input-Shortcircuit': massInputId,
             },
             requestBody,
@@ -109,24 +111,23 @@
       }
     }
 
-    function serializeForm() {
+    function serializeForm(massInputCell, enctype) {
       var formData = new FormData(massInputForm);
 
-      Array.from(element.querySelectorAll('button:focus, button:active')).forEach(function (el) {
-        if (!el.name || !el.value)
-          return;
+      // manually add name and value of submit button to formData
+      if (massInputCell) {
+        var submitButton = massInputCell.querySelector('button[type="submit"][name][value]');
+        if (submitButton) {
+          formData.append(submitButton.name, submitButton.value);
+        }
+      }
 
-        console.log(el);
-
-        formData.append(el.name, el.value);
-      });
-
-      if (massInputEnctype === 'application/x-www-form-urlencoded') {
+      if (enctype === 'application/x-www-form-urlencoded') {
         return new URLSearchParams(formData);
-      } else if (massInputEnctype === 'multipart/form-data') {
+      } else if (enctype === 'multipart/form-data') {
         return formData;
       } else {
-        throw new Error('Unsupported form enctype: ' + massInputEnctype);
+        throw new Error('Unsupported form enctype: ' + enctype);
       }
     }
 

From 8381a065b6db85ffc7f03011a6289e0a3a157800 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 4 May 2019 21:09:13 +0200
Subject: [PATCH 14/17] mark mass input add cells via css class

---
 templates/course/lecturerMassInput/layout.hamlet | 2 +-
 templates/sheetCorrectors/layout.hamlet          | 2 +-
 templates/widgets/massinput/list/layout.hamlet   | 2 +-
 templates/widgets/massinput/row.hamlet           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/course/lecturerMassInput/layout.hamlet b/templates/course/lecturerMassInput/layout.hamlet
index 223ed386e..65352dd95 100644
--- a/templates/course/lecturerMassInput/layout.hamlet
+++ b/templates/course/lecturerMassInput/layout.hamlet
@@ -7,5 +7,5 @@ $newline never
         <td>
           ^{fvInput (delButtons ! coord)}
   <tfoot>
-    <tr .massinput__cell>
+    <tr .massinput__cell.massinput__cell--add>
       ^{addWdgts ! (0, 0)}
diff --git a/templates/sheetCorrectors/layout.hamlet b/templates/sheetCorrectors/layout.hamlet
index bd28b651d..172f813f8 100644
--- a/templates/sheetCorrectors/layout.hamlet
+++ b/templates/sheetCorrectors/layout.hamlet
@@ -14,5 +14,5 @@ $newline never
         <td>
           ^{fvInput (delButtons ! coord)}
   <tfoot>
-    <tr .massinput__cell>
+    <tr .massinput__cell.massinput__cell--add>
       ^{addWdgts ! (0, 0)}
diff --git a/templates/widgets/massinput/list/layout.hamlet b/templates/widgets/massinput/list/layout.hamlet
index 5c747e041..0af005b4e 100644
--- a/templates/widgets/massinput/list/layout.hamlet
+++ b/templates/widgets/massinput/list/layout.hamlet
@@ -8,7 +8,7 @@ $newline never
         <td>
           ^{fvInput (delButtons ! coord)}
   <tfoot>
-    <tr .massinput__cell>
+    <tr .massinput__cell.massinput__cell--add>
       <td>
       <td>
         ^{addWdgts ! (0, 0)}
diff --git a/templates/widgets/massinput/row.hamlet b/templates/widgets/massinput/row.hamlet
index 17d909baa..f26de8b05 100644
--- a/templates/widgets/massinput/row.hamlet
+++ b/templates/widgets/massinput/row.hamlet
@@ -3,5 +3,5 @@
     <li .massinput__cell data-massinput-coord=#{toPathPiece cellCoord}>
       ^{cell}
   $maybe add <- addWidget
-    <li .massinput__cell>
+    <li .massinput__cell.massinput__cell--add>
       ^{add}

From 34c5134d97ec07af8dd91c423397623f772adf04 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 4 May 2019 21:13:09 +0200
Subject: [PATCH 15/17] make mass input more accessible with more checks on
 form submit events

---
 static/js/utils/massInput.js | 52 +++++++++++++++++++++++++++++-------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js
index a861c1c75..bf17cedc9 100644
--- a/static/js/utils/massInput.js
+++ b/static/js/utils/massInput.js
@@ -24,6 +24,7 @@
   var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]';
 
   var MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
+  var MASS_INPUT_ADD_CELL_SELECTOR = '.massinput__cell--add';
   var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized';
 
   var massInputUtil = function(element) {
@@ -52,7 +53,9 @@
       return {
         name: MASS_INPUT_UTIL_NAME,
         element: element,
-        destroy: function() {},
+        destroy: function() {
+          reset();
+        },
       };
     }
 
@@ -80,11 +83,26 @@
 
         // find the according massinput cell thats hosts the element that triggered the submit
         var massInputCell = activeElement.closest(MASS_INPUT_CELL_SELECTOR);
+        if (!massInputCell) {
+          return false;
+        }
+
+        var submitButton = massInputCell.querySelector('button[type="submit"][name][value]');
+        if (!submitButton) {
+          return false;
+        }
+
+        var isAddCell = massInputCell.matches(MASS_INPUT_ADD_CELL_SELECTOR);
+        var submitButtonIsActive = submitButton.matches(':focus, :active');
+        // if the cell is not an add cell the active element must at least be the cells submit button
+        if (!isAddCell && !submitButtonIsActive) {
+          return false;
+        }
 
         event.preventDefault();
-        var requestBody = serializeForm(massInputCell, enctype);
+        var requestBody = serializeForm(submitButton, enctype);
 
-        if (requestFn) {
+        if (requestFn && requestBody) {
           requestFn(
             url,
             {
@@ -96,6 +114,9 @@
             return response.text();
           }).then(function(response) {
             processResponse(response);
+            if (isAddCell) {
+              reFocusAddCell();
+            }
           });
         }
       };
@@ -111,16 +132,11 @@
       }
     }
 
-    function serializeForm(massInputCell, enctype) {
+    function serializeForm(submitButton, enctype) {
       var formData = new FormData(massInputForm);
 
       // manually add name and value of submit button to formData
-      if (massInputCell) {
-        var submitButton = massInputCell.querySelector('button[type="submit"][name][value]');
-        if (submitButton) {
-          formData.append(submitButton.name, submitButton.value);
-        }
-      }
+      formData.append(submitButton.name, submitButton.value);
 
       if (enctype === 'application/x-www-form-urlencoded') {
         return new URLSearchParams(formData);
@@ -131,6 +147,22 @@
       }
     }
 
+    function reFocusAddCell() {
+      var addCell = element.querySelector(MASS_INPUT_ADD_CELL_SELECTOR);
+      if (!addCell) {
+        return false;
+      }
+
+      var addCellInput = addCell.querySelector('input:not([type="hidden"])');
+      if (addCellInput) {
+        // clear the inputs value
+        // TBD: make this work for checkboxes and radioboxes
+        // where the value should not be cleared
+        addCellInput.value = '';
+        addCellInput.focus();
+      }
+    }
+
     function reset() {
       element.classList.remove(MASS_INPUT_INITIALIZED_CLASS);
       massInputForm.removeEventListener('submit', massInputFormSubmitHandler)

From f37cecf8c2de5f4ab85e604b9e0142da6089d921 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 4 May 2019 21:44:59 +0200
Subject: [PATCH 16/17] adjust communiation templates for massinput
 requirements

---
 templates/widgets/communication/recipientAdd.hamlet   | 2 +-
 templates/widgets/communication/recipientEmail.hamlet | 2 +-
 templates/widgets/communication/recipientName.hamlet  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/widgets/communication/recipientAdd.hamlet b/templates/widgets/communication/recipientAdd.hamlet
index 3c99d2964..086224486 100644
--- a/templates/widgets/communication/recipientAdd.hamlet
+++ b/templates/widgets/communication/recipientAdd.hamlet
@@ -1,5 +1,5 @@
 $newline never
-<div .recipient-category__option-add>
+<div .recipient-category__option-add.massinput__cell.massinput__cell--add>
   #{csrf}
   ^{fvInput addView}
   ^{fvInput submitView}
diff --git a/templates/widgets/communication/recipientEmail.hamlet b/templates/widgets/communication/recipientEmail.hamlet
index 5290fcef2..a3c4f711b 100644
--- a/templates/widgets/communication/recipientEmail.hamlet
+++ b/templates/widgets/communication/recipientEmail.hamlet
@@ -1,5 +1,5 @@
 $newline never
-<div .recipient-category__option>
+<div .recipient-category__option.massinput__cell>
   #{csrf}
   ^{fvInput tickView}
   <label .recipient-category__option-label for=#{fvId tickView}>
diff --git a/templates/widgets/communication/recipientName.hamlet b/templates/widgets/communication/recipientName.hamlet
index 96b650b0d..4dd5ee014 100644
--- a/templates/widgets/communication/recipientName.hamlet
+++ b/templates/widgets/communication/recipientName.hamlet
@@ -1,5 +1,5 @@
 $newline never
-<div .recipient-category__option>
+<div .recipient-category__option.massinput__cell>
   #{csrf}
   ^{fvInput tickView}
   <label .recipient-category__option-label for=#{fvId tickView}>

From d06bfe07d09bfdc973d520e1b9eba9ccae8e58cb Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 4 May 2019 22:00:19 +0200
Subject: [PATCH 17/17] prefix input ids in massinput response

---
 static/js/utils/massInput.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js
index bf17cedc9..fa8e075bf 100644
--- a/static/js/utils/massInput.js
+++ b/static/js/utils/massInput.js
@@ -125,6 +125,7 @@
     function processResponse(response) {
       element.innerHTML = response;
 
+      prefixInputIds();
       reset()
 
       if (UtilRegistry) {
@@ -132,6 +133,16 @@
       }
     }
 
+    function prefixInputIds() {
+      var idAttrs = ['id', 'for', 'data-conditional-input'];
+      idAttrs.forEach(function(attr) {
+        Array.from(element.querySelectorAll('[' + attr + ']')).forEach(function(input) {
+          var value = element.id + '__' + input.getAttribute(attr);
+          input.setAttribute(attr, value);
+        });
+      });
+    }
+
     function serializeForm(submitButton, enctype) {
       var formData = new FormData(massInputForm);