Adding error feedbacks when adding a payment

2 files changed, 30 insertions, 11 deletions

diff --git a/src/client/View/Payments.elm b/src/client/View/Payments.elm
index dfc0905..7f0c66b 100644
--- a/src/client/View/Payments.elm
+++ b/src/client/View/Payments.elm
@@ -15,6 +15,6 @@ renderPayments : PaymentView -> Html
 renderPayments paymentView =
   div
     [ class "payments" ]
-    [ addPayment paymentView.name paymentView.cost
+    [ addPayment paymentView.add
     , paymentsTable paymentView.payments
     ]
diff --git a/src/client/View/Payments/Add.elm b/src/client/View/Payments/Add.elm
index 9d246ef..d11f208 100644
--- a/src/client/View/Payments/Add.elm
+++ b/src/client/View/Payments/Add.elm
@@ -12,17 +12,24 @@ import ServerCommunication as SC exposing (serverCommunications)
 
 import Update exposing (..)
 import Update.Payment exposing (..)
+import Update.Payment.Add exposing (..)
+
+import Model.View.Payment.Add exposing (..)
 
 import View.Events exposing (onSubmitPrevDefault)
 
-addPayment : String -> String -> Html
-addPayment name cost =
+import Utils.Maybe exposing (isJust)
+import Utils.Either exposing (toMaybeError)
+
+addPayment : AddPayment -> Html
+addPayment addPayment =
   H.form
     [ class "add"
-    , onSubmitPrevDefault serverCommunications.address
-        <| case readInt cost of
-             Ok number -> SC.AddPayment name number
-             Err _ -> SC.NoCommunication
+    , case (validateName addPayment.name, validateCost addPayment.cost) of
+        (Ok name, Ok cost) ->
+          onSubmitPrevDefault serverCommunications.address (SC.AddPayment name cost)
+        (resName, resCost) ->
+          onSubmitPrevDefault actions.address (UpdatePayment <| UpdateAdd <| AddError (toMaybeError resName) (toMaybeError resCost))
     ]
     [ div
         [ class "name" ]
@@ -31,10 +38,16 @@ addPayment name cost =
             [ text "Name" ]
         , input
             [ id "nameInput"
-            , value name
-            , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateName)
+            , class (if isJust addPayment.nameError then "error" else "")
+            , value addPayment.name
+            , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateName)
             ]
             []
+        , case addPayment.nameError of
+            Just error ->
+              div [ class "errorMessage" ] [ text error ]
+            Nothing ->
+              text ""
         ]
     , div
         [ class "cost" ]
@@ -43,10 +56,16 @@ addPayment name cost =
             [ text "Cost" ]
         , input
             [ id "costInput"
-            , value cost
-            , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateCost)
+            , class (if isJust addPayment.costError then "error" else "")
+            , value addPayment.cost
+            , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateCost)
             ]
             []
+        , case addPayment.costError of
+            Just error ->
+              div [ class "errorMessage" ] [ text error ]
+            Nothing ->
+              text ""
         , button
             [ type' "submit" ]
             [ text "Add" ]