Use a dialog to add a payment

4 files changed, 49 insertions, 216 deletions

diff --git a/src/client/elm/LoggedIn/Home/AddPayment/Model.elm b/src/client/elm/LoggedIn/Home/AddPayment/Model.elm
deleted file mode 100644
index b656077..0000000
--- a/src/client/elm/LoggedIn/Home/AddPayment/Model.elm
+++ /dev/null
@@ -1,29 +0,0 @@
-module LoggedIn.Home.AddPayment.Model exposing
-  ( Model
-  , init
-  )
-
-import Result as Result exposing (Result(..))
-import Json.Decode exposing ((:=))
-
-import Model.Translations exposing (..)
-import Model.Payment exposing (Frequency(..))
-
-type alias Model =
-  { name : String
-  , nameError : Maybe String
-  , cost : String
-  , costError : Maybe String
-  , frequency : Frequency
-  , waitingServer : Bool
-  }
-
-init : Frequency -> Model
-init frequency =
-  { name = ""
-  , nameError = Nothing
-  , cost = ""
-  , costError = Nothing
-  , frequency = frequency
-  , waitingServer = False
-  }
diff --git a/src/client/elm/LoggedIn/Home/AddPayment/Msg.elm b/src/client/elm/LoggedIn/Home/AddPayment/Msg.elm
deleted file mode 100644
index 53e6e26..0000000
--- a/src/client/elm/LoggedIn/Home/AddPayment/Msg.elm
+++ /dev/null
@@ -1,14 +0,0 @@
-module LoggedIn.Home.AddPayment.Msg exposing
-  ( Msg(..)
-  )
-
-import Model.Payment exposing (Frequency)
-
-type Msg =
-  NoOp
-  | Init Frequency
-  | UpdateName String
-  | UpdateCost String
-  | AddError (Maybe String) (Maybe String)
-  | ToggleFrequency
-  | WaitingServer
diff --git a/src/client/elm/LoggedIn/Home/AddPayment/Update.elm b/src/client/elm/LoggedIn/Home/AddPayment/Update.elm
deleted file mode 100644
index dc1ea57..0000000
--- a/src/client/elm/LoggedIn/Home/AddPayment/Update.elm
+++ /dev/null
@@ -1,58 +0,0 @@
-module LoggedIn.Home.AddPayment.Update exposing
-  ( update
-  , addPaymentError
-  )
-
-import Maybe
-import Json.Decode as Json exposing ((:=))
-
-import LoggedIn.Home.AddPayment.Msg as AddPaymentMsg
-import LoggedIn.Home.AddPayment.Model as AddPaymentModel
-
-import Model.Translations exposing (Translations, getMessage)
-import Model.Payment exposing (Frequency(..))
-
-update : AddPaymentMsg.Msg -> AddPaymentModel.Model -> AddPaymentModel.Model
-update msg addPayment =
-  case msg of
-
-    AddPaymentMsg.NoOp ->
-      addPayment
-
-    AddPaymentMsg.Init frequency ->
-      AddPaymentModel.init frequency
-
-    AddPaymentMsg.UpdateName name ->
-      { addPayment | name = name }
-
-    AddPaymentMsg.UpdateCost cost ->
-      { addPayment | cost = cost }
-
-    AddPaymentMsg.AddError nameError costError ->
-      { addPayment
-      | nameError = nameError
-      , costError = costError
-      , waitingServer = False
-      }
-
-    AddPaymentMsg.ToggleFrequency ->
-      { addPayment
-      | frequency = if addPayment.frequency == Punctual then Monthly else Punctual
-      }
-
-    AddPaymentMsg.WaitingServer ->
-      { addPayment | waitingServer = True }
-
-addPaymentError : Translations -> String -> Maybe AddPaymentMsg.Msg
-addPaymentError translations jsonErr =
-  let decoder =
-        Json.object2 (,)
-          (Json.maybe <| "name" := Json.string)
-          (Json.maybe <| "cost" := Json.string)
-  in  case Json.decodeString decoder jsonErr of
-        Err _ ->
-          Nothing
-        Ok (mbNameKey, mbCostKey) ->
-          Just <| AddPaymentMsg.AddError
-            (Maybe.map (flip getMessage translations) mbNameKey)
-            (Maybe.map (flip getMessage translations) mbCostKey)
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) ]
-    ]