From e10531ba4e60c8709088798763ae3bae6608f9c9 Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 6 Sep 2015 12:39:03 +0200 Subject: Show montly payments with an expandable mechanism --- src/client/View/Payments/Add.elm | 12 ++++---- src/client/View/Payments/Monthly.elm | 57 ++++++++++++++++++++++++++++++------ src/client/View/Payments/Paging.elm | 2 +- src/client/View/Payments/Table.elm | 27 +++++++++-------- 4 files changed, 70 insertions(+), 28 deletions(-) (limited to 'src/client/View') diff --git a/src/client/View/Payments/Add.elm b/src/client/View/Payments/Add.elm index a22c1f1..21406b2 100644 --- a/src/client/View/Payments/Add.elm +++ b/src/client/View/Payments/Add.elm @@ -11,8 +11,8 @@ import Result exposing (..) import ServerCommunication as SC exposing (serverCommunications) import Update exposing (..) -import Update.Payment exposing (..) -import Update.Payment.Add exposing (..) +import Update.LoggedView exposing (..) +import Update.LoggedView.Add exposing (..) import Model exposing (Model) import Model.View.Payment.Add exposing (..) @@ -33,7 +33,7 @@ addPayment model loggedView = (Ok name, Ok cost) -> onSubmitPrevDefault serverCommunications.address (SC.AddPayment loggedView.me name cost loggedView.add.frequency) (resName, resCost) -> - onSubmitPrevDefault actions.address (UpdatePayment <| UpdateAdd <| AddError (toMaybeError resName) (toMaybeError resCost)) + onSubmitPrevDefault actions.address (UpdateLoggedView <| UpdateAdd <| AddError (toMaybeError resName) (toMaybeError resCost)) ] [ addPaymentName loggedView.add , addPaymentCost model loggedView.add @@ -50,7 +50,7 @@ addPaymentName addPayment = [ input [ id "nameInput" , value addPayment.name - , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateName) + , on "input" targetValue (Signal.message actions.address << UpdateLoggedView << UpdateAdd << UpdateName) , maxlength 20 ] [] @@ -71,7 +71,7 @@ addPaymentCost model addPayment = [ input [ id "costInput" , value addPayment.cost - , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateCost) + , on "input" targetValue (Signal.message actions.address << UpdateLoggedView << UpdateAdd << UpdateCost) , maxlength 7 ] [] @@ -89,7 +89,7 @@ paymentFrequency : Model -> AddPayment -> Html paymentFrequency model addPayment = div [ class "frequency" - , onClick actions.address (UpdatePayment << UpdateAdd <| ToggleFrequency) + , onClick actions.address (UpdateLoggedView << UpdateAdd <| ToggleFrequency) ] [ div [ class ("punctual" ++ if addPayment.frequency == Punctual then " selected" else "") ] diff --git a/src/client/View/Payments/Monthly.elm b/src/client/View/Payments/Monthly.elm index 366af92..e115dbf 100644 --- a/src/client/View/Payments/Monthly.elm +++ b/src/client/View/Payments/Monthly.elm @@ -6,19 +6,58 @@ import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (..) +import Update exposing (..) +import Update.LoggedView exposing (..) +import Update.LoggedView.Monthly exposing (..) + import Model exposing (Model) -import Model.Payment exposing (Payments) +import Model.View.Payment.Monthly exposing (Monthly) +import Model.Payment exposing (Payments, Payment) import Model.View.LoggedView exposing (LoggedView) -import Model.Translations exposing (getVarMessage) +import Model.Translations exposing (getMessage, getVarMessage) + +import View.Icon exposing (renderIcon) monthlyPayments : Model -> LoggedView -> Html monthlyPayments model loggedView = - div - [ class "monthlyPayments" ] - [ monthlyCount model loggedView.monthlyPayments ] + let monthly = loggedView.monthly + in if List.isEmpty monthly.payments + then + text "" + else + div + [ class ("monthlyPayments" ++ if monthly.visibleDetail then " detail" else "") ] + [ monthlyCount model monthly + , if monthly.visibleDetail then paymentsTable model monthly else text "" + ] -monthlyCount : Model -> Payments -> Html -monthlyCount model monthlyPayments = - let count = List.length monthlyPayments +monthlyCount : Model -> Monthly -> Html +monthlyCount model monthly = + let count = List.length monthly.payments key = if count > 1 then "PluralMonthlyCount" else "SingularMonthlyCount" - in text (getVarMessage [toString count] key model.translations) + in button + [ class "count" + , onClick actions.address (UpdateLoggedView << UpdateMonthly <| ToggleDetail) + ] + [ text (getVarMessage [toString count] key model.translations) + , div + [ class "expand" ] + [ if monthly.visibleDetail + then renderIcon "chevron-up" + else renderIcon "chevron-down" + ] + ] + +paymentsTable : Model -> Monthly -> Html +paymentsTable model monthly = + div + [ class "table" ] + ( List.map (paymentLine model) monthly.payments ) + +paymentLine : Model -> Payment -> Html +paymentLine model payment = + a + [ class "row" ] + [ div [ class "cell" ] [ text (payment.name) ] + , div [ class "cell" ] [ text (toString payment.cost ++ " " ++ getMessage "MoneySymbol" model.translations) ] + ] diff --git a/src/client/View/Payments/Paging.elm b/src/client/View/Payments/Paging.elm index b06d749..53df3b3 100644 --- a/src/client/View/Payments/Paging.elm +++ b/src/client/View/Payments/Paging.elm @@ -12,7 +12,7 @@ import Model.Payment exposing (perPage) import ServerCommunication as SC exposing (serverCommunications) import Update exposing (..) -import Update.Payment exposing (..) +import Update.LoggedView exposing (..) import View.Icon exposing (renderIcon) diff --git a/src/client/View/Payments/Table.elm b/src/client/View/Payments/Table.elm index 4a1ed50..4642f65 100644 --- a/src/client/View/Payments/Table.elm +++ b/src/client/View/Payments/Table.elm @@ -21,7 +21,7 @@ import Model.Translations exposing (getMessage) import ServerCommunication as SC exposing (serverCommunications) import Update exposing (..) -import Update.Payment exposing (..) +import Update.LoggedView exposing (..) import View.Icon exposing (renderIcon) import View.Date exposing (..) @@ -30,15 +30,18 @@ paymentsTable : Model -> LoggedView -> Html paymentsTable model loggedView = div [ class "table" ] - ([ div - [ class "header" ] - [ div [ class "cell category" ] [ renderIcon "shopping-cart" ] - , div [ class "cell cost" ] [ text (getMessage "MoneySymbol" model.translations) ] - , div [ class "cell user" ] [ renderIcon "user" ] - , div [ class "cell date" ] [ renderIcon "calendar" ] - , div [ class "cell" ] [] - ] - ] ++ (paymentLines model loggedView)) + ( headerLine model :: paymentLines model loggedView) + +headerLine : Model -> Html +headerLine model = + div + [ class "header" ] + [ div [ class "cell category" ] [ renderIcon "shopping-cart" ] + , div [ class "cell cost" ] [ text (getMessage "MoneySymbol" model.translations) ] + , div [ class "cell user" ] [ renderIcon "user" ] + , div [ class "cell date" ] [ renderIcon "calendar" ] + , div [ class "cell" ] [] + ] paymentLines : Model -> LoggedView -> List Html paymentLines model loggedView = @@ -50,8 +53,8 @@ paymentLines model loggedView = paymentLine : Model -> LoggedView -> Payment -> Html paymentLine model loggedView payment = a - [ class ("row " ++ (if loggedView.edition == Just payment.id then "edition" else "")) - , onClick actions.address (UpdatePayment (ToggleEdit payment.id)) + [ class ("row " ++ (if loggedView.paymentEdition == Just payment.id then "edition" else "")) + , onClick actions.address (UpdateLoggedView (ToggleEdit payment.id)) ] [ div [ class "cell category" ] [ text payment.name ] , div [ class "cell cost" ] [ text ((toString payment.cost) ++ " " ++ (getMessage "MoneySymbol" model.translations)) ] -- cgit v1.2.3