Livewire only works with wire:click
I've been facing the issue where for some reason I can not get wire:modal to work.
I've made work around for it now that uses a search button to force the query to run. But I want to use it live version for filtering.
I'm using a Livewire component in a custom filament page.
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Employee;
class EmployeeCards extends Component
{
public $search = '';
public $availabilityStart;
public $availabilityEnd;
public $age;
public $language;
public $sortBy = 'created_at';
public $employees = [];
public $availableLanguages = [];
public function mount()
{
$this->filterEmployees(); // Initial data load
}
public function filterEmployees()
{
// Fetch available languages
$this->availableLanguages = Employee::pluck('languages')->flatten(1)->pluck('language')->unique()->filter()->values();
// Get filtered employees
$query = Employee::query();
$query->when($this->search, function ($q) {
$q->where('firstName', 'like', '%' . $this->search . '%')
->orWhere('lastName', 'like', '%' . $this->search . '%');
});
$query->when($this->availabilityStart && $this->availabilityEnd, function ($q) {
$q->where('availabilityStart', '<=', $this->availabilityEnd)
->where('availabilityEnd', '>=', $this->availabilityStart);
});
$query->when($this->age, function ($q) {
$q->whereRaw('TIMESTAMPDIFF(YEAR, birthdate, CURDATE()) = ?', [$this->age]);
});
$query->when($this->language, function ($q) {
$q->whereJsonContains('languages', [['language' => $this->language]]);
});
$this->employees = $query->orderBy($this->sortBy)->get();
}
public function render()
{
return view('livewire.employee-cards');
}
}
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Employee;
class EmployeeCards extends Component
{
public $search = '';
public $availabilityStart;
public $availabilityEnd;
public $age;
public $language;
public $sortBy = 'created_at';
public $employees = [];
public $availableLanguages = [];
public function mount()
{
$this->filterEmployees(); // Initial data load
}
public function filterEmployees()
{
// Fetch available languages
$this->availableLanguages = Employee::pluck('languages')->flatten(1)->pluck('language')->unique()->filter()->values();
// Get filtered employees
$query = Employee::query();
$query->when($this->search, function ($q) {
$q->where('firstName', 'like', '%' . $this->search . '%')
->orWhere('lastName', 'like', '%' . $this->search . '%');
});
$query->when($this->availabilityStart && $this->availabilityEnd, function ($q) {
$q->where('availabilityStart', '<=', $this->availabilityEnd)
->where('availabilityEnd', '>=', $this->availabilityStart);
});
$query->when($this->age, function ($q) {
$q->whereRaw('TIMESTAMPDIFF(YEAR, birthdate, CURDATE()) = ?', [$this->age]);
});
$query->when($this->language, function ($q) {
$q->whereJsonContains('languages', [['language' => $this->language]]);
});
$this->employees = $query->orderBy($this->sortBy)->get();
}
public function render()
{
return view('livewire.employee-cards');
}
}
2 Replies
