Showcase example

1 files changed, 76 insertions, 0 deletions

diff --git a/examples/showcase/src/main/kotlin/com/example/DataTab.kt b/examples/showcase/src/main/kotlin/com/example/DataTab.kt
new file mode 100644
index 00000000..177167c4
--- /dev/null
+++ b/examples/showcase/src/main/kotlin/com/example/DataTab.kt
@@ -0,0 +1,76 @@
+package com.example
+
+import com.lightningkite.kotlin.observable.list.observableListOf
+import pl.treksoft.kvision.data.DataComponent
+import pl.treksoft.kvision.data.DataContainer
+import pl.treksoft.kvision.form.check.CHECKBOXSTYLE
+import pl.treksoft.kvision.form.check.CheckBox
+import pl.treksoft.kvision.html.BUTTONSTYLE
+import pl.treksoft.kvision.html.Button
+import pl.treksoft.kvision.panel.FLEXDIR
+import pl.treksoft.kvision.panel.FLEXWRAP
+import pl.treksoft.kvision.panel.FlexPanel
+import pl.treksoft.kvision.panel.HPanel
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.panel.VPanel
+import pl.treksoft.kvision.utils.px
+
+class DataTab : SimplePanel() {
+    init {
+        this.marginTop = 10.px()
+        this.minHeight = 400.px()
+
+        val panel = VPanel(spacing = 5)
+
+        class DataModel(checked: Boolean, text: String) : DataComponent() {
+            var checked: Boolean by obs(checked)
+            var text: String by obs(text)
+        }
+
+        val list = observableListOf(
+            DataModel(false, "January"),
+            DataModel(false, "February"),
+            DataModel(false, "March"),
+            DataModel(false, "April"),
+            DataModel(false, "May"),
+            DataModel(false, "June"),
+            DataModel(false, "July"),
+            DataModel(false, "August"),
+            DataModel(false, "September"),
+            DataModel(false, "October"),
+            DataModel(false, "November")
+        )
+        val dataContainer = DataContainer(list, { index ->
+            CheckBox(
+                value = list[index].checked,
+                label = if (list[index].checked) "<b>${list[index].text}</b>" else "${list[index].text}"
+            ).apply {
+                rich = true
+                style = CHECKBOXSTYLE.PRIMARY
+                onClick {
+                    list[index].checked = this.value
+                }
+            }
+        }, child = FlexPanel(FLEXDIR.ROW, spacing = 10, wrap = FLEXWRAP.WRAP))
+        panel.add(dataContainer)
+
+        val butPanel = HPanel(spacing = 10)
+        butPanel.add(Button("Add December", style = BUTTONSTYLE.SUCCESS).onClick {
+            list.add(DataModel(true, "December"))
+        })
+        butPanel.add(Button("Check all", style = BUTTONSTYLE.INFO).onClick {
+            list.forEach { it.checked = true }
+        })
+        butPanel.add(Button("Uncheck all", style = BUTTONSTYLE.INFO).onClick {
+            list.forEach { it.checked = false }
+        })
+        butPanel.add(Button("Reverse list", style = BUTTONSTYLE.DANGER).onClick {
+            list.reverse()
+        })
+        butPanel.add(Button("Remove checked", style = BUTTONSTYLE.DANGER).onClick {
+            list.filter { it.checked }.forEach { list.remove(it) }
+        })
+        panel.add(butPanel)
+        this.add(panel)
+    }
+}