Everywhere: Add title sorting, add error toasts for HTMX

2024-11-23 00:54:30 +01:00
parent f0cb958ea2
commit 293503d7a2
8 changed files with 112 additions and 33 deletions
@@ -4,22 +4,25 @@ import Fluent

 struct TodosTableComponent: HTML {

-    var name: String
-    var todos: [TodoDTO]
-    var refresh: Bool = false
+    var state: TodosTableState = TodosTableState()

    // -------------------------------------

    var content: some HTML {
-        div(.id("cdiv_" + name), refresh ? .hx.swapOOB(.outerHTML) : .empty()) {
+        div(.id("cdiv_" + state.name), state.refresh ? .hx.swapOOB(.outerHTML) : .empty()) {
            table(.class("table")) {
                thead {
                    tr {
                        th { "#" }
                        th { "ID" }
                        th {
-                            "Title "
-                            i(.class("bi bi-arrow-down-circle")) {}
+                            let order = state.sort["title"]?.description ?? "ascending"
+                            span(.style("cursor: pointer;"),
+                                 .hx.get("/\(state.name)/sort?title=\(order == "descending" ? "ascending" : "descending")"),
+                                 .hx.target("closest div")) {
+                                "Title "
+                                i(.class("bi bi-arrow-\(order == "descending" ? "down" : "up")-circle")) {}
+                            }
                        }
                        th { "Modifier" }
                    }
@@ -28,7 +31,7 @@ struct TodosTableComponent: HTML {
                    .hx.confirm("Are you sure?"), .hx.target("closest tr"),
                    .hx.swap(.outerHTML, "swap:0.5s")
                ) {
-                    for (index, todo) in todos.enumerated() {
+                    for (index, todo) in state.todos.enumerated() {
                        tr {
                            td { "\(index)" }
                            td { todo.id?.uuidString ?? "" }
@@ -39,7 +42,7 @@ struct TodosTableComponent: HTML {
                                        .class("bi bi-trash3 text-danger"),
                                        .data("bs-toggle", value: "tooltip"),
                                        .data("bs-title", value: "Delete"),
-                                        .hx.delete("/\(name)/\(id.uuidString)")
+                                        .hx.delete("/\(state.name)/\(id.uuidString)")
                                    ) {}
                                }
                            }
@@ -48,8 +51,34 @@ struct TodosTableComponent: HTML {
                }
            }

-            ScriptAfterLoad(initial: !refresh) { "web.tooltips();" };
+            ScriptAfterLoad(initial: !state.refresh) { "web.tooltips();" };
        }
    }

 }
+
+struct Modal: HTML {
+    var content: some HTML {
+        div(.class("modal fade"), .id("alertModal"), .tabindex(-1)) {
+            div(.class("modal-dialog modal-dialog-centered")) {
+                div(.class("modal-content")) {
+                    div(.class("modal-header border-bottom-0")) {
+                        button(
+                            .class("btn-close"), .type(.button), .data("bs-dismiss", value: "modal")
+                        ) {}
+                    }
+                    div(.class("modal-body")) {
+                        div(.class("alert alert-danger")) {
+                            "Toby123"
+                        }
+                    }
+                }
+            }
+        }
+        button(
+            .class("btn btn-primary"), .type(.button), .data("bs-toggle", value: "modal"),
+            .data("bs-target", value: "#alertModal")
+        ) { "Show" }
+
+    }
+}