feat: Working vendor views, does need some tweeks to user experience.

Sources/App/Views/Vendors/VendorDetail.swift

@@ -9,57 +9,67 @@ struct VendorDetail: HTML {
   var content: some HTML {
     Float(shouldDisplay: true) {
       VendorForm(.formOnly(vendor))
-      BranchTable(branches: vendor.branches ?? [])
-      div(.class("row btn-row")) {
-        button(.class("btn-done")) { "Done" }
-        button(.class("danger")) { "Delete" }
+      h2(.style("margin-left: 20px; font-size: 1.5em;"), .class("label")) { "Branches" }
+      branchForm
+      branches
+    } closeButton: {
+      Button.close(id: "float")
+        .attributes(
+          .hx.get("/vendors"),
+          .hx.pushURL(true),
+          .hx.target("body"),
+          .hx.swap(.outerHTML)
+        )
+    }
+  }
+
+  var branchForm: some HTML {
+    form(
+      .id("branch-form"),
+      .hx.post("/vendors/\(vendor.id)/branches"),
+      .hx.target("#branches"),
+      .hx.swap(.beforeEnd),
+      .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
+    ) {
+      input(
+        .type(.text), .class("col-9"), .name("name"), .placeholder("Add branch..."), .required,
+        .hx.post("/vendors/\(vendor.id)/branches"),
+        .hx.trigger(.event(.keyup).changed().delay("800ms")),
+        .hx.target("#branches"),
+        .hx.swap(.beforeEnd) // ,
+        // .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
+      )
+      button(
+        .type(.submit),
+        .class("btn-secondary"),
+        .style("float: right; padding: 10px 50px;"),
+        .hx.target("#branch-table"),
+        .hx.swap(.beforeEnd)
+      ) { "+" }
+    }
+  }
+
+  var branches: some HTML {
+    ul(.id("branches")) {
+      for branch in vendor.branches ?? [] {
+        BranchRow(branch: branch)
       }
     }
   }
 
-  struct BranchTable: HTML {
-    let branches: [VendorBranch]
+  struct BranchRow: HTML {
+    let branch: VendorBranch
 
-    var content: some HTML {
-      div {
-        form(
-          .id("branch-form"),
-          .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
+    var content: some HTML<HTMLTag.li> {
+      li(.id("branch_\(branch.id)"), .class("branch-row")) {
+        span(.class("label")) { branch.name.capitalized }
+        button(
+          .class("btn"),
+          .hx.delete("/api/v1/vendors/branches/\(branch.id)"),
+          .hx.target("#branch_\(branch.id)"),
+          .hx.swap(.outerHTML.transition(true).swap("0.5s"))
         ) {
-          div(.class("row"), .style("margin: 0;")) {
-            input(.type(.text), .class("col-10"), .placeholder("Branch Name"), .required)
-            button(
-              .type(.submit),
-              .class("btn-secondary"),
-              .style("float: right; padding: 10px 50px;"),
-              .hx.target("#branch-table"),
-              .hx.swap(.beforeEnd)
-            ) { "+" }
-          }
-        }
-        table {
-          thead {
-            tr {
-              th(.class("label col-11")) { "Branch Location" }
-              th(.class("col-1")) {}
-            }
-          }
-          tbody(.id("branch-table")) {
-            for branch in branches {
-              Row(branch: branch)
-            }
-          }
-        }
-      }
-    }
-
-    struct Row: HTML {
-      let branch: VendorBranch
-
-      var content: some HTML<HTMLTag.tr> {
-        tr {
-          td(.class("col-11")) { branch.name }
-          td(.class("col-1")) { Button.danger { "Delete" } }
+          img(.src("/images/trash-can.svg"), .width(30), .height(30), .style("margin-top: 5px;"))
         }
       }
     }