feat: working on detail views.

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>