Simple Form Example

Source Code

    import com.fastscala.templates.bootstrap5.classes.BSHelpers._
    var editing = new User1(
      firstName = "",
      lastName = "",
      email = "",
      phoneNumber = "",
      securityLevel = 0,
      countryOfResidence = CountriesData.data(0),
      birthDay = Some("2022-08-04"),
      province = CitiesData.data.head._1,
      city = CitiesData.data.head._2.head
    )
    val BSFormRenderer = new BSForm6Renderer {
      override def defaultRequiredFieldLabel: String = "Required Field"
    }
    import BSFormRenderer._
    div.border.p_2.rounded.apply {
      new Form6 {
        override def postSave()(implicit fsc: FSContext): Js = {
          BSModal5.verySimple(
            "Created User",
            "Done"
          )(modal => implicit fsc => {
            <span><b>First Name:</b> {editing.firstName}</span><br/> ++
              <span><b>Last Name:</b> {editing.lastName}</span><br/> ++
              <span><b>Email:</b> {editing.email}</span><br/> ++
              <span><b>Phone:</b> {editing.phoneNumber}</span><br/> ++
              <span><b>Security Level:</b> {editing.securityLevel}</span><br/> ++
              <span><b>Country of Residence:</b> {editing.countryOfResidence.name.common}</span><br/> ++
              <span><b>Date of Birth:</b> {editing.birthDay.getOrElse("N/A")}</span><br/> ++
              <span><b>Province:</b> {s"${editing.province.name}(${editing.province.no})"}</span><br/>++
              <span><b>City:</b> {s"${editing.city.name}(${editing.city.no})"}</span>
          })
        }

        lazy val _provField: F6SelectField[Province] = new F6SelectField[Province](CitiesData.data.keys.toList.sortBy(_.no)).label("Province").rw(editing.province, editing.province = _).option2String(_.name)

        override lazy val rootField: F6Field = F6VerticalField()(
          F6ContainerField("row")(
            "col" -> new F6StringField().label("First Name").rw(editing.firstName, editing.firstName = _)
            , "col" -> new F6StringField().label("Last Name").rw(editing.lastName, editing.lastName = _)
          )
          , new F6StringField().label("Email").rw(editing.email, editing.email = _).inputType("email")
          , new F6StringField().label("Phone Number").rw(editing.phoneNumber, editing.phoneNumber = _).inputType("tel")
          , new F6SelectField[Country](CountriesData.data.toList).label("Country of Residence").rw(editing.countryOfResidence, editing.countryOfResidence = _).option2String(_.name.common)
          , new F6IntOptField().label("Security Level").rw(Some(editing.securityLevel), oi => editing.securityLevel = oi.getOrElse(0))
          , F6DateOptField(editing.birthDay, editing.birthDay = _).label("BirthDay")
          , _provField
          , new F6SelectField[City](() => CitiesData.data(_provField.currentValue)).label("City").rw(editing.city, editing.city = _).option2String(_.name).deps(() => Set(_provField))
          , new F6SaveButtonField(implicit fsc => BSBtn().BtnPrimary.lbl("Create User").btn.d_block)
        )

        override def formRenderer: F6FormRenderer = formRenderer
      }.render()
    }