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;"))
         }
       }
     }

Sources/App/Views/Vendors/VendorForm.swift

@@ -42,7 +42,7 @@ struct VendorForm: HTML {
     form(
       .id("vendor-form"),
       vendor != nil ? .hx.put(targetURL) : .hx.post(targetURL),
-      .hx.target("#float"),
+      .hx.target("#content"),
       .hx.swap(.outerHTML)
     ) {
       div(.class("row")) {
@@ -53,11 +53,27 @@ struct VendorForm: HTML {
           .name("name"),
           .value(vendor?.name ?? ""),
           .placeholder("Vendor Name"),
+          vendor != nil ? .hx.put(targetURL) : .hx.post(targetURL),
+          .hx.trigger(.event(.keyup).changed().delay("500ms")),
           .required
         )
+        if let vendor {
+          button(
+            .class("danger"),
+            .style("font-size: 1.25em; padding: 10px 20px; border-radius: 10px;"),
+            .hx.delete("/api/v1/vendors/\(vendor.id)"),
+            .hx.confirm("Are you sure you want to delete this vendor?"),
+            .hx.target("#vendor_\(vendor.id)"),
+            .hx.swap(.outerHTML.transition(true).swap("1s")),
+            .custom(
+              name: "hx-on::after-request",
+              value: "if(event.detail.successful) toggleContent('float'); window.location.href='/vendors';"
+            )
+          ) { "Delete" }
+        }
         button(
           .type(.submit),
-          .class("col-1 btn-primary"),
+          .class("btn-primary"),
           .style("float: right")
         ) { buttonLabel }
       }