feat: Working on route and id helpers for views.
This commit is contained in:
@@ -24,13 +24,10 @@ struct PurchaseOrderForm: HTML {
|
||||
}
|
||||
}
|
||||
form(
|
||||
.hx.post("/purchase-orders"),
|
||||
.hx.target("#purchase-order-table"),
|
||||
.hx.post(route: .purchaseOrders()),
|
||||
.hx.target(.purchaseOrders(.table)),
|
||||
.hx.swap(.afterBegin),
|
||||
.custom(
|
||||
name: "hx-on::after-request",
|
||||
value: "if(event.detail.successful) toggleContent('float')"
|
||||
)
|
||||
.customToggleFloatAfterRequest
|
||||
) {
|
||||
div(.class("row")) {
|
||||
label(
|
||||
@@ -65,16 +62,7 @@ struct PurchaseOrderForm: HTML {
|
||||
.for("vendorBranchID"), .class("label col-2"), .style("margin-right: 15px; margin-bottom: 5px;")
|
||||
) { "Vendor:" }
|
||||
if purchaseOrder == nil {
|
||||
div(
|
||||
.class("col-4"),
|
||||
.hx.get("/purchase-orders/create/vendor-branch-select"),
|
||||
.hx.target("this"),
|
||||
.hx.swap(.outerHTML.transition(true).swap("0.5s")),
|
||||
.hx.trigger(.event(.revealed)),
|
||||
.hx.indicator(".hx-indicator")
|
||||
) {
|
||||
Img.spinner().attributes(.class("hx-indicator"), .style("float: left;"))
|
||||
}
|
||||
VendorBranchSelect.purchaseOrderForm()
|
||||
} else {
|
||||
input(
|
||||
.type(.text), .class("col-4"),
|
||||
@@ -89,16 +77,7 @@ struct PurchaseOrderForm: HTML {
|
||||
.for("createdForID"), .class("label col-2"), .style("margin-right: 15px; margin-bottom: 5px;")
|
||||
) { "Employee:" }
|
||||
if purchaseOrder == nil {
|
||||
div(
|
||||
.class("col-3"),
|
||||
.hx.get("/purchase-orders/create/employee-select"),
|
||||
.hx.target("this"),
|
||||
.hx.swap(.outerHTML.transition(true).swap("0.5s")),
|
||||
.hx.trigger(.event(.revealed)),
|
||||
.hx.indicator(".hx-indicator")
|
||||
) {
|
||||
Img.spinner().attributes(.class("hx-indicator"), .style("float: left;"))
|
||||
}
|
||||
EmployeeSelect.purchaseOrderForm()
|
||||
} else {
|
||||
input(
|
||||
.type(.text), .class("col-3"),
|
||||
@@ -134,28 +113,4 @@ struct PurchaseOrderForm: HTML {
|
||||
guard purchaseOrder != nil else { return "Create" }
|
||||
return "Update"
|
||||
}
|
||||
|
||||
struct VendorSelect: HTML {
|
||||
let vendorBranches: [VendorBranch.Detail]
|
||||
|
||||
var content: some HTML<HTMLTag.select> {
|
||||
select(.name("vendorBranchID"), .class("col-4")) {
|
||||
for branch in vendorBranches {
|
||||
option(.value(branch.id.uuidString)) { "\(branch.vendor.name) - \(branch.name)" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct EmployeeSelect: HTML {
|
||||
let employees: [Employee]
|
||||
|
||||
var content: some HTML<HTMLTag.select> {
|
||||
select(.name("createdForID"), .class("col-3")) {
|
||||
for employee in employees {
|
||||
option(.value(employee.id.uuidString)) { employee.fullName }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,46 +5,70 @@ import Vapor
|
||||
|
||||
struct PurchaseOrderSearch: HTML {
|
||||
|
||||
let context: PurchaseOrderSearchContext?
|
||||
let context: PurchaseOrderSearchContext
|
||||
|
||||
init(context: PurchaseOrderSearchContext? = nil) {
|
||||
self.context = context
|
||||
self.context = context ?? .employee
|
||||
}
|
||||
|
||||
var content: some HTML {
|
||||
form(
|
||||
.id("search"),
|
||||
.hx.post("/purchase-orders/search"),
|
||||
.hx.target("#purchase-order-table"),
|
||||
.hx.swap(.outerHTML.transition(true).swap("1s"))
|
||||
.id(.search),
|
||||
.hx.post(route: .purchaseOrders(.search())),
|
||||
.hx.target(.purchaseOrders()),
|
||||
.hx.swap(.outerHTML)
|
||||
) {
|
||||
select(
|
||||
.name("context"), .class("col-3"),
|
||||
.hx.get("/purchase-orders/search"),
|
||||
.hx.target("#search"),
|
||||
.hx.swap(.outerHTML)
|
||||
) {
|
||||
option(.value("employee")) { "Employee" }
|
||||
.attributes(.selected, when: context == .employee || context == nil)
|
||||
div(.class("btn-row")) {
|
||||
button(
|
||||
.class("btn-secondary"), .style("position: absolute; top: 80px; right: 20px;"),
|
||||
.hx.get(route: .purchaseOrders()), .hx.pushURL(true), .hx.target("body")
|
||||
)
|
||||
{ "x" }
|
||||
}
|
||||
div(.class("row")) {
|
||||
select(
|
||||
.name("context"), .class("col-3"),
|
||||
.hx.get(route: .purchaseOrders(.search())),
|
||||
.hx.target(.search),
|
||||
.hx.swap(.outerHTML.transition(true).swap("0.5s")),
|
||||
.hx.pushURL(true)
|
||||
) {
|
||||
for context in PurchaseOrderSearchContext.allCases {
|
||||
option(.value(context.rawValue)) { context.rawValue.capitalized }
|
||||
.attributes(.selected, when: self.context == context)
|
||||
}
|
||||
}
|
||||
|
||||
option(.value("customer")) { "Customer" }
|
||||
.attributes(.selected, when: context == .customer)
|
||||
if context == .employee {
|
||||
EmployeeSelect.purchaseOrderSearch()
|
||||
} else if context == .customer {
|
||||
input(
|
||||
.type(.text), .class("col-6"), .style("margin-left: 60px; margin-top: 18px;"),
|
||||
.name("search"), .placeholder("Search"), .required
|
||||
)
|
||||
} else if context == .vendor {
|
||||
VendorBranchSelect.purchaseOrderSearch()
|
||||
}
|
||||
}
|
||||
|
||||
if context == .employee || context == nil {
|
||||
EmployeeSelect.purchaseOrderSearch()
|
||||
} else if context == .customer {
|
||||
input(.type(.text), .name("search"), .placeholder("Search"), .required)
|
||||
div(.class("btn-row")) {
|
||||
button(.type(.submit), .class("btn-primary"))
|
||||
{ "Search" }
|
||||
}
|
||||
|
||||
button(.type(.submit), .class("btn-primary")) { "Search" }
|
||||
// Img.spinner().attributes(.class("hx-indicator"))
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
enum PurchaseOrderSearchContext: String, Codable, Content {
|
||||
enum PurchaseOrderSearchContext: String, Codable, Content, CaseIterable {
|
||||
case employee
|
||||
case customer
|
||||
case vendor
|
||||
}
|
||||
|
||||
struct PurchaseOrderSearchContent: Content {
|
||||
let context: PurchaseOrderSearchContext
|
||||
let createdForID: Employee.ID?
|
||||
let search: String?
|
||||
let vendorBranchID: VendorBranch.ID?
|
||||
}
|
||||
|
||||
@@ -7,30 +7,66 @@ import Vapor
|
||||
struct PurchaseOrderTable: HTML {
|
||||
|
||||
let page: Page<PurchaseOrder>
|
||||
let context: Context
|
||||
let searchContext: PurchaseOrderSearchContext?
|
||||
|
||||
init(
|
||||
page: Page<PurchaseOrder>,
|
||||
context: Context = .default,
|
||||
searchContext: PurchaseOrderSearchContext? = nil
|
||||
) {
|
||||
self.page = page
|
||||
self.context = context
|
||||
self.searchContext = searchContext
|
||||
}
|
||||
|
||||
var content: some HTML {
|
||||
table {
|
||||
thead {
|
||||
tr {
|
||||
th { "PO" }
|
||||
th { "Work Order" }
|
||||
th { "Customer" }
|
||||
th { "Vendor" }
|
||||
th { "Materials" }
|
||||
th { "Created For" }
|
||||
th {
|
||||
Button.add()
|
||||
.attributes(
|
||||
.hx.get("/purchase-orders/create"),
|
||||
.hx.target("#float"),
|
||||
.hx.swap(.outerHTML),
|
||||
.hx.pushURL(true)
|
||||
)
|
||||
}
|
||||
table(.id(.purchaseOrders())) {
|
||||
if page.items.count > 0 {
|
||||
thead {
|
||||
buttonRow
|
||||
tableHeader
|
||||
}
|
||||
tbody(.id(.purchaseOrders(.table))) {
|
||||
Rows(page: page)
|
||||
}
|
||||
}
|
||||
tbody(.id("purchase-order-table")) {
|
||||
Rows(page: page)
|
||||
}
|
||||
}
|
||||
|
||||
private var tableHeader: some HTML<HTMLTag.tr> {
|
||||
tr {
|
||||
th { "PO" }
|
||||
th { "Work Order" }
|
||||
th { "Customer" }
|
||||
th { "Vendor" }
|
||||
th { "Materials" }
|
||||
th { "Created For" }
|
||||
th {
|
||||
if context != .search {
|
||||
Button.add()
|
||||
.attributes(
|
||||
.hx.get(route: .purchaseOrders(.create)), .hx.target(.float),
|
||||
.hx.swap(.outerHTML), .hx.pushURL(true)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private var buttonRow: some HTML<HTMLTag.tr> {
|
||||
tr {
|
||||
div(.class("btn-row")) {
|
||||
if context != .search {
|
||||
button(
|
||||
.class("btn-primary"), .style("position: absolute; top: 80px; right: 20px;"),
|
||||
.hx.get(route: .purchaseOrders(.search(.context(.employee)))),
|
||||
.hx.target(.body),
|
||||
.hx.swap(.outerHTML.transition(true).swap("0.5s")),
|
||||
.hx.pushURL(true)
|
||||
)
|
||||
{ Img.search() }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -45,10 +81,11 @@ struct PurchaseOrderTable: HTML {
|
||||
}
|
||||
if page.metadata.pageCount > page.metadata.page {
|
||||
tr(
|
||||
.hx.get("/purchase-orders/next?page=\(page.metadata.page + 1)&limit=\(page.metadata.per)"),
|
||||
// .hx.get("/purchase-orders/next?page=\(page.metadata.page + 1)&limit=\(page.metadata.per)"),
|
||||
.hx.get(route: .purchaseOrders(.nextPage(page.metadata))),
|
||||
.hx.trigger(.event(.revealed)),
|
||||
.hx.swap(.outerHTML.transition(true).swap("1s")),
|
||||
.hx.target("this"),
|
||||
.hx.target(.this),
|
||||
.hx.indicator("next .htmx-indicator")
|
||||
) {
|
||||
img(.src("/images/spinner.svg"), .class("htmx-indicator"), .width(60), .height(60))
|
||||
@@ -63,7 +100,7 @@ struct PurchaseOrderTable: HTML {
|
||||
|
||||
var content: some HTML<HTMLTag.tr> {
|
||||
tr(
|
||||
.id("purchase_order_\(purchaseOrder.id)")
|
||||
.id(.purchaseOrders(.row(id: purchaseOrder.id)))
|
||||
) {
|
||||
td { "\(purchaseOrder.id)" }
|
||||
td { purchaseOrder.workOrder != nil ? String(purchaseOrder.workOrder!) : "" }
|
||||
@@ -83,6 +120,11 @@ struct PurchaseOrderTable: HTML {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
enum Context: String {
|
||||
case `default`
|
||||
case search
|
||||
}
|
||||
}
|
||||
|
||||
private extension VendorBranch.Detail {
|
||||
|
||||
Reference in New Issue
Block a user