One payment is clickable and set to orange for the moment

7 files changed, 65 insertions, 37 deletions

diff --git a/src/client/Model/Payment.elm b/src/client/Model/Payment.elm
index ff8f157..fa59943 100644
--- a/src/client/Model/Payment.elm
+++ b/src/client/Model/Payment.elm
@@ -1,6 +1,7 @@
 module Model.Payment
   ( Payments
   , Payment
+  , PaymentId
   , paymentsDecoder
   ) where
 
@@ -10,24 +11,29 @@ import Json.Decode as Json exposing ((:=))
 type alias Payments = List Payment
 
 type alias Payment =
-  { id : String
+  { id : PaymentId
   , creation : Date
   , name : String
   , cost : Int
   , userName : String
   }
 
+type alias PaymentId = String
+
 paymentsDecoder : Json.Decoder Payments
 paymentsDecoder = Json.list paymentDecoder
 
 paymentDecoder : Json.Decoder Payment
 paymentDecoder =
   Json.object5 Payment
-    ("id" := Json.string)
+    ("id" := paymentIdDecoder)
     ("creation" := dateDecoder)
     ("name" := Json.string)
     ("cost" := Json.int)
     ("userName" := Json.string)
 
+paymentIdDecoder : Json.Decoder PaymentId
+paymentIdDecoder = Json.string
+
 dateDecoder : Json.Decoder Date
 dateDecoder = Json.customDecoder Json.string Date.fromString
diff --git a/src/client/Model/View/Payment/Edition.elm b/src/client/Model/View/Payment/Edition.elm
index a650fa8..f58ce43 100644
--- a/src/client/Model/View/Payment/Edition.elm
+++ b/src/client/Model/View/Payment/Edition.elm
@@ -2,4 +2,6 @@ module Model.View.Payment.Edition
   ( Edition
   ) where
 
-type alias Edition = String
+import Model.Payment exposing (PaymentId)
+
+type alias Edition = PaymentId
diff --git a/src/client/Update/Payment.elm b/src/client/Update/Payment.elm
index 7826098..817a3f0 100644
--- a/src/client/Update/Payment.elm
+++ b/src/client/Update/Payment.elm
@@ -15,7 +15,8 @@ import Update.Payment.Add exposing (..)
 type PaymentAction =
   UpdateAdd AddPaymentAction
   | UpdatePayments Payments
-  | AddPayment String String Int
+  | AddPayment PaymentId String Int
+  | ToggleEdit PaymentId
 
 updatePayment : Model -> PaymentAction -> PaymentView -> PaymentView
 updatePayment model action paymentView =
@@ -36,3 +37,5 @@ updatePayment model action paymentView =
           | payments <- payment :: paymentView.payments
           , add <- initAddPayment
           }
+    ToggleEdit id ->
+      { paymentView | edition <- if paymentView.edition == Just id then Nothing else Just id }
diff --git a/src/client/View/Payments.elm b/src/client/View/Payments.elm
index c79b9c5..29ab481 100644
--- a/src/client/View/Payments.elm
+++ b/src/client/View/Payments.elm
@@ -17,5 +17,5 @@ renderPayments model paymentView =
   div
     [ class "payments" ]
     [ addPayment model paymentView.add
-    , paymentsTable model paymentView.payments
+    , paymentsTable model paymentView
     ]
diff --git a/src/client/View/Payments/Table.elm b/src/client/View/Payments/Table.elm
index e5c1a9a..7fa2ff1 100644
--- a/src/client/View/Payments/Table.elm
+++ b/src/client/View/Payments/Table.elm
@@ -4,6 +4,7 @@ module View.Payments.Table
 
 import Html exposing (..)
 import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 
 import Date
 import Date exposing (Date)
@@ -12,36 +13,42 @@ import String exposing (append)
 
 import Model exposing (Model)
 import Model.Payment exposing (Payments, Payment)
