Use a dialog to add a payment

1 files changed, 49 insertions, 115 deletions

diff --git a/src/client/elm/LoggedIn/Home/AddPayment/View.elm b/src/client/elm/LoggedIn/Home/AddPayment/View.elm
index b13097b..5ccdb35 100644
--- a/src/client/elm/LoggedIn/Home/AddPayment/View.elm
+++ b/src/client/elm/LoggedIn/Home/AddPayment/View.elm
@@ -2,133 +2,67 @@ module LoggedIn.Home.AddPayment.View exposing
   ( view
   )
 
-import Result exposing (..)
-import Json.Decode as Json
-import Color
-
-import FontAwesome
-
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
+import Html.App as Html
+import Task
 
-import Msg exposing (Msg)
-
-import LoggedIn.Msg as LoggedInMsg
+import Form exposing (Form)
 
-import LoggedIn.Home.Msg as HomeMsg
-import LoggedIn.Home.Model as HomeModel
-
-import LoggedIn.Home.AddPayment.Msg as AddPaymentMsg
-import LoggedIn.Home.AddPayment.Model as AddPaymentModel
-
-import Model.Payment exposing (Frequency(..))
-import Model.Translations exposing (getMessage)
-import LoggedData exposing (LoggedData)
+import Dialog
 
+import View.Form as Form
 import View.Events exposing (onSubmitPrevDefault)
 
-import Utils.Maybe exposing (isJust)
-import Utils.Either exposing (toMaybeError)
+import Msg exposing (Msg)
+import LoggedIn.Msg as LoggedInMsg
+import LoggedIn.Home.Msg as HomeMsg
 
-view : LoggedData -> HomeModel.Model -> Html Msg
-view loggedData homeModel =
-  Html.form
-    [ let update =
-            if homeModel.add.waitingServer
-              then
-                Msg.NoOp
-              else
-                Msg.UpdateLoggedIn <| LoggedInMsg.AddPayment homeModel.add.name homeModel.add.cost homeModel.add.frequency
-      in  onSubmitPrevDefault update
-    , class "addPayment"
-    ]
-    [ addPaymentName loggedData homeModel.add
-    , addPaymentCost loggedData homeModel.add
-    , paymentFrequency loggedData homeModel.add
-    , button
-        [ type' "submit"
-        , classList
-            [ ("add", True)
-            , ("waitingServer", homeModel.add.waitingServer)
-            ]
-        ]
-        [ text (getMessage "Add" loggedData.translations)
-        , if homeModel.add.waitingServer
-            then FontAwesome.spinner Color.white 20
-            else text ""
-        ]
-    ]
+import Model.Translations exposing (getMessage)
+import Model.Payment as Payment
+import Model.View exposing (View(LoggedInView))
 
-addPaymentName : LoggedData -> AddPaymentModel.Model -> Html Msg
-addPaymentName loggedData addPayment =
-  div
-    [ classList
-        [ ("name", True)
-        , ("error", isJust addPayment.nameError)
-        ]
-    ]
-    [ input
-        [ id "nameInput"
-        , value addPayment.name
-        , on "input" (targetValue |> (Json.map <| Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdateAdd << AddPaymentMsg.UpdateName))
-        , maxlength 20
-        ]
-        []
-    , label
-        [ for "nameInput" ]
-        [ FontAwesome.shopping_cart Color.white 20 ]
-    , case addPayment.nameError of
-        Just error ->
-          div [ class "errorMessage" ] [ text error ]
-        Nothing ->
-          text ""
-    ]
+import LoggedData exposing (LoggedData)
+import LoggedIn.Home.Model as HomeModel
 
-addPaymentCost : LoggedData -> AddPaymentModel.Model -> Html Msg
-addPaymentCost loggedData addPayment =
-  div
-    [ classList
-        [ ("cost", True)
-        , ("error", isJust addPayment.costError)
-        ]
-    ]
-    [ input
-        [ id "costInput"
-        , value addPayment.cost
-        , on "input" (targetValue |> (Json.map <| Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdateAdd << AddPaymentMsg.UpdateCost))
-        , maxlength 7
+view : LoggedData -> Html Msg
+view loggedData =
+  let dialogConfig =
+        { title = getMessage "AddPayment" loggedData.translations
+        , body = \view -> (
+            case view of
+              LoggedInView loggedIn -> addPaymentForm loggedData loggedIn.home
+              _ -> text ""
+        )
+        , confirm = getMessage "Confirm" loggedData.translations
+        , confirmMsg = \view -> (
+            case view of
+              LoggedInView loggedIn ->
+                case Form.getOutput loggedIn.home.addPayment of
+                  Just data ->
+                    Ok (Msg.UpdateLoggedIn <| LoggedInMsg.AddPayment data.name data.cost data.frequency)
+                  Nothing ->
+                    Err (Msg.UpdateLoggedIn <| LoggedInMsg.HomeMsg <| HomeMsg.AddPaymentMsg <| Form.Submit)
+              _ ->
+                Err (Msg.UpdateLoggedIn LoggedInMsg.NoOp)
+          )
+        , undo = getMessage "Undo" loggedData.translations
+        }
+  in  button
+        [ class "addPayment"
+        , onClick (Msg.Dialog <| Dialog.Open dialogConfig)
         ]
-        []
-    , label
-        [ for "costInput" ]
-        [ text loggedData.conf.currency ]
-    , case addPayment.costError of
-        Just error ->
-          div [ class "errorMessage" ] [ text error ]
-        Nothing ->
-          text ""
-    ]
+        [ text (getMessage "AddPayment" loggedData.translations) ]
 
-paymentFrequency : LoggedData -> AddPaymentModel.Model -> Html Msg
-paymentFrequency loggedData addPayment =
-  button
-    [ type' "button"
-    , class "frequency"
-    , onClick (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdateAdd <| AddPaymentMsg.ToggleFrequency)
-    ]
-    [ div
-        [ classList
-            [ ("punctual", True)
-            , ("selected", addPayment.frequency == Punctual)
-            ]
+addPaymentForm : LoggedData -> HomeModel.Model -> Html Msg
+addPaymentForm loggedData { addPayment } =
+  let htmlMap = Html.map (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.AddPaymentMsg)
+  in  Html.form
+        [ class "addPayment"
+        , onSubmitPrevDefault Msg.NoOp
         ]
-        [ text (getMessage "Punctual" loggedData.translations) ]
-    , div
-        [ classList
-            [ ("monthly", True)
-            , ("selected", addPayment.frequency == Monthly)
-            ]
+        [ Form.textInput loggedData.translations addPayment htmlMap "name"
+        , Form.textInput loggedData.translations addPayment htmlMap "cost"
+        , Form.radioInputs loggedData.translations addPayment htmlMap "frequency" [ toString Payment.Punctual, toString Payment.Monthly ]
         ]
-        [ text (getMessage "Monthly" loggedData.translations) ]
-    ]