Use simple-form for search and set style

10 files changed, 74 insertions, 35 deletions

diff --git a/src/client/elm/LoggedIn/Home/Model.elm b/src/client/elm/LoggedIn/Home/Model.elm
index 0a2b305..a653995 100644
--- a/src/client/elm/LoggedIn/Home/Model.elm
+++ b/src/client/elm/LoggedIn/Home/Model.elm
@@ -3,6 +3,9 @@ module LoggedIn.Home.Model exposing
   , init
   )
 
+import Form exposing (Form)
+import Form.Validate as Validate exposing (Validation)
+
 import Model.User exposing (Users, UserId)
 import Model.Payment exposing (PaymentId, Payments, Frequency(..))
 import Model.Payer exposing (Payers)
@@ -14,7 +17,11 @@ type alias Model =
   , paymentEdition : Maybe PaymentId
   , currentPage : Int
   , monthlyDetail : Bool
-  , search : String
+  , search : Form String Search
+  }
+
+type alias Search =
+  { searchText : Maybe String
   }
 
 init : Model
@@ -23,5 +30,10 @@ init =
   , paymentEdition = Nothing
   , currentPage = 1
   , monthlyDetail = False
-  , search = ""
+  , search = Form.initial [] validate
   }
+
+validate : Validation String Search
+validate =
+  Validate.form1 Search
+    (Validate.get "searchText" (Validate.maybe Validate.string))
diff --git a/src/client/elm/LoggedIn/Home/Msg.elm b/src/client/elm/LoggedIn/Home/Msg.elm
index 0791df0..17a88f8 100644
--- a/src/client/elm/LoggedIn/Home/Msg.elm
+++ b/src/client/elm/LoggedIn/Home/Msg.elm
@@ -2,6 +2,8 @@ module LoggedIn.Home.Msg exposing
   ( Msg(..)
   )
 
+import Form exposing (Form)
+
 import Model.Payment exposing (PaymentId)
 
 import LoggedIn.Home.AddPayment.Msg as AddPaymentMsg
@@ -13,4 +15,4 @@ type Msg =
   | UpdatePage Int
   | ShowMonthlyDetail
   | ToggleMonthlyDetail
-  | UpdateSearch String
+  | SearchMsg Form.Msg
diff --git a/src/client/elm/LoggedIn/Home/Update.elm b/src/client/elm/LoggedIn/Home/Update.elm
index 3b62abf..302509f 100644
--- a/src/client/elm/LoggedIn/Home/Update.elm
+++ b/src/client/elm/LoggedIn/Home/Update.elm
@@ -2,6 +2,8 @@ module LoggedIn.Home.Update exposing
   ( update
   )
 
+import Form exposing (Form)
+
 import LoggedData exposing (LoggedData)
 
 import LoggedIn.Home.Msg as HomeMsg
@@ -40,9 +42,9 @@ update loggedData action homeModel =
       , Cmd.none
       )
 
-    HomeMsg.UpdateSearch search ->
+    HomeMsg.SearchMsg formMsg ->
       ( { homeModel
-        | search = search
+        | search = Form.update formMsg homeModel.search
         , currentPage = 1
         }
       , Cmd.none
diff --git a/src/client/elm/LoggedIn/Home/View.elm b/src/client/elm/LoggedIn/Home/View.elm
index 213e4ab..5ed54b9 100644
--- a/src/client/elm/LoggedIn/Home/View.elm
+++ b/src/client/elm/LoggedIn/Home/View.elm
@@ -6,6 +6,8 @@ import Html exposing (..)
 import Html.Attributes exposing (..)
 import Date
 
+import Form
+
 import Msg exposing (Msg)
 
 import LoggedData exposing (LoggedData)
@@ -22,7 +24,11 @@ import LoggedIn.Home.View.Paging exposing (paymentsPaging)
 
 view : LoggedData -> LoggedInModel.Model -> Html Msg
 view loggedData loggedIn =
-  let punctualPayments = Payment.sortedFiltredPunctual loggedIn.search loggedData.payments
+  let searchText =
+        Form.getFieldAsString "searchText" loggedIn.search
+          |> .value
+          |> Maybe.withDefault ""
+      punctualPayments = Payment.sortedFiltredPunctual searchText loggedData.payments
   in  div
         [ class "home" ]
         [ AddPaymentView.view loggedData loggedIn
diff --git a/src/client/elm/LoggedIn/Home/View/Search.elm b/src/client/elm/LoggedIn/Home/View/Search.elm
index a4f727a..62db1b2 100644
--- a/src/client/elm/LoggedIn/Home/View/Search.elm
+++ b/src/client/elm/LoggedIn/Home/View/Search.elm
@@ -5,6 +5,10 @@ module LoggedIn.Home.View.Search exposing
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
+import Html.App as Html
+
+import Form exposing (Form)
+import View.Form as Form
 
 import Msg exposing (Msg)
 import LoggedIn.Msg as LoggedInMsg
@@ -16,14 +20,7 @@ import Model.Translations exposing (getMessage)
 
 paymentsSearch : LoggedData -> HomeModel.Model -> Html Msg
 paymentsSearch loggedData { search } =
-  Html.div
-    [ class "search" ]
-    [ span
-        [ class "label" ]
-        [ text (getMessage "Search" loggedData.translations) ]
-    , input
-        [ value search
-        , onInput (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdateSearch)
-        ]
-        []
-    ]
+  let htmlMap = Html.map (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.SearchMsg)
+  in  Html.div
+        [ class "search" ]
+        [ Form.textInput loggedData.translations search htmlMap "searchText" ]
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) []
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index bb7d7db..2ad6a9c 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -8,10 +8,7 @@ import Data.Monoid ((<>))
 
 import Clay
 
--- import Design.Constants
 import Design.Color as Color
--- import qualified Design.Media as Media
-
 
 design :: Css
 design = do
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 864add0..68cff68 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -26,7 +26,7 @@ global = do
   header ? HeaderDesign.design
   ".signIn" ? SignInDesign.design
   ".loggedIn" ? LoggedInDesign.design
-  form ? Form.design
+  Form.design
 
   allKeyframes
 
diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs
index d34eea3..4ef8663 100644
--- a/src/server/Model/Message/Key.hs
+++ b/src/server/Model/Message/Key.hs
@@ -63,7 +63,7 @@ data Key =
   | PaymentsTitle
   | Payment
   | Payments
-  | Search
+  | SearchText
 
   -- Statistics
 
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 2060611..c7a2043 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -240,7 +240,7 @@ m l Payment =
     English -> "payment"
     French  -> "paiement"
 
-m l Search =
+m l SearchText =
   case l of
     English -> "Search"
     French  -> "Recherche"