Add htmx_delete_row.sc example

Author: sake92

examples/scala-cli/htmx/htmx_click_to_load.sc

@@ -9,16 +9,6 @@ import ba.sake.hepek.htmx.*
 import ba.sake.querson.QueryStringRW
 import ba.sake.sharaf.*, routing.*
 
-/*
-<tr id="replaceMe">
-  <td colspan="3">
-    <button class='btn' hx-get="/contacts/?page=2"
-                        hx-target="#replaceMe"
-                        hx-swap="outerHTML">
-         Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
-    </button>
-  </td>
-</tr>*/
 object views {
   import scalatags.Text.all.*
   import ba.sake.hepek.html.HtmlPage

examples/scala-cli/htmx/htmx_delete_row.sc

@@ -0,0 +1,63 @@
+//> using scala "3.3.1"
+//> using dep ba.sake::sharaf:0.0.22
+
+import java.util.UUID
+import io.undertow.Undertow
+import scalatags.Text.all.*
+import ba.sake.hepek.html.HtmlPage
+import ba.sake.hepek.htmx.*
+import ba.sake.querson.QueryStringRW
+import ba.sake.sharaf.*, routing.*
+
+object views {
+  import scalatags.Text.all.*
+  import ba.sake.hepek.html.HtmlPage
+  import ba.sake.hepek.htmx.*
+
+  trait BasePage extends HtmlPage with HtmxDependencies
+
+  class ContactsViewPage(contacts: Seq[Contact]) extends BasePage:
+    override def bodyContent = div(
+      h1("Delete Row example"),
+      table()(
+        thead(tr(th("Name"), th("Email"), th(""))),
+        tbody(hx.confirm := "Are you sure?", hx.target := "closest tr", hx.swap := "outerHTML swap:1s")(
+          contactsRows(contacts)
+        )
+      )
+    )
+
+    override def stylesInline = List("""
+      tr.htmx-swapping td {
+        opacity: 0;
+        transition: opacity 1s ease-out;
+      }
+    """)
+
+  def contactsRows(contacts: Seq[Contact]): Frag = contacts.map { contact =>
+    tr(td(contact.name), td(contact.email), td(button(hx.delete := s"/contacts/${contact.id}")("Delete")))
+  }
+
+}
+case class Contact(id: String, name: String, email: String)
+
+var allContacts = Seq(
+  Contact("1", "Angie MacDowell", "[email protected]"),
+  Contact("2", "Fuqua Tarkenton", "[email protected]"),
+  Contact("3", "Kim Yee", "[email protected]")
+)
+
+val routes = Routes:
+  case GET() -> Path() =>
+    Response.withBody(views.ContactsViewPage(allContacts))
+  case DELETE() -> Path("contacts", id) =>
+    allContacts = allContacts.filterNot(_.id == id)
+    Response.withBody("") // empty string, remove that <tr>
+
+Undertow.builder
+  .addHttpListener(8181, "localhost")
+  .setHandler(SharafHandler(routes))
+  .build
+  .start()
+
+println(s"Server started at http://localhost:8181")