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

68
Public/css/main.css
View File

@@ -375,8 +375,8 @@ tr.htmx-swapping td {
}
.btn-row {
margin-top: 40px;
margin-right: 5px;
margin: 5px 40px;
padding: 10px 0px;
}
.btn-row button {
@@ -401,10 +401,66 @@ button.edit {
opacity: 0.8;
}
form table input[type=text] {
.row {
display: flex;
margin: 10px 0;
width: 100%;
}
.row .container {
display: inline;
}
.input {
display: inline;
width: 100%;
}
.row .input {
display: inline;
border: none;
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.row label {
display: inline-block;
width: 400px;
margin-right: 20px;
}
.htmx-swapping {
opacity: 0;
transition: opacity 1s ease-in-out;
}
#employee-detail form input[type=text] {
margin-right: 20px;
margin-top: 5px;
font-size: 1.5em;
}
.active-row {
display: flex;
float: right;
}
.active-row h3 {
width: auto;
margin-left: 20px;
margin-right: 20px;
}
.active-row a {
display: inline-block;
}
.htmx-indicator {
display: none;
}
.htmx-request .htmx-indicator {
display: inline;
}
.htmx-request.htmx-indicator {
display: inline;
}

1
Public/images/spinner.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a12" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="#FF156D"></stop><stop offset=".3" stop-color="#FF156D" stop-opacity=".9"></stop><stop offset=".6" stop-color="#FF156D" stop-opacity=".6"></stop><stop offset=".8" stop-color="#FF156D" stop-opacity=".3"></stop><stop offset="1" stop-color="#FF156D" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(#a12)" stroke-width="15" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="#FF156D" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1001 B

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>

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

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