From 0dc740d8f64b31ff49b7cfb51ddc2dde7b5c121e Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 26 Jun 2016 13:22:47 +0200 Subject: Confirm before payment deletion --- src/client/elm/LoggedIn/Home/Model.elm | 6 ++--- src/client/elm/LoggedIn/Home/Msg.elm | 1 - src/client/elm/LoggedIn/Home/Update.elm | 5 ---- src/client/elm/LoggedIn/Home/View/Table.elm | 39 ++++++++++++++++------------- src/client/elm/LoggedIn/Income/View.elm | 4 +-- src/client/elm/View/Form.elm | 4 ++- src/server/Design/Form.hs | 9 ++++++- src/server/Design/LoggedIn/Home/Table.hs | 16 +++--------- src/server/Model/Message/Key.hs | 4 ++- src/server/Model/Message/Translations.hs | 7 +++++- 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 ?" -- cgit v1.2.3