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/Income/View.elm | 66 +++++++++++++-------------------- 1 file changed, 26 insertions(+), 40 deletions(-) (limited to 'src/client/elm/LoggedIn/Income/View.elm') 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 ] ] -- cgit v1.2.3