From 6a0c5087f716ed6c876a666db6573491bfd3e094 Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 12 Jun 2016 23:54:17 +0200 Subject: Design income form --- src/client/elm/LoggedIn/Home/View/Paging.elm | 8 ++-- src/client/elm/LoggedIn/Income/Model.elm | 24 +++++----- src/client/elm/LoggedIn/Income/View.elm | 66 +++++++++++----------------- src/client/elm/LoggedIn/Msg.elm | 6 +-- src/client/elm/LoggedIn/Update.elm | 10 ++--- src/client/elm/LoggedIn/View/Date.elm | 4 +- 6 files changed, 52 insertions(+), 66 deletions(-) (limited to 'src/client/elm/LoggedIn') diff --git a/src/client/elm/LoggedIn/Home/View/Paging.elm b/src/client/elm/LoggedIn/Home/View/Paging.elm index 9166d23..fb78810 100644 --- a/src/client/elm/LoggedIn/Home/View/Paging.elm +++ b/src/client/elm/LoggedIn/Home/View/Paging.elm @@ -60,7 +60,7 @@ firstPage homeModel = ] , onClick (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| 1) ] - [ FontAwesome.fast_backward grey 20 ] + [ FontAwesome.fast_backward grey 15 ] previousPage : HomeModel.Model -> Html Msg previousPage homeModel = @@ -71,7 +71,7 @@ previousPage homeModel = then (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| homeModel.currentPage - 1) else Msg.NoOp ] - [ FontAwesome.backward grey 20 ] + [ FontAwesome.backward grey 15 ] nextPage : HomeModel.Model -> Int -> Html Msg nextPage homeModel maxPage = @@ -82,7 +82,7 @@ nextPage homeModel maxPage = then (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| homeModel.currentPage + 1) else Msg.NoOp ] - [ FontAwesome.forward grey 20 ] + [ FontAwesome.forward grey 15 ] lastPage : HomeModel.Model -> Int -> Html Msg lastPage homeModel maxPage = @@ -90,7 +90,7 @@ lastPage homeModel maxPage = [ class "page" , onClick (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| maxPage) ] - [ FontAwesome.fast_forward grey 20 ] + [ FontAwesome.fast_forward grey 15 ] paymentsPage : HomeModel.Model -> Int -> Html Msg paymentsPage homeModel page = diff --git a/src/client/elm/LoggedIn/Income/Model.elm b/src/client/elm/LoggedIn/Income/Model.elm index bc09f0e..873eaf1 100644 --- a/src/client/elm/LoggedIn/Income/Model.elm +++ b/src/client/elm/LoggedIn/Income/Model.elm @@ -5,20 +5,20 @@ module LoggedIn.Income.Model exposing ) import String exposing (toInt, split) -import Date exposing (Date) +import Date +import Time exposing (Time) import Date.Extra.Create exposing (dateFromFields) -import Utils.Date exposing (numToMonth) +import Date.Extra.Core exposing (intToMonth) import Form exposing (Form) import Form.Validate as Validate exposing (..) -import Form.Error exposing (Error(InvalidString)) type alias Model = - { addIncome : Form () AddIncome + { addIncome : Form String AddIncome } type alias AddIncome = - { creation : Date + { time : Time , amount : Int } @@ -27,20 +27,20 @@ init = { addIncome = Form.initial [] validate } -validate : Validation () AddIncome +validate : Validation String AddIncome validate = form2 AddIncome - (get "creation" dateValidation) + (get "creation" timeValidation) (get "amount" (int `andThen` (minInt 1))) -dateValidation : Validation () Date -dateValidation = +timeValidation : Validation String Time +timeValidation = customValidation string (\str -> case split "/" str of [day, month, year] -> case (toInt day, toInt month, toInt year) of (Ok dayNum, Ok monthNum, Ok yearNum) -> - Ok (dateFromFields yearNum (numToMonth monthNum) dayNum 0 0 0 0) - _ -> Err InvalidString - _ -> Err InvalidString + Ok (Date.toTime (dateFromFields yearNum (intToMonth monthNum) dayNum 0 0 0 0)) + _ -> Err (customError "InvalidDate") + _ -> Err (customError "InvalidDate") ) diff --git a/src/client/elm/LoggedIn/Income/View.elm b/src/client/elm/LoggedIn/Income/View.elm index 036cd80..d5863ab 100644 --- a/src/client/elm/LoggedIn/Income/View.elm +++ b/src/client/elm/LoggedIn/Income/View.elm @@ -5,13 +5,15 @@ module LoggedIn.Income.View exposing import Dict import Date import Time exposing (Time) +import Color + +import FontAwesome -import Html.App as Html import Html exposing (..) import Html.Events exposing (..) import Html.Attributes exposing (..) +import Html.App as Html import Form exposing (Form) -import Form.Input as Input import Msg exposing (Msg) @@ -29,10 +31,10 @@ import LoggedIn.Income.Msg as IncomeMsg import LoggedIn.View.Date exposing (renderShortDate) import LoggedIn.View.Format as Format -import Utils.Maybe exposing (isJust) - import LoggedIn.View.Date exposing (renderLongDate) import View.Events exposing (onSubmitPrevDefault) +import View.Form as Form +import View.Color as Color view : LoggedData -> IncomeModel.Model -> Html Msg view loggedData incomeModel = @@ -41,9 +43,8 @@ view loggedData incomeModel = [ case useIncomesFrom loggedData.users loggedData.incomes loggedData.payments of Just since -> cumulativeIncomesView loggedData since Nothing -> text "" - , h1 [] [ text <| getMessage "AddIncome" loggedData.translations ] - , addIncomeView loggedData incomeModel.addIncome , h1 [] [ text <| getMessage "MonthlyNetIncomes" loggedData.translations ] + , addIncomeView loggedData incomeModel.addIncome , incomesView loggedData ] @@ -71,45 +72,31 @@ cumulativeIncomesView loggedData since = ) ] -addIncomeView : LoggedData -> Form () IncomeModel.AddIncome -> Html Msg +addIncomeView : LoggedData -> Form String IncomeModel.AddIncome -> Html Msg addIncomeView loggedData addIncome = - let - errorFor error field = - if isJust field.liveError - then div [ class "error" ] [ text (getMessage error loggedData.translations) ] - else text "" - creation = Form.getFieldAsString "creation" addIncome - amount = Form.getFieldAsString "amount" addIncome - htmlMap = Html.map (Msg.UpdateLoggedIn << LoggedInMsg.IncomeMsg << IncomeMsg.AddIncomeMsg) - in - Html.form - [ onSubmitPrevDefault Msg.NoOp ] - [ label [] [ text (getMessage "Creation" loggedData.translations) ] - , htmlMap <| Input.textInput creation [] - , errorFor "DateValidationError" creation - - , label [] [ text (getMessage "Amount" loggedData.translations) ] - , htmlMap <| Input.textInput amount [] - , errorFor "IncomeValidationError" amount - - , button - [ case Form.getOutput addIncome of - Just data -> - onClick (Msg.UpdateLoggedIn <| LoggedInMsg.AddIncome data.creation data.amount) - Nothing -> - onClick (Msg.UpdateLoggedIn <| LoggedInMsg.IncomeMsg <| IncomeMsg.AddIncomeMsg <| Form.Submit) - ] - [ text (getMessage "Add" loggedData.translations) ] - ] + let htmlMap = Html.map (Msg.UpdateLoggedIn << LoggedInMsg.IncomeMsg << IncomeMsg.AddIncomeMsg) + in Html.form + [ onSubmitPrevDefault Msg.NoOp ] + [ Form.textInput loggedData.translations addIncome htmlMap "creation" + , Form.textInput loggedData.translations addIncome htmlMap "amount" + , button + [ case Form.getOutput addIncome of + Just data -> + onClick (Msg.UpdateLoggedIn <| LoggedInMsg.AddIncome data.time data.amount) + Nothing -> + onClick (Msg.UpdateLoggedIn <| LoggedInMsg.IncomeMsg <| IncomeMsg.AddIncomeMsg <| Form.Submit) + ] + [ text (getMessage "Add" loggedData.translations) ] + ] incomesView : LoggedData -> Html Msg incomesView loggedData = ul - [] + [ class "incomes" ] ( loggedData.incomes |> Dict.toList |> List.filter ((==) loggedData.me << .userId << snd) - |> List.sortBy (.creation << snd) + |> List.sortBy (.time << snd) |> List.reverse |> List.map (incomeView loggedData) ) @@ -118,11 +105,10 @@ incomeView : LoggedData -> (IncomeId, Income) -> Html Msg incomeView loggedData (incomeId, income) = li [] - [ text <| renderShortDate (Date.fromTime income.creation) loggedData.translations + [ text <| renderShortDate (Date.fromTime income.time) loggedData.translations , text " − " , text <| Format.price loggedData.conf income.amount - , text " − " , button [ onClick (Msg.UpdateLoggedIn <| LoggedInMsg.DeleteIncome incomeId) ] - [ text "x" ] + [ FontAwesome.remove Color.chestnutRose 14 ] ] diff --git a/src/client/elm/LoggedIn/Msg.elm b/src/client/elm/LoggedIn/Msg.elm index b83d486..6f6dab0 100644 --- a/src/client/elm/LoggedIn/Msg.elm +++ b/src/client/elm/LoggedIn/Msg.elm @@ -2,7 +2,7 @@ module LoggedIn.Msg exposing ( Msg(..) ) -import Date exposing (Date) +import Time exposing (Time) import Model.Payment exposing (Payment, PaymentId, Frequency) import Model.Income exposing (IncomeId) @@ -21,8 +21,8 @@ type Msg = | DeletePayment PaymentId | ValidateDeletePayment PaymentId - | AddIncome Date Int - | ValidateAddIncome IncomeId Date Int + | AddIncome Time Int + | ValidateAddIncome IncomeId Time Int | DeleteIncome IncomeId | ValidateDeleteIncome IncomeId diff --git a/src/client/elm/LoggedIn/Update.elm b/src/client/elm/LoggedIn/Update.elm index 564d6fc..6d8869a 100644 --- a/src/client/elm/LoggedIn/Update.elm +++ b/src/client/elm/LoggedIn/Update.elm @@ -106,16 +106,16 @@ update model action loggedIn = , Cmd.none ) - LoggedInMsg.AddIncome creation amount -> + LoggedInMsg.AddIncome time amount -> ( loggedIn - , Server.addIncome creation amount + , Server.addIncome time amount |> Task.perform (always LoggedInMsg.NoOp) - (\incomeId -> (LoggedInMsg.ValidateAddIncome incomeId creation amount)) + (\incomeId -> (LoggedInMsg.ValidateAddIncome incomeId time amount)) ) - LoggedInMsg.ValidateAddIncome incomeId creation amount -> - let newIncome = { userId = loggedIn.me, creation = (Date.toTime creation), amount = amount } + LoggedInMsg.ValidateAddIncome incomeId time amount -> + let newIncome = { userId = loggedIn.me, time = time, amount = amount } in ( { loggedIn | incomes = Dict.insert incomeId newIncome loggedIn.incomes } , Cmd.none ) diff --git a/src/client/elm/LoggedIn/View/Date.elm b/src/client/elm/LoggedIn/View/Date.elm index 783f10c..8e4e872 100644 --- a/src/client/elm/LoggedIn/View/Date.elm +++ b/src/client/elm/LoggedIn/View/Date.elm @@ -5,7 +5,7 @@ module LoggedIn.View.Date exposing ) import Date exposing (..) -import Utils.Date exposing (monthToNum) +import Date.Extra.Core as Date import String import Model.Translations exposing (..) @@ -14,7 +14,7 @@ renderShortDate : Date -> Translations -> String renderShortDate date translations = let params = [ String.pad 2 '0' (toString (Date.day date)) - , String.pad 2 '0' (toString (monthToNum (Date.month date))) + , String.pad 2 '0' (toString (Date.monthToInt (Date.month date))) , toString (Date.year date) ] in getParamMessage params "ShortDate" translations -- cgit v1.2.3