feat: Updating id key for usage in views, for typesafe keys

Sources/App/Views/Vendors/VendorDetail.swift

@@ -32,7 +32,8 @@ struct VendorDetail: HTML {
       .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();")
+      .hx.on(.afterRequest, .ifSuccessful(.resetForm))
+      // .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,
@@ -65,12 +66,12 @@ struct VendorDetail: HTML {
     let branch: VendorBranch
 
     var content: some HTML<HTMLTag.li> {
-      li(.id("branch_\(branch.id)"), .class("branch-row")) {
+      li(.id(.branch(.row(id: branch.id))), .class("branch-row")) {
         span(.class("label")) { branch.name.capitalized }
         button(
           .class("btn"),
           .hx.delete(route: .vendorBranch(.delete(id: branch.id))),
-          .hx.target("#branch_\(branch.id)"),
+          .hx.target(.id(.branch(.row(id: branch.id)))),
           .hx.swap(.outerHTML.transition(true).swap("0.5s"))
         ) {
           img(.src("/images/trash-can.svg"), .width(30), .height(30), .style("margin-top: 5px;"))

Sources/App/Views/Vendors/VendorTable.swift

@@ -16,7 +16,7 @@ struct VendorTable: HTML {
               .attributes(
                 .style("padding: 0px 10px;"),
                 .hx.get(route: .vendor(.form)),
-                .hx.target(.float),
+                .hx.target(.id(.float)),
                 .hx.swap(.outerHTML)
               )
           }
@@ -34,7 +34,7 @@ struct VendorTable: HTML {
     let vendor: Vendor
 
     var content: some HTML<HTMLTag.tr> {
-      tr(.id("vendor_\(vendor.id)")) {
+      tr(.id(.vendor(.row(id: vendor.id)))) {
         td { vendor.name.capitalized }
         td { "(\(vendor.branches?.count ?? 0)) Branches" }
         td {
@@ -42,7 +42,7 @@ struct VendorTable: HTML {
             .attributes(
               .style("padding-left: 15px;"),
               .hx.get(route: .vendor(.get(id: vendor.id))),
-              .hx.target("#float"),
+              .hx.target(.id(.float)),
               .hx.pushURL(true),
               .hx.swap(.outerHTML)
             )