Laminar SAPUI5 TodoApp

laminar-sapui5-scalawind-todoapp.scala

//> using scala 3.6.3
//> using platform scala-js

//> using dep "org.scala-js::scalajs-dom::2.8.0"
//> using dep "com.raquo::laminar::17.2.0"
//> using dep "be.doeraene::web-components-ui5::2.1.0"

//> using jsModuleKind es
//> using jsModuleSplitStyleStr fewestmodules

package myapp

import org.scalajs.dom
import com.raquo.laminar.api.L.*
import be.doeraene.webcomponents.ui5.*
import be.doeraene.webcomponents.ui5.configkeys.*
import scalawind.*

case class Todo(id: Int, text: String, completed: Boolean)

@main
def main(): Unit = {
  val container = dom.document.getElementById("app")
  
  // State management
  val todosVar = Var(Vector.empty[Todo])
  val inputVar = Var("")
  
  def addTodo(text: String): Unit =
    if text.trim.nonEmpty then
      val newTodo = Todo(
        id = System.currentTimeMillis().toInt,
        text = text.trim,
        completed = false
      )
      todosVar.update(_ :+ newTodo)
      inputVar.set("")

  def toggleTodo(id: Int): Unit =
    todosVar.update(_.map { todo =>
      if todo.id == id then todo.copy(completed = !todo.completed)
      else todo
    })

  def deleteTodo(id: Int): Unit =
    todosVar.update(_.filterNot(_.id == id))

  render(
    container,
    div(
      tw.max_w_md.mx_auto.mt_8.p_4,
      // Input form
      form(
        tw.flex.items_center.gap_2.mb_4,
        onSubmit.preventDefault --> { _ => addTodo(inputVar.now()) },
        
        Input(
          _.placeholder := "Add a new todo...",
          _.value <-- inputVar,
          _.events.onInput.mapToValue --> inputVar.writer
        ),
        
        Button(
          _.design   := ButtonDesign.Emphasized,
          _.tpe := ButtonType.Submit,
          "Add"
        )
      ),
      
      // Todo list
      div(
        tw.space_y_2,
        children <-- todosVar.signal.map { todos =>
          todos.map { todo =>
            div(
              tw.flex.items_center.gap_2.p_2.border.rounded,
              
              input(
                typ := "checkbox",
                checked := todo.completed,
                tw.h_5.w_5,
                onClick --> { _ => toggleTodo(todo.id) }
              ),
              
              span(
                tw.line_through.text_gray_500 := todo.completed,
                todo.text
              ),
              
              button(
                tw.ml_auto.px_2.py_1.text_red_500.hover(tw.bg_red_100).rounded,
                onClick --> { _ => deleteTodo(todo.id) },
                "x"
              )
            )
          }
        }
      )
    )
  )
}