src/main/java/com/utopiaindustries/dao/ctp/JobCardRowMapper.java

@@ -20,7 +20,7 @@ public class JobCardRowMapper implements RowMapper<JobCard> {
 		jobCard.setInventoryStatus( rs.getString("inventory_status"));
 		jobCard.setCustomer( rs.getString("customer") );
 		jobCard.setLotNumber( rs.getString("lot_number") );
-		jobCard.setPurchaseOrderId( rs.getString("purchase_order_id") );
+		jobCard.setPurchaseOrderId( rs.getLong("purchase_order_id") );
 		jobCard.setLocationSiteId( rs.getLong("location_site_id" ) );
 		jobCard.setDescription( rs.getString("description" ) );
 		return jobCard;

src/main/java/com/utopiaindustries/dao/uind/PurchaseOrderDAO.java

@@ -117,7 +117,7 @@ public class PurchaseOrderDAO {
     }
 
     // find
-    public PurchaseOrder find(String id) {
+    public PurchaseOrder find(long id) {
         MapSqlParameterSource params = new MapSqlParameterSource();
         params.addValue("id", id);
         List<PurchaseOrder> purchaseOrders = namedParameterJdbcTemplate.query(SELECT_QUERY, params, new PurchaseOrderRowMapper());

src/main/java/com/utopiaindustries/model/ctp/JobCard.java

@@ -24,7 +24,7 @@ public class JobCard {
     private String inventoryStatus;
     private String customer;
     private String lotNumber;
-    private String purchaseOrderId;
+    private long purchaseOrderId;
     private long locationSiteId;
     private String description;
     // wrapper
@@ -106,11 +106,11 @@ public class JobCard {
         this.lotNumber = lotNumber;
     }
 
-    public String getPurchaseOrderId() {
+    public long getPurchaseOrderId() {
         return purchaseOrderId;
     }
 
-    public void setPurchaseOrderId(String purchaseOrderId) {
+    public void setPurchaseOrderId(long purchaseOrderId) {
         this.purchaseOrderId = purchaseOrderId;
     }
 

src/main/resources/templates/_job-card-fragment.html

@@ -34,9 +34,11 @@
                                 </div>
                             </div>
                             <div class="form-row">
-                                <div class="col-sm-3 form-group">
-                                    <label>Purchase Order</label>
-                                    <input type="text" class="form-control" th:field="*{purchaseOrderId}" required>
+                                <div class="col-sm-3 form-group" th:with="title=*{purchaseOrderTitle},id=*{purchaseOrderId}">
+                                    <purchase-order-search th:attr="id=${id},title=${title}"
+                                        v-bind:id-field-name="'purchaseOrderId'"
+                                    >
+                                    </purchase-order-search>
                                 </div>
                                 <div class="col-sm-3 form-group" th:with="title=*{locationTitle},id=*{locationSiteId}">
                                     <location-site-search th:attr="id=${id},title=${title}"