hhe/vapor-po
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Working purchase order table and form.

Browse Source
This commit is contained in:
Michael Housh
2025-01-09 16:23:42 -05:00
parent da5fec4a94
commit bf71b725f6
23 changed files with 544 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Resources/Views/btn/close-form.leaf Normal file
View File

@@ -0,0 +1,6 @@
<a href="javascript:void(0)"
class="closebtn"
onClick="toggleContent('form')"
>
&times;
</a>

6
Resources/Views/btn/toggle-form.leaf Normal file
View File

@@ -0,0 +1,6 @@
<a href="javascript:void(0)"
onclick="toggleContent('form')"
class="btn-add"
>
&plus;
</a>

35
Resources/Views/employees/form.leaf
View File

@@ -1,26 +1,12 @@
<form class="employee-form"
id="employee-form"
#if(employee.id):
hx-put="/employees/#(employee.id)"
#else:
hx-post="/employees"
#endif
#if(employee.id):
hx-target="#home-content"
#else:
hx-target="#employee-table"
#endif
#if(oob):
hx-swap-oob="outerHTML"
#endif
>
#extend("htmx-form", htmxForm):
#export("formBody"):
<input type="text"
id="firstName"
name="firstName"
placeholder="First Name"
autofocus
required
#if(employee.firstName): value=#(employee.firstName) #endif
#if(context.employee.firstName): value=#(context.employee.firstName) #endif
>
<br>
<input type="text"
@@ -28,16 +14,9 @@
name="lastName"
placeholder="Last Name"
required
#if(employee.lastName): value=#(employee.lastName) #endif
#if(context.employee.lastName): value=#(context.employee.lastName) #endif
>
<br>
<input type="submit" value=#if(employee.id): Update #else: Create #endif>
#if(employee.id):
<button hx-get="/employees/form"
hx-target="#employee-form"
hx-swap="outerHTML"
>
Reset
</button>
#endif
</form>
<input type="submit" value=#if(context.employee.id): Update #else: Create #endif>
#endexport
#endextend

6
Resources/Views/employees/index.leaf
View File

@@ -4,10 +4,12 @@
<div class="container">
<h1>Employees</h1>
<br>
<p>Employees are who purchase orders can be generated for.</p>
<h3>Employees are who purchase orders can be generated for.</h3>
<br>
</div>
#extend("employees/form", form)
#extend("form-container"): #export("formContent"):
#extend("employees/form", form)
#endexport #endextend
#extend("employees/table")
</div>
#endexport

93
Resources/Views/employees/table.leaf
View File

@@ -1,47 +1,62 @@
<table id="employee-table">
<tr>
<th>Name</th>
<th>Active</th>
<th></th>
</tr>
#for(employee in employees):
<tr id="employee_#(employee.id)">
<td>#capitalized(employee.firstName) #capitalized(employee.lastName)</td>
<td style="width: 10%; text-align: center;">
#if(employee.active):
<a class="toggle"
hx-post="/employees/#(employee.id)/toggle-active"
hx-target="#employee-table"
hx-swap="outerHTML"
>
<img src="images/toggle-on.svg" alt="Active">
</a>
#else:
<a class="toggle"
hx-post="/employees/#(employee.id)/toggle-active"
hx-target="#employee-table"
hx-swap="outerHTML"
>
<img src="images/toggle-off.svg" alt="Active">
</a>
#endif
</td>
<td style="width: 100px;">
<a class="btn btn-delete"
hx-delete="/employees/#(employee.id)"
<thead>
<tr>
<th>Name</th>
<th>Active</th>
<th>
<a href="javascript:void(0)"
hx-get="employees/form"
hx-target="#employee-form"
hx-on::after-request="toggleContent('form')"
class="btn-add"
>
&plus;
</a>
</th>
</tr>
</thead>
<tbody>
#for(employee in employees):
<tr id="employee_#(employee.id)">
<td>#capitalized(employee.firstName) #capitalized(employee.lastName)</td>
<td style="width: 10%; text-align: center;">
#if(employee.active):
<a class="toggle"
hx-post="/employees/#(employee.id)/toggle-active"
hx-target="#employee-table"
hx-swap="outerHTML"
hx-confirm="Are you sure you want to delete this employee?"
>
<img src="images/trash-can.svg" alt="Delete">
<img src="images/toggle-on.svg" alt="Active">
</a>
<a class="btn btn-edit" hx-get="/employees/#(employee.id)"
hx-target="#employee-form"
>
<img src="images/pencil.svg", alt="Edit">
#else:
<a class="toggle"
hx-post="/employees/#(employee.id)/toggle-active"
hx-target="#employee-table"
hx-swap="outerHTML"
>
<img src="images/toggle-off.svg" alt="Active">
</a>
</td>
#endif
</td>
<td style="width: 100px;">
<a class="btn btn-delete"
href="javascript:void(0)"
hx-delete="/employees/#(employee.id)"
hx-target="#employee-table"
hx-swap="outerHTML"
hx-confirm="Are you sure you want to delete this employee?"
>
#extend("img/trash-can")
</a>
<a class="btn btn-edit" hx-get="/employees/#(employee.id)"
hx-target="#employee-form"
hx-on::after-request=" if(event.detail.successful) toggleContent('form')"
>
#extend("img/pencil")
</a>
</td>
</tr>
#endfor
</tr>
#endfor
</tbody>
</table>

