Applying Filter on a BelongsTo Column using Livewire

In this Tutorial, we will see how to implement Filter on a belongsTo Column to a Table using Livewire. This is the part 5 of the Series related to adding New Functionality to a Table using Livewire. In Last Part of the Series we implemented Filter on the status column of the Product Model using Livewire.

Lets say our Product Model has belongsTo Relationship with Brand as follows

    public function brand()
    {
        return $this->belongsTo(Brand::class);
    }

That means our Product table has a column brand_id. And we want to Filter the Result using this column. This is very similar to the Filter that we applied on the status column in the last part. The only difference is that we would need to fetch the brands from the Brand table so that we can show them in the dropdown.

We would create a brands property and populate it in the mount method.

$this->brands = Brand::pluck('name', 'id')->toArray();

And in the View, we would create the dropdown by looping through the brands

<div>
    <label>
        Brand
    </label>
    <select>
        <option value="">Any</option>
        @foreach($brands as $brand_id => $brand_name)
        <option value="{{$brand_id}}">{{$brand_name}}</option>
        @endforeach
    </select>
</div>

The Dropdown will have all the Brands that User can select from. Moreover, we also have an Any option so as to display all the Products.

Next we will create a property called $selectedBrand and link it with above dropdown using wire:model.

public $selectedBrand = '';

<select wire:model="selectedBrand">
    <option value="">Any</option>
    @foreach($brands as $brand_id => $brand_name)
    <option value="{{$brand_id}}">{{$brand_name}}</option>
    @endforeach
</select>

This way whenever User changes the above Dropdown, the property $selectedBrand would be updated in the Component and Livewire will re-render the component. Now all we need to do is to change the Query so that User Selection is honoured.

Below is the current Query that we have.

public function query()
{
    return Product::query()
        ->when($this->selectedStatus, function($query) {
            return $query->where('status', $this->selectedStatus);
        });
}

We will include another when Condition like below:

public function query()
{
    return Product::query()
        ->when($this->selectedStatus, function($query) {
            return $query->where('status', $this->selectedStatus);
        })
        ->when($this->selectedBrand, function($query) {
            return $query->where('brand_id', $this->selectedBrand);
        });
}

Since we are using when clause, the query with where clause on brand_id column will only be added when User selects a particular Brand. So if the User selects Any which is equivalent to empty, then the query with where Clause on brand_id will not be added.

This is all that we need to filter the Records using a BelongsTo column. If you have noticed this is very similar to the filter that we applied on the status column. In the next post we will see how to filter the Records using BelongsToMany Relation.

If you have liked this Tutorial, please checkout the Livewire Package tall-crud-generator which automatically generates all the Code related to Filter on multiple columns.