efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(15): selected plan was reset on mo\yr toggle 

hx-put sends all form data, so full page state can be used to render the fragment
This commit is contained in:
efim 2023-07-16 05:10:37 +00:00
parent e6f36dc0bd
commit 01ec722ea0
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
15-multi-step-form/src/main/resources/templates/step2.html
View File

@ -207,7 +207,7 @@
role="switch" role="switch"
id="packageDuration" id="packageDuration"
th:checked="${formData.userAnswers.step2.isYearly}" th:checked="${formData.userAnswers.step2.isYearly}"
hx-get="/step2/planTypeInputs" hx-post="/step2/planTypeInputs"
hx-target="#plan-type-inputs" hx-target="#plan-type-inputs"
hx-swap="outerHTML" hx-swap="outerHTML"
/> />

14
15-multi-step-form/src/main/scala/multistepform/Routes.scala
View File

@ -128,20 +128,22 @@ case class Routes()(implicit cc: castor.Context, log: cask.Logger)
* This endpoint re-renders 'plan type inputs' * This endpoint re-renders 'plan type inputs'
* so that togglng monthly\yearly could redraw their html * so that togglng monthly\yearly could redraw their html
*/ */
@cask.get("/step2/planTypeInputs") @cask.post("/step2/planTypeInputs")
def getPlanTypeInputs(sessionId: cask.Cookie, isPackageYearly: Option[String] = None) = { def getPlanTypeInputs(sessionId: cask.Cookie, request: cask.Request) = {
val id = sessionId.value val id = sessionId.value
val isPackageYearlyBool = isPackageYearly.contains("on") val submittedData = URLDecoder.decode(request.text() , "UTF-8")
println(s"requesting plan type inputs for $id and $isPackageYearlyBool") println(s"requesting plan type inputs for $id and $request")
Sessions.sessionReplies.get(id) match { Sessions.sessionReplies.get(id) match {
case None => case None =>
cask.Response("Can't find answers for your session, please reload the page", 404) cask.Response("Can't find answers for your session, please reload the page", 404)
case Some(answers) => { case Some(answers) => {
// here changing yearly/monthly part of state based on passed checkbox value // here changing yearly/monthly part of state based on passed checkbox value
// and selected plan
// only for purposes of rendering the fragment // only for purposes of rendering the fragment
// not persisting, unless next or previous buttons are pressed // not persisting, unless next or previous buttons are pressed
val withYearlyParamSet = answers.copy(step2 = answers.step2.copy(isYearly = isPackageYearlyBool)) val withYearlyParamSetAndSelectedPlan = answers.step2.fromFormData(submittedData)
val formData = Models.FormData(withYearlyParamSet) val updatedState = answers.copy(step2 = withYearlyParamSetAndSelectedPlan)
val formData = Models.FormData(updatedState)
val context = new Context() val context = new Context()
context.setVariable(formDataContextVarName, formData) context.setVariable(formDataContextVarName, formData)
val planTypesInputsHtml = templateEngine.process( val planTypesInputsHtml = templateEngine.process(