From 36a90770ebeb9bd99e136bfe035fdda5dfabc304 Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 19 Jun 2016 21:18:56 +0200 Subject: Add a dialog to confirm income deletion --- src/client/elm/Dialog.elm | 145 +++++++++++++++++++++ src/client/elm/LoggedIn/Home/AddPayment/Update.elm | 4 +- src/client/elm/LoggedIn/Home/Update.elm | 4 +- src/client/elm/LoggedIn/Income/Model.elm | 2 + src/client/elm/LoggedIn/Income/Msg.elm | 1 + src/client/elm/LoggedIn/Income/Update.elm | 9 +- src/client/elm/LoggedIn/Income/View.elm | 15 ++- src/client/elm/LoggedIn/Update.elm | 4 +- src/client/elm/Model.elm | 7 +- src/client/elm/Msg.elm | 5 + src/client/elm/SignIn/Update.elm | 4 +- src/client/elm/Update.elm | 12 +- src/client/elm/View.elm | 3 + 13 files changed, 199 insertions(+), 16 deletions(-) create mode 100644 src/client/elm/Dialog.elm (limited to 'src/client/elm') 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 -- cgit v1.2.3