From 8816cf758119a6a2073e561c8df297a833630986 Mon Sep 17 00:00:00 2001 From: Joris Date: Mon, 8 Aug 2016 20:58:17 +0200 Subject: Show incomes in a table and update like payments are updated --- src/client/elm/LoggedIn/Income/View.elm | 55 ++++------- src/client/elm/LoggedIn/Income/View/Table.elm | 131 ++++++++++++++++++++++++++ 2 files changed, 149 insertions(+), 37 deletions(-) create mode 100644 src/client/elm/LoggedIn/Income/View/Table.elm (limited to 'src/client/elm/LoggedIn/Income') diff --git a/src/client/elm/LoggedIn/Income/View.elm b/src/client/elm/LoggedIn/Income/View.elm index 2b69806..5a2c18e 100644 --- a/src/client/elm/LoggedIn/Income/View.elm +++ b/src/client/elm/LoggedIn/Income/View.elm @@ -19,6 +19,8 @@ import View.Form as Form import View.Events exposing (onSubmitPrevDefault) import Dialog +import Dialog.AddIncome.Model as AddIncome +import Dialog.AddIncome.View as AddIncome import Msg exposing (Msg) @@ -29,33 +31,42 @@ import Model.Translations exposing (getMessage, getParamMessage) import Model.Payer exposing (useIncomesFrom) import Model.User exposing (UserId, User) import Model.View as View -import LoggedIn.Income.Model as IncomeModel +import LoggedIn.Income.Model as Income import LoggedIn.Msg as LoggedInMsg import LoggedIn.Income.Msg as IncomeMsg import View.Date as Date import LoggedIn.View.Format as Format - import View.Color as Color +import LoggedIn.Income.View.Table as Table -view : LoggedData -> IncomeModel.Model -> Html Msg +view : LoggedData -> Income.Model -> Html Msg view loggedData incomeModel = div [ class "income" ] [ case useIncomesFrom loggedData.users loggedData.incomes loggedData.payments of Just since -> cumulativeIncomesView loggedData since Nothing -> text "" - , h1 [] [ text <| getMessage "MonthlyNetIncomes" loggedData.translations ] - , addIncomeView loggedData incomeModel.addIncome - , incomesView loggedData + , div + [ class "textual monthlyNetIncomes" ] + [ h1 [] [ text <| getMessage "MonthlyNetIncomes" loggedData.translations ] + , AddIncome.button + "addIncome" + loggedData + (AddIncome.initialAdd loggedData.translations (Date.fromTime loggedData.currentTime)) + "AddIncome" + (text (getMessage "AddIncome" loggedData.translations)) + Nothing + ] + , Table.view loggedData incomeModel ] cumulativeIncomesView : LoggedData -> Time -> Html Msg cumulativeIncomesView loggedData since = let longDate = Date.longView (Date.fromTime since) loggedData.translations in div - [] + [ class "textual" ] [ h1 [] [ text <| getParamMessage [longDate] "CumulativeIncomesSince" loggedData.translations ] , ul [] @@ -75,36 +86,6 @@ cumulativeIncomesView loggedData since = ) ] -addIncomeView : LoggedData -> Form String IncomeModel.AddIncome -> Html Msg -addIncomeView loggedData addIncome = - let htmlMap = Html.map (Msg.UpdateLoggedIn << LoggedInMsg.IncomeMsg << IncomeMsg.AddIncomeMsg) - in Html.form - [ onSubmitPrevDefault Msg.NoOp ] - [ htmlMap <| Form.textInput loggedData.translations addIncome "income" "amount" - , htmlMap <| Form.textInput loggedData.translations addIncome "income" "date" - , button - [ class "add" - , case Form.getOutput addIncome of - Just data -> - onClick (Msg.UpdateLoggedIn <| LoggedInMsg.CreateIncome data.amount data.date) - 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 (.time << snd) - |> List.reverse - |> List.map (incomeView loggedData) - ) - incomeView : LoggedData -> (IncomeId, Income) -> Html Msg incomeView loggedData (incomeId, income) = li diff --git a/src/client/elm/LoggedIn/Income/View/Table.elm b/src/client/elm/LoggedIn/Income/View/Table.elm new file mode 100644 index 0000000..cf82772 --- /dev/null +++ b/src/client/elm/LoggedIn/Income/View/Table.elm @@ -0,0 +1,131 @@ +module LoggedIn.Income.View.Table exposing + ( view + ) + +import Dict exposing (..) +import Date exposing (Date) +import String exposing (append) + +import FontAwesome +import View.Color as Color + +import Html exposing (..) +import Html.Attributes exposing (..) +import Html.Events exposing (..) + +import Dialog +import Dialog.AddIncome.Model as AddIncome +import Dialog.AddIncome.View as AddIncome + +import Tooltip + +import Msg exposing (Msg) + +import LoggedData exposing (LoggedData) + +import LoggedIn.Msg as LoggedInMsg + +import LoggedIn.Income.Model as Income +import View.Date as Date +import LoggedIn.View.Format as Format + +import Model.User exposing (getUserName) +import Model.Income as Income exposing (..) +import Model.Translations exposing (getMessage) + +view : LoggedData -> Income.Model -> Html Msg +view loggedData incomeModel = + let incomes = + loggedData.incomes + |> Dict.toList + |> List.sortBy (.time << snd) + |> List.reverse + in div + [ class "table" ] + [ div + [ class "lines" ] + ( headerLine loggedData :: List.map (paymentLine loggedData incomeModel) incomes) + , if List.isEmpty (Dict.toList loggedData.incomes) + then + div + [ class "emptyTableMsg" ] + [ text <| getMessage "NoPayment" loggedData.translations ] + else + text "" + ] + +headerLine : LoggedData -> Html Msg +headerLine loggedData = + div + [ class "header" ] + [ div [ class "cell name" ] [ text <| getMessage "Name" loggedData.translations ] + , div [ class "cell income" ] [ text <| getMessage "Income" loggedData.translations ] + , div [ class "cell date" ] [ text <| getMessage "Date" loggedData.translations ] + , div [ class "cell" ] [] + , div [ class "cell" ] [] + , div [ class "cell" ] [] + ] + +paymentLine : LoggedData -> Income.Model -> (IncomeId, Income) -> Html Msg +paymentLine loggedData incomeModel (incomeId, income) = + div + [ class "row" ] + [ div + [ class "cell name" ] + [ income.userId + |> getUserName loggedData.users + |> Maybe.withDefault "−" + |> text + ] + , div + [ class "cell income" ] + [ text (Format.price loggedData.conf income.amount) ] + , div + [ class "cell date" ] + [ text (Date.longView (Date.fromTime income.time) loggedData.translations) ] + , div + [ class "cell button" ] + [ let currentDate = Date.fromTime loggedData.currentTime + in AddIncome.button + "" + loggedData + (AddIncome.initialClone loggedData.translations currentDate income) + "CloneIncome" + (FontAwesome.clone Color.chestnutRose 18) + (Just (getMessage "Clone" loggedData.translations)) + ] + , div + [ class "cell button" ] + [ if loggedData.me /= income.userId + then + text "" + else + AddIncome.button + "" + loggedData + (AddIncome.initialEdit loggedData.translations incomeId income) + "EditIncome" + (FontAwesome.pencil Color.chestnutRose 18) + (Just (getMessage "Edit" loggedData.translations)) + ] + , div + [ class "cell button" ] + [ if loggedData.me /= income.userId + then + text "" + else + let dialogConfig = + { className = "deleteIncomeDialog" + , title = getMessage "ConfirmIncomeDelete" loggedData.translations + , body = always <| text "" + , confirm = getMessage "Confirm" loggedData.translations + , confirmMsg = always <| Msg.Dialog <| Dialog.UpdateAndClose <| Msg.UpdateLoggedIn <| LoggedInMsg.DeleteIncome incomeId + , undo = getMessage "Undo" loggedData.translations + } + in button + ( Tooltip.show Msg.Tooltip (getMessage "Delete" loggedData.translations) + ++ [ onClick (Msg.Dialog <| Dialog.Open dialogConfig) ] + ) + [ FontAwesome.trash Color.chestnutRose 18 ] + ] + ] -- cgit v1.2.3