Ajax support for SelectInput

15 files changed, 123 insertions, 42 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
index 7ff2f1fe..985f9f98 100644
--- a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
@@ -7,7 +7,19 @@ import pl.treksoft.kvision.data.DataComponent
 import pl.treksoft.kvision.data.DataContainer
 import pl.treksoft.kvision.dropdown.DD.*
 import pl.treksoft.kvision.dropdown.DropDown
-import pl.treksoft.kvision.form.*
+import pl.treksoft.kvision.form.CheckBox
+import pl.treksoft.kvision.form.INPUTSIZE
+import pl.treksoft.kvision.form.TEXTINPUTTYPE
+import pl.treksoft.kvision.form.Text
+import pl.treksoft.kvision.form.TextArea
+import pl.treksoft.kvision.form.TextAreaInput
+import pl.treksoft.kvision.form.TextInput
+import pl.treksoft.kvision.form.select.AjaxOptions
+import pl.treksoft.kvision.form.select.SELECTWIDTHTYPE
+import pl.treksoft.kvision.form.select.Select
+import pl.treksoft.kvision.form.select.SelectInput
+import pl.treksoft.kvision.form.select.SelectOptGroup
+import pl.treksoft.kvision.form.select.SelectOption
 import pl.treksoft.kvision.html.*
 import pl.treksoft.kvision.html.TAG.DIV
 import pl.treksoft.kvision.html.TAG.H1
@@ -16,6 +28,7 @@ import pl.treksoft.kvision.modal.Confirm
 import pl.treksoft.kvision.modal.Modal
 import pl.treksoft.kvision.panel.*
 import pl.treksoft.kvision.routing.routing
+import pl.treksoft.kvision.snabbdom.obj
 import pl.treksoft.kvision.utils.perc
 import pl.treksoft.kvision.utils.px
 
@@ -134,13 +147,13 @@ class Showcase : ApplicationBase() {
             hiddenBsSelect = { e ->
                 println("hidden")
             }
-            renderedBsSelect= { e ->
+            renderedBsSelect = { e ->
                 println("rendered")
             }
             refreshedBsSelect = { e ->
                 println("refreshed")
             }
-            loadedBsSelect= { e ->
+            loadedBsSelect = { e ->
                 println("loaded")
             }
             changedBsSelect = { e ->
@@ -157,6 +170,23 @@ class Showcase : ApplicationBase() {
         }
         root.add(select6)
 
+        val select7 = SelectInput().apply {
+            ajaxOptions = AjaxOptions("https://api.github.com/search/repositories", processData = {
+                it.items.map { item ->
+                    obj {
+                        this.value = item.id
+                        this.text = item.name
+                        this.data = obj {
+                            this.subtext = item.owner.login
+                        }
+                    }
+                }
+            }, processParams = obj {
+                q = "{{{q}}}"
+            })
+        }
+        root.add(select7)
+
         val container = SimplePanel(setOf("abc", "def"))
         val h1 = Tag(H1, "To jest <i>test pisania</i> tekstu", false, null, classes = setOf("test", "test2"))
         container.add(h1)
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt b/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt
index f603d944..a1f48982 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt
@@ -21,6 +21,8 @@ object KVManager {
     private val bootstrapSelectCss = require("bootstrap-select/dist/css/bootstrap-select.min.css")
     private val bootstrapSelect = require("bootstrap-select")
     private val bootstrapSelectI18n = require("./js/bootstrap-select-i18n.min.js")
+    private val bootstrapSelectAjaxCss = require("ajax-bootstrap-select/dist/css/ajax-bootstrap-select.min.css")
+    private val bootstrapSelectAjax = require("ajax-bootstrap-select/dist/js/ajax-bootstrap-select.min.js")
 
     private val sdPatch = Snabbdom.init(arrayOf(classModule, attributesModule, propsModule, styleModule,
             eventListenersModule, datasetModule))
diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
index ade2937b..3f6ca828 100644
--- a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt
@@ -139,17 +139,17 @@ open class DropDown(text: String, elements: List<StringPair>? = null, icon: Stri
     override fun afterInsert(node: VNode) {
         this.getElementJQuery()?.on("show.bs.dropdown", { e, _ ->
             if (!list.visible) list.visible = true
-            this.dispatchEvent("showBsDropdown", obj({ detail = e }))
+            this.dispatchEvent("showBsDropdown", obj { detail = e })
         })
         this.getElementJQuery()?.on("shown.bs.dropdown", { e, _ ->
-            this.dispatchEvent("shownBsDropdown", obj({ detail = e }))
+            this.dispatchEvent("shownBsDropdown", obj { detail = e })
         })
         this.getElementJQuery()?.on("hide.bs.dropdown", { e, _ ->
-            this.dispatchEvent("hideBsDropdown", obj({ detail = e }))
+            this.dispatchEvent("hideBsDropdown", obj { detail = e })
         })
         this.getElementJQuery()?.on("hidden.bs.dropdown", { e, _ ->
             if (list.visible) list.visible = false
-            this.dispatchEvent("hiddenBsDropdown", obj({ detail = e }))
+            this.dispatchEvent("hiddenBsDropdown", obj { detail = e })
         })
     }
 
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/select/AjaxOptions.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/AjaxOptions.kt
new file mode 100644
index 00000000..8dbb5f65
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/AjaxOptions.kt
@@ -0,0 +1,36 @@
+package pl.treksoft.kvision.form.select
+
+import pl.treksoft.kvision.snabbdom.obj
+
+enum class HttpType(val type: String) {
+    GET("GET"),
+    POST("POST")
+}
+
+enum class DataType(val type: String) {
+    JSON("json"),
+    JSONP("jsonp"),
+    XML("xml"),
+    TEXT("text"),
+    SCRIPT("script")
+}
+
+data class AjaxOptions(val url: String, val processData: (dynamic) -> dynamic,
+                       val processParams: dynamic = null, val httpType: HttpType = HttpType.GET,
+                       val dataType: DataType = DataType.JSON, val minLength: Int = 0,
+                       val cache: Boolean = true, val clearOnEmpty: Boolean = true, val clearOnError: Boolean = true,
+                       val emptyRequest: Boolean = false, val preserveSelected: Boolean = true,
+                       val requestDelay: Int = 300, val restoreOnError: Boolean = false)
+
+fun AjaxOptions.toJs(): dynamic {
+    return obj {
+        this.ajax = obj {
+            this.url = url
+            this.type = httpType.type
+            this.data = processParams
+        }
+        this.preprocessData = processData
+    }
+}
+
+data class AjaxData(val value: String, val text: String? = null)
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/Select.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/Select.kt
index 4ed04cc8..321e3a70 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/Select.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/Select.kt
@@ -1,6 +1,8 @@
-package pl.treksoft.kvision.form
+package pl.treksoft.kvision.form.select
 
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.form.FieldLabel
+import pl.treksoft.kvision.form.StringFormField
 import pl.treksoft.kvision.panel.SimplePanel
 import pl.treksoft.kvision.snabbdom.SnOn
 import pl.treksoft.kvision.snabbdom.StringPair
@@ -91,7 +93,7 @@ open class Select(options: List<StringPair>? = null, value: String? = null,
         }
 
     private val idc = "kv_form_select_" + counter
-    val input: SelectInput = SelectInput(options, value, multiple, setOf("form-control")).apply { id = idc }
+    val input: SelectInput = SelectInput(options, value, multiple, null, setOf("form-control")).apply { id = idc }
     val flabel: FieldLabel = FieldLabel(idc, label, rich)
 
     init {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/SelectInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/SelectInput.kt
index 7cacd422..7522ef98 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/SelectInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/SelectInput.kt
@@ -1,8 +1,10 @@
-package pl.treksoft.kvision.form
+package pl.treksoft.kvision.form.select
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.CssSize
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.form.INPUTSIZE
+import pl.treksoft.kvision.form.StringFormField
 import pl.treksoft.kvision.html.BUTTONSTYLE
 import pl.treksoft.kvision.panel.SimplePanel
 import pl.treksoft.kvision.snabbdom.StringBoolPair
@@ -17,7 +19,8 @@ enum class SELECTWIDTHTYPE(val value: String) {
 }
 
 open class SelectInput(options: List<StringPair>? = null, value: String? = null,
-                  multiple: Boolean = false, classes: Set<String> = setOf()) : SimplePanel(classes), StringFormField {
+                       multiple: Boolean = false, ajaxOptions: AjaxOptions? = null,
+                       classes: Set<String> = setOf()) : SimplePanel(classes), StringFormField {
 
     internal var options = options
         set(value) {
@@ -49,6 +52,12 @@ open class SelectInput(options: List<StringPair>? = null, value: String? = null,
             field = value
             refresh()
         }
+    var ajaxOptions: AjaxOptions? = ajaxOptions
+        set(value) {
+            field = value
+            if (value != null) liveSearch = true
+            refresh()
+        }
     var maxOptions: Int? = null
         set(value) {
             field = value
@@ -243,31 +252,34 @@ open class SelectInput(options: List<StringPair>? = null, value: String? = null,
 
     @Suppress("UnsafeCastFromDynamic")
     override fun afterInsert(node: VNode) {
-        getElementJQueryD()?.selectpicker("render")
+        ajaxOptions?.let {
+            getElementJQueryD()?.selectpicker("render").ajaxSelectPicker(it.toJs())
+        } ?: getElementJQueryD()?.selectpicker("render")
+
         this.getElementJQuery()?.on("show.bs.select", { e, _ ->
-            this.dispatchEvent("showBsSelect", obj({ detail = e }))
+            this.dispatchEvent("showBsSelect", obj { detail = e })
         })
         this.getElementJQuery()?.on("shown.bs.select", { e, _ ->
-            this.dispatchEvent("shownBsSelect", obj({ detail = e }))
+            this.dispatchEvent("shownBsSelect", obj { detail = e })
         })
         this.getElementJQuery()?.on("hide.bs.select", { e, _ ->
-            this.dispatchEvent("hideBsSelect", obj({ detail = e }))
+            this.dispatchEvent("hideBsSelect", obj { detail = e })
         })
         this.getElementJQuery()?.on("hidden.bs.select", { e, _ ->
-            this.dispatchEvent("hiddenBsSelect", obj({ detail = e }))
+            this.dispatchEvent("hiddenBsSelect", obj { detail = e })
         })
         this.getElementJQuery()?.on("loaded.bs.select", { e, _ ->
-            this.dispatchEvent("loadedBsSelect", obj({ detail = e }))
+            this.dispatchEvent("loadedBsSelect", obj { detail = e })
         })
         this.getElementJQuery()?.on("rendered.bs.select", { e, _ ->
-            this.dispatchEvent("renderedBsSelect", obj({ detail = e }))
+            this.dispatchEvent("renderedBsSelect", obj { detail = e })
         })
         this.getElementJQuery()?.on("refreshed.bs.select", { e, _ ->
-            this.dispatchEvent("refreshedBsSelect", obj({ detail = e }))
+            this.dispatchEvent("refreshedBsSelect", obj { detail = e })
         })
         this.getElementJQueryD()?.on("changed.bs.select", { e, cIndex: Int ->
             e["clickedIndex"] = cIndex
-            this.dispatchEvent("changedBsSelect", obj({ detail = e }))
+            this.dispatchEvent("changedBsSelect", obj { detail = e })
         })
         refreshState()
     }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/SelectOptGroup.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/SelectOptGroup.kt
index 513077ef..38a578fe 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/SelectOptGroup.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/SelectOptGroup.kt
@@ -1,4 +1,4 @@
-package pl.treksoft.kvision.form
+package pl.treksoft.kvision.form.select
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.panel.SimplePanel
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/SelectOption.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/SelectOption.kt
index f3be295c..3ff44c61 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/SelectOption.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/SelectOption.kt
@@ -1,4 +1,4 @@
-package pl.treksoft.kvision.form
+package pl.treksoft.kvision.form.select
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Widget
diff --git a/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt b/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt
index a4e14d5c..77e40349 100644
--- a/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt
@@ -1,13 +1,13 @@
 package pl.treksoft.kvision.modal
 
 import com.github.snabbdom.VNode
-import pl.treksoft.kvision.panel.SimplePanel
 import pl.treksoft.kvision.core.Root
 import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.helpers.CloseIcon
 import pl.treksoft.kvision.html.Button
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.panel.SimplePanel
 import pl.treksoft.kvision.snabbdom.StringBoolPair
 import pl.treksoft.kvision.snabbdom.StringPair
 import pl.treksoft.kvision.snabbdom.obj
@@ -134,17 +134,17 @@ open class Modal(caption: String? = null, closeButton: Boolean = true,
             backdrop = if (escape) "true" else "static"
         })
         this.getElementJQuery()?.on("show.bs.modal", { e, _ ->
-            this.dispatchEvent("showBsModal", obj({ detail = e }))
+            this.dispatchEvent("showBsModal", obj { detail = e })
         })
         this.getElementJQuery()?.on("shown.bs.modal", { e, _ ->
-            this.dispatchEvent("shownBsModal", obj({ detail = e }))
+            this.dispatchEvent("shownBsModal", obj { detail = e })
         })
         this.getElementJQuery()?.on("hide.bs.modal", { e, _ ->
-            this.dispatchEvent("hideBsModal", obj({ detail = e }))
+            this.dispatchEvent("hideBsModal", obj { detail = e })
         })
         this.getElementJQuery()?.on("hidden.bs.modal", { e, _ ->
             this.visible = false
-            this.dispatchEvent("hiddenBsModal", obj({ detail = e }))
+            this.dispatchEvent("hiddenBsModal", obj { detail = e })
         })
     }
 
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt
index 02811639..b8c9c580 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt
@@ -32,7 +32,7 @@ open class SplitPanel(private val direction: DIRECTION = DIRECTION.VERTICAL,
                 onDrag = lok@ { e: JQueryEventObject, _: JQuery, newWidth: Int, newHeight: Int, _: dynamic ->
                     e.asDynamic()["newWidth"] = newWidth
                     e.asDynamic()["newHeight"] = newHeight
-                    self.dispatchEvent("dragSplitPanel", obj({ detail = e }))
+                    self.dispatchEvent("dragSplitPanel", obj { detail = e })
                     return@lok !e.isDefaultPrevented()
                 }
                 onDragEnd = { e: JQueryEventObject, el: JQuery, _: dynamic ->
@@ -41,7 +41,7 @@ open class SplitPanel(private val direction: DIRECTION = DIRECTION.VERTICAL,
                     } else {
                         children[0].width = el.width().toInt() to px
                     }
-                    self.dispatchEvent("dragEndSplitPanel", obj({ detail = e }))
+                    self.dispatchEvent("dragEndSplitPanel", obj { detail = e })
                 }
             })
         }
diff --git a/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt b/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt
index ecd3316e..3ed50967 100644
--- a/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/snabbdom/Types.kt
@@ -27,7 +27,7 @@ interface KvJQueryEventObject : JQueryEventObject {
 
 @Suppress("UnsafeCastFromDynamic")
 class KvEvent(type: String, eventInitDict: CustomEventInit) : CustomEvent(type, eventInitDict) {
-    override val detail: KvJQueryEventObject = obj({})
+    override val detail: KvJQueryEventObject = obj {}
 }
 
 interface BtOn : On {
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/SelectInputSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectInputSpec.kt
index 988fabbf..4f3544b9 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/SelectInputSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectInputSpec.kt
@@ -1,8 +1,8 @@
-package test.pl.treksoft.kvision.form
+package test.pl.treksoft.kvision.form.select
 
 import pl.treksoft.kvision.core.Root
-import pl.treksoft.kvision.form.SELECTWIDTHTYPE
-import pl.treksoft.kvision.form.SelectInput
+import pl.treksoft.kvision.form.select.SELECTWIDTHTYPE
+import pl.treksoft.kvision.form.select.SelectInput
 import test.pl.treksoft.kvision.DomSpec
 import kotlin.browser.document
 import kotlin.test.Test
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/SelectOptGroupSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptGroupSpec.kt
index 5c77152e..90348f15 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/SelectOptGroupSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptGroupSpec.kt
@@ -1,8 +1,8 @@
-package test.pl.treksoft.kvision.form
+package test.pl.treksoft.kvision.form.select
 
 import pl.treksoft.kvision.core.Root
-import pl.treksoft.kvision.form.SelectOptGroup
-import pl.treksoft.kvision.form.SelectOption
+import pl.treksoft.kvision.form.select.SelectOptGroup
+import pl.treksoft.kvision.form.select.SelectOption
 import test.pl.treksoft.kvision.DomSpec
 import kotlin.browser.document
 import kotlin.test.Test
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/SelectOptionSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptionSpec.kt
index a1808d20..007db186 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/SelectOptionSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectOptionSpec.kt
@@ -1,8 +1,7 @@
-package test.pl.treksoft.kvision.form
+package test.pl.treksoft.kvision.form.select
 
 import pl.treksoft.kvision.core.Root
-import pl.treksoft.kvision.form.Password
-import pl.treksoft.kvision.form.SelectOption
+import pl.treksoft.kvision.form.select.SelectOption
 import test.pl.treksoft.kvision.DomSpec
 import kotlin.browser.document
 import kotlin.test.Test
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/SelectSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectSpec.kt
index 92e4689a..129f74da 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/SelectSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SelectSpec.kt
@@ -1,8 +1,8 @@
-package test.pl.treksoft.kvision.form
+package test.pl.treksoft.kvision.form.select
 
 import pl.treksoft.kvision.core.Root
-import pl.treksoft.kvision.form.SELECTWIDTHTYPE
-import pl.treksoft.kvision.form.Select
+import pl.treksoft.kvision.form.select.SELECTWIDTHTYPE
+import pl.treksoft.kvision.form.select.Select
 import test.pl.treksoft.kvision.DomSpec
 import kotlin.browser.document
 import kotlin.test.Test