From b30f15c4093a2fa4e794dd10c704e68ecf94eefb Mon Sep 17 00:00:00 2001
From: Marcus Hill <bcf8c9f2@opayq.com>
Date: Sun, 16 Jan 2022 19:15:13 +0000
Subject: [PATCH] Add autocomplete functionality - populate quote item details
 from existing products #42

---
 quote.php | 38 +++++++++++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/quote.php b/quote.php
index 1f380b50..c97aa819 100644
--- a/quote.php
+++ b/quote.php
@@ -76,6 +76,17 @@ if(isset($_GET['quote_id'])){
     $quote_badge_color = "secondary";
   }
 
+
+// Product autocomplete
+$product_sql = mysqli_query($mysqli,"SELECT product_name AS label, product_description AS description, product_cost AS price FROM products
+WHERE products.company_id = $session_company_id");
+
+if(mysqli_num_rows($product_sql) > 0){
+    while($row = mysqli_fetch_array($product_sql)) {
+        $products[] = $row;
+    }
+    $json_products = (json_encode($products));
+}
 ?>
 
 <ol class="breadcrumb d-print-none">
@@ -252,10 +263,10 @@ if(isset($_GET['quote_id'])){
                   <form action="post.php" method="post" autocomplete="off">
                     <input type="hidden" name="quote_id" value="<?php echo $quote_id; ?>">
                     <td></td>
-                    <td><input type="text" class="form-control" name="name" placeholder="Item" required></td>
-                    <td><textarea class="form-control" rows="2" name="description" placeholder="Description"></textarea></td>
+                    <td><input type="text" class="form-control" name="name" id="name" placeholder="Item" required></td>
+                    <td><textarea class="form-control" rows="2" name="description" id="desc" placeholder="Description"></textarea></td>
                     <td><input type="number" step="0.01" min="0" class="form-control" style="text-align: center;" name="qty" placeholder="QTY"></td>
-                    <td><input type="number" step="0.01" min="0" class="form-control" style="text-align: right;" name="price" placeholder="Price (<?php echo $client_currency_symbol; ?>)"></td>
+                    <td><input type="number" step="0.01" min="0" class="form-control" id="price" style="text-align: right;" name="price" placeholder="Price (<?php echo $client_currency_symbol; ?>)"></td>
                     <td>
                       <select class="form-control select2" name="tax_id" required>
                         <option value="0">None</option>
@@ -394,6 +405,27 @@ include("footer.php");
 
 ?>
 
+<!-- JSON Autocomplete / type ahead -->
+<!-- //TODO: Not sure quite how to make this more modular to include elsewhere, I'll leave design decision that down to you.. -->
+<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
+<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
+<script>
+    $( function() {
+        var availableProducts = <?php echo $json_products?>;
+
+        $("#name").autocomplete({
+            source: availableProducts,
+            select: function (event, ui){
+                $("#name").val(ui.item.label); // Product name field - this seemingly has to referenced as label
+                $("#desc").val(ui.item.description); // Product description field
+                $("#price").val(ui.item.price); // Product description field
+                return false;
+            }
+        });
+    } );
+</script>
+
 <script src='plugins/pdfmake/pdfmake.js'></script>
 <script src='plugins/pdfmake/vfs_fonts.js'></script>
 <script>