feat: Updates to employee detail views.

Public/css/main.css

@@ -375,8 +375,8 @@ tr.htmx-swapping td {
 }
 
 .btn-row {
-  margin-top: 40px;
+  margin: 5px 40px;
-  margin-right: 5px;
+  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;
+}

Public/images/spinner.svg

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

Resources/Views/employees/detail.leaf

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

Resources/Views/employees/table-row.leaf

@@ -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-swap="outerHTML swap:1s"
-            hx-push-url="true"
+            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>

Resources/Views/img/spinner.leaf

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