feat: Begins a generic htmx form context and template, integrates user form, begins views for vendor and purchase orders.

This commit is contained in:
2025-01-08 14:02:50 -05:00
parent 3557227430
commit 2b6e92a5c6
18 changed files with 493 additions and 93 deletions

View File

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

View File

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

View 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>

View File

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

View 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>

View 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>

View File

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

View File

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

View File

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

View 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>