feat: Reorganizing views

Resources/Views/employees/form.leaf

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

@@ -0,0 +1,14 @@
+#extend("home"):
+  #export("homeContent"):
+  <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>
+    #extend("employees/form", form)
+    #extend("employees/table")
+  </div>
+  #endexport
+#endextend

Resources/Views/employees/table.leaf

@@ -0,0 +1,47 @@
+<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)"
+                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">
+        </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>
+  #endfor
+</table>