diff options
author | Yorhel <git@yorhel.nl> | 2019-11-11 11:12:10 +0100 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2019-11-11 11:12:10 +0100 |
commit | e525c5fb92612e5459ab04b1c010fb88a3dfa22a (patch) | |
tree | 85e841d41ff44d16492ed673e50b96ab41a5fc26 | |
parent | 16697bcd035c73ade100df23bcb920bd8cff316f (diff) |
ulist: Improve date editing experience for browsers that fall back to a text field
-rw-r--r-- | elm/UList/DateEdit.elm | 13 |
1 files changed, 8 insertions, 5 deletions
diff --git a/elm/UList/DateEdit.elm b/elm/UList/DateEdit.elm index 0c16a8c4..5ec01edd 100644 --- a/elm/UList/DateEdit.elm +++ b/elm/UList/DateEdit.elm @@ -6,6 +6,7 @@ import Html.Events exposing (..) import Task import Process import Browser +import Lib.Html exposing (..) import Lib.Api as Api import Gen.Api as GApi import Gen.UListDateEdit as GDE @@ -23,6 +24,7 @@ type alias Model = { state : Api.State , flags : GDE.Send , val : String + , valid : Bool , debnum : Int -- Debounce for submit , visible : Bool } @@ -32,13 +34,14 @@ init f = { state = Api.Normal , flags = f , val = f.date + , valid = True , debnum = 0 , visible = False } type Msg = Show - | Val String + | Val String Bool | Save Int | Saved GApi.Response @@ -46,11 +49,11 @@ type Msg update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of - Show -> ({ model | visible = True }, Cmd.none) - Val s -> ({ model | val = s, debnum = model.debnum + 1 }, Task.perform (\_ -> Save (model.debnum+1)) <| Process.sleep 500) + Show -> ({ model | visible = True }, Cmd.none) + Val s b -> ({ model | valid = b, val = s, debnum = model.debnum + 1 }, Task.perform (\_ -> Save (model.debnum+1)) <| Process.sleep 300) Save n -> - if n /= model.debnum || model.val == model.flags.date + if n /= model.debnum || model.val == model.flags.date || not model.valid then (model, Cmd.none) else ( { model | state = Api.Loading, debnum = model.debnum+1 } , Api.post "/u/ulist/setdate.json" (GDE.encode { uid = model.flags.uid, vid = model.flags.vid, start = model.flags.start, date = model.val }) Saved ) @@ -69,7 +72,7 @@ view model = div (class "compact" :: if model.visible then [] else [onMouseOver Api.Error _ -> [ b [ class "standout" ] [ text "error" ] ] -- Argh Api.Normal -> [ if model.visible - then input ([ type_ "date", class "text", value model.val, onInput Val, onBlur (Save model.debnum), pattern "yyyy-mm-dd" ] ++ GDE.valDate) [] + then input ([ type_ "date", class "text", value model.val, onInputValidation Val, onBlur (Save model.debnum), placeholder "yyyy-mm-dd" ] ++ GDE.valDate) [] else text "" , span [] [ text model.val ] ] |