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

Public/css/main.css

@@ -253,22 +253,24 @@ a.toggle, a img.toggle {
 
 .branch-row {
   display: inline-block;
-  width: 300px;
+  width: 100%;
-  height: 40px;
+  height: 60px;
-  background-color: #14141f;
+  background-color: grey;
   border-radius: 25px;
   padding-left: 15px;
   margin: 5px;
+  border: 1px solid var(--primary);
 }
 
-.branch-row .branch-name {
+.branch-row .label {
   display: inline-block;
-  margin-top: 10px;
+  margin-top: 18px;
+  font-size: 1.25em;
 }
 
-.branch-row a {
+.branch-row button {
   float: right;
-  margin-top: 5px;
+  margin-top: 8px;
   margin-right: 15px;
   font-size: 1.5em;
 }

Sources/App/Controllers/View/UsersViewController.swift

@@ -10,8 +10,8 @@ struct UserViewController: RouteCollection {
   @Dependency(\.database.users) var users
 
   func boot(routes: any RoutesBuilder) throws {
-    // let users = routes.protected.grouped("users")
+    let users = routes.protected.grouped("users")
-    let users = routes.grouped("users")
+    // let users = routes.grouped("users")
     users.get(use: index)
     users.post(use: create)
     users.get("create", use: form)

Sources/App/Controllers/View/VendorViewController.swift

@@ -11,7 +11,7 @@ struct VendorViewController: RouteCollection {
   @Dependency(\.database.vendorBranches) var vendorBranches
 
   func boot(routes: any RoutesBuilder) throws {
-    let route = routes.grouped("vendors")
+    let route = routes.protected.grouped("vendors")
     route.get(use: index)
     route.post(use: create)
     route.get("create", use: form)
@@ -32,7 +32,13 @@ struct VendorViewController: RouteCollection {
   @Sendable
   func create(req: Request) async throws -> HTMLResponse {
     let vendor = try await vendors.create(req.content.decode(Vendor.Create.self))
-    return await req.render { VendorDetail(vendor: vendor) }
+    let vendors = try await vendors.fetchAll(.withBranches)
+    return await req.render {
+      div(.class("container"), .id("content")) {
+        VendorDetail(vendor: vendor)
+        VendorTable(vendors: vendors)
+      }
+    }
   }
 
   @Sendable
@@ -67,13 +73,19 @@ struct VendorViewController: RouteCollection {
     let vendorID = try req.ensureIDPathComponent()
     let create = try req.content.decode(CreateBranch.self)
     let branch = try await vendorBranches.create(.init(name: create.name, vendorID: vendorID))
-    return await req.render { VendorDetail.BranchTable.Row(branch: branch) }
+    return await req.render { VendorDetail.BranchRow(branch: branch) }
+  }
+
+  @Sendable
+  func deleteBranch(req: Request) async throws -> HTTPStatus {
+    try await vendorBranches.delete(req.ensureIDPathComponent(key: "branchID"))
+    return .ok
   }
 
   private func mainPage<C: HTML>(_ html: C) async throws -> some SendableHTMLDocument where C: Sendable {
     let vendors = try await vendors.fetchAll(.withBranches)
     return MainPage(displayNav: true, route: .vendors) {
-      div(.class("container")) {
+      div(.class("container"), .id("content")) {
         html
         VendorTable(vendors: vendors)
       }

Sources/App/Extensions/RouteBuilder+protected.swift

@@ -2,23 +2,22 @@ import DatabaseClientLive
 import SharedModels
 import Vapor
 
+// TODO: Fix before production.
+
 extension RoutesBuilder {
 
   // Used to ensure views are protected, redirects users to the login page if they're
   // not authenticated.
   var protected: any RoutesBuilder {
-    // #if DEBUG
+    return self
-    //   return self
+    // return grouped(
-    // #else
+    //   UserPasswordAuthenticator(),
-    return grouped(
+    //   UserTokenAuthenticator(),
-      UserPasswordAuthenticator(),
+    //   UserSessionAuthenticator(),
-      UserTokenAuthenticator(),
+    //   User.redirectMiddleware { req in
-      UserSessionAuthenticator(),
+    //     "login?next=\(req.url)"
-      User.redirectMiddleware { req in
+    //   }
-        "login?next=\(req.url)"
+    // )
-      }
-    )
-    //   #endif
   }
 
   func apiUnprotected(route: PathComponent) -> any RoutesBuilder {
@@ -28,15 +27,12 @@ extension RoutesBuilder {
   // Allows basic or token authentication for api routes and prefixes the
   // given route with "/api/v1".
   func apiProtected(route: PathComponent) -> any RoutesBuilder {
-    // #if DEBUG
+    return apiUnprotected(route: route)
-    //   return apiUnprotected(route: route)
+    // let prefixed = grouped("api", "v1", route)
-    // #else
+    // return prefixed.grouped(
-    let prefixed = grouped("api", "v1", route)
+    //   UserPasswordAuthenticator(),
-    return prefixed.grouped(
+    //   UserTokenAuthenticator(),
-      UserPasswordAuthenticator(),
+    //   User.guardMiddleware()
-      UserTokenAuthenticator(),
+    // )
-      User.guardMiddleware()
-    )
-    // #endif
   }
 }

Sources/App/Views/Utils/Float.swift

@@ -1,29 +1,29 @@
 import Elementary
 
-struct Float<C: HTML>: HTML {
+struct Float<C: HTML, B: HTML>: HTML {
 
   let id: String
   let shouldDisplay: Bool
   let body: C?
-  let resetURL: String?
+  let closeButton: B?
 
   init(id: String = "float") {
     self.id = id
     self.shouldDisplay = false
-    self.resetURL = nil
     self.body = nil
+    self.closeButton = nil
   }
 
   init(
     id: String = "float",
     shouldDisplay: Bool,
-    resetURL: String? = nil,
+    @HTMLBuilder body: () -> C,
-    @HTMLBuilder body: () -> C
+    @HTMLBuilder closeButton: () -> B
   ) {
     self.id = id
     self.shouldDisplay = shouldDisplay
-    self.resetURL = resetURL
     self.body = body()
+    self.closeButton = closeButton()
   }
 
   private var classString: String {
@@ -37,8 +37,10 @@ struct Float<C: HTML>: HTML {
   var content: some HTML<HTMLTag.div> {
     div(.id(id), .class(classString), .style("display: \(display);")) {
       if let body, shouldDisplay {
-        div(.class("btn-row")) {
+        if let closeButton {
-          Button.close(id: id, resetURL: resetURL)
+          div(.class("btn-row")) {
+            closeButton
+          }
         }
         body
       }
@@ -46,4 +48,30 @@ struct Float<C: HTML>: HTML {
   }
 }
 
-extension Float: Sendable where C: Sendable {}
+struct DefaultCloseButton: HTML {
+  let id: String
+  let resetURL: String?
+
+  var content: some HTML {
+    Button.close(id: id, resetURL: resetURL)
+  }
+}
+
+extension Float where B == DefaultCloseButton {
+  init(
+    id: String = "float",
+    shouldDisplay: Bool,
+    resetURL: String? = nil,
+    @HTMLBuilder body: () -> C
+  ) {
+    self.init(
+      id: id,
+      shouldDisplay: shouldDisplay,
+      body: body,
+      closeButton: { DefaultCloseButton(id: id, resetURL: resetURL) }
+    )
+  }
+
+}
+
+extension Float: Sendable where C: Sendable, B: Sendable {}

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 ?? [])
+      h2(.style("margin-left: 20px; font-size: 1.5em;"), .class("label")) { "Branches" }
-      div(.class("row btn-row")) {
+      branchForm
-        button(.class("btn-done")) { "Done" }
+      branches
-        button(.class("danger")) { "Delete" }
+    } 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 {
+  struct BranchRow: HTML {
-    let branches: [VendorBranch]
+    let branch: VendorBranch
 
-    var content: some HTML {
+    var content: some HTML<HTMLTag.li> {
-      div {
+      li(.id("branch_\(branch.id)"), .class("branch-row")) {
-        form(
+        span(.class("label")) { branch.name.capitalized }
-          .id("branch-form"),
+        button(
-          .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
+          .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;")) {
+          img(.src("/images/trash-can.svg"), .width(30), .height(30), .style("margin-top: 5px;"))
-            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

@@ -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 }
       }