4
Resources/Views/form-container.leaf Normal file
View File

@@ -0,0 +1,4 @@
<div id="form" style="display: none;" class="form-content">
#extend("btn/close-form")
#import("formContent")
</div>

30
Resources/Views/home.leaf
View File

@@ -8,36 +8,6 @@
</div>
</header>
<section class="content">
<div class="container">
<nav>
<ul class="nav-links">
<li>
<a hx-get="/users"
hx-target="body"
hx-push-url="true"
>
Users
</a>
</li>
<li>
<a hx-get="/employees"
hx-target="body"
hx-push-url="true"
>
Employees
</a>
</li>
<li>
<a hx-get="/vendors"
hx-target="body"
hx-push-url="true"
>
Vendors
</a>
</li>
</ul>
</nav>
</div>
#import("homeContent")
</section>
</div>

3
Resources/Views/htmx-form.leaf
View File

@@ -16,8 +16,9 @@
hx-swap-oob="#(htmxSwapOob)"
#endif
#if(htmxResetAfterRequest):
hx-on::after-request=" if(event.detail.successful) this.reset()"
hx-on::after-request=" if(event.detail.successful) this.reset(); toggleContent('form');"
#endif
hx-disabled-elt="find input[type='text'], find button, find input[type='submit']"
>
#import("formBody")
</form>

1
Resources/Views/img/pencil.leaf Normal file
View File

@@ -0,0 +1 @@
<img src="images/pencil.svg", alt="Edit">

13
Resources/Views/index.leaf
View File

@@ -9,19 +9,6 @@
<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>

42
Resources/Views/navbar.leaf
View File

@@ -1,5 +1,37 @@
<nav>
<ul class="nav-links">
<li><a hx-post="logout" hx-target="#content" hx-trigger="click" hx-swap="outerHTML">Logout</a></li>
</ul>
</nav>
<div class="sidepanel" id="sidepanel">
<a href="javscript:void(0)" class="closebtn" onclick="closeSidepanel()">&times;</a>
<a hx-get="/purchase-orders"
hx-target="body"
hx-push-url="true"
>
Purchase Orders
</a>
<a hx-get="/users"
hx-target="body"
hx-push-url="true"
>
Users
</a>
<a hx-get="/employees"
hx-target="body"
hx-push-url="true"
>
Employees
</a>
<a hx-get="/vendors"
hx-target="body"
hx-push-url="true"
>
Vendors
</a>
<div style="border-bottom: 1px solid grey; margin-bottom: 5px;"></div>
<a style="padding-top: 5px;"
hx-post="logout"
hx-target="#content"
hx-trigger="click"
hx-swap="outerHTML"
>
Logout
</a>
</div>
<button class="openbtn" onclick="openSidepanel()">&#9776;</button>

36
Resources/Views/purchaseOrders/form.leaf
View File

