Add a dialog to confirm income deletion

13 files changed, 199 insertions, 16 deletions

diff --git a/src/client/elm/Dialog.elm b/src/client/elm/Dialog.elm
new file mode 100644
index 0000000..0fb43db
--- /dev/null
+++ b/src/client/elm/Dialog.elm
@@ -0,0 +1,145 @@
+module Dialog exposing
+  ( Msg(..)
+  , Model
+  , Config
+  , init
+  , update
+  , view
+  )
+
+import Platform.Cmd exposing (Cmd)
+import Task
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+
+-- Model
+
+type alias Model model msg =
+  { config : Maybe (Config model msg)
+  , mapMsg : Msg model msg -> msg
+  }
+
+type alias Config model msg =
+  { title : String
+  , body : model -> Html msg
+  , confirm : String
+  , confirmMsg : msg
+  , undo : String
+  }
+
+init : (Msg model msg -> msg) -> Model model msg
+init mapMsg =
+  { config = Nothing
+  , mapMsg = mapMsg
+  }
+
+-- Update
+
+type Msg model msg =
+  NoOp
+  | ConfirmMsg msg
+  | Open (Config model msg)
+  | Close
+
+update : Msg model msg -> Model model msg -> (Model model msg, Cmd msg)
+update msg model =
+  case msg of
+    NoOp ->
+      ( model
+      , Cmd.none
+      )
+
+    ConfirmMsg confirmMsg ->
+      ( { model | config = Nothing }
+      , Task.succeed msg
+          |> Task.perform (always confirmMsg) (always confirmMsg)
+      )
+
+    Open config ->
+      ( { model | config = Just config }
+      , Cmd.none
+      )
+
+    Close ->
+      ( { model | config = Nothing }
+      , Cmd.none
+      )
+
+-- View
+
+view : model -> Model model msg -> Html msg
+view model { mapMsg, config } =
+  let isVisible =
+        case config of
+          Just _ -> True
+          Nothing -> False
+  in  div
+        [ class "dialog" ]
+        [ curtain mapMsg isVisible
+        , case config of
+            Nothing ->
+              text ""
+            Just c  ->
+              dialog model mapMsg c
+        ]
+
+curtain : (Msg model msg -> msg) -> Bool -> Html msg
+curtain mapMsg isVisible =
+  div
+    [ class "curtain"
+    , style
+        [ ("position", "absolute")
+        , ("top", "0")
+        , ("left", "0")
+        , ("width", "100%")
+        , ("height", "100%")
+        , ("background-color", "rgba(0, 0, 0, 0.5)")
+        , ("z-index", if isVisible then "1000" else "-1")
+        , ("opacity", if isVisible then "1" else "0")
+        , ("transition", "all 0.2s ease")
+        ]
+    , onClick (mapMsg Close)
+    ]
+    []
+
+dialog : model -> (Msg model msg -> msg) -> Config model msg -> Html msg
+dialog model mapMsg { title, body, confirm, confirmMsg, undo } =
+  div
+    [ class "content"
+    , style
+        [ ("min-width", "300px")
+        , ("position", "absolute")
+        , ("top", "25%")
+        , ("left", "50%")
+        , ("transform", "translate(-50%, -50%)")
+        , ("z-index", "1000")
+        , ("background-color", "white")
+        , ("padding", "20px")
+        , ("border-radius", "5px")
+        , ("box-shadow", "0px 0px 15px rgba(0, 0, 0, 0.5)")
+        ]
+    ]
+    [ h1 [] [ text title ]
+    , body model
+    , div
+        [ style
+            [ ("float", "right")
+            ]
+        ]
+        [ button
+            [ class "confirm"
+            , onClick (mapMsg <| ConfirmMsg confirmMsg)
+            , style
+                [ ("margin-right", "15px")
+                ]
+            ]
+            [ text confirm ]
+        , button
+            [ class "undo"
+            , onClick (mapMsg Close)
+            ]
+            [ text undo ]
+        ]
+    ]
diff --git a/src/client/elm/LoggedIn/Home/AddPayment/Update.elm b/src/client/elm/LoggedIn/Home/AddPayment/Update.elm
index 46b3786..dc1ea57 100644
--- a/src/client/elm/LoggedIn/Home/AddPayment/Update.elm
+++ b/src/client/elm/LoggedIn/Home/AddPayment/Update.elm
@@ -13,8 +13,8 @@ import Model.Translations exposing (Translations, getMessage)
 import Model.Payment exposing (Frequency(..))
 
 update : AddPaymentMsg.Msg -> AddPaymentModel.Model -> AddPaymentModel.Model
-update action addPayment =
-  case action of
+update msg addPayment =
+  case msg of
 
     AddPaymentMsg.NoOp ->
       addPayment
diff --git a/src/client/elm/LoggedIn/Home/Update.elm b/src/client/elm/LoggedIn/Home/Update.elm
index 078036d..af3504a 100644
--- a/src/client/elm/LoggedIn/Home/Update.elm
+++ b/src/client/elm/LoggedIn/Home/Update.elm
@@ -12,8 +12,8 @@ import LoggedIn.Home.Model as HomeModel
 import LoggedIn.Home.AddPayment.Update as AddPaymentUpdate
 
 update : LoggedData -> HomeMsg.Msg -> HomeModel.Model -> (HomeModel.Model, Cmd HomeMsg.Msg)
