Radio button group form control

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