summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2019-11-11 11:12:10 +0100
committerYorhel <git@yorhel.nl>2019-11-11 11:12:10 +0100
commite525c5fb92612e5459ab04b1c010fb88a3dfa22a (patch)
tree85e841d41ff44d16492ed673e50b96ab41a5fc26
parent16697bcd035c73ade100df23bcb920bd8cff316f (diff)
ulist: Improve date editing experience for browsers that fall back to a text field
-rw-r--r--elm/UList/DateEdit.elm13
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 ]
]