Design income form

2 files changed, 38 insertions, 52 deletions

diff --git a/src/client/elm/LoggedIn/Income/Model.elm b/src/client/elm/LoggedIn/Income/Model.elm
index bc09f0e..873eaf1 100644
--- a/src/client/elm/LoggedIn/Income/Model.elm
+++ b/src/client/elm/LoggedIn/Income/Model.elm
@@ -5,20 +5,20 @@ module LoggedIn.Income.Model exposing
   )
 
 import String exposing (toInt, split)
-import Date exposing (Date)
+import Date
+import Time exposing (Time)
 import Date.Extra.Create exposing (dateFromFields)
-import Utils.Date exposing (numToMonth)
+import Date.Extra.Core exposing (intToMonth)
 
 import Form exposing (Form)
 import Form.Validate as Validate exposing (..)
-import Form.Error exposing (Error(InvalidString))
 
 type alias Model =
-  { addIncome : Form () AddIncome
+  { addIncome : Form String AddIncome
   }
 
 type alias AddIncome =
-  { creation : Date
+  { time : Time
   , amount : Int
   }
 
@@ -27,20 +27,20 @@ init =
   { addIncome = Form.initial [] validate
   }
 
-validate : Validation () AddIncome
+validate : Validation String AddIncome
 validate =
   form2 AddIncome
-    (get "creation" dateValidation)
+    (get "creation" timeValidation)
     (get "amount" (int `andThen` (minInt 1)))
 
-dateValidation : Validation () Date
-dateValidation =
+timeValidation : Validation String Time
+timeValidation =
   customValidation string (\str ->
     case split "/" str of
       [day, month, year] ->
         case (toInt day, toInt month, toInt year) of
           (Ok dayNum, Ok monthNum, Ok yearNum) ->
-            Ok (dateFromFields yearNum (numToMonth monthNum) dayNum 0 0 0 0)
-          _ -> Err InvalidString
-      _ -> Err InvalidString
+            Ok (Date.toTime (dateFromFields yearNum (intToMonth monthNum) dayNum 0 0 0 0))
+          _ -> Err (customError "InvalidDate")
+      _ -> Err (customError "InvalidDate")
   )
diff --git a/src/client/elm/LoggedIn/Income/View.elm b/src/client/elm/LoggedIn/Income/View.elm
index 036cd80..d5863ab 100644
--- a/src/client/elm/LoggedIn/Income/View.elm
+++ b/src/client/elm/LoggedIn/Income/View.elm
@@ -5,13 +5,15 @@ module LoggedIn.Income.View exposing
 import Dict
 import Date
 import Time exposing (Time)
+import Color
+
+import FontAwesome
 
-import Html.App as Html
 import Html exposing (..)
 import Html.Events exposing (..)
 import Html.Attributes exposing (..)
+import Html.App as Html
 import Form exposing (Form)
-import Form.Input as Input
 
 import Msg exposing (Msg)
 
@@ -29,10 +31,10 @@ import LoggedIn.Income.Msg as IncomeMsg
 import LoggedIn.View.Date exposing (renderShortDate)
 import LoggedIn.View.Format as Format
 
-import Utils.Maybe exposing (isJust)
-
 import LoggedIn.View.Date exposing (renderLongDate)
 import View.Events exposing (onSubmitPrevDefault)
+import View.Form as Form
+import View.Color as Color
 
 view : LoggedData -> IncomeModel.Model -> Html Msg
 view loggedData incomeModel =
@@ -41,9 +43,8 @@ view loggedData incomeModel =
     [ case useIncomesFrom loggedData.users loggedData.incomes loggedData.payments of
         Just since -> cumulativeIncomesView loggedData since
         Nothing -> text ""
-    , h1 [] [ text <| getMessage "AddIncome" loggedData.translations ]
-    , addIncomeView loggedData incomeModel.addIncome
     , h1 [] [ text <| getMessage "MonthlyNetIncomes" loggedData.translations ]
+    , addIncomeView loggedData incomeModel.addIncome
     , incomesView loggedData
     ]
 
@@ -71,45 +72,31 @@ cumulativeIncomesView loggedData since =
             )
         ]
 
