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

feat: Updates to employee detail views.

Browse Source
This commit is contained in:
Michael Housh
2025-01-12 22:14:39 -05:00
parent 1ce369e156
commit 8228b1dfff
5 changed files with 98 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
Resources/Views/employees/detail.leaf
View File

@@ -1,12 +1,7 @@
<div id="employee-detail" class="float" #if(!employee): style="display:none;" #endif>
#if(employee):
<button class="closebtn"
hx-get="/employees"
hx-target="body"
hx-push-url="true"
hx-swap="outerHTML"
hx-disable-elt="this"
>
onclick="toggleContent('employee-detail');">
&times;
</button>
<form hx-put="/employees/#(employee.id)"
@@ -15,40 +10,34 @@
hx-disable-elt="this"
hx-on::after-request="window.location.href='/employees'; toggleContent('employee-detail');"
>
<table>
<tbody>
<tr>
<td style="width: 20%;"><h3 class="label">First Name:</h3></td>
<td><input type="text" name="firstName" value="#(employee.firstName)"></td>
</tr>
<tr>
<td><h3 class="label">Last Name:</h3></td>
<td><input type="text" name="lastName" value="#(employee.lastName)"></td>
</tr>
<tr>
<td><h3 class="label">Active:</h3></td>
<td>
#if(employee.active):
<a class="toggle"
hx-patch="/employees/#(id)/toggle-active"
hx-target="#employee_#(id)"
hx-swap="outerHTML"
>
<img class="toggle" src="/images/toggle-on.svg" alt="Active">
</a>
#else:
<a class="toggle"
hx-patch="/employees/#(id)/toggle-active"
hx-target="#employee_#(id)"
hx-swap="outerHTML"
>
<img class="toggle" src="/images/toggle-off.svg" alt="Active">
</a>
#endif
</td>
</tr>
</tbody>
</table>
<div class="row">
<label for="firstName"><h3 class="label">First Name:</h3></label>
<input type="text" name="firstName" value="#(employee.firstName)">
<label for="lastName"><h3 class="label">Last Name:</h3></label>
<input type="text" name="lastName" value="#(employee.lastName)">
</div>
<div class="row">
<div class="active-row">
<h3 class="label">Active:</h3>
#if(employee.active):
<a class="toggle"
hx-patch="/employees/#(id)/toggle-active"
hx-target="#employee_#(id)"
hx-swap="outerHTML"
>
<img class="toggle" src="/images/toggle-on.svg" alt="Active">
</a>
#else:
<a class="toggle"
hx-patch="/employees/#(id)/toggle-active"
hx-target="#employee_#(id)"
hx-swap="outerHTML"
>
<img class="toggle" src="/images/toggle-off.svg" alt="Active">
</a>
#endif
</div>
</div>
<div class="btn-row">
<button class="edit"
type="submit"

28
Resources/Views/employees/table-row.leaf
View File

@@ -7,7 +7,7 @@
hx-target="#employee_#(id)"
hx-swap="outerHTML"
>
<img src="images/toggle-on.svg" alt="Active">
<img src="/images/toggle-on.svg" alt="Active">
</a>
#else:
<a class="toggle"
@@ -15,37 +15,19 @@
hx-target="#employee_#(id)"
hx-swap="outerHTML"
>
<img src="images/toggle-off.svg" alt="Active">
<img src="/images/toggle-off.svg" alt="Active">
</a>
#endif
</td>
<td style="width: 50px;">
<button hx-get="/employees/#(id)"
hx-target="#employee-detail"
hx-swap="outerHTML swap:0.5s"
hx-push-url="true"
hx-swap="outerHTML swap:1s"
hx-push-url="false"
hx-disabled-elt="this"
class="btn btn-detail"
>
&rsaquo;
</button>
</td>
<!-- <td style="width: 100px;"> -->
<!-- <a class="btn btn-delete" -->
<!-- href="javascript:void(0)" -->
<!-- hx-delete="/employees/#(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/#(id)" -->
<!-- hx-target="#employee-form" -->
<!-- hx-on::after-request=" if(event.detail.successful) toggleContent('form')" -->
<!-- > -->
<!-- #extend("img/pencil") -->
<!-- </a> -->
<!-- </td> -->
</tr>