Use simple-form for search and set style

5 files changed, 36 insertions, 17 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" ]