From b430eba9da7d26a258c1baf97a87b652767c2827 Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Sun, 5 May 2019 18:24:57 +0200 Subject: [PATCH] Fix tutorial massinputs --- src/Handler/Utils/Form/MassInput.hs | 7 +-- static/js/utils/form.js | 71 ++++++++++++++++++++++++++++- static/js/utils/massInput.js | 5 +- templates/default-layout.julius | 41 ----------------- 4 files changed, 75 insertions(+), 49 deletions(-) diff --git a/src/Handler/Utils/Form/MassInput.hs b/src/Handler/Utils/Form/MassInput.hs index 664b0f3c7..abec6f300 100644 --- a/src/Handler/Utils/Form/MassInput.hs +++ b/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 miCoord dimIx nudgeAddWidgetName btnView + miAdd' = traverse ($ mempty) $ 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' diff --git a/static/js/utils/form.js b/static/js/utils/form.js index 4c77f8621..4312b5099 100644 --- a/static/js/utils/form.js +++ b/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); diff --git a/static/js/utils/massInput.js b/static/js/utils/massInput.js index 8e15a4f79..6e18b118d 100644 --- a/static/js/utils/massInput.js +++ b/static/js/utils/massInput.js @@ -191,10 +191,7 @@ 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 = ''; + // Clearing of add-inputs is done in the backend addCellInput.focus(); } } diff --git a/templates/default-layout.julius b/templates/default-layout.julius index 8c7295843..a61ccc7e9 100644 --- a/templates/default-layout.julius +++ b/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); -});