Everywhere: Implement HTMX todo page

2024-11-17 02:27:50 +01:00
parent 56dcd4fb35
commit 6b93045514
17 changed files with 373 additions and 124 deletions
@@ -0,0 +1,35 @@
+import Elementary
+import Fluent
+
+struct TodosFormComponent: HTML {
+
+    var name: String
+    var target: String
+    var errors: [String: String] = [:]
+
+    // -------------------------------------
+
+    var content: some HTML {
+        div(.id("cdiv_" + name)) {
+            form(
+                .id("\(name)-form"),
+                .hx.post("/\(target)"), .hx.target("#cdiv_" + name), .hx.swap(.outerHTML)
+            ) {
+                div(.class("row")) {
+                    div(.class("col-11")) {
+                        input(
+                            .class("form-control"), .type(.text), .id("\(name)-title"),
+                            .name("title"), .placeholder("Title"))  // .required
+                    }
+                    div(.class("col-1")) {
+                        button(.class("btn btn-success"), .type(.submit)) { "Add" }
+                    }
+                }
+                if let error = errors["title"] {
+                    div(.class("form-text text-danger px-2")) { "\(error)." }
+                }
+            }
+        }
+    }
+
+}
@@ -0,0 +1,48 @@
+import Elementary
+import ElementaryHTMX
+import Fluent
+
+struct TodosTableComponent: HTML {
+
+    var name: String
+    var todos: [TodoDTO]
+    var refresh: Bool = false
+
+    // -------------------------------------
+
+    var content: some HTML {
+        div(.id("cdiv_" + name), refresh ? .hx.swapOOB(.outerHTML) : .empty()) {
+            table(.class("table")) {
+                thead {
+                    tr {
+                        th { "#" }
+                        th { "ID" }
+                        th { "Title" }
+                        th { "Modifier" }
+                    }
+                }
+                tbody(
+                    .hx.confirm("Are you sure?"), .hx.target("closest tr"),
+                    .hx.swap(.outerHTML, "swap:0.5s")
+                ) {
+                    for (index, todo) in todos.enumerated() {
+                        tr {
+                            td { "\(index)" }
+                            td { todo.id?.uuidString ?? "" }
+                            td { todo.title ?? "" }
+                            td {
+                                if let id = todo.id {
+                                    button(
+                                        .class("btn btn-danger"),
+                                        .hx.delete("/\(name)/\(id.uuidString)")
+                                    ) { "Delete" }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}