-addIncomeView : LoggedData -> Form () IncomeModel.AddIncome -> Html Msg
+addIncomeView : LoggedData -> Form String IncomeModel.AddIncome -> Html Msg
 addIncomeView loggedData addIncome =
-  let
-    errorFor error field =
-      if isJust field.liveError
-        then div [ class "error" ] [ text (getMessage error loggedData.translations) ]
-        else text ""
-    creation = Form.getFieldAsString "creation" addIncome
-    amount = Form.getFieldAsString "amount" addIncome
-    htmlMap = Html.map (Msg.UpdateLoggedIn << LoggedInMsg.IncomeMsg << IncomeMsg.AddIncomeMsg)
-  in
-    Html.form
-      [ onSubmitPrevDefault Msg.NoOp ]
-      [ label [] [ text (getMessage "Creation" loggedData.translations) ]
-      , htmlMap <| Input.textInput creation []
-      , errorFor "DateValidationError" creation
-
-      , label [] [ text (getMessage "Amount" loggedData.translations) ]
-      , htmlMap <| Input.textInput amount []
-      , errorFor "IncomeValidationError" amount
-
-      , button
-          [ case Form.getOutput addIncome of
-              Just data ->
-                onClick (Msg.UpdateLoggedIn <| LoggedInMsg.AddIncome data.creation data.amount)
-              Nothing ->
-                onClick (Msg.UpdateLoggedIn <| LoggedInMsg.IncomeMsg <| IncomeMsg.AddIncomeMsg <| Form.Submit)
-          ]
-          [ text (getMessage "Add" loggedData.translations) ]
-      ]
+  let htmlMap = Html.map (Msg.UpdateLoggedIn << LoggedInMsg.IncomeMsg << IncomeMsg.AddIncomeMsg)
+  in  Html.form
+        [ onSubmitPrevDefault Msg.NoOp ]
+        [ Form.textInput loggedData.translations addIncome htmlMap "creation"
+        , Form.textInput loggedData.translations addIncome htmlMap "amount"
+        , button
+            [ case Form.getOutput addIncome of
+                Just data ->
+                  onClick (Msg.UpdateLoggedIn <| LoggedInMsg.AddIncome data.time data.amount)
+                Nothing ->
+                  onClick (Msg.UpdateLoggedIn <| LoggedInMsg.IncomeMsg <| IncomeMsg.AddIncomeMsg <| Form.Submit)
+            ]
+            [ text (getMessage "Add" loggedData.translations) ]
+        ]
 
 incomesView : LoggedData -> Html Msg
 incomesView loggedData =
   ul
-    []
+    [ class "incomes" ]
     ( loggedData.incomes
         |> Dict.toList
         |> List.filter ((==) loggedData.me << .userId << snd)
-        |> List.sortBy (.creation << snd)
+        |> List.sortBy (.time << snd)
         |> List.reverse
         |> List.map (incomeView loggedData)
     )
@@ -118,11 +105,10 @@ incomeView : LoggedData -> (IncomeId, Income) -> Html Msg
 incomeView loggedData (incomeId, income) =
   li
     []
-    [ text <| renderShortDate (Date.fromTime income.creation) loggedData.translations
+    [ text <| renderShortDate (Date.fromTime income.time) loggedData.translations
     , text "    −    "
     , text <| Format.price loggedData.conf income.amount
-    , text "    −    "
     , button
         [ onClick (Msg.UpdateLoggedIn <| LoggedInMsg.DeleteIncome incomeId) ]
-        [ text "x" ]
+        [ FontAwesome.remove Color.chestnutRose 14 ]
     ]