Use a dialog to add a payment

9 files changed, 99 insertions, 239 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) ]
-    ]
diff --git a/src/client/elm/LoggedIn/Home/Model.elm b/src/client/elm/LoggedIn/Home/Model.elm
index 6b29d8c..e802828 100644
--- a/src/client/elm/LoggedIn/Home/Model.elm
+++ b/src/client/elm/LoggedIn/Home/Model.elm
@@ -2,39 +2,64 @@ module LoggedIn.Home.Model exposing
   ( Model
   , Search
   , init
+  , addPaymentInitial
   )
 
 import Form exposing (Form)
 import Form.Validate as Validate exposing (Validation)
+import Form.Field as Field exposing (Field)
 
 import Model.User exposing (Users, UserId)
 import Model.Payment exposing (PaymentId, Payments, Frequency(..))
 import Model.Payer exposing (Payers)
 
-import LoggedIn.Home.AddPayment.Model as AddPaymentModel
-
 type alias Model =
-  { add : AddPaymentModel.Model
-  , paymentEdition : Maybe PaymentId
+  { paymentEdition : Maybe PaymentId
   , currentPage : Int
   , monthlyDetail : Bool
   , search : Form String Search
+  , addPayment : Form String AddPayment
   }
 
 type alias Search =
   { searchText : Maybe String
   }
 
+type alias AddPayment =
+  { name : String
+  , cost : Int
+  , frequency : Frequency
+  }
+
 init : Model
 init =
-  { add = AddPaymentModel.init Punctual
-  , paymentEdition = Nothing
+  { paymentEdition = Nothing
   , currentPage = 1
   , monthlyDetail = False
-  , search = Form.initial [] validate
+  , search = Form.initial [] searchValidation
+  , addPayment = Form.initial addPaymentInitial addPaymentValidation
   }
 
-validate : Validation String Search
-validate =
+searchValidation : Validation String Search
+searchValidation =
   Validate.form1 Search
     (Validate.get "searchText" (Validate.maybe Validate.string))
+
+addPaymentInitial : List (String, Field)
+addPaymentInitial = [ ("frequency", Field.Radio (toString Punctual)) ]
+
+addPaymentValidation : Validation String AddPayment
+addPaymentValidation =
+  Validate.form3 AddPayment
+    (Validate.get "name" (Validate.string `Validate.andThen` (Validate.nonEmpty)))
+    (Validate.get "cost" (Validate.int `Validate.andThen` (Validate.minInt 1)))
+    (Validate.get "frequency" validateFrequency)
+
+validateFrequency : Validation String Frequency
+validateFrequency =
+  Validate.customValidation Validate.string (\str ->
+    case str of
+      "Punctual" -> Ok Punctual
+      "Monthly" -> Ok Monthly
+      _ -> Err (Validate.customError "InvalidFrequency")
+  )
diff --git a/src/client/elm/LoggedIn/Home/Msg.elm b/src/client/elm/LoggedIn/Home/Msg.elm
index 17a88f8..bb6f77d 100644
--- a/src/client/elm/LoggedIn/Home/Msg.elm
+++ b/src/client/elm/LoggedIn/Home/Msg.elm
@@ -6,13 +6,11 @@ import Form exposing (Form)
 
 import Model.Payment exposing (PaymentId)
 
-import LoggedIn.Home.AddPayment.Msg as AddPaymentMsg
-
 type Msg =
   NoOp
-  | UpdateAdd AddPaymentMsg.Msg
   | ToggleEdit PaymentId
   | UpdatePage Int
   | ShowMonthlyDetail
   | ToggleMonthlyDetail
   | SearchMsg Form.Msg
+  | AddPaymentMsg Form.Msg
diff --git a/src/client/elm/LoggedIn/Home/Search/View.elm b/src/client/elm/LoggedIn/Home/Search/View.elm
index f06377d..99eec95 100644
--- a/src/client/elm/LoggedIn/Home/Search/View.elm
+++ b/src/client/elm/LoggedIn/Home/Search/View.elm
@@ -19,6 +19,9 @@ import LoggedIn.Home.Model as HomeModel
 import Model.Translations exposing (getParamMessage)
 import Model.Conf exposing (Conf)
 import Model.Payment exposing (Payments)
+import Model.Translations exposing (getMessage)
+
+import LoggedIn.Home.AddPayment.View as AddPayment
 
 import LoggedIn.View.Format as Format
 import View.Plural exposing (plural)
@@ -29,6 +32,7 @@ view loggedData { search } payments =
     [ class "search" ]
     [ searchForm loggedData search
     , paymentsStat loggedData payments
+    , AddPayment.view loggedData
     ]
 
 searchForm : LoggedData -> Form String HomeModel.Search -> Html Msg
@@ -40,7 +44,9 @@ paymentsStat : LoggedData -> Payments -> Html Msg
 paymentsStat loggedData payments =
   let count = plural loggedData.translations (List.length payments) "Payment" "Payments"
       sum = paymentsSum loggedData.conf payments
-  in  text <| getParamMessage [ count, sum ] "Worth" loggedData.translations
+  in  span
+        [ class "stat" ]
+        [ text <| getParamMessage [ count, sum ] "Worth" loggedData.translations ]
 
 paymentsSum : Conf -> Payments -> String
 paymentsSum conf payments =
diff --git a/src/client/elm/LoggedIn/Home/Update.elm b/src/client/elm/LoggedIn/Home/Update.elm
index af3504a..562cd20 100644
--- a/src/client/elm/LoggedIn/Home/Update.elm
+++ b/src/client/elm/LoggedIn/Home/Update.elm
@@ -9,19 +9,12 @@ import LoggedData exposing (LoggedData)
 import LoggedIn.Home.Msg as HomeMsg
 import LoggedIn.Home.Model as HomeModel
 
-import LoggedIn.Home.AddPayment.Update as AddPaymentUpdate
-
 update : LoggedData -> HomeMsg.Msg -> HomeModel.Model -> (HomeModel.Model, Cmd HomeMsg.Msg)
 update loggedData msg homeModel =
   case msg of
 
     HomeMsg.NoOp -> (homeModel, Cmd.none)
 
-    HomeMsg.UpdateAdd addPaymentMsg ->
-      ( { homeModel | add = AddPaymentUpdate.update addPaymentMsg homeModel.add }
-      , Cmd.none
-      )
-
     HomeMsg.ToggleEdit id ->
       ( { homeModel | paymentEdition = if homeModel.paymentEdition == Just id then Nothing else Just id }
       , Cmd.none
@@ -52,3 +45,10 @@ update loggedData msg homeModel =
         }
       , Cmd.none
       )
+
+    HomeMsg.AddPaymentMsg formMsg ->
+      ( { homeModel
+        | addPayment = Form.update formMsg homeModel.addPayment
+        }
+      , Cmd.none
+      )
diff --git a/src/client/elm/LoggedIn/Home/View.elm b/src/client/elm/LoggedIn/Home/View.elm
index 82ec8a3..8076673 100644
--- a/src/client/elm/LoggedIn/Home/View.elm
+++ b/src/client/elm/LoggedIn/Home/View.elm
@@ -16,7 +16,6 @@ import Model.Payment as Payment
 
 import LoggedIn.Home.Model as LoggedInModel
 import LoggedIn.Home.Search.View as SearchView
-import LoggedIn.Home.AddPayment.View as AddPaymentView
 import LoggedIn.Home.View.Monthly as MonthlyView
 
 import LoggedIn.Home.View.Table exposing (paymentsTable)
@@ -27,9 +26,8 @@ view loggedData loggedIn =
   let punctualPayments = Payment.sortedFiltredPunctual (Form.fieldAsText loggedIn.search "searchText") loggedData.payments
   in  div
         [ class "home" ]
-        [ AddPaymentView.view loggedData loggedIn
+        [ SearchView.view loggedData loggedIn punctualPayments
         , MonthlyView.view loggedData loggedIn
-        , SearchView.view loggedData loggedIn punctualPayments
         , paymentsTable loggedData loggedIn punctualPayments
         , paymentsPaging loggedIn punctualPayments
         ]