feat: Moves employee views to their own controller, updates css, and employee table view.

Resources/Views/employee-form.leaf

@@ -0,0 +1,45 @@
+<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
+      >
+  <label for="firstName">First Name</label>
+  <input type="text"
+         id="firstName"
+         name="firstName"
+         placeholder="First Name"
+         autofocus
+         required
+         #if(employee.firstName): value=#(employee.firstName) #endif
+         >
+  <br>
+  <label for="lastName">Last Name</label>
+  <input type="text"
+         id="lastName"
+         name="lastName"
+         placeholder="Last Name"
+         required
+         #if(employee.lastName): value=#(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>

Resources/Views/employee-table.leaf

@@ -26,8 +26,8 @@
       </a>
       #endif
     </td>
-    <td style="width: 30px;">
-        <a class="btn-delete"
+    <td style="width: 100px;">
+        <a class="btn btn-delete"
                 hx-delete="/employees/#(employee.id)"
                 hx-target="#employee-table"
                 hx-swap="outerHTML"
@@ -35,6 +35,11 @@
                 >
           <img src="images/trash-can.svg" alt="Delete">
         </a>
+        <a class="btn btn-edit" hx-get="/employees/#(employee.id)"
+           hx-target="#employee-form"
+           >
+           <img src="images/pencil.svg", alt="Edit">
+        </a>
     </td>
 
   </tr>

Resources/Views/employees.leaf

@@ -1,22 +1,10 @@
-<div id="home-conent" class="container">
+<div id="home-content" class="container" #if(oob): hx-swap-oob="outerHTML" #endif>
   <div class="container">
     <h1>Employees</h1>
     <br>
     <p>Employees are who purchase orders can be generated for.</p>
     <br>
   </div>
-  <form class="employee-form"
-    hx-post="/employees"
-    hx-target="#employee-table"
-    hx-swap="outerHTML"
-    >
-    <label for="firstName">First Name</label>
-    <input type="text" id="firstName" name="firstName" placeholder="First Name" autofocus required>
-    <br>
-    <label for="lastName">Last Name</label>
-    <input type="text" id="lastName" name="lastName" placeholder="Last Name" required>
-    <br>
-    <input type="submit" value="Create">
-  </form>
+  #extend("employee-form", form)
   #extend("employee-table")
 </div>

Resources/Views/user-table.leaf

@@ -0,0 +1,12 @@
+<table id="user-table">
+  <tr>
+    <th>Username</th>
+    <th>Email</th>
+  </tr>
+  #for(user in users):
+  <tr>
+    <td>#(user.username)</td>
+    <td>#(user.email)</td>
+  </tr>
+  #endfor
+</table>

Resources/Views/users.leaf

@@ -1,19 +1,9 @@
 <div id="home-content" class="container">
   <div class="container">
     <h1>Users</h1>
+    <br>
     <p>Users are people that can login and generate puchase orders for employees.</p>
     <br>
   </div>
-  <table>
-    <tr>
-      <th>Username</th>
-      <th>Email</th>
-    </tr>
-    #for(user in users):
-    <tr>
-      <td>#(user.username)</td>
-      <td>#(user.email)</td>
-    </tr>
-    #endfor
-  </table>
+  #extend("user-table")
 </div>