+import Model.View.PaymentView exposing (PaymentView)
+
+import Update exposing (..)
+import Update.Payment exposing (..)
 
 import View.Icon exposing (renderIcon)
 import View.Date exposing (renderDate)
 
-paymentsTable : Model -> Payments -> Html
-paymentsTable model payments =
-  table
-    []
-    ([ tr
-        []
-        [ th [ class "category" ] [ renderIcon "shopping-cart" ]
-        , th [ class "cost" ] [ renderIcon "euro" ]
-        , th [ class "user" ] [ renderIcon "user" ]
-        , th [ class "date" ] [ renderIcon "calendar" ]
+paymentsTable : Model -> PaymentView -> Html
+paymentsTable model paymentView =
+  div
+    [ class "table" ]
+    ([ div
+        [ class "header" ]
+        [ div [ class "cell category" ] [ renderIcon "shopping-cart" ]
+        , div [ class "cell cost" ] [ renderIcon "euro" ]
+        , div [ class "cell user" ] [ renderIcon "user" ]
+        , div [ class "cell date" ] [ renderIcon "calendar" ]
         ]
-    ] ++ (paymentLines model payments))
+    ] ++ (paymentLines model paymentView))
 
-paymentLines : Model -> Payments -> List Html
-paymentLines model payments =
-  payments
+paymentLines : Model -> PaymentView -> List Html
+paymentLines model paymentView =
+  paymentView.payments
     |> List.sortBy (Date.toTime << .creation)
     |> List.reverse
-    |> List.map (paymentLine model)
-
-paymentLine : Model -> Payment -> Html
-paymentLine model payment =
-  tr
-    []
-    [ td [] [ text payment.name ]
-    , td [] [ text ((toString payment.cost) ++ " €") ]
-    , td [] [ text payment.userName ]
-    , td [] [ text (renderDate payment.creation model.translations) ]
+    |> List.map (paymentLine model paymentView)
+
+paymentLine : Model -> PaymentView -> Payment -> Html
+paymentLine model paymentView payment =
+  a
+    [ class ("row " ++ (if paymentView.edition == Just payment.id then "edition" else ""))
+    , onClick actions.address (UpdatePayment (ToggleEdit payment.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) ]
     ]
diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index 97ad3d2..f4223a2 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -11,6 +11,9 @@ red = C.red
 brown :: C.Color
 brown = C.brown
 
+orange :: C.Color
+orange = C.orange
+
 green :: C.Color
 green = C.green
 
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index bdf4cdb..b2b6744 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -10,9 +10,9 @@ import Prelude
 import Data.Monoid ((<>))
 
 import Clay
+import qualified Clay.Display as D
 
 import Data.Text.Lazy (Text)
-import qualified Clay.Display as D
 
 import Design.Color as C
 
@@ -103,27 +103,34 @@ global = do
         top (px (inputHeight + 10))
         left (px 0)
 
-    table ? do
+    ".table" ? do
+      display D.table
       width (pct 100)
       textAlign (alignSide (sideCenter))
       "border-spacing" -: "10 px"
 
-      th ? do
+      ".header" <> ".row" ? display tableRow
+
+      ".header" ? do
         backgroundColor C.brown
         color C.white
         fontSize (px iconFontSize)
         lineHeight (px 70)
 
+      ".row" ? do
+        fontSize (px 20)
+        cursor pointer
+        lineHeight (px 60)
+        nthChild "odd" & backgroundColor C.lightGrey
+        ".edition" & backgroundColor C.orange
+
+      ".cell" ? do
+        display tableCell
         ".category" & width (pct 40)
         ".cost" & width (pct 20)
         ".user" & width (pct 20)
         ".date" & width (pct 20)
 
-      tr ? do
-        fontSize (px 20)
-        lineHeight (px 60)
-        nthChild "odd" & backgroundColor C.lightGrey
-
   ".signIn" ? do
 
     form ? do