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

feat(15): displaying existing answers in form step

This commit is contained in:
efim 2023-07-15 04:36:28 +00:00
parent bf33858e41
commit 5f260455cb
4 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
15-multi-step-form/src/main/resources/templates/step1.html
View File

@ -105,6 +105,7 @@
<label for="name" class="pt-3 text-sm md:pt-5 md:pb-2 text-marine-blue">Name</label>
<input
id="name"
th:value="${formData.step1.name}"
name="name"
type="text"
placeholder="e.g. Stephen King"
@ -115,6 +116,7 @@
>
<input
id="email"
th:value="${formData.step1.email}"
name="email"
type="email"
placeholder="e.g. stephenking@lorem.com"
@ -125,6 +127,7 @@
>
<input
id="phone"
th:value="${formData.step1.phone}"
name="phone"
type="tel"
placeholder="e.g. +1 234 567 890"

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

@ -119,6 +119,7 @@
name="plan-type"
value="Arcade"
class="hidden peer"
th:checked="${formData.step2.planType.toString()} == 'Acrade'"
checked
/>
<div
@ -135,6 +136,7 @@
name="plan-type"
value="Advanced"
class="hidden peer"
th:checked="${formData.step2.planType.toString()} == 'Advanced'"
/>
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
@ -150,6 +152,7 @@
name="plan-type"
value="Pro"
class="hidden peer"
th:checked="${formData.step2.planType.toString()} == 'Pro'"
/>
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
@ -169,6 +172,7 @@
name="isPackageYearly"
role="switch"
id="packageDuration"
th:checked="${formData.step2.isYearly}"
/>
<span class="row-start-1 text-marine-blue peer-checked:text-cool-gray">Monthly</span>
<span class="row-start-1 text-cool-gray peer-checked:text-marine-blue">Yearly</span>

3
15-multi-step-form/src/main/resources/templates/step3.html
View File

@ -117,6 +117,7 @@
value="OnlineService"
name="addon-services"
class="my-7 w-6 h-6 peer"
th:checked="${formData.step3.containsAddon('OnlineService')}"
/>
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"
@ -140,6 +141,7 @@
name="addon-services"
value="LargerStorage"
class="my-7 w-6 h-6 peer"
th:checked="${formData.step3.containsAddon('LargerStorage')}"
/>
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"
@ -163,6 +165,7 @@
name="addon-services"
value="CustomProfile"
class="my-7 w-6 h-6 peer"
th:checked="${formData.step3.containsAddon('CustomProfile')}"
/>
<div
class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"

20
15-multi-step-form/src/main/scala/multistepform/Models.scala
View File

@ -3,12 +3,21 @@ package multistepform
import java.util.UUID
object Models {
val testAnsw = Answers(
sessionId= "id1",
currentStep = 1,
step1 = StepAnswers.Step1("Test Name", "some@email.com", "+9876", true),
step2 = StepAnswers.Step2(PlanType.Advanced, true, true),
step3 = StepAnswers.Step3(Set(Addons.LargerStorage), true),
step4 = StepAnswers.Step4(true)
)
final case class Answers(
sessionId: String = "id1",
currentStep: Int = 1,
step1: StepAnswers.Step1 = StepAnswers.Step1(),
step2: StepAnswers.Step2 = StepAnswers.Step2(),
step3: StepAnswers.Step3 = StepAnswers.Step3(),
step1: StepAnswers.Step1 = StepAnswers.Step1("Test Name", "some@email.com", "+9876", true),
step2: StepAnswers.Step2 = StepAnswers.Step2(PlanType.Advanced, true, true),
step3: StepAnswers.Step3 = StepAnswers.Step3(Set(Addons.LargerStorage), true),
step4: StepAnswers.Step4 = StepAnswers.Step4()
) {
// this is not enforced by compiler, sad, maintain by hand in html template files
@ -100,6 +109,11 @@ object Models {
addons: Set[Addons] = Set.empty,
override val submitted: Boolean = false
) extends StepAnswers {
def containsAddon(addonName: String): Boolean = {
addons.contains(Addons.valueOf(addonName))
}
override def fromFormData(rawData: String): Step3 = {
println(s"parsing step 3 data $rawData")
// for multiple checkboxes data comes in form of