Add SetField Msg

examples/end-to-end/app/Route/Form.elm

@@ -2,6 +2,7 @@ module Route.Form exposing (ActionData, Data, Model, Msg, route)
 
 import BackendTask exposing (BackendTask)
 import Date exposing (Date)
+import Effect exposing (Effect)
 import ErrorPage exposing (ErrorPage)
 import FatalError exposing (FatalError)
 import Form
@@ -12,6 +13,7 @@ import Form.Validation as Validation
 import Head
 import Html exposing (Html)
 import Html.Attributes as Attr
+import Html.Events
 import Html.Styled
 import Pages.Form
 import PagesMsg exposing (PagesMsg)
@@ -27,8 +29,8 @@ type alias Model =
     {}
 
 
-type alias Msg =
-    ()
+type Msg
+    = FirstNameUpdated String
 
 
 type alias RouteParams =
@@ -118,7 +120,7 @@ form =
                     , fieldView "Price" username
                     , fieldView "Image" email
                     , fieldView "Image" dob
-                    , Html.button []
+                    , Html.button [ Attr.id "update" ]
                         [ Html.text
                             (if formState.submitting then
                                 "Updating..."
@@ -170,14 +172,19 @@ form =
         |> Form.field "checkbox" Field.checkbox
 
 
-route : StatelessRoute RouteParams Data ActionData
+route : RouteBuilder.StatefulRoute RouteParams Data ActionData Model Msg
 route =
     RouteBuilder.serverRender
         { head = head
         , data = data
         , action = action
         }
-        |> RouteBuilder.buildNoState { view = view }
+        |> RouteBuilder.buildWithLocalState
+            { init = init
+            , update = update
+            , subscriptions = \_ _ _ _ -> Sub.none
+            , view = view
+            }
 
 
 type alias Data =
@@ -217,11 +224,32 @@ head static =
     []
 
 
+init : App Data ActionData RouteParams -> Shared.Model -> ( Model, Effect msg )
+init _ _ =
+    ( {}, Effect.none )
+
+
+update :
+    App Data ActionData RouteParams
+    -> Shared.Model
+    -> Msg
+    -> Model
+    -> ( Model, Effect msg )
+update _ _ msg model =
+    case msg of
+        FirstNameUpdated new ->
+            ( model
+            , Effect.SetField
+                { formId = "user-form", name = "first", value = new }
+            )
+
+
 view :
     App Data ActionData RouteParams
     -> Shared.Model
+    -> Model
     -> View (PagesMsg Msg)
-view app shared =
+view app shared _ =
     let
         user : User
         user =
@@ -257,6 +285,14 @@ view app shared =
                     |> Form.withServerResponse (app.action |> Maybe.map .formResponse)
                 )
                 app
+        , Html.button
+            [ Html.Events.onClick <|
+                PagesMsg.fromMsg <|
+                    FirstNameUpdated "Jim"
+            , Attr.style "width" "100%"
+            , Attr.id "fill-jim"
+            ]
+            [ Html.text "Set first name to Jim" ]
         ]
             |> List.map Html.Styled.fromUnstyled
     }

examples/end-to-end/cypress/e2e/form-submissions.cy.js

@@ -1,9 +1,15 @@
 context("dev server with base path", () => {
+  it("fills name field with 'Jim' when clicking a new button", () => {
+    cy.visit("/form");
+    cy.get("input[name=first]").should("have.value", "Jane");
+    cy.get("button#fill-jim").click();
+    cy.get("input[name=first]").should("have.value", "Jim");
+  });
   it("submits a form to receive ActionData", () => {
     cy.visit("/form");
     cy.get("input[name=first]").clear().type("John");
     cy.get("input[name=last]").clear().type("Asdf");
-    cy.get("button").click();
+    cy.get("button#update").click();
     cy.contains("Successfully received user John Asdf");
   });
   it.skip("logs in and out", () => {

src/Pages/Internal/Platform.elm

@@ -21,6 +21,7 @@ import Bytes exposing (Bytes)
 import Bytes.Decode
 import Dict exposing (Dict)
 import Form
+import Form.Validation exposing (FieldStatus(..))
 import Html exposing (Html)
 import Html.Attributes as Attr
 import Http
@@ -315,7 +316,7 @@ type Msg userMsg pageData actionData sharedData errorPage
     | UrlChanged Url
       -- TODO rename to PagesMsg
     | UserMsg (PagesMsg userMsg)
-      --| SetField { formId : String, name : String, value : String }
+    | SetField { formId : String, name : String, value : String }
     | FormMsg (Form.Msg (Msg userMsg pageData actionData sharedData errorPage))
     | UpdateCacheAndUrlNew Bool Url (Maybe userMsg) (Result Http.Error ( Url, ResponseSketch pageData actionData sharedData ))
     | FetcherComplete Bool String Int (Result Http.Error ( Maybe userMsg, ActionDataOrRedirect actionData ))
@@ -588,6 +589,47 @@ update config appMsg model =
                 Pages.Internal.Msg.NoOp ->
                     ( model, NoEffect )
 
+        SetField info ->
+            let
+                newForm : Form.FormState
+                newForm =
+                    case Dict.get info.formId model.pageFormState of
+                        Nothing ->
+                            { fields =
+                                Dict.singleton info.name
+                                    { value = info.value
+                                    , status = NotVisited
+                                    }
+                            , submitAttempted = False
+                            }
+
+                        Just oldForm ->
+                            let
+                                newField : Form.FieldState
+                                newField =
+                                    case Dict.get info.name oldForm.fields of
+                                        Nothing ->
+                                            { value = info.value
+                                            , status = NotVisited
+                                            }
+
+                                        Just oldField ->
+                                            { value = info.value
+                                            , status = oldField.status
+                                            }
+                            in
+                            { fields =
+                                Dict.insert info.name newField oldForm.fields
+                            , submitAttempted = oldForm.submitAttempted
+                            }
+            in
+            ( { model
+                | pageFormState =
+                    Dict.insert info.formId newForm model.pageFormState
+              }
+            , NoEffect
+            )
+
         UpdateCacheAndUrlNew scrollToTopWhenDone urlWithoutRedirectResolution maybeUserMsg updateResult ->
             -- TODO remove all fetchers that are in the state `FetcherReloading` here -- I think that's the right logic?
             case
@@ -1012,10 +1054,10 @@ perform config model effect =
                             , fromPageMsg = Pages.Internal.Msg.UserMsg >> UserMsg
                             , key = key
                             , setField =
-                                \_ ->
-                                    --Task.succeed (SetField info) |> Task.perform identity
-                                    -- TODO
-                                    Cmd.none
+                                \info ->
+                                    SetField info
+                                        |> Task.succeed
+                                        |> Task.perform identity
                             }
 
                 Nothing ->