From 4ce4de89a5400b0d8b9cddaa2922901a081fdaaa Mon Sep 17 00:00:00 2001 From: Joris Date: Thu, 23 Jun 2016 23:43:23 +0200 Subject: Use a dialog to add a payment --- src/client/elm/LoggedIn/Home/AddPayment/Model.elm | 29 ---- src/client/elm/LoggedIn/Home/AddPayment/Msg.elm | 14 -- src/client/elm/LoggedIn/Home/AddPayment/Update.elm | 58 -------- src/client/elm/LoggedIn/Home/AddPayment/View.elm | 164 ++++++--------------- src/client/elm/LoggedIn/Home/Model.elm | 43 ++++-- src/client/elm/LoggedIn/Home/Msg.elm | 4 +- src/client/elm/LoggedIn/Home/Search/View.elm | 8 +- src/client/elm/LoggedIn/Home/Update.elm | 14 +- src/client/elm/LoggedIn/Home/View.elm | 4 +- 9 files changed, 99 insertions(+), 239 deletions(-) delete mode 100644 src/client/elm/LoggedIn/Home/AddPayment/Model.elm delete mode 100644 src/client/elm/LoggedIn/Home/AddPayment/Msg.elm delete mode 100644 src/client/elm/LoggedIn/Home/AddPayment/Update.elm (limited to 'src/client/elm/LoggedIn/Home') 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 ] -- cgit v1.2.3