Added ajax product search with html response

Redirect back to search query after item addition
Added 200ms delay each search query keyup

app/Http/Controllers/Api/ProductsController.php

@@ -10,7 +10,10 @@ class ProductsController extends Controller
 {
     public function search(Request $request)
     {
-        $query = $request->get('query');
+        $query     = $request->get('query');
+        $draftType = $request->get('draftType');
+        $draftKey  = $request->get('draftKey');
+        $formToken = $request->get('formToken');
         $queriedProducts = [];
         if ($query) {
             $queriedProducts = Product::where(function ($q) use ($query) {
@@ -18,7 +21,6 @@ class ProductsController extends Controller
             })->with('unit')->get();
         }
 
-        return response()->json($queriedProducts, 200);
-        // return view('cart.partials.product-search-result-box', $queriedProducts);
+        return view('cart.partials.product-search-result-box', compact('queriedProducts','draftType','draftKey','formToken'));
     }
 }

app/Http/Controllers/CartController.php

@@ -62,6 +62,9 @@ class CartController extends Controller
         $item = new Item($product, $request->qty);
         $this->cart->addItemToDraft($draftKey, $item);
 
+        if ($request->has('query'));
+            return redirect()->route('cart.show', [$draftKey, 'query' => $request->get('query')]);
+
         return back();
     }
 

resources/views/cart/index.blade.php

@@ -25,4 +25,37 @@
         </div>
     @endif
 @endif
+@endsection
+
+@section('script')
+<script>
+(function() {
+    var delay = (function(){
+        var timer = 0;
+        return function(callback, ms){
+            clearTimeout (timer);
+            timer = setTimeout(callback, ms);
+        };
+    })();
+
+    $('#query').keyup(function() {
+        delay(function() {
+            var query = $('#query').val();
+            if (query.length >= 3) {
+                $.post(
+                    "{{ route('api.products.search') }}",
+                    {
+                        query: query,
+                        draftKey: '{{ $draft->draftKey }}',
+                        draftType: '{{ $draft->type }}',
+                        formToken: '{{ csrf_token() }}',
+                    },
+                    function(data) {
+                    $('#product-search-result-box').html(data);
+                });
+            }
+        }, 200 );
+    });
+})();
+</script>
 @endsection

resources/views/cart/partials/product-search-box.blade.php

@@ -7,5 +7,10 @@
             {{ link_to_route('cart.show', 'Bersihkan Pencarian', [$draft->draftKey], ['class' => 'btn btn-sm']) }}
         </form>
     </div>
-    @includeWhen ($queriedProducts, 'cart.partials.product-search-result-box')
+    <div id="product-search-result-box">
+    @includeWhen ($queriedProducts, 'cart.partials.product-search-result-box', [
+        'draftType' => $draft->type,
+        'draftKey' => $draft->draftKey
+    ])
+    </div>
 </div>

resources/views/cart/partials/product-search-result-box.blade.php

@@ -4,7 +4,7 @@
             <tr>
                 <th>{{ trans('product.name') }}</th>
                 <th>{{ trans('product.unit') }}</th>
-                <th>{{ trans('product.price') }} ({{ $draft->type }})</th>
+                <th>{{ trans('product.price') }} ({{ $draftType }})</th>
                 <th>{{ trans('app.action') }}</th>
             </tr>
         </thead>
@@ -13,10 +13,11 @@
             <tr>
                 <td>{{ $product->name }}</td>
                 <td>{{ $product->unit->name }}</td>
-                <td>{{ formatRp($product->getPrice($draft->type)) }}</td>
+                <td>{{ formatRp($product->getPrice($draftType)) }}</td>
                 <td>
-                    <form action="{{ route('cart.add-draft-item', [$draft->draftKey, $product->id]) }}" method="post" style="display:inline">
-                        {{ csrf_field() }}
+                    <form action="{{ route('cart.add-draft-item', [$draftKey, $product->id]) }}" method="post" style="display:inline">
+                        <input type="hidden" name="query" value="{{ isset($query) ? $query : request('query') }}">
+                        <input type="hidden" name="_token" value="{{ isset($formToken) ? $formToken : csrf_token() }}">
                         <input type="number" id="qty-{{ $product->id }}" style="width:50px" name="qty" value="1" min="1">
                         <input type="submit" id="add-product-{{ $product->id }}" value="Tambah">
                     </form>

tests/Feature/Cart/SearchProductsTest.php

@@ -2,6 +2,8 @@
 
 namespace Tests\Feature\Cart;
 
+use App\Cart\CartCollection;
+use App\Cart\CreditDraft;
 use App\Product;
 use Illuminate\Foundation\Testing\DatabaseMigrations;
 use Tests\TestCase;
@@ -16,18 +18,25 @@ class SearchProductsTest extends TestCase
         $this->disableExceptionHandling();
         factory(Product::class)->create(['name' => 'Hemaviton']);
         factory(Product::class)->create(['name' => 'Zee']);
-        $product1 = factory(Product::class)->create(['name' => 'Bisolvon 1']);
-        $product2 = factory(Product::class)->create(['name' => 'Bisolvon 2']);
+        $product1 = factory(Product::class)->create(['name' => 'Bisolvon 1', 'cash_price' => 2000, 'credit_price' => 2100]);
+        $product2 = factory(Product::class)->create(['name' => 'Bisolvon 2', 'cash_price' => 3000, 'credit_price' => 3200]);
+
+        $cart = new CartCollection();
+        $draft = new CreditDraft();
+        $cart->add($draft);
 
         $user = $this->loginAsUser();
 
-        $response = $this->post(route('api.products.search'), ['query'=> 'Bis']);
+        $response = $this->post(route('api.products.search'), [
+            'query'=> 'Bis',
+            'draftType'=> $draft->type,
+            'draftKey'=> $draft->draftKey,
+        ]);
 
         $response->assertSuccessful();
-
-        $response->assertJsonFragment([
-            'name' => 'Bisolvon 1',
-            'name' => 'Bisolvon 2',
-        ]);
+        $response->assertSee($product1->name);
+        $response->assertSee(route('cart.add-draft-item', [$draft->draftKey, $product1->id]));
+        $response->assertSee($product2->name);
+        $response->assertSee(route('cart.add-draft-item', [$draft->draftKey, $product2->id]));
     }
 }