Fix tutorial massinputs

src/Handler/Utils/Form/MassInput.hs

@@ -23,7 +23,7 @@ import Handler.Utils.Form.MassInput.TH
 
 import Data.Aeson
 
-import Algebra.Lattice
+import Algebra.Lattice hiding (join)
 
 import Text.Blaze (Markup)
 
@@ -317,8 +317,9 @@ massInput MassInput{ miIdent = toPathPiece -> miIdent, ..} FieldSettings{..} fvR
                 wBtnRes res = do
                   guard $ isn't _FormMissing btnRes
                   res
-            addRes' <- over (mapped . _Just . _1) wBtnRes . local (bool id (set _1 Nothing) $ is _FormMissing btnRes) . traverse ($ mempty) $
+                miAdd' = traverse ($ mempty) $ miAdd miCoord dimIx nudgeAddWidgetName btnView
-                  miAdd miCoord dimIx nudgeAddWidgetName btnView
+            addRes'' <- miAdd' & mapped . _Just . _1 %~ wBtnRes
+            addRes' <- fmap join . for addRes'' $ bool (return . Just) (\(res, _view) -> set (_Just . _1) res <$> local (set _1 Nothing) miAdd') (is (_Just . _FormSuccess) (fst <$> addRes'') || is _FormMissing btnRes)
             let dimRes' = Map.singleton (dimIx, miCoord) (maybe (Nothing <$ btnRes) (fmap Just) $ fmap fst addRes', fmap snd addRes')
             case remDims of
               [] -> return dimRes'

static/js/utils/form.js

@@ -221,7 +221,6 @@
       childInputs.forEach(function(el) {
         el.disabled = !active;
         if (el._flatpickr) {
-          console.log("Flatpickr in childInputs", el, el._flatpickr.altInput);
           el._flatpickr.altInput.disabled = !active;
         }
       });
@@ -356,6 +355,76 @@
     setup: formErrorRemoverUtil,
   });
 
+  /**
+   *
+   * Datepicker Utility
+   *  Provides UI for entering dates and times
+   *
+   * Attribute: [none]
+   *  (automatically setup on all relevant input tags)
+   *
+   * Example usage:
+   *  (any form that uses inputs of type date, time, or datetime-local)
+   */
+
+  var DATEPICKER_UTIL_NAME = 'datepicker';
+  var DATEPICKER_UTIL_SELECTOR = 'input[type="date"], input[type="time"], input[type="datetime-local"]';
+
+  var DATEPICKER_CONFIG = {
+    "datetime-local": {
+      enableTime: true,
+      altInput: true,
+      altFormat: "j. F Y, H:i", // maybe interpolate these formats for locale
+      dateFormat: "Y-m-dTH:i",
+      time_24hr: true
+    },
+    "date": {
+      altFormat: "j. F Y",
+      dateFormat: "Y-m-d",
+      altInput: true
+    },
+    "time": {
+      enableTime: true,
+      noCalendar: true,
+      altFormat: "H:i",
+      dateFormat: "H:i",
+      altInput: true,
+      time_24hr: true
+    }
+  };
+
+  var datepickerUtil = function(element) {
+    var flatpickrInstance;
+
+    function init() {
+      if (!element) {
+        throw new Error('Datepicker utility needs to be passed an element!');
+      }
+
+      var flatpickrConfig = DATEPICKER_CONFIG[element.getAttribute("type")];
+
+      if (!flatpickrConfig) {
+        throw new Error('Datepicker utility called on unsupported element!');
+      }
+
+      flatpickrInstance = flatpickr(element, flatpickrConfig);
+
+      return {
+        name: DATEPICKER_UTIL_NAME,
+        element: element,
+        destroy: function() { flatpickrInstance.destroy(); },
+      };
+    }
+
+    return init();   
+  };
+
+  formUtilities.push({
+    name: DATEPICKER_UTIL_NAME,
+    selector: DATEPICKER_UTIL_SELECTOR,
+    setup: datepickerUtil,
+  });
+
   // register the collected form utilities
   if (UtilRegistry) {
     formUtilities.forEach(UtilRegistry.register);

static/js/utils/massInput.js

@@ -191,10 +191,7 @@
 
       var addCellInput = addCell.querySelector('input:not([type="hidden"])');
       if (addCellInput) {
-        // clear the inputs value
+        // Clearing of add-inputs is done in the backend
-        // TBD: make this work for checkboxes and radioboxes
-        // where the value should not be cleared
-        addCellInput.value = '';
         addCellInput.focus();
       }
     }

templates/default-layout.julius

@@ -1,46 +1,5 @@
-function setupDatepicker(wrapper) {
-  "use strict";
-
-  var config = {
-    dtLocal: {
-      enableTime: true,
-      altInput: true,
-      altFormat: "j. F Y, H:i", // maybe interpolate these formats for locale
-      dateFormat: "Y-m-dTH:i",
-      time_24hr: true
-    },
-    d: {
-      altFormat: "j. F Y",
-      dateFormat: "Y-m-d",
-      altInput: true
-    },
-    t: {
-      enableTime: true,
-      noCalendar: true,
-      altFormat: "H:i",
-      dateFormat: "H:i",
-      altInput: true,
-      time_24hr: true
-    }
-  };
-
-  Array.from(wrapper.querySelectorAll('input[type="date"]')).forEach(function(el) {
-    flatpickr(el, config.d);
-  });
-  Array.from(wrapper.querySelectorAll('input[type="time"]')).forEach(function(el) {
-    flatpickr(el, config.t);
-  });
-  Array.from(wrapper.querySelectorAll('input[type="datetime-local"]')).forEach(function(el) {
-    flatpickr(el, config.dtLocal);
-  });
-}
-
 if (I18n) {
   I18n.addMany(#{frontendI18n});
 } else {
   throw new Error('I18n JavaScript service is missing!');
 }
-
-document.addEventListener('DOMContentLoaded', function() {
-  setupDatepicker(document.body);
-});