feat: Begins a generic htmx form context and template, integrates user form, begins views for vendor and purchase orders.
This commit is contained in:
@@ -14,7 +14,6 @@
|
||||
hx-swap-oob="outerHTML"
|
||||
#endif
|
||||
>
|
||||
<label for="firstName">First Name</label>
|
||||
<input type="text"
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
@@ -24,7 +23,6 @@
|
||||
#if(employee.firstName): value=#(employee.firstName) #endif
|
||||
>
|
||||
<br>
|
||||
<label for="lastName">Last Name</label>
|
||||
<input type="text"
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
#extend("index"):
|
||||
#export("content"):
|
||||
<div id="content">
|
||||
<header>
|
||||
<div class="container">
|
||||
#extend("logo")
|
||||
#extend("navbar")
|
||||
</div>
|
||||
</header>
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<nav>
|
||||
<ul class="nav-links">
|
||||
<li>
|
||||
<a hx-get="/?route=users"
|
||||
hx-target="#home-content"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true"
|
||||
#if(route == "users"): hx-trigger="revealed" #endif
|
||||
>
|
||||
Users
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a hx-get="/?route=employees"
|
||||
hx-target="#home-content"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true"
|
||||
#if(route == "employees"): hx-trigger="revealed" #endif
|
||||
>
|
||||
Employees
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="home-content" class="container">
|
||||
<p>We're in!</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
#endexport
|
||||
#export("content"):
|
||||
<div id="content">
|
||||
<header>
|
||||
<div class="container">
|
||||
#extend("logo")
|
||||
#extend("navbar")
|
||||
</div>
|
||||
</header>
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<nav>
|
||||
<ul class="nav-links">
|
||||
<li>
|
||||
<a hx-get="/users"
|
||||
hx-target="#home-content"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true"
|
||||
#if(route == "users"): hx-trigger="revealed" #endif
|
||||
>
|
||||
Users
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a hx-get="/employees"
|
||||
hx-target="#home-content"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true"
|
||||
#if(route == "employees"): hx-trigger="revealed" #endif
|
||||
>
|
||||
Employees
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="home-content" class="container">
|
||||
<p>We're in!</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
#endexport
|
||||
#endextend
|
||||
|
||||
23
Resources/Views/htmx-form.leaf
Normal file
23
Resources/Views/htmx-form.leaf
Normal file
@@ -0,0 +1,23 @@
|
||||
<form id="#(formId)"
|
||||
#if(formClass):
|
||||
class="#(formClass)"
|
||||
#endif
|
||||
#if(htmxPostTargetUrl):
|
||||
hx-post="#(htmxPostTargetUrl)"
|
||||
#else:
|
||||
hx-put="#(htmxPutTargetUrl)"
|
||||
#endif
|
||||
hx-target="#(htmxTarget)"
|
||||
hx-push-url="#(htmxPushUrl)"
|
||||
#if(htmxSwap):
|
||||
hx-swap="#(htmxSwap)"
|
||||
#endif
|
||||
#if(htmxSwapOob):
|
||||
hx-swap-oob="#(htmxSwapOob)"
|
||||
#endif
|
||||
#if(htmxResetAfterRequest):
|
||||
hx-on::after-request=" if(event.detail.successful) this.reset()"
|
||||
#endif
|
||||
>
|
||||
#import("formBody")
|
||||
</form>
|
||||
@@ -4,10 +4,24 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<title>#(title)</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- <div class="dropdown"> -->
|
||||
<!-- <button id="test-dropdown" -->
|
||||
<!-- onClick="showDropdownContent('myDropdown')" -->
|
||||
<!-- class="dropbtn" -->
|
||||
<!-- > -->
|
||||
<!-- Dropdown -->
|
||||
<!-- </button> -->
|
||||
<!-- <div id="myDropdown" class="dropdown-content"> -->
|
||||
<!-- <a href="#" id="home" onClick="updateDropDownSelection('test-dropdown', 'home')">Home</a> -->
|
||||
<!-- <a href="#" id="about" onClick="updateDropDownSelection('test-dropdown', 'about')">About</a> -->
|
||||
<!-- <a href="#" id="contact" onClick="updateDropDownSelection('test-dropdown', 'contact')">Contact</a> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
#import("content")
|
||||
</body>
|
||||
</html>
|
||||
|
||||
41
Resources/Views/po-form.leaf
Normal file
41
Resources/Views/po-form.leaf
Normal file
@@ -0,0 +1,41 @@
|
||||
<form hx-post="/fix-me"
|
||||
>
|
||||
<input type="number"
|
||||
id="workOrder"
|
||||
name="workOrder"
|
||||
placeholder="12345"
|
||||
>
|
||||
<br>
|
||||
<!-- TODO: Add vendor drop-down -->
|
||||
<input type="hidden"
|
||||
id="vendorBranchId"
|
||||
name="vendorBranchId"
|
||||
>
|
||||
<!-- TODO: Add employee drop-down -->
|
||||
<input type="hidden"
|
||||
id="employeeId"
|
||||
name="employeeId"
|
||||
>
|
||||
<br>
|
||||
<input type="text"
|
||||
id="materials"
|
||||
name="materials"
|
||||
placeholder="Materials"
|
||||
required
|
||||
>
|
||||
<br>
|
||||
<input type="text"
|
||||
id="customer"
|
||||
name="customer"
|
||||
placeholder="Customer Name"
|
||||
required
|
||||
>
|
||||
|
||||
<br>
|
||||
<label for="truckStock">
|
||||
<input type="checkbox"
|
||||
id="truckStock"
|
||||
name="truckStock"
|
||||
>
|
||||
|
||||
</form>
|
||||
26
Resources/Views/po-table.leaf
Normal file
26
Resources/Views/po-table.leaf
Normal file
@@ -0,0 +1,26 @@
|
||||
<table id="po-table">
|
||||
<tr>
|
||||
<th>PO</th>
|
||||
<th>Work Order</th>
|
||||
<th>Vendor</th>
|
||||
<th>Materials</th>
|
||||
<th>Employee</th>
|
||||
<th>Truck Stock</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tbody id="po-table-body">
|
||||
#for(po in purchaseOrders):
|
||||
<tr id="po_#(po.id)">
|
||||
<td>#(po.id)</td>
|
||||
<td>#(po.workOrder)</td>
|
||||
<td>#(po.vendorBranch.vendor.name) - #(po.vendorBranch.name)</td>
|
||||
<td>#(po.materials)</td>
|
||||
<td>#(po.employee.firstName) #(po.employee.lastName)</td>
|
||||
<td>#capitalized(po.truckStock)</td>
|
||||
<td>
|
||||
<!-- TODO: add buttons here -->
|
||||
</td>
|
||||
</tr>
|
||||
#endfor
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -1,10 +1,5 @@
|
||||
<form class="user-form"
|
||||
id="user-form"
|
||||
hx-post="#(htmxTargetUrl)"
|
||||
hx-target="#(htmxTarget)"
|
||||
hx-push-url="#(htmxPushUrl)"
|
||||
>
|
||||
<label for="username">Username</label>
|
||||
#extend("htmx-form", htmxForm):
|
||||
#export("formBody"):
|
||||
<input type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
@@ -13,7 +8,15 @@
|
||||
required
|
||||
>
|
||||
<br>
|
||||
<label for="password">Password</label>
|
||||
#if(context.showEmailInput):
|
||||
<input type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
required
|
||||
>
|
||||
<br>
|
||||
#endif
|
||||
<input type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
@@ -22,8 +25,7 @@
|
||||
required
|
||||
>
|
||||
<br>
|
||||
#if(showConfirmPassword):
|
||||
<label for="confirmPassword">Password</label>
|
||||
#if(context.showConfirmPassword):
|
||||
<input type="password"
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
@@ -33,5 +35,6 @@
|
||||
>
|
||||
<br>
|
||||
#endif
|
||||
<input type="submit" value="#(buttonLabel)">
|
||||
</form>
|
||||
<input type="submit" value="#(context.buttonLabel)">
|
||||
#endexport
|
||||
#endextend
|
||||
|
||||
@@ -2,11 +2,22 @@
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
#for(user in users):
|
||||
<tr>
|
||||
<tr id="user_#(user.id)">
|
||||
<td>#(user.username)</td>
|
||||
<td>#(user.email)</td>
|
||||
<td style="width: 60px;">
|
||||
<a class="btn btn-delete"
|
||||
hx-delete="/users/#(user.id)"
|
||||
hx-target="#user-table"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Are you sure you want to delete this user?"
|
||||
>
|
||||
<img src="images/trash-can.svg" alt="Delete">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
#endfor
|
||||
</table>
|
||||
|
||||
@@ -5,5 +5,6 @@
|
||||
<p>Users are people that can login and generate puchase orders for employees.</p>
|
||||
<br>
|
||||
</div>
|
||||
#extend("user-form", form)
|
||||
#extend("user-table")
|
||||
</div>
|
||||
|
||||
20
Resources/Views/vendor-form.leaf
Normal file
20
Resources/Views/vendor-form.leaf
Normal file
@@ -0,0 +1,20 @@
|
||||
<form hx-post="/vendors">
|
||||
<input type="hidden"
|
||||
id="vendorId"
|
||||
name="id"
|
||||
#if(vendor.id):
|
||||
value="#(vendor.id)"
|
||||
>
|
||||
|
||||
<input type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Vendor Name"
|
||||
autofocus
|
||||
required
|
||||
#if(vendor.name):
|
||||
value="#(vendor.name)"
|
||||
#endif
|
||||
>
|
||||
<input type="submit" value="#(buttonLabel)">
|
||||
</form>
|
||||
Reference in New Issue
Block a user