-update loggedData action homeModel =
-  case action of
+update loggedData msg homeModel =
+  case msg of
 
     HomeMsg.NoOp -> (homeModel, Cmd.none)
 
diff --git a/src/client/elm/LoggedIn/Income/Model.elm b/src/client/elm/LoggedIn/Income/Model.elm
index 4c82ab1..e56e290 100644
--- a/src/client/elm/LoggedIn/Income/Model.elm
+++ b/src/client/elm/LoggedIn/Income/Model.elm
@@ -16,6 +16,7 @@ import Form.Validate as Validate exposing (..)
 
 type alias Model =
   { addIncome : Form String AddIncome
+  , test : Bool
   }
 
 type alias AddIncome =
@@ -26,6 +27,7 @@ type alias AddIncome =
 init : Model
 init =
   { addIncome = initForm
+  , test = False
   }
 
 initForm : Form String AddIncome
diff --git a/src/client/elm/LoggedIn/Income/Msg.elm b/src/client/elm/LoggedIn/Income/Msg.elm
index 0a09dad..b3f3633 100644
--- a/src/client/elm/LoggedIn/Income/Msg.elm
+++ b/src/client/elm/LoggedIn/Income/Msg.elm
@@ -7,3 +7,4 @@ import Form exposing (Form)
 type Msg =
   NoOp
   | AddIncomeMsg Form.Msg
+  | ToggleTest
diff --git a/src/client/elm/LoggedIn/Income/Update.elm b/src/client/elm/LoggedIn/Income/Update.elm
index 74920f3..8fa47fc 100644
--- a/src/client/elm/LoggedIn/Income/Update.elm
+++ b/src/client/elm/LoggedIn/Income/Update.elm
@@ -10,8 +10,8 @@ import LoggedIn.Income.Model as IncomeModel
 import LoggedIn.Income.Msg as IncomeMsg
 
 update : LoggedData -> IncomeMsg.Msg -> IncomeModel.Model -> (IncomeModel.Model, Cmd IncomeMsg.Msg)
-update loggedData action model =
-  case action of
+update loggedData msg model =
+  case msg of
 
     IncomeMsg.NoOp ->
       ( model
@@ -22,3 +22,8 @@ update loggedData action model =
       ( { model | addIncome = Form.update formMsg model.addIncome }
       , Cmd.none
       )
+
+    IncomeMsg.ToggleTest ->
+      ( { model | test = not model.test }
+      , Cmd.none
+      )
diff --git a/src/client/elm/LoggedIn/Income/View.elm b/src/client/elm/LoggedIn/Income/View.elm
index d5863ab..7970284 100644
--- a/src/client/elm/LoggedIn/Income/View.elm
+++ b/src/client/elm/LoggedIn/Income/View.elm
@@ -14,6 +14,7 @@ import Html.Events exposing (..)
 import Html.Attributes exposing (..)
 import Html.App as Html
 import Form exposing (Form)
+import Dialog
 
 import Msg exposing (Msg)
 
@@ -23,6 +24,7 @@ import Model.Income exposing (IncomeId, Income, userCumulativeIncomeSince)
 import Model.Translations exposing (getMessage, getParamMessage)
 import Model.Payer exposing (useIncomesFrom)
 import Model.User exposing (UserId, User)
+import Model.View as View
 import LoggedIn.Income.Model as IncomeModel
 
 import LoggedIn.Msg as LoggedInMsg
@@ -108,7 +110,14 @@ incomeView loggedData (incomeId, income) =
     [ text <| renderShortDate (Date.fromTime income.time) loggedData.translations
     , text "    −    "
     , text <| Format.price loggedData.conf income.amount
-    , button
-        [ onClick (Msg.UpdateLoggedIn <| LoggedInMsg.DeleteIncome incomeId) ]
-        [ FontAwesome.remove Color.chestnutRose 14 ]
+    , let dialogConfig =
+            { title = getMessage "ConfirmDelete" loggedData.translations
+            , body = always <| text ""
+            , confirm = getMessage "Confirm" loggedData.translations
+            , confirmMsg = Msg.UpdateLoggedIn <| LoggedInMsg.DeleteIncome incomeId
+            , undo = getMessage "Undo" loggedData.translations
+            }
+      in  button
+            [ onClick (Msg.Dialog <| Dialog.Open dialogConfig) ]
+            [ FontAwesome.remove Color.chestnutRose 14 ]
     ]
diff --git a/src/client/elm/LoggedIn/Update.elm b/src/client/elm/LoggedIn/Update.elm
index 23f242d..7133786 100644
--- a/src/client/elm/LoggedIn/Update.elm
+++ b/src/client/elm/LoggedIn/Update.elm
@@ -35,9 +35,9 @@ import Utils.Tuple as Tuple
 import Utils.Cmd exposing ((:>))
 
 update : Model -> LoggedInMsg.Msg -> LoggedInModel.Model -> (LoggedInModel.Model, Cmd LoggedInMsg.Msg)
-update model action loggedIn =
+update model msg loggedIn =
   let loggedData = LoggedData.build model loggedIn
-  in  case action of
+  in  case msg of
 
         LoggedInMsg.NoOp ->
           (loggedIn, Cmd.none)
diff --git a/src/client/elm/Model.elm b/src/client/elm/Model.elm
index 9e9cdbb..3eec89d 100644
--- a/src/client/elm/Model.elm
+++ b/src/client/elm/Model.elm
@@ -6,6 +6,8 @@ module Model exposing
 import Time exposing (Time)
 import Json.Decode as Json
 
+import Html.App as Html
+
 import Page exposing (Page)
 import Init as Init exposing (Init)
 import Msg exposing (Msg)
@@ -15,8 +17,8 @@ import Model.Translations exposing (..)
 import Model.Conf exposing (..)
 import Model.InitResult exposing (..)
 import LoggedIn.Model as LoggedInModel
-
 import SignIn.Model as SignInModel
+import Dialog
 
 import Utils.Maybe exposing (isJust)
 
@@ -26,6 +28,7 @@ type alias Model =
   , translations : Translations
   , conf : Conf
   , page : Page
+  , dialog : Dialog.Model View Msg
   }
 
 init : Json.Value -> Result String Page -> (Model, Cmd Msg)
@@ -49,6 +52,7 @@ init payload result =
             , translations = translations
             , conf = conf
             , page = page
+            , dialog = Dialog.init Msg.Dialog
             }
           Err error ->
             { view = SignInView (SignInModel.init (Just error))
@@ -56,5 +60,6 @@ init payload result =
             , translations = []
             , conf = { currency = "" }
             , page = page
+            , dialog = Dialog.init Msg.Dialog
             }
   in  (model, Cmd.none)
diff --git a/src/client/elm/Msg.elm b/src/client/elm/Msg.elm
index 6143a37..2ed15e4 100644
--- a/src/client/elm/Msg.elm
+++ b/src/client/elm/Msg.elm
@@ -8,6 +8,10 @@ import Page exposing (Page)
 
 import Model.Init exposing (Init)
 
+import Dialog
+
+import Model.View exposing (View)
+
 import SignIn.Msg as SignInMsg
 import LoggedIn.Msg as LoggedInMsg
 
@@ -20,3 +24,4 @@ type Msg =
   | UpdateLoggedIn LoggedInMsg.Msg
   | GoSignInView
   | SignOut
+  | Dialog (Dialog.Msg View Msg)
diff --git a/src/client/elm/SignIn/Update.elm b/src/client/elm/SignIn/Update.elm
index 28307e4..7ada45c 100644
--- a/src/client/elm/SignIn/Update.elm
+++ b/src/client/elm/SignIn/Update.elm
@@ -8,8 +8,8 @@ import SignIn.Msg exposing (..)
 import Model.Translations exposing (getMessage, Translations)
 
 update : Translations -> Msg -> Model -> Model
-update translations action signInView =
-  case action of
+update translations msg signInView =
+  case msg of
     UpdateLogin login ->
       { signInView |
       login = login
diff --git a/src/client/elm/Update.elm b/src/client/elm/Update.elm
index bcbfb6c..db8889f 100644
--- a/src/client/elm/Update.elm
+++ b/src/client/elm/Update.elm
@@ -25,11 +25,13 @@ import SignIn.Model as SignInModel
 import SignIn.Msg as SignInMsg
 import SignIn.Update as SignInUpdate
 
+import Dialog
+
 import Utils.Http exposing (errorKey)
 
 update : Msg -> Model -> (Model, Cmd Msg)
-update action model =
-  case action of
+update msg model =
+  case msg of
 
     NoOp ->
       (model, Cmd.none)
@@ -65,6 +67,12 @@ update action model =
           |> Task.perform (always NoOp) (always GoSignInView)
       )
 
+    Dialog dialogMsg ->
+      let (newDialog, command) = Dialog.update dialogMsg model.dialog
+      in  ( { model | dialog = newDialog }
+          , command
+          )
+
 applySignIn : Model -> SignInMsg.Msg -> Model
 applySignIn model signInMsg =
   case model.view of
diff --git a/src/client/elm/View.elm b/src/client/elm/View.elm
index 38734bc..f4b0953 100644
--- a/src/client/elm/View.elm
+++ b/src/client/elm/View.elm
@@ -3,11 +3,13 @@ module View exposing
   )
 
 import Html exposing (..)
+import Html.App as Html
 
 import Model exposing (Model)
 import Msg exposing (Msg)
 import Model.View exposing (..)
 import LoggedData
+import Dialog
 
 import View.Header exposing (renderHeader)
 
@@ -20,6 +22,7 @@ view model =
     []
     [ renderHeader model
     , renderMain model
+    , Dialog.view model.view model.dialog
     ]
 
 renderMain : Model -> Html Msg