@@ -1,21 +1,22 @@
<form hx-post="/fix-me"
>
<input type="number"
#extend("htmx-form", htmxForm):
#export("formBody"):
<input type="text"
id="workOrder"
name="workOrder"
placeholder="12345"
placeholder="Work Order: 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"
>
<select id="vendorBranchID" name="vendorBranchID">
#for(branch in context.branches):
<option value="#(branch.id)">#capitalized(branch.name) - #capitalized(branch.vendor.name)</option>
#endfor
</select>
<br>
<select id="createdForID" name="createdForID">
#for(employee in context.employees):
<option value="#(employee.id)">#capitalized(employee.firstName) #capitalized(employee.lastName)</option>
#endfor
</select>
<br>
<input type="text"
id="materials"
@@ -32,10 +33,11 @@
>
<br>
<label for="truckStock">
<label for="truckStock">Truck Stock</label>
<input type="checkbox"
id="truckStock"
name="truckStock"
>
</form>
<input type="submit" value="Create">
#endexport
#endextend

14
Resources/Views/purchaseOrders/index.leaf Normal file
View File

@@ -0,0 +1,14 @@
#extend("home"):
#export("homeContent"):
<div id="home-content" class="container" #if(oob): hx-swap-oob="outerHTML" #endif>
<div class="container">
<h1>Purchase Orders</h1>
<br>
</div>
#extend("form-container"): #export("formContent"):
#extend("purchaseOrders/form", form)
#endexport #endextend
#extend("purchaseOrders/table")
</div>
#endexport
#endextend

8
Resources/Views/purchaseOrders/table.leaf
View File

@@ -4,18 +4,18 @@
<th>Work Order</th>
<th>Vendor</th>
<th>Materials</th>
<th>Employee</th>
<th>Created For</th>
<th>Truck Stock</th>
<th></th>
<th>#extend("btn/toggle-form")</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>#capitalized(po.vendorBranch.vendor.name) - #capitalized(po.vendorBranch.name)</td>
<td>#(po.materials)</td>
<td>#(po.employee.firstName) #(po.employee.lastName)</td>
<td>#capitalized(po.createdFor.firstName) #capitalized(po.createdFor.lastName)</td>
<td>#capitalized(po.truckStock)</td>
<td>
<!-- TODO: add buttons here -->

4
Resources/Views/users/index.leaf
View File

@@ -7,7 +7,9 @@
<p>Users are people that can login and generate puchase orders for employees.</p>
<br>
</div>
#extend("users/form", form)
#extend("form-container"): #export("formContent"):
#extend("users/form", form)
#endexport #endextend
#extend("users/table")
</div>
#endexport

38
Resources/Views/users/table.leaf
View File

@@ -1,23 +1,27 @@
<table id="user-table">
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th></th>
<th>#extend("btn/toggle-form")</th>
</tr>
#for(user in users):
<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
</thead>
<tbody>
#for(user in users):
<tr id="user_#(user.id)">
<td>#(user.username)</td>
<td>#(user.email)</td>
<td style="width: 50px;">
<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
</tbody>
</table>

4
Resources/Views/vendors/index.leaf vendored
View File

@@ -6,7 +6,9 @@
<br>
<p>Vendors are who purchase orders can be issued for, they consist of multiple branches / locations.</p>
<br>
#extend("vendors/form", form)
#extend("form-container"): #export("formContent"):
#extend("vendors/form", form)
#endexport #endextend
#extend("vendors/table")
</div>
</div>

31
Resources/Views/vendors/table.leaf vendored
View File

@@ -1,24 +1,39 @@
<table id="vendor-table">
<tr>
<th>Name</th>
<th>Branches</th>
<th></th>
</tr>
<thead>
<tr>
<th>Name</th>
<th>Branches</th>
<th>#extend("btn/toggle-form")</th>
</tr>
</thead>
<tbody id="vendor-table-body">
#for(vendor in vendors):
<tr id="vendor_#(vendor.id)">
<td>#capitalized(vendor.name)</td>
<td>
<td class="vendor-branches">
#if(vendor.branches):
<ul>
#for(branch in vendor.branches):
<li>#capitalized(branch.name)</li>
<li style="list-style-type: none; margin-left: 10px;">
<div class="branch-row">
<div class="branch-name">#capitalized(branch.name)</div>
<a href="javascript:void(0)"
class="btn danger"
hx-delete="/api/v1/vendors/#(vendor.id)/branches/#(branch.id)"
hx-confirm="Are you sure you want to delete this branch?"
hx-target="closest li"
hx-swap="outerHTML swap:0.3s"
>
&times;
</a>
</div>
</li>
#endfor
</ul>
#endif
</td>
<!-- TODO: Add edit button -->
<td>
<td style="width: 50px;">
<a class="btn btn-delete"
hx-delete="/vendors/#(vendor.id)"
hx-target="closest tr"