TriggerBuilder: Handle modal form auto-submit

When pressing enter inside modal form, send a ModalOk message, preventing page reload which is the default HTML behavior.
astarte-platform · Nov 7, 2018 · 7f6ac76 · 7f6ac76
1 parent 725c73b
commit 7f6ac76
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [0.10.0-beta.3] - Unreleased
 ### Fixed
+- Enter key press behavior: close confirm message instead of reloading page.
 - Accept `/*` as a valid Data Trigger path.
 
 ## [0.10.0-beta.2] - 2018-10-19

diff --git a/src/elm/Page/InterfaceBuilder.elm b/src/elm/Page/InterfaceBuilder.elm
@@ -3,6 +3,7 @@ module Page.InterfaceBuilder exposing (Model, Msg, init, update, view, subscript
 import Dict exposing (Dict)
 import Html exposing (Html, text, h5, p, br, b, i, small)
 import Html.Attributes exposing (class, value, for, selected)
+import Html.Events exposing (onSubmit)
 import Navigation
 import Task
 import Time exposing (Time)
@@ -272,15 +273,21 @@ update session msg model =
         CloseDeleteModal modalResult ->
             case modalResult of
                 ModalOk ->
-                    ( { model | deleteModalVisibility = Modal.hidden }
-                    , AstarteApi.deleteInterface model.interface.name
-                        model.interface.major
-                        session
-                        DeleteInterfaceDone
-                        (ShowError "")
-                        RedirectToLogin
-                    , ExternalMsg.Noop
-                    )
+                    if model.interface.name == model.confirmInterfaceName then
+                        ( { model | deleteModalVisibility = Modal.hidden }
+                        , AstarteApi.deleteInterface model.interface.name
+                            model.interface.major
+                            session
+                            DeleteInterfaceDone
+                            (ShowError "")
+                            RedirectToLogin
+                        , ExternalMsg.Noop
+                        )
+                    else
+                        ( model
+                        , Cmd.none
+                        , ExternalMsg.Noop
+                        )
 
                 ModalCancel ->
                     ( { model | deleteModalVisibility = Modal.hidden }
@@ -1328,7 +1335,7 @@ renderDeleteInterfaceModal model =
         |> Modal.large
         |> Modal.h5 [] [ text "Confirmation Required" ]
         |> Modal.body []
-            [ Form.form []
+            [ Form.form [ onSubmit (CloseDeleteModal ModalOk) ]
                 [ Form.row []
                     [ Form.col [ Col.sm12 ]
                         [ text "You are going to remove "

diff --git a/src/elm/Page/TriggerBuilder.elm b/src/elm/Page/TriggerBuilder.elm
@@ -3,6 +3,7 @@ module Page.TriggerBuilder exposing (Model, Msg, init, update, view, subscriptio
 import Regex exposing (regex)
 import Html exposing (Html, text, h5, b, i)
 import Html.Attributes exposing (class, value, readonly, selected, for)
+import Html.Events exposing (onSubmit)
 import Navigation
 import Task
 import Time
@@ -743,14 +744,20 @@ update session msg model =
         CloseDeleteModal result ->
             case result of
                 ModalOk ->
-                    ( { model | deleteModalVisibility = Modal.hidden }
-                    , AstarteApi.deleteTrigger model.trigger.name
-                        session
-                        DeleteTriggerDone
-                        (ShowError "Cannot delete trigger.")
-                        RedirectToLogin
-                    , ExternalMsg.Noop
-                    )
+                    if (model.trigger.name == model.confirmTriggerName) then
+                        ( { model | deleteModalVisibility = Modal.hidden }
+                        , AstarteApi.deleteTrigger model.trigger.name
+                            session
+                            DeleteTriggerDone
+                            (ShowError "Cannot delete trigger.")
+                            RedirectToLogin
+                        , ExternalMsg.Noop
+                        )
+                    else
+                        ( model
+                        , Cmd.none
+                        , ExternalMsg.Noop
+                        )
 
                 ModalCancel ->
                     ( { model | deleteModalVisibility = Modal.hidden }
@@ -1268,7 +1275,7 @@ renderDeleteTriggerModal model =
         |> Modal.large
         |> Modal.h5 [] [ text "Confirmation Required" ]
         |> Modal.body []
-            [ Form.form []
+            [ Form.form [ onSubmit (CloseDeleteModal ModalOk) ]
                 [ Form.row []
                     [ Form.col [ Col.sm12 ]
                         [ text "You are going to remove "