feat: working on detail views.

Resources/Views/employees/detail.leaf

@@ -0,0 +1,63 @@
+<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"
+            >
+    &times;
+  </button>
+  <form hx-put="/employees/#(employee.id)"
+        hx-target="#employee_#(employee.id)"
+        hx-swap="outerHTML"
+        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="btn-row">
+      <button class="edit"
+              type="submit"
+              hx-swap="outerHTML"
+              >
+        Update
+      </button>
+      <button class="danger">Delete</button>
+    </div>
+  </form>
+  #endif
+</div>

Resources/Views/employees/index.leaf

@@ -7,6 +7,7 @@
       <h3>Employees are who purchase orders can be generated for.</h3>
       <br>
     </div>
+    #extend("employees/detail")
     #extend("form-container"): #export("formContent"):
       #extend("employees/form", form)
       #endexport #endextend

Resources/Views/employees/table-row.leaf

@@ -19,22 +19,33 @@
     </a>
     #endif
   </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 style="width: 50px;">
+    <button hx-get="/employees/#(id)"
+            hx-target="#employee-detail"
+            hx-swap="outerHTML swap:0.5s"
+            hx-push-url="true"
+            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/index.leaf

@@ -4,8 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://unpkg.com/htmx.org@2.0.4"></script>
-  <script src="js/main.js"></script>
-  <link rel="stylesheet" href="css/main.css">
+  <script src="/js/main.js"></script>
+  <link rel="stylesheet" href="/css/main.css">
   <title>#(title)</title>
 </head>
 <body>

Resources/Views/purchaseOrders/detail.leaf

@@ -1,46 +1,56 @@
-<div id="po-detail" class="container">
+<div id="po-detail" class="container float">
+  #if(purchaseOrderDetail):
+  <a href="javascript:void(0)"
+     class="closebtn"
+     hx-get="/purchase-orders/details/close"
+     hx-target="#po-detail"
+     hx-swap="outerHTML"
+     >
+    &times;
+  </a>
   <table>
     <tbody>
       <tr>
         <td class="label"><h3>Purchase Order:</h3></td>
-        <td><h3>#(purchaseOrder.id)</h3></td>
+        <td><h3>#(purchaseOrderDetail.id)</h3></td>
       </tr>
       <tr>
         <td class="label"><h3>Work Order:</h3></td>
-        <td><h3>#(purchaseOrder.workOrder)</h3></td>
+        <td><h3>#(purchaseOrderDetail.workOrder)</h3></td>
       </tr>
       <tr>
         <td class="label"><h3>Customer:</h3></td>
-        <td><h3>#(purchaseOrder.customer)</h3></td>
+        <td><h3>#(purchaseOrderDetail.customer)</h3></td>
       </tr>
       <tr>
         <td class="label"><h3>Vendor:</h3></td>
-        <td><h3>#capitalized(purchaseOrder.vendorBranch.vendor.name) - #capitalized(purchaseOrder.vendorBranch.name)</h3></td>
+        <td><h3>#capitalized(purchaseOrderDetail.vendorBranch.vendor.name) - #capitalized(purchaseOrderDetail.vendorBranch.name)</h3></td>
       </tr>
       <tr>
         <td class="label"><h3>Materials:</h3></td>
-        <td><h3>#(purchaseOrder.materials)<h3></td>
+        <td><h3>#(purchaseOrderDetail.materials)<h3></td>
       </tr>
       <tr>
         <td class="label"><h3>Created For:</h3></td>
-        <td><h3>#capitalized(purchaseOrder.createdFor.firstName) #capitalized(purchaseOrder.createdFor.lastName)</h3></td>
+        <td><h3>#capitalized(purchaseOrderDetail.createdFor.firstName) #capitalized(purchaseOrderDetail.createdFor.lastName)</h3></td>
       </tr>
       <tr>
         <td class="label"><h3>Truck Stock:</h3></td>
-        <td><h3>#capitalized(purchaseOrder.truckStock)</h3></td>
+        <td><h3>#capitalized(purchaseOrderDetail.truckStock)</h3></td>
       </tr>
       <tr>
         <td class="label"><h3>Created By:</h3></td>
-        <td><h3>#(purchaseOrder.createdBy.username)</h3></td>
+        <td><h3>#(purchaseOrderDetail.createdBy.username)</h3></td>
       </tr>
       <tr>
         <td class="label"><h3>Date:</h3></td>
