Tweaks: In POS Module

app/Http/Livewire/Pos/ProductList.php

@@ -8,6 +8,9 @@ use Modules\Product\Entities\Product;
 
 class ProductList extends Component
 {
+    use WithPagination;
+
+    protected $paginationTheme = 'bootstrap';
 
     protected $listeners = [
         'selectedCategory' => 'categoryChanged',
@@ -15,28 +18,31 @@ class ProductList extends Component
     ];
 
     public $categories;
-    public $products;
+    public $category_id;
     public $limit = 9;
 
     public function mount($categories) {
-        $this->products = Product::limit($this->limit)->get();
         $this->categories = $categories;
+        $this->category_id = '';
     }
 
     public function render() {
-        return view('livewire.pos.product-list');
+        return view('livewire.pos.product-list', [
+            'products' => Product::when($this->category_id, function ($query) {
+                return $query->where('category_id', $this->category_id);
+            })
+            ->paginate($this->limit)
+        ]);
     }
 
     public function categoryChanged($category_id) {
-        if ($category_id == '*') {
-            $this->products = Product::limit($this->limit)->get();
-        } else {
-            $this->products = Product::where('category_id', $category_id)->limit($this->limit)->get();
-        }
+        $this->category_id = $category_id;
+        $this->resetPage();
     }
 
     public function showCountChanged($value) {
         $this->limit = $value;
+        $this->resetPage();
     }
 
     public function selectProduct($product) {

resources/views/livewire/pos/filter.blade.php

@@ -4,7 +4,7 @@
             <div class="form-group">
                 <label>Product Category</label>
                 <select wire:model="category" class="form-control">
-                    <option value="*">All Products</option>
+                    <option value="">All Products</option>
                     @foreach($categories as $category)
                         <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                     @endforeach
@@ -19,7 +19,7 @@
                     <option value="15">15 Products</option>
                     <option value="21">21 Products</option>
                     <option value="30">30 Products</option>
-                    <option value="*">All Products</option>
+                    <option value="">All Products</option>
                 </select>
             </div>
         </div>

resources/views/livewire/pos/product-list.blade.php

@@ -10,9 +10,9 @@
                 </div>
                 @forelse($products as $product)
                     <div wire:click.prevent="selectProduct({{ $product }})" class="col-lg-4 col-md-6" style="cursor: pointer;">
-                        <div class="card border-0 shadow">
+                        <div class="card border-0 shadow h-100">
                             <div class="position-relative">
-                                <img src="{{ $product->getFirstMediaUrl('images') }}" class="card-img-top" alt="Product Image">
+                                <img height="200" src="{{ $product->getFirstMediaUrl('images') }}" class="card-img-top" alt="Product Image">
                                 <div class="badge badge-info mb-3 position-absolute" style="left:10px;top: 10px;">Stock: {{ $product->product_quantity }}</div>
                             </div>
                             <div class="card-body">
@@ -34,6 +34,9 @@
                     </div>
                 @endforelse
             </div>
+            <div @class(['mt-3' => $products->hasPages()])>
+                {{ $products->links() }}
+            </div>
         </div>
     </div>
 </div>