todo mvc improvements

sake92 · Nov 28, 2020 · 25f82cd · 25f82cd
1 parent 28e8479
commit 25f82cd
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/core/src/main/scala/ba/sake/rxtags/ScalatagsAddons.scala b/core/src/main/scala/ba/sake/rxtags/ScalatagsAddons.scala
@@ -33,7 +33,6 @@ object ScalatagsAddons {
   // not all attributes are reflected to properties, so we special-case them..
   // https://stackoverflow.com/a/45474861/4496364
   def applyAttrAndProp[T](element: dom.Element, attrName: String, attrValue: Any): Unit = {
-    println("applyAttrAndProp ", element.innerHTML, attrName, attrValue)
     val currentValue = attrValue match {
       case rx: Stateful[_] => rx.now
       case other           => other

diff --git a/todo/src/main/scala/ba/sake/rxtags/todo/MainComponent.scala b/todo/src/main/scala/ba/sake/rxtags/todo/MainComponent.scala
@@ -18,12 +18,7 @@ class MainComponent(todoService: TodoService) {
 
   private val mainDisplay$ = todos$.map(todos => if (todos.isEmpty) "none" else "block")
   private val clearCompletedDisplay$ = todos$.map(todos => if (todos.exists(_.completed)) "block" else "none")
-
-  private val countFrag = todos$.map { todos =>
-    val count = todos.count(!_.completed)
-    val itemsLabel = if (count == 1) "item" else "items"
-    div(strong(count), s" $itemsLabel left")
-  }.asFrag
+  private val toggleAllChecked$ = Val { Option.when(todoService.toggleAllState$.now)("checked") }
 
   def render =
     div(
@@ -41,12 +36,13 @@ class MainComponent(todoService: TodoService) {
         ),
         tag("section")(cls := "main", css("display") := mainDisplay$)(
           input(
+            tpe := "checkbox",
+            checked := toggleAllChecked$,
             onclick := { () =>
               todoService.toggleAll()
             },
             id := "toggle-all",
-            cls := "toggle-all",
-            tpe := "checkbox"
+            cls := "toggle-all"
           ),
           label(`for` := "toggle-all", "Mark all as complete"),
           ul(cls := "todo-list")(
@@ -58,7 +54,13 @@ class MainComponent(todoService: TodoService) {
           )
         ),
         footer(cls := "footer", css("display") := mainDisplay$)(
-          span(cls := "todo-count")(countFrag),
+          span(cls := "todo-count")(
+            todos$.map { todos =>
+              val count = todos.count(!_.completed)
+              val itemsLabel = if (count == 1) "item" else "items"
+              frag(strong(count), s" $itemsLabel left")
+            }.asFrag
+          ),
           ul(cls := "filters")(
             li(a(data.navigate := "/", cls := selectedCls(TodoFilter.All))("All")),
             li(a(data.navigate := "/active", cls := selectedCls(TodoFilter.Active))("Active")),

diff --git a/todo/src/main/scala/ba/sake/rxtags/todo/TodoService.scala b/todo/src/main/scala/ba/sake/rxtags/todo/TodoService.scala
@@ -6,10 +6,15 @@ import ba.sake.rxtags._
 
 class TodoService {
 
-  private val toggleAllState$ = Var(false)
+  val toggleAllState$ = Var(false)
 
   val todos$ : Var[List[Todo]] = initTodos()
 
+  todos$.attachAndFire { todos =>
+    if (todos.length == 1) // synchronize with last element..
+      toggleAllState$.set(todos.head.completed)
+  }
+
   def add(todo: Todo): Unit =
     todos$.set(todos => todos.appended(todo))
 
@@ -34,11 +39,10 @@ class TodoService {
   private def initTodos() = {
     import upickle.default._
 
-    val TodosKey = "TODOS"
+    val TodosKey = "todos-RxTags"
     val savedTodosJson = dom.window.localStorage.getItem(TodosKey)
     val todos =
-      if (savedTodosJson == null)
-        List(Todo("Create a TodoMVC template", completed = true), Todo("Rule the web"))
+      if (savedTodosJson == null) List(Todo("Create a TodoMVC template", completed = true), Todo("Rule the web"))
       else read[List[Todo]](savedTodosJson)
 
     val initTodos$ = Var(todos)