-        <td><h3>#date(purchaseOrder.createdAt)<h3></td>
+        <td><h3>#date(purchaseOrderDetail.createdAt, "MM-dd-yyyy")<h3></td>
       </tr>
       <tr>
         <td class="label"><h3>Updated:</h3></td>
-        <td><h3>#date(purchaseOrder.updatedAt)<h3></td>
+        <td><h3>#date(purchaseOrderDetail.updatedAt, "MM-dd-yyyy")<h3></td>
       </tr>
     </tbody>
   </table>
+  #endif
 </div>

Resources/Views/purchaseOrders/index.leaf

@@ -8,6 +8,16 @@
     #extend("form-container"): #export("formContent"):
       #extend("purchaseOrders/form", form)
     #endexport #endextend
+    <div class="float"
+         id="po-detail"
+         #if(purchaseOrderDetail):
+         hx-get="/purchase-orders/#(purchaseOrderDetail.id)"
+         hx-target="this"
+         hx-trigger="load"
+         hx-swap="outerHTML"
+         #endif
+         >
+    </div>
     <div class="btn-row">
       #if(hasPrevious):
       <button hx-get="/purchase-orders?page=#(page - 1)&limit=#(limit)"

Resources/Views/purchaseOrders/table-row.leaf

@@ -8,11 +8,11 @@
   <td>#(createdBy.username)</td>
   <td>#capitalized(truckStock)</td>
   <td style="text-align: center;">
-    <!-- TODO: add buttons here -->
     <button class="btn btn-detail"
             hx-get="/purchase-orders/#(id)"
-            hx-target="#home-content"
+            hx-target="#po-detail"
             hx-push-url="true"
+            hx-swap="outerHTML"
             >
       &rsaquo;
     </button>

Resources/Views/users/detail.leaf

@@ -0,0 +1,36 @@
+<div id="user-detail" class="float" #if(!user): style="display:none;" #endif>
+  #if(user):
+    <button class="closebtn"
+            hx-get="/users"
+            hx-target="body"
+            hx-push-url="true"
+            hx-swap="outerHTML"
+            hx-disable-elt="this"
+            >
+    &times;
+  </button>
+  <table>
+    <tbody>
+      <tr>
+        <td class="label"><h3>Username:</h3></td>
+        <td><h3>#(user.username)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Email:</h3></td>
+        <td><h3>#(user.email)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Created:</h3></td>
+        <td><h3>#date(user.createdAt, "MM-dd-yyyy")</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Updated:</h3></td>
+        <td><h3>#date(user.updatedAt, "MM-dd-yyyy")</h3></td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="btn-row user-buttons">
+    <button class="danger">Delete</button>
+  </div>
+  #endif
+</div>

Resources/Views/users/index.leaf

@@ -7,9 +7,11 @@
       <p>Users are people that can login and generate puchase orders for employees.</p>
       <br>
     </div>
+    #extend("users/detail")
     #extend("form-container"): #export("formContent"):
       #extend("users/form", form)
     #endexport #endextend
+
     #extend("users/table")
   </div>
   #endexport

Resources/Views/users/table-row.leaf

@@ -0,0 +1,14 @@
+<tr id="user_#(id)">
+  <td>#(username)</td>
+  <td>#(email)</td>
+  <td style="width: 50px;">
+    <button hx-get="/users/#(id)"
+            hx-target="#user-detail"
+            hx-swap="outerHTML swap:0.5s"
+            hx-push-url="true"
+            class="btn btn-detail"
+            >
+      &rsaquo;
+    </button>
+  </td>
+</tr>

Resources/Views/users/table.leaf

@@ -8,20 +8,7 @@
   </thead>
   <tbody>
     #for(user in users):
-    <tr id="user_#(user.id)">
-      <td>#(user.username)</td>
-      <td>#(user.email)</td>
-      <td style="width: 50px;">
-        <a class="btn btn-delete"
-           hx-delete="/users/#(user.id)"
-           hx-target="#user-table"
-           hx-swap="outerHTML"
-           hx-confirm="Are you sure you want to delete this user?"
-           >
-          <img src="images/trash-can.svg" alt="Delete">
-        </a>
-      </td>
-    </tr>
+      #extend("users/table-row", user)
     #endfor
   </tbody>
 </table>