diff options
Diffstat (limited to 'kvision-modules/kvision-tabulator')
4 files changed, 139 insertions, 22 deletions
diff --git a/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Options.kt b/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Options.kt index dac29ab9..dd3bff5f 100644 --- a/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Options.kt +++ b/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Options.kt @@ -22,8 +22,19 @@ package pl.treksoft.kvision.tabulator +import kotlinx.serialization.KSerializer +import org.w3c.dom.HTMLElement +import pl.treksoft.kvision.core.Component +import pl.treksoft.kvision.form.FormControl +import pl.treksoft.kvision.form.FormInput +import pl.treksoft.kvision.panel.Root +import pl.treksoft.kvision.tabulator.EditorRoot.disposeTimer +import pl.treksoft.kvision.tabulator.EditorRoot.root import pl.treksoft.kvision.tabulator.js.Tabulator +import pl.treksoft.kvision.utils.JSON import pl.treksoft.kvision.utils.obj +import kotlin.browser.document +import kotlin.browser.window import kotlin.js.Promise /** @@ -248,7 +259,7 @@ fun DownloadConfig.toJs(): Tabulator.DownloadConfig { /** * Column definition options. */ -data class ColumnDefinition( +data class ColumnDefinition<T : Any>( val title: String, val field: String? = null, val visible: Boolean? = null, @@ -265,18 +276,36 @@ data class ColumnDefinition( val rowHandle: Boolean? = null, val hideInHtml: Boolean? = null, val sorter: Sorter? = null, + val sorterFunction: (( + a: dynamic, b: dynamic, aRow: Tabulator.RowComponent, bRow: Tabulator.RowComponent, + column: Tabulator.ColumnComponent, dir: SortingDir, sorterParams: dynamic + ) -> Number)? = null, val sorterParams: dynamic = null, val formatter: Formatter? = null, val formatterFunction: (( cell: Tabulator.CellComponent, formatterParams: dynamic, onRendered: (callback: () -> Unit) -> Unit ) -> dynamic)? = null, + val formatterComponentFunction: (( + cell: Tabulator.CellComponent, onRendered: (callback: () -> Unit) -> Unit, data: T + ) -> Component)? = null, val formatterParams: dynamic = null, val variableHeight: Boolean? = null, val editable: ((cell: Tabulator.CellComponent) -> Boolean)? = null, val editor: Editor? = null, + val editorFunction: (( + cell: Tabulator.CellComponent, + onRendered: (callback: () -> Unit) -> Unit, + success: (value: dynamic) -> Unit, cancel: (value: dynamic) -> Unit, editorParams: dynamic + ) -> dynamic)? = null, + val editorComponentFunction: (( + cell: Tabulator.CellComponent, + onRendered: (callback: () -> Unit) -> Unit, + success: (value: dynamic) -> Unit, cancel: (value: dynamic) -> Unit, data: T + ) -> Component)? = null, val editorParams: dynamic = null, val validator: Validator? = null, + val validatorFunction: dynamic = null, val validatorParams: String? = null, val download: Boolean? = null, val downloadTitle: String? = null, @@ -325,11 +354,78 @@ data class ColumnDefinition( val cellEditCancelled: ((cell: Tabulator.CellComponent) -> Unit)? = null ) +internal object EditorRoot { + internal var root: Root? = null + internal var disposeTimer: Int? = null +} + /** * An extension function to convert column definition class to JS object. */ -@Suppress("UNCHECKED_CAST_TO_EXTERNAL_INTERFACE", "ComplexMethod") -fun ColumnDefinition.toJs(i18nTranslator: (String) -> (String)): Tabulator.ColumnDefinition { +@Suppress("UNCHECKED_CAST_TO_EXTERNAL_INTERFACE", "ComplexMethod", "MagicNumber") +fun <T : Any> ColumnDefinition<T>.toJs( + i18nTranslator: (String) -> (String), + dataSerializer: KSerializer<T>? = null +): Tabulator.ColumnDefinition { + val tmpEditorFunction = editorComponentFunction?.let { + { cell: Tabulator.CellComponent, + onRendered: (callback: () -> Unit) -> Unit, + success: (value: dynamic) -> Unit, cancel: (value: dynamic) -> Unit, _: dynamic -> + var onRenderedCallback: (() -> Unit)? = null + val str = kotlin.js.JSON.stringify(cell.getData()) + @Suppress("UNCHECKED_CAST") val data = dataSerializer?.let { + JSON.plain.parse(it, str) + } ?: cell.getData() as T + val component = it(cell, { callback -> + onRenderedCallback = callback + }, { value -> + success(value) + disposeTimer = window.setTimeout({ + root?.dispose() + disposeTimer = null + root = null + }, 500) + }, cancel, data) + val rootElement = document.createElement("div") as HTMLElement + onRendered { + if (root != null) { + disposeTimer?.let { window.clearTimeout(it) } + root?.dispose() + } + root = Root(element = rootElement) + @Suppress("UnsafeCastFromDynamic") + root?.add(component) + (component as? FormControl)?.focus() + (component as? FormInput)?.focus() + cell.checkHeight() + onRenderedCallback?.invoke() + } + rootElement + } + } + + val tmpFormatterFunction = formatterComponentFunction?.let { + { cell: Tabulator.CellComponent, _: dynamic, + onRendered: (callback: () -> Unit) -> Unit -> + var onRenderedCallback: (() -> Unit)? = null + val str = kotlin.js.JSON.stringify(cell.getData()) + @Suppress("UNCHECKED_CAST") val data = + dataSerializer?.let { JSON.plain.parse(it, str) } ?: cell.getData() as T + val component = it(cell, { callback -> + onRenderedCallback = callback + }, data) + val rootElement = document.createElement("div") as HTMLElement + onRendered { + val root = Root(element = rootElement) + @Suppress("UnsafeCastFromDynamic") + root.add(component) + cell.checkHeight() + onRenderedCallback?.invoke() + } + rootElement + } + } + return obj { this.title = i18nTranslator(title) if (field != null) this.field = field @@ -346,9 +442,15 @@ fun ColumnDefinition.toJs(i18nTranslator: (String) -> (String)): Tabulator.Colum if (cssClass != null) this.cssClass = cssClass if (rowHandle != null) this.rowHandle = rowHandle if (hideInHtml != null) this.hideInHtml = hideInHtml - if (sorter != null) this.sorter = sorter.sorter + if (sorterFunction != null) { + this.sorter = sorterFunction + } else if (sorter != null) { + this.sorter = sorter.sorter + } if (sorterParams != null) this.sorterParams = sorterParams - if (formatterFunction != null) { + if (tmpFormatterFunction != null) { + this.formatter = tmpFormatterFunction + } else if (formatterFunction != null) { this.formatter = formatterFunction } else if (formatter != null) { this.formatter = formatter.formatter @@ -356,7 +458,13 @@ fun ColumnDefinition.toJs(i18nTranslator: (String) -> (String)): Tabulator.Colum if (formatterParams != null) this.formatterParams = formatterParams if (variableHeight != null) this.variableHeight = variableHeight if (editable != null) this.editable = editable - if (editor != null) this.editor = editor.editor + if (tmpEditorFunction != null) { + this.editor = tmpEditorFunction + } else if (editorFunction != null) { + this.editor = editorFunction + } else if (editor != null) { + this.editor = editor.editor + } if (editorParams != null) this.editorParams = editorParams if (validator != null) this.validator = validator.validator if (validatorParams != null) this.validatorParams = validatorParams @@ -404,14 +512,20 @@ fun ColumnDefinition.toJs(i18nTranslator: (String) -> (String)): Tabulator.Colum if (cellMouseMove != null) this.cellMouseMove = cellMouseMove if (cellEditing != null) this.cellEditing = cellEditing if (cellEdited != null) this.cellEdited = cellEdited - if (cellEditCancelled != null) this.cellEditCancelled = cellEditCancelled + if (cellEditCancelled != null) { + this.cellEditCancelled = cellEditCancelled + } else if (tmpEditorFunction != null) { + this.cellEditCancelled = { cell: Tabulator.CellComponent -> + cell.checkHeight() + } + } } as Tabulator.ColumnDefinition } /** * Tabulator options. */ -data class TabulatorOptions( +data class TabulatorOptions<T : Any>( val height: String? = null, val virtualDom: Boolean? = null, val virtualDomBuffer: Int? = null, @@ -425,7 +539,7 @@ data class TabulatorOptions( val downloadConfig: DownloadConfig? = null, val reactiveData: Boolean? = null, val autoResize: Boolean? = null, - val columns: List<ColumnDefinition>? = null, + val columns: List<ColumnDefinition<T>>? = null, val autoColumns: Boolean? = null, val layout: Layout? = null, val layoutColumnsOnNewData: Boolean? = null, @@ -572,7 +686,10 @@ data class TabulatorOptions( * An extension function to convert tabulator options class to JS object. */ @Suppress("UNCHECKED_CAST_TO_EXTERNAL_INTERFACE", "ComplexMethod") -fun TabulatorOptions.toJs(i18nTranslator: (String) -> (String)): Tabulator.Options { +fun <T : Any> TabulatorOptions<T>.toJs( + i18nTranslator: (String) -> (String), + dataSerializer: KSerializer<T>? = null +): Tabulator.Options { return obj { if (height != null) this.height = height if (virtualDom != null) this.virtualDom = virtualDom @@ -587,7 +704,7 @@ fun TabulatorOptions.toJs(i18nTranslator: (String) -> (String)): Tabulator.Optio if (downloadConfig != null) this.downloadConfig = downloadConfig.toJs() if (reactiveData != null) this.reactiveData = reactiveData if (autoResize != null) this.autoResize = autoResize - if (columns != null) this.columns = columns.map { it.toJs(i18nTranslator) }.toTypedArray() + if (columns != null) this.columns = columns.map { it.toJs(i18nTranslator, dataSerializer) }.toTypedArray() if (autoColumns != null) { this.autoColumns = autoColumns } else if (columns == null) { diff --git a/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Tabulator.kt b/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Tabulator.kt index 249c578f..6c7480fc 100644 --- a/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Tabulator.kt +++ b/kvision-modules/kvision-tabulator/src/main/kotlin/pl/treksoft/kvision/tabulator/Tabulator.kt @@ -54,7 +54,7 @@ import pl.treksoft.kvision.tabulator.js.Tabulator as JsTabulator @Suppress("LargeClass", "TooManyFunctions") open class Tabulator<T : Any>( protected val data: List<T>? = null, - val options: TabulatorOptions = TabulatorOptions(), + val options: TabulatorOptions<T> = TabulatorOptions(), types: Set<TableType> = setOf(), classes: Set<String> = setOf(), protected val dataSerializer: KSerializer<T>? = null @@ -228,7 +228,7 @@ open class Tabulator<T : Any>( (this.getElement() as? HTMLElement)?.let { jsTabulator = KVManagerTabulator.getConstructor() - .createInstance(it, options.toJs(this::translate)) + .createInstance(it, options.toJs(this::translate, dataSerializer)) if (currentPage != null) { jsTabulator?.setPageSize(pageSize ?: 0) jsTabulator?.setPage(currentPage) @@ -561,7 +561,7 @@ open class Tabulator<T : Any>( */ inline fun <reified T : Any> Container.tabulator( data: List<T>? = null, - options: TabulatorOptions = TabulatorOptions(), + options: TabulatorOptions<T> = TabulatorOptions(), types: Set<TableType> = setOf(), classes: Set<String> = setOf(), noinline init: (Tabulator<T>.() -> Unit)? = null @@ -578,7 +578,7 @@ open class Tabulator<T : Any>( inline fun <reified T : Any, S : Any, A : RAction> Container.tabulator( store: ReduxStore<S, A>, noinline dataFactory: (S) -> List<T>, - options: TabulatorOptions = TabulatorOptions(), + options: TabulatorOptions<T> = TabulatorOptions(), types: Set<TableType> = setOf(), classes: Set<String> = setOf(), noinline init: (Tabulator<T>.() -> Unit)? = null @@ -594,7 +594,7 @@ open class Tabulator<T : Any>( */ inline fun <reified T : Any, A : RAction> Container.tabulator( store: ReduxStore<List<T>, A>, - options: TabulatorOptions = TabulatorOptions(), + options: TabulatorOptions<T> = TabulatorOptions(), types: Set<TableType> = setOf(), classes: Set<String> = setOf(), noinline init: (Tabulator<T>.() -> Unit)? = null @@ -609,7 +609,7 @@ open class Tabulator<T : Any>( * DSL builder extension function for dynamic data (send within options parameter). */ fun <T : Any> Container.tabulator( - options: TabulatorOptions = TabulatorOptions(), + options: TabulatorOptions<T> = TabulatorOptions(), types: Set<TableType> = setOf(), classes: Set<String> = setOf(), init: (Tabulator<T>.() -> Unit)? = null @@ -625,7 +625,7 @@ open class Tabulator<T : Any>( */ @UseExperimental(ImplicitReflectionSerializer::class) inline fun <reified T : Any> create( - data: List<T>? = null, options: TabulatorOptions = TabulatorOptions(), + data: List<T>? = null, options: TabulatorOptions<T> = TabulatorOptions(), types: Set<TableType> = setOf(), classes: Set<String> = setOf(), noinline init: (Tabulator<T>.() -> Unit)? = null @@ -642,7 +642,7 @@ open class Tabulator<T : Any>( inline fun <reified T : Any, S : Any, A : RAction> create( store: ReduxStore<S, A>, noinline dataFactory: (S) -> List<T>, - options: TabulatorOptions = TabulatorOptions(), + options: TabulatorOptions<T> = TabulatorOptions(), types: Set<TableType> = setOf(), classes: Set<String> = setOf(), noinline init: (Tabulator<T>.() -> Unit)? = null @@ -662,7 +662,7 @@ open class Tabulator<T : Any>( @UseExperimental(ImplicitReflectionSerializer::class) inline fun <reified T : Any, A : RAction> create( store: ReduxStore<List<T>, A>, - options: TabulatorOptions = TabulatorOptions(), + options: TabulatorOptions<T> = TabulatorOptions(), types: Set<TableType> = setOf(), classes: Set<String> = setOf(), noinline init: (Tabulator<T>.() -> Unit)? = null diff --git a/kvision-modules/kvision-tabulator/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/kvision-modules/kvision-tabulator/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt index 37d7a9df..13c8531b 100644 --- a/kvision-modules/kvision-tabulator/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt +++ b/kvision-modules/kvision-tabulator/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt @@ -86,7 +86,7 @@ interface WSpec : DomSpec { fun runW(code: (widget: Widget, element: Element?) -> Unit) { run { - val root = Root("test", true) + val root = Root("test", fixed = true) val widget = Widget() widget.id = "test_id" root.add(widget) diff --git a/kvision-modules/kvision-tabulator/src/test/kotlin/test/pl/treksoft/kvision/tabulator/TabulatorSpec.kt b/kvision-modules/kvision-tabulator/src/test/kotlin/test/pl/treksoft/kvision/tabulator/TabulatorSpec.kt index d6b33a78..1f49ee93 100644 --- a/kvision-modules/kvision-tabulator/src/test/kotlin/test/pl/treksoft/kvision/tabulator/TabulatorSpec.kt +++ b/kvision-modules/kvision-tabulator/src/test/kotlin/test/pl/treksoft/kvision/tabulator/TabulatorSpec.kt @@ -34,7 +34,7 @@ class TabulatorSpec : DomSpec { @Test fun render() { run { - val root = Root("test", true) + val root = Root("test", fixed = true) val tabulator = Tabulator<Any>(options = TabulatorOptions(data = arrayOf(obj { id = 1 name = "Name" |