Use simple-form for search and set style

1 files changed, 35 insertions, 12 deletions

diff --git a/src/client/elm/View/Form.elm b/src/client/elm/View/Form.elm
index fd21a2c..a85ba8a 100644
--- a/src/client/elm/View/Form.elm
+++ b/src/client/elm/View/Form.elm
@@ -36,18 +36,41 @@ textInput translations form htmlMap fieldName =
             [ for fieldName ]
             [ text (Translations.getMessage fieldName translations) ]
         , case field.liveError of
-            Just error -> errorElement translations error
+            Just error -> formError translations error
             Nothing -> text ""
         ]
 
-errorElement : Translations -> FormError.Error String -> Html msg
-errorElement translations error =
-  case error of
-    CustomError key ->
-      div [ class "errorMessage" ] [ text (Translations.getMessage key translations) ]
-    SmallerIntThan n ->
-      div [ class "errorMessage" ] [ text (Translations.getParamMessage [toString n] "SmallerIntThan" translations) ]
-    GreaterIntThan n ->
-      div [ class "errorMessage" ] [ text (Translations.getParamMessage [toString n] "GreaterIntThan" translations) ]
-    error ->
-      div [ class "errorMessage" ] [ text (Translations.getMessage (toString error) translations) ]
+simpleTextInput : Translations -> Form String a -> (Html Form.Msg -> Html msg) -> String -> Html msg
+simpleTextInput translations form htmlMap fieldName =
+  let field = Form.getFieldAsString fieldName form
+  in  div
+        [ classList
+            [ ("textInput", True)
+            , ("error", isJust field.liveError)
+            ]
+        ]
+        [ htmlMap <|
+            Input.textInput
+              field
+              [ id fieldName
+              , classList [ ("filled", isJust field.value) ]
+              ]
+        , label
+            [ for fieldName ]
+            [ text (Translations.getMessage fieldName translations) ]
+        , case field.liveError of
+            Just error -> formError translations error
+            Nothing -> text ""
+        ]
+
+formError : Translations -> FormError.Error String -> Html msg
+formError translations error =
+  let errorElement error params =
+        div
+          [ class "errorMessage" ]
+          [ text (Translations.getParamMessage params error translations) ]
+  in  case error of
+        CustomError key -> errorElement key []
+        SmallerIntThan n -> errorElement "SmallerIntThan" [toString n]
+        GreaterIntThan n -> errorElement "GreaterIntThan" [toString n]
+        error -> errorElement (toString error) []