UI payment delete, not done on server side yet

4 files changed, 49 insertions, 16 deletions

diff --git a/src/client/Model/Payment.elm b/src/client/Model/Payment.elm
index fa59943..e773be3 100644
--- a/src/client/Model/Payment.elm
+++ b/src/client/Model/Payment.elm
@@ -2,17 +2,22 @@ module Model.Payment
   ( Payments
   , Payment
   , PaymentId
+  , PaymentWithId
   , paymentsDecoder
+  , addPayment
+  , removePayment
   ) where
 
 import Date exposing (..)
 import Json.Decode as Json exposing ((:=))
+import Dict exposing (..)
 
-type alias Payments = List Payment
+type alias Payments = Dict PaymentId Payment
+
+type alias PaymentWithId = (PaymentId, Payment)
 
 type alias Payment =
-  { id : PaymentId
-  , creation : Date
+  { creation : Date
   , name : String
   , cost : Int
   , userName : String
@@ -21,12 +26,15 @@ type alias Payment =
 type alias PaymentId = String
 
 paymentsDecoder : Json.Decoder Payments
-paymentsDecoder = Json.list paymentDecoder
+paymentsDecoder = Json.map Dict.fromList (Json.list paymentWithIdDecoder)
+
+paymentWithIdDecoder : Json.Decoder (PaymentId, Payment)
+paymentWithIdDecoder =
+  paymentDecoder `Json.andThen` (\payment -> Json.map (\id -> (id, payment)) ("id" := Json.string))
 
 paymentDecoder : Json.Decoder Payment
 paymentDecoder =
-  Json.object5 Payment
-    ("id" := paymentIdDecoder)
+  Json.object4 Payment
     ("creation" := dateDecoder)
     ("name" := Json.string)
     ("cost" := Json.int)
@@ -37,3 +45,9 @@ paymentIdDecoder = Json.string
 
 dateDecoder : Json.Decoder Date
 dateDecoder = Json.customDecoder Json.string Date.fromString
+
+addPayment : Payments -> (PaymentId, Payment) -> Payments
+addPayment payments (paymentId, payment) = Dict.insert paymentId payment payments
+
+removePayment : Payments -> PaymentId -> Payments
+removePayment payments paymentId = Dict.remove paymentId payments
diff --git a/src/client/Update/Payment.elm b/src/client/Update/Payment.elm
index 817a3f0..67331d6 100644
--- a/src/client/Update/Payment.elm
+++ b/src/client/Update/Payment.elm
@@ -17,6 +17,7 @@ type PaymentAction =
   | UpdatePayments Payments
   | AddPayment PaymentId String Int
   | ToggleEdit PaymentId
+  | Remove PaymentId
 
 updatePayment : Model -> PaymentAction -> PaymentView -> PaymentView
 updatePayment model action paymentView =
@@ -27,15 +28,16 @@ updatePayment model action paymentView =
       { paymentView | payments <- payments }
     AddPayment id name cost ->
       let payment =
-            { id = id
-            , creation = Date.fromTime model.currentTime
+            { creation = Date.fromTime model.currentTime
             , name = name
             , cost = cost
             , userName = paymentView.userName
             }
       in  { paymentView
-          | payments <- payment :: paymentView.payments
+          | payments <- addPayment paymentView.payments (id, payment)
           , add <- initAddPayment
           }
     ToggleEdit id ->
       { paymentView | edition <- if paymentView.edition == Just id then Nothing else Just id }
+    Remove id ->
+      { paymentView | payments <- removePayment paymentView.payments id }
diff --git a/src/client/View/Payments/Table.elm b/src/client/View/Payments/Table.elm
index 7fa2ff1..9033db8 100644
--- a/src/client/View/Payments/Table.elm
+++ b/src/client/View/Payments/Table.elm
@@ -5,6 +5,7 @@ module View.Payments.Table
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
+import Dict exposing (..)
 
 import Date
 import Date exposing (Date)
@@ -12,7 +13,7 @@ import Date exposing (Date)
 import String exposing (append)
 
 import Model exposing (Model)
-import Model.Payment exposing (Payments, Payment)
+import Model.Payment exposing (..)
 import Model.View.PaymentView exposing (PaymentView)
 
 import Update exposing (..)
@@ -31,24 +32,31 @@ paymentsTable model paymentView =
         , div [ class "cell cost" ] [ renderIcon "euro" ]
         , div [ class "cell user" ] [ renderIcon "user" ]
         , div [ class "cell date" ] [ renderIcon "calendar" ]
+        , div [ class "cell" ] []
         ]
     ] ++ (paymentLines model paymentView))
 
 paymentLines : Model -> PaymentView -> List Html
 paymentLines model paymentView =
   paymentView.payments
-    |> List.sortBy (Date.toTime << .creation)
+    |> Dict.toList
+    |> List.sortBy (\(_, payment) -> Date.toTime payment.creation)
     |> List.reverse
     |> List.map (paymentLine model paymentView)
 
-paymentLine : Model -> PaymentView -> Payment -> Html
-paymentLine model paymentView payment =
+paymentLine : Model -> PaymentView -> PaymentWithId -> Html
+paymentLine model paymentView (id, payment) =
   a
-    [ class ("row " ++ (if paymentView.edition == Just payment.id then "edition" else ""))
-    , onClick actions.address (UpdatePayment (ToggleEdit payment.id))
+    [ class ("row " ++ (if paymentView.edition == Just id then "edition" else ""))
+    , onClick actions.address (UpdatePayment (ToggleEdit id))
     ]
     [ div [ class "cell" ] [ text payment.name ]
     , div [ class "cell" ] [ text ((toString payment.cost) ++ " €") ]
     , div [ class "cell" ] [ text payment.userName ]
     , div [ class "cell" ] [ text (renderDate payment.creation model.translations) ]
+    , div
+        [ class "cell remove"
+        , onClick actions.address (UpdatePayment (Remove id))
+        ]
+        [ renderIcon "times" ]
     ]
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index b2b6744..f7dd28d 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -122,7 +122,9 @@ global = do
         cursor pointer
         lineHeight (px 60)
         nthChild "odd" & backgroundColor C.lightGrey
-        ".edition" & backgroundColor C.orange
+        ".edition" & do
+          backgroundColor C.orange
+          ".remove" ? visibility visible
 
       ".cell" ? do
         display tableCell
@@ -130,6 +132,13 @@ global = do
         ".cost" & width (pct 20)
         ".user" & width (pct 20)
         ".date" & width (pct 20)
+        ".remove" & do
+          width (px 10)
+          height (px 10)
+          textAlign (alignSide sideCenter)
+          backgroundColor C.brown
+          color C.white
+          visibility hidden
 
   ".signIn" ? do