Confirm before payment deletion

10 files changed, 49 insertions, 46 deletions

diff --git a/src/client/elm/LoggedIn/Home/Model.elm b/src/client/elm/LoggedIn/Home/Model.elm
index be32fb7..caedc29 100644
--- a/src/client/elm/LoggedIn/Home/Model.elm
+++ b/src/client/elm/LoggedIn/Home/Model.elm
@@ -14,8 +14,7 @@ import Model.Payment as Payment exposing (PaymentId, Payments, Frequency(..))
 import Model.Payer exposing (Payers)
 
 type alias Model =
-  { paymentEdition : Maybe PaymentId
-  , currentPage : Int
+  { currentPage : Int
   , search : Form String Search
   }
 
@@ -26,8 +25,7 @@ type alias Search =
 
 init : Model
 init =
-  { paymentEdition = Nothing
-  , currentPage = 1
+  { currentPage = 1
   , search = Form.initial (searchInitial Punctual) searchValidation
   }
 
diff --git a/src/client/elm/LoggedIn/Home/Msg.elm b/src/client/elm/LoggedIn/Home/Msg.elm
index 73b8980..b5f2566 100644
--- a/src/client/elm/LoggedIn/Home/Msg.elm
+++ b/src/client/elm/LoggedIn/Home/Msg.elm
@@ -8,6 +8,5 @@ import Model.Payment exposing (PaymentId)
 
 type Msg =
   NoOp
-  | ToggleEdit PaymentId
   | UpdatePage Int
   | SearchMsg Form.Msg
diff --git a/src/client/elm/LoggedIn/Home/Update.elm b/src/client/elm/LoggedIn/Home/Update.elm
index 160e279..d1a3239 100644
--- a/src/client/elm/LoggedIn/Home/Update.elm
+++ b/src/client/elm/LoggedIn/Home/Update.elm
@@ -18,11 +18,6 @@ update loggedData msg model =
       , Cmd.none
       )
 
-    Home.ToggleEdit id ->
-      ( { model | paymentEdition = if model.paymentEdition == Just id then Nothing else Just id }
-      , Cmd.none
-      )
-
     Home.UpdatePage page ->
       ( { model | currentPage = page }
       , Cmd.none
diff --git a/src/client/elm/LoggedIn/Home/View/Table.elm b/src/client/elm/LoggedIn/Home/View/Table.elm
index fa0a93d..b86976c 100644
--- a/src/client/elm/LoggedIn/Home/View/Table.elm
+++ b/src/client/elm/LoggedIn/Home/View/Table.elm
@@ -28,6 +28,8 @@ import Model.User exposing (getUserName)
 import Model.Payment as Payment exposing (..)
 import Model.Translations exposing (getMessage)
 
+import Dialog
+
 view : LoggedData -> HomeModel.Model -> Payments -> Frequency -> Html Msg
 view loggedData homeModel payments frequency =
   let visiblePayments =
@@ -63,13 +65,8 @@ headerLine loggedData frequency =
 
 paymentLine : LoggedData -> HomeModel.Model -> Frequency -> Payment -> Html Msg
 paymentLine loggedData homeModel frequency payment =
-  a
-    [ classList
-        [ ("row", True)
-        , ("edition", homeModel.paymentEdition == Just payment.id)
-        ]
-    , onClick (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.ToggleEdit <| payment.id)
-    ]
+  div
+    [ class "row" ]
     [ div [ class "cell category" ] [ text payment.name ]
     , div
         [ classList
@@ -98,14 +95,22 @@ paymentLine loggedData homeModel frequency payment =
             ]
         Monthly ->
           text ""
-    , if loggedData.me == payment.userId
-        then
-          div
-            [ class "cell delete" ]
-            [ button
-                [ onClick (Msg.UpdateLoggedIn <| LoggedInMsg.DeletePayment payment.id)]
-                [ FontAwesome.times Color.white 20 ]
-            ]
-        else
-          div [ class "cell" ] []
+    , div
+        [ class "cell delete" ]
+        [ if loggedData.me /= payment.userId
+            then
+              text ""
+            else
+              let dialogConfig =
+                    { className = "paymentDialog"
+                    , title = getMessage "ConfirmPaymentDelete" loggedData.translations
+                    , body = always <| text ""
+                    , confirm = getMessage "Confirm" loggedData.translations
+                    , confirmMsg = always <| Ok <| Msg.UpdateLoggedIn <| LoggedInMsg.DeletePayment payment.id
+                    , undo = getMessage "Undo" loggedData.translations
+                    }
+              in  button
+                    [ onClick (Msg.Dialog <| Dialog.Open dialogConfig) ]
+                    [ FontAwesome.trash Color.chestnutRose 18 ]
+        ]
     ]
diff --git a/src/client/elm/LoggedIn/Income/View.elm b/src/client/elm/LoggedIn/Income/View.elm
index 02e4467..f6cf8f8 100644
--- a/src/client/elm/LoggedIn/Income/View.elm
+++ b/src/client/elm/LoggedIn/Income/View.elm
@@ -114,7 +114,7 @@ incomeView loggedData (incomeId, income) =
     , text <| Format.price loggedData.conf income.amount
     , let dialogConfig =
             { className = "incomeDialog"
-            , title = getMessage "ConfirmDelete" loggedData.translations
+            , title = getMessage "ConfirmIncomeDelete" loggedData.translations
             , body = always <| text ""
             , confirm = getMessage "Confirm" loggedData.translations
             , confirmMsg = always <| Ok <| Msg.UpdateLoggedIn <| LoggedInMsg.DeleteIncome incomeId
@@ -122,5 +122,5 @@ incomeView loggedData (incomeId, income) =
             }
       in  button
             [ onClick (Msg.Dialog <| Dialog.Open dialogConfig) ]
-            [ FontAwesome.remove Color.chestnutRose 14 ]
+            [ FontAwesome.trash Color.chestnutRose 14 ]
     ]
diff --git a/src/client/elm/View/Form.elm b/src/client/elm/View/Form.elm
index 9b83bf7..1522b1f 100644
--- a/src/client/elm/View/Form.elm
+++ b/src/client/elm/View/Form.elm
@@ -41,7 +41,9 @@ textInput translations form formName fieldName =
             [ for (formName ++ fieldName) ]
             [ text (Translations.getMessage (formName ++ fieldName) translations) ]
         , button
-            [ onClick (Form.Input fieldName Field.EmptyField) ]
+            [ onClick (Form.Input fieldName Field.EmptyField)
+            , tabindex -1
+            ]
             [ FontAwesome.times Color.silver 15 ]
         , case field.liveError of
             Just error -> formError translations error
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index 00de12d..612759b 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -82,9 +82,16 @@ design = do
         marginLeft (px 10)
         marginRight (px 10)
 
-      input ? display none
+      input ? do
+        opacity 0
+        width (px 30)
+        margin (px 0) (px (-15)) (px 0) (px (-15))
+
       label ? cursor pointer
 
+      "input:focus + label" ? do
+        textDecoration underline
+
       "input:checked + label" ? do
         color Color.chestnutRose
         fontWeight bold
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 2594f25..0085e4a 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -11,8 +11,7 @@ import qualified Clay.Display as D
 
 import Design.Color as Color
 import qualified Design.Media as Media
-import Design.Constants
-import Design.Helper
+import Design.Constants as Constants
 
 design :: Css
 design = do
@@ -41,9 +40,6 @@ design = do
 
       nthChild "odd" & do
         backgroundColor Color.wildSand
-      ".edition" & do
-        backgroundColor Color.negroni
-        ".delete" |> button ? visibility visible
 
     ".cell" ? do
       display tableCell
@@ -66,11 +62,5 @@ design = do
         position relative
         width (pct 3)
         textAlign (alignSide sideCenter)
-        button ? do
-          defaultButton Color.chestnutRose Color.white (px rowHeightPx) focusLighten
-          borderRadius (px 0) (px 0) (px 0) (px 0)
-          position absolute
-          top (px 0)
-          right (px 0)
-          width (pct 100)
-          visibility hidden
+        button # hover ? "svg path" ? do
+          "fill" -: "rgb(227, 112, 106)"
diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs
index 093024b..a88d2b8 100644
--- a/src/server/Model/Message/Key.hs
+++ b/src/server/Model/Message/Key.hs
@@ -79,6 +79,8 @@ data Key =
   | PaymentPunctual
   | PaymentMonthly
 
+  | ConfirmPaymentDelete
+
   -- Statistics
 
   | Statistics
@@ -93,7 +95,7 @@ data Key =
   | IncomeNotDeleted
   | IncomeDate
   | IncomeAmount
-  | ConfirmDelete
+  | ConfirmIncomeDelete
 
   -- Form
 
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 6522d75..3b91d17 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -327,6 +327,11 @@ m l PaymentMonthly =
     English -> "Monthly"
     French  -> "Mensuel"
 
+m l ConfirmPaymentDelete =
+  case l of
+    English -> "Are you sure to delete this payment ?"
+    French  -> "Voulez-vous vraiment supprimer ce paiement ?"
+
 -- Income
 
 m l CumulativeIncomesSince =
@@ -359,7 +364,7 @@ m l IncomeAmount =
     English -> "Amount"
     French  -> "Montant"
 
-m l ConfirmDelete =
+m l ConfirmIncomeDelete =
   case l of
     English -> "Are you sure to delete this income ?"
     French  -> "Voulez-vous vraiment supprimer ce revenu ?"