79 lines
2.1 KiB
Swift
79 lines
2.1 KiB
Swift
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" }
|
|
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 BranchRow: HTML {
|
|
let branch: VendorBranch
|
|
|
|
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"))
|
|
) {
|
|
img(.src("/images/trash-can.svg"), .width(30), .height(30), .style("margin-top: 5px;"))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|