Add a dialog to confirm income deletion

1 files changed, 145 insertions, 0 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 ]
+        ]
+    ]