it lists, saves and updates

sombriks · Feb 15, 2024 · 3a5bf7d · 3a5bf7d
1 parent e0eaf57
commit 3a5bf7d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -21,7 +21,7 @@ dependencies {
  implementation("io.javalin:javalin:6.0.1")
  implementation("io.javalin:javalin-rendering:6.0.1")
  implementation("org.apache.velocity:velocity-engine-core:2.3")
- implementation("org.webjars.npm:htmx.org:2.0.0-alpha1")
+ implementation("org.webjars.npm:htmx.org:1.9.10")
  implementation("com.fasterxml.jackson.core:jackson-databind:2.16.1")
  implementation("com.fasterxml.jackson.module:jackson-module-kotlin:2.16.1")
  implementation("org.jdbi:jdbi3-kotlin-sqlobject:3.44.1")

diff --git a/src/main/resources/templates/velocity/index.vm b/src/main/resources/templates/velocity/index.vm
@@ -2,7 +2,10 @@
 <html>
 <head>
  <title>Sample Javalin with HTMX</title>
- <script src="/webjars/htmx.org/2.0.0-alpha1/dist/htmx.js"></script>
+ <script src="/webjars/htmx.org/1.9.10/dist/htmx.js"></script>
+ <script>
+ htmx.logAll();
+ </script>
 </head>
 <body>
 <h1>TODO List</h1>

diff --git a/src/main/resources/templates/velocity/todos/list.vm b/src/main/resources/templates/velocity/todos/list.vm
@@ -7,17 +7,20 @@
  </tr>
  #foreach($todo in $todos)
  <tr>
- <form hx-put="/todos/$todo.id" id="item$todo.id" hx-swap="outerHTML" hx-target="#table">
- <td>$todo.id</td>
- <td><input type="text" name="description" value="$todo.description"/></td>
- <td>
- <select name="done">
- <option #if($todo.done) selected #end>true</option>
- <option #if(!$todo.done) selected #end>false</option>
- </select>
- </td>
- <td><button type="submit">Save</button></td>
- </form>
+ <td>$todo.id <input class="edit$todo.id" type="hidden" value="$todo.id"/></td>
+ <td><input class="edit$todo.id" type="text" name="description" value="$todo.description"/></td>
+ <td>
+ <!-- TODO try to use checkboxes again -->
+ <select class="edit$todo.id" name="done">
+ <option #if($todo.done) selected #end>true</option>
+ <option #if(!$todo.done) selected #end>false</option>
+ </select>
+ </td>
+ <td>
+ <button hx-put="/todos/$todo.id" hx-swap="outerHTML"
+ hx-target="#table" hx-include=".edit$todo.id">Save
+ </button>
+ </td>
  </tr>
  #end
 </table>