Laravel+inertia+vue js multiple dropdown filtering with vue multiselect
Hi,Iam beginner in laravel and i don't know how to make two dropdown filters to work together.I'am using vue multiselect package.I have leads datatable with two dropdown filters owner and status..They work individually.When i select from owner it filtering the owners and when i select from status it filtering status.Exampe if i select John Doe from owner it would give all John Doe leads and when i select from status example qualified it would give all qualified leads.I need to filter all John Doe qualified leads.I need to connect them and i dont know how to do that. Lead Model:
public function scopeWhereUser( $query, $user_id)
{
$query->when( !is_null($user_id), function($query) use ($user_id) {
$query->where('user_id', $user_id);
});
}
public function scopeWhereStatus( $query, $status_id)
{
$query->when( !is_null($status_id), function($query) use ($status_id) {
$query->where('status_id', $status_id);
});
}
public function scopeFilter($query, array $filters)
{
$query->when($filters['search'] ?? null, function ($query, $search) {
$query->where(function ($query) use ($search) {
$query->where('name', 'like', '%'.$search.'%')
->orWhere('email', 'like', '%'.$search.'%')
->orWhere('company', 'like', '%'.$search.'%')
->orWhereHas('user', function ($query) use ($search) {
$query->where('name', 'like', '%'.$search.'%');
});
});
});
}
Lead Controller:
public function index()
{
return Inertia::render('Lead', [
'user_id' => request()->get('user_id'),
'status_id' => request()->get('status_id'),
'filters' => request()->all('search'),
'leads' => Lead::query()
->latest()
->whereUser(request()->get('user_id'))
->whereStatus(request()->get('status_id'))
->filter(request()->only('search'))
->paginate(10)
->withQueryString()
->through(fn ($lead) => [
'id' => $lead->id,
'name' => $lead->name,
'company' => $lead->company,
'email' => $lead->email,
'website' => $lead->website,
'address' => $lead->address,
'state' => $lead->state,
'zip_code' => $lead->zip_code,
'description' => $lead->description,
'phone' => $lead->phone,
'city' => $lead->city,
'created_at' => $lead->created_at,
'country_id' => $lead->country_id,
'status_id' => $lead->status_id,
'source_id' => $lead->source_id,
'user_id' => $lead->user_id,
'status' => $lead->status ? $lead->status->only('status_name') : null,
'source' => $lead->source ? $lead->source->only('source_name') : null,
'user' => $lead->user ? $lead->user->only('name') : null,
]),
Vue file:
<div>
<label
class="block text-sm font-medium text-gray-900">
Owner
</label>
<div class="mt-1 relative rounded-md shadow-sm">
<VueMultiselect
v-model="user_id"
@select="getUser"
:options="users.map(user => user.id)"
placeholder="Select owner"
:custom-label="opt => users.find(x => x.id == opt).name"
:preserve-search="true"
></VueMultiselect>
<pre class="language-json"><code>{{ user_id }}</code></pre>
</div>
</div>
<div>
<label
class="block text-sm font-medium text-gray-900">
Status
</label>
<div class="mt-1 relative rounded-md shadow-sm">
<VueMultiselect
v-model="status_id"
@select="getStatus"
:options="statuses.map(status => status.id)"
placeholder="Select status"
:custom-label="opt => statuses.find(x => x.id == opt).status_name"
></VueMultiselect>
</div>
</div>
Vue file methods:
getUser(user_id) {
this.$inertia.get(
route("lead"),
{ user_id: user_id },
{ only: ["leads", "user_id"] }
);
},
getStatus(status_id) {
this.$inertia.get(
route("lead"),
{ status_id: status_id },
{ only: ["leads", "status_id"] }
);
},
Please or to participate in this conversation.