feat: Initial view controller dependency and snapshot tests.

Sources/ViewControllerLive/Views/Vendors/VendorDetail.swift

@@ -0,0 +1,25 @@
+import Elementary
+import ElementaryHTMX
+import SharedModels
+
+struct VendorDetail: HTML {
+
+  let vendor: Vendor
+
+  var content: some HTML {
+    Float(shouldDisplay: true) {
+      VendorForm(.formOnly(vendor))
+      h2(.style("margin-left: 20px; font-size: 1.5em;"), .class("label")) { "Branches" }
+      VendorBranchForm(vendorID: vendor.id)
+      VendorBranchList(vendorID: vendor.id, branches: nil)
+    } closeButton: {
+      Button.close(id: "float")
+        .attributes(
+          .hx.get(route: .vendor(.index)),
+          .hx.pushURL(true),
+          .hx.target(.body),
+          .hx.swap(.outerHTML)
+        )
+    }
+  }
+}

Sources/ViewControllerLive/Views/Vendors/VendorForm.swift

@@ -0,0 +1,92 @@
+import Elementary
+import ElementaryHTMX
+import SharedModels
+
+struct VendorForm: HTML {
+
+  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(route: targetURL) : .hx.post(route: targetURL),
+      .hx.target("#content"),
+      .hx.swap(.outerHTML)
+    ) {
+      div(.class("row")) {
+        input(
+          .type(.text),
+          .class("col-9"),
+          .id("vendor-name"),
+          .name("name"),
+          .value(vendor?.name ?? ""),
+          .placeholder("Vendor Name"),
+          vendor != nil ? .hx.put(route: targetURL) : .hx.post(route: 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(route: .vendor(.delete(id: vendor.id))),
+            .hx.confirm("Are you sure you want to delete this vendor?"),
+            .hx.target(.id(.vendor(.row(id: 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("btn-primary"),
+          .style("float: right")
+        ) { buttonLabel }
+      }
+    }
+  }
+
+  private var buttonLabel: String {
+    guard vendor != nil else { return "Create" }
+    return "Update"
+  }
+
+  var targetURL: SharedModels.ViewRoute {
+    guard let vendor else { return .vendor(.index) }
+    return .vendor(.get(id: vendor.id))
+  }
+}

Sources/ViewControllerLive/Views/Vendors/VendorTable.swift

@@ -0,0 +1,53 @@
+import Elementary
+import ElementaryHTMX
+import SharedModels
+
+struct VendorTable: HTML {
+  let vendors: [Vendor]
+
+  var content: some HTML {
+    table {
+      thead {
+        tr {
+          th { "Name" }
+          th { "Branches" }
+          th(.style("width: 100px;")) {
+            Button.add()
+              .attributes(
+                .style("padding: 0px 10px;"),
+                .hx.get(route: .vendor(.form)),
+                .hx.target(.id(.float)),
+                .hx.swap(.outerHTML)
+              )
+          }
+        }
+      }
+      tbody(.id("vendor-table")) {
+        for vendor in vendors {
+          Row(vendor: vendor)
+        }
+      }
+    }
+  }
+
+  struct Row: HTML {
+    let vendor: Vendor
+
+    var content: some HTML<HTMLTag.tr> {
+      tr(.id(.vendor(.row(id: vendor.id)))) {
+        td { vendor.name.capitalized }
+        td { "(\(vendor.branches?.count ?? 0)) Branches" }
+        td {
+          Button.detail()
+            .attributes(
+              .style("padding-left: 15px;"),
+              .hx.get(route: .vendor(.get(id: vendor.id))),
+              .hx.target(.id(.float)),
+              .hx.pushURL(true),
+              .hx.swap(.outerHTML)
+            )
+        }
+      }
+    }
+  }
+}