Show montly payments with an expandable mechanism

4 files changed, 70 insertions, 28 deletions

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)) ]