feat working on vendor views.

Sources/App/Views/Vendors/VendorDetail.swift

@@ -3,12 +3,65 @@ import ElementaryHTMX
 import SharedModels
 
 struct VendorDetail: HTML {
-  let vendor: Vendor?
+
+  let vendor: Vendor
 
   var content: some HTML {
-    div(.class("container")) {
-      VendorForm(vendor: vendor)
-      // TODO: Branch table + form.
+    Float(shouldDisplay: true) {
+      VendorForm(.formOnly(vendor))
+      BranchTable(branches: vendor.branches ?? [])
+      div(.class("row btn-row")) {
+        button(.class("btn-done")) { "Done" }
+        button(.class("danger")) { "Delete" }
+      }
+    }
+  }
+
+  struct BranchTable: HTML {
+    let branches: [VendorBranch]
+
+    var content: some HTML {
+      div {
+        form(
+          .id("branch-form"),
+          .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
+        ) {
+          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" } }
+        }
+      }
     }
   }
 

Sources/App/Views/Vendors/VendorForm.swift

@@ -3,31 +3,70 @@ import ElementaryHTMX
 import SharedModels
 
 struct VendorForm: HTML {
-  let vendor: Vendor?
 
-  var content: some HTML<HTMLTag.form> {
+  let context: Context
+  var vendor: Vendor? { context.vendor }
+
+  init(
+    _ context: Context
+  ) {
+    self.context = context
+  }
+
+  init() { self.init(.float(nil)) }
+
+  enum Context {
+    case float(Vendor? = nil, shouldShow: Bool = false)
+    case formOnly(Vendor)
+
+    var vendor: Vendor? {
+      switch self {
+      case let .float(vendor, _): return vendor
+      case let .formOnly(vendor): return vendor
+      }
+    }
+  }
+
+  var content: some HTML {
+    switch context {
+    case let .float(vendor, shouldDisplay):
+      Float(shouldDisplay: shouldDisplay) {
+        makeForm(vendor: vendor)
+      }
+    case let .formOnly(vendor):
+      makeForm(vendor: vendor)
+    }
+  }
+
+  func makeForm(vendor: Vendor?) -> some HTML {
     form(
       .id("vendor-form"),
       vendor != nil ? .hx.put(targetURL) : .hx.post(targetURL),
-      .hx.target("this"),
+      .hx.target("#float"),
       .hx.swap(.outerHTML)
     ) {
       div(.class("row")) {
         input(
+          .type(.text),
+          .class("col-9"),
           .id("vendor-name"),
           .name("name"),
           .value(vendor?.name ?? ""),
           .placeholder("Vendor Name"),
           .required
         )
-        button(.type(.submit), .class("btn-primary")) { buttonLabel }
+        button(
+          .type(.submit),
+          .class("col-1 btn-primary"),
+          .style("float: right")
+        ) { buttonLabel }
       }
     }
   }
 
   private var buttonLabel: String {
-    guard vendor != nil else { return "Update" }
-    return "Create"
+    guard vendor != nil else { return "Create" }
+    return "Update"
   }
 
   var targetURL: String {

Sources/App/Views/Vendors/VendorTable.swift

@@ -8,9 +8,19 @@ struct VendorTable: HTML {
   var content: some HTML {
     table {
       thead {
-        th { "Name" }
-        th {}
-        th { Button.add() }
+        tr {
+          th { "Name" }
+          th { "Branches" }
+          th(.style("width: 100px;")) {
+            Button.add()
+              .attributes(
+                .style("padding: 0px 10px;"),
+                .hx.get("/vendors/create"),
+                .hx.target("#float"),
+                .hx.swap(.outerHTML)
+              )
+          }
+        }
       }
       tbody(.id("vendor-table")) {
         for vendor in vendors {
@@ -27,7 +37,16 @@ struct VendorTable: HTML {
       tr(.id("vendor_\(vendor.id)")) {
         td { vendor.name.capitalized }
         td { "(\(vendor.branches?.count ?? 0)) Branches" }
-        td {}
+        td {
+          Button.detail()
+            .attributes(
+              .style("padding-left: 15px;"),
+              .hx.get("/vendors/\(vendor.id)"),
+              .hx.target("#float"),
+              .hx.pushURL(true),
+              .hx.swap(.outerHTML)
+            )
+        }
       }
     }
   }