diff options
5 files changed, 184 insertions, 5 deletions
diff --git a/src/main/assets/css/style.css b/src/main/assets/css/style.css index c256fc1f..3e7ee728 100644 --- a/src/main/assets/css/style.css +++ b/src/main/assets/css/style.css @@ -106,3 +106,11 @@ trix-toolbar .trix-button-group { .kv-spinner-btn-vertical .form-control { border-radius: 4px 0px 0px 4px !important; } + +.kv-radiogroup .radio { + margin-top: -5px; +} + +.kv-radiogroup-inline label { + margin-right: 10px; +} diff --git a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt index a27fae2d..dfdc5b6b 100644 --- a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt +++ b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt @@ -13,6 +13,7 @@ import pl.treksoft.kvision.form.INPUTSIZE import pl.treksoft.kvision.form.bool import pl.treksoft.kvision.form.check.CheckBox import pl.treksoft.kvision.form.check.Radio +import pl.treksoft.kvision.form.check.RadioGroup import pl.treksoft.kvision.form.date import pl.treksoft.kvision.form.select.AjaxOptions import pl.treksoft.kvision.form.select.SELECTWIDTHTYPE @@ -63,7 +64,7 @@ class Showcase : ApplicationBase() { val ret = form.getData() console.log(ret) - class DataFormMap(val map: Map<String, Any?>) { + class DataFormMap(map: Map<String, Any?>) { val name: String by map val age: Date by map } @@ -165,6 +166,24 @@ class Showcase : ApplicationBase() { } root.add(mbuttons3) + val rg = RadioGroup(listOf("o1" to "Pierwsza opcja", "o2" to "Druga opcja"), label = "Radio buttony") + root.add(rg) + val rgbutton = Button("Sprawdź radio").setEventListener<Button> { + click = { + println(rg.value) + } + } + root.add(rgbutton) + val rg2button = Button("Ustaw radio").setEventListener<Button> { + click = { + rg.value = "o2" + } + dblclick = { + rg.value = null + } + } + root.add(rg2button) + val select5 = Select(listOf("a" to "Pierwsza", "b" to "Druga"), "a", label = "Lista wyboru") root.add(select5) @@ -418,9 +437,10 @@ class Showcase : ApplicationBase() { val radio: Boolean by map val select: String? by map val spinner: Double? by map + val radiogroup: String? by map } - val formPanel = FormPanel() { + val formPanel = FormPanel { Formularz(it) }.apply { add("text", Text(label = "Tekst"), required = true, validatorMessage = { "Wprowadź tylko cyfry" }) { @@ -441,9 +461,11 @@ class Showcase : ApplicationBase() { emptyOption = true }, required = true) add("spinner", Spinner(label = "Spinner"), required = true) + add("radiogroup", RadioGroup(listOf("o1" to "Pierwsza opcja", "o2" to "Druga opcja"), + inline = true, label = "Radio group"), required = true) validator = { - var result = it["text"] == it["textarea"] + val result = it["text"] == it["textarea"] if (!result) { it.getControl("text")?.validatorError = "Niezgodne dane" it.getControl("textarea")?.validatorError = "Niezgodne dane" @@ -469,9 +491,10 @@ class Showcase : ApplicationBase() { } val formButton = Button("Pokaż dane").setEventListener<Button> { click = { + formPanel.getControl("radiogroup")?.disabled = true console.log(formPanel.validate()) console.log(formPanel.getData().map.toString()) -// formPanel.setData(Formularz(mapOf("zazn" to false, "select" to "a"))) + formPanel.setData(Formularz(mapOf("checkbox" to false, "select" to "a", "radiogroup" to "o2"))) spinner.toggleVisible() spinner.max = spinner.max.plus(2) ttt.toggleVisible() diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt index 748ace83..9e9671ed 100644 --- a/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt +++ b/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt @@ -4,7 +4,7 @@ import pl.treksoft.kvision.html.TAG import pl.treksoft.kvision.html.Tag import pl.treksoft.kvision.snabbdom.StringPair -open class FieldLabel(private val forId: String, text: String? = null, rich: Boolean = false, +open class FieldLabel(internal val forId: String, text: String? = null, rich: Boolean = false, classes: Set<String> = setOf("control-label")) : Tag(TAG.LABEL, text, rich, classes = classes) { diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt new file mode 100644 index 00000000..43a0d4e4 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt @@ -0,0 +1,118 @@ +package pl.treksoft.kvision.form.check + +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.form.FieldLabel +import pl.treksoft.kvision.form.HelpBlock +import pl.treksoft.kvision.form.INPUTSIZE +import pl.treksoft.kvision.form.StringFormControl +import pl.treksoft.kvision.form.select.Select +import pl.treksoft.kvision.panel.SimplePanel +import pl.treksoft.kvision.snabbdom.StringBoolPair +import pl.treksoft.kvision.snabbdom.StringPair + +open class RadioGroup(options: List<StringPair>? = null, value: String? = null, inline: Boolean = false, + label: String? = null, + rich: Boolean = false) : SimplePanel(setOf("form-group")), StringFormControl { + + internal var options = options + set(value) { + field = value + setChildrenFromOptions() + } + + override var value = value + set(value) { + field = value + setValueToChildren(value) + } + + var inline: Boolean = inline + set(value) { + field = value + refresh() + } + + override var disabled + get() = getDisabledFromChildren() + set(value) { + setDisabledToChildren(value) + } + var label + get() = flabel.text + set(value) { + flabel.text = value + } + var rich + get() = flabel.rich + set(value) { + flabel.rich = value + } + override var size: INPUTSIZE? = null + + private val idc = "kv_form_radiogroup_" + Select.counter + final override val input = Widget() + final override val flabel: FieldLabel = FieldLabel(idc, label, rich) + final override val validationInfo: HelpBlock = HelpBlock().apply { visible = false } + + init { + @Suppress("LeakingThis") + setChildrenFromOptions() + counter++ + } + + companion object { + var counter = 0 + } + + override fun getSnClass(): List<StringBoolPair> { + val cl = super.getSnClass().toMutableList() + if (validatorError != null) { + cl.add("has-error" to true) + } + if (inline) { + cl.add("kv-radiogroup-inline" to true) + } else { + cl.add("kv-radiogroup" to true) + } + return cl + } + + private fun setValueToChildren(value: String?) { + val radios = getChildren().filterIsInstance<Radio>() + radios.forEach { it.value = false } + radios.find { + it.extraValue == value + }?.value = true + } + + private fun getDisabledFromChildren(): Boolean { + return getChildren().filterIsInstance<Radio>().map { it.disabled }.firstOrNull() ?: false + } + + private fun setDisabledToChildren(disabled: Boolean) { + getChildren().filterIsInstance<Radio>().forEach { it.disabled = disabled } + } + + private fun setChildrenFromOptions() { + super.removeAll() + this.addInternal(flabel) + options?.let { + val tidc = this.idc + val tinline = this.inline + val c = it.map { + Radio(false, extraValue = it.first, label = it.second).apply { + inline = tinline + name = tidc + setEventListener<Radio> { + change = { + this@RadioGroup.value = self.extraValue + } + } + } + } + super.addAll(c) + } + this.addInternal(validationInfo) + } + +} diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt new file mode 100644 index 00000000..b1dc19ea --- /dev/null +++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupSpec.kt @@ -0,0 +1,30 @@ +package test.pl.treksoft.kvision.form.check + +import pl.treksoft.kvision.core.Root +import pl.treksoft.kvision.form.check.Radio +import pl.treksoft.kvision.form.check.RadioGroup +import test.pl.treksoft.kvision.DomSpec +import kotlin.browser.document +import kotlin.test.Test +import kotlin.test.assertEquals + +class RadioGroupSpec : DomSpec { + + @Test + fun render() { + run { + val root = Root("test") + val ci = RadioGroup(options = listOf("a" to "A", "b" to "B"), value = "a", label = "Label").apply { + disabled = true + inline = true + } + root.add(ci) + val element = document.getElementById("test") + val id = ci.flabel.forId + val rid1 = ci.getChildren().filterIsInstance<Radio>().first().input.id + val rid2 = ci.getChildren().filterIsInstance<Radio>().last().input.id + assertEquals("<div class=\"form-group kv-radiogroup-inline\"><label class=\"control-label\" for=\"$id\">Label</label><div class=\"radio\"><input id=\"$rid1\" type=\"radio\" name=\"$id\" disabled=\"\" value=\"a\"><label for=\"$rid1\">A</label></div><div class=\"radio\"><input id=\"$rid2\" type=\"radio\" name=\"$id\" disabled=\"\" value=\"b\"><label for=\"$rid2\">B</label></div></div>", element?.innerHTML, "Should render correct radio button group form control") + } + } + +}
\ No newline at end of file |