feat: Working purchase order table and form.

Resources/Views/employees/form.leaf

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

Resources/Views/employees/index.leaf

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

Resources/Views/employees/table.leaf

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