current Url:
http://localhost:8000/filter-results?country_id=1&education_level_id=&employment_type_id=&language_id=&profession_id=&religion_id=1
how I wanted to looks like:
http://localhost:8000/filter-results?country_id=1&religion_id=1
how can I do that.
more details:
I have a filter view as a part of the home page which have 6 combobox for selecting a country, education level etc.. then in the controller i’m filtering the person based on these data and retriving the data to display it in worker list view.
the function responsible for filtering :
public function filterResults(Request $request)
{
// Retrieve filter criteria from the request
$countryId = $request->input('country_id');
$educationLevelId = $request->input('education_level_id');
$employmentTypeId = $request->input('employment_type_id');
$languageId = $request->input('language_id');
$personId = $request->input('person_id');
$professionId = $request->input('profession_id');
$religionId = $request->input('religion_id');
// Build the query based on the filter criteria
$query = Person::query();
// Add conditions based on the presence of each filter parameter
if ($countryId) {
$query->where('country_id', $countryId);
}
if ($educationLevelId) {
$query->where('education_level_id', $educationLevelId);
}
if ($employmentTypeId) {
$query->where('employment_type_id', $employmentTypeId);
}
if ($languageId) {
$query->whereHas('languages', function ($query) use ($languageId) {
$query->where('language_id', $languageId);
});
}
if ($personId) {
$query->where('person_id', $personId);
}
if ($professionId) {
$query->where('profession_id', $professionId);
}
if ($religionId) {
$query->where('religion_id', $religionId);
}
// Eager load relationships
$query->with(['country', 'educationLevel', 'employmentType', 'languages', 'profession', 'religion']);
// Paginate the results with 10 items per page
$perPage = 10;
// Resolve the current page from the query parameters or default to 1
$currentPage = $request->input('page') ?? 1;
// Get the results
$filteredResults = $query->paginate($perPage, ['*'], 'page', $currentPage);
// Get all countries and professions (if needed for the view)
$additionalData = [
'countries' => Country::all(),
'educationLevels' => EducationLevel::all(),
'employmentTypes' => EmploymentType::all(),
'languages' => Language::all(),
'professions' => Profession::all(),
'religions' => Religion::all(),
];
return view('workerList.index', [
'filteredResults' => $filteredResults,
] + $additionalData);
}
/**
* Build query with filters.
*
* @param IlluminateDatabaseEloquentBuilder $query
* @param array $filters
* @return IlluminateDatabaseEloquentBuilder
*/
private function buildQueryWithFilters($query, array $filters)
{
foreach ($filters as $key => $value) {
$query->when($value, function ($query) use ($key, $value) {
return $query->where($key, $value);
});
}
return $query;
}
/**
* Get additional data for the view.
*
* @return array
*/
private function getAdditionalData()
{
return [
'countries' => Country::all(),
'educationLevels' => EducationLevel::all(),
'employmentTypes' => EmploymentType::all(),
'languages' => Language::all(),
'professions' => Profession::all(),
'religions' => Religion::all(),
];
}
route:
Route::get('/filter-results', [FilterController::class, 'filterResults'])->name('filter.results');
blade html:
<form method="get" action="{{ route('filter.results') }}" class="container p-4 rounded">
<div class="row">
<div class="col-lg-4">
<label for="country">Country:</label>
<select class="form-control input-lg b-0 br-1 border-light rounded-0" name="country_id" id="country">
<option value="">All</option>
@foreach ($countries as $country)
<option value="{{ $country->id }}" >{{ $country->name }}</option>
@endforeach
</select>
</div>
<div class="col-lg-4">
<label for="educationLevel">Education level:</label>
<select class="form-control input-lg b-0 br-1 border-light rounded-0" name="education_level_id" id="educationLevel">
<option value="">All</option>
@foreach ($educationLevels as $educationLevel)
<option value="{{ $educationLevel->id }}">{{ $educationLevel->name }}</option>
@endforeach
</select>
</div>
<div class="col-lg-4">
<label for="employmentType">Employment type:</label>
<select class="form-control input-lg b-0 br-1 border-light rounded-0" name="employment_type_id" id="employmentType">
<option value="">All</option>
@foreach ($employmentTypes as $employmentType)
<option value="{{ $employmentType->id }}">{{ $employmentType->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="row mt-3">
<div class="col-lg-4">
<label for="language">Language:</label>
<select class="form-control input-lg b-0 br-1 border-light rounded-0" name="language_id" id="language">
<option value="">All</option>
@foreach ($languages as $language)
<option value="{{ $language->id }}">{{ $language->name }}</option>
@endforeach
</select>
</div>
<div class="col-lg-4">
<label for="profession">Profession:</label>
<select class="form-control input-lg b-0 br-1 border-light rounded-0" name="profession_id" id="profession">
<option value="">All</option>
@foreach ($professions as $profession)
<option value="{{ $profession->id }}">{{ $profession->name }}</option>
@endforeach
</select>
</div>
<div class="col-lg-4">
<label for="religion">Religion:</label>
<select class="form-control input-lg b-0 br-1 border-light rounded-0" name="religion_id" id="religion">
<option value="">All</option>
@foreach ($religions as $religion)
<option value="{{ $religion->id }}">{{ $religion->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<button type="submit" class="btn btn-block btn-primary">Find workers</button>
</div>
</div>
</form>
2
Answers
In the end I solved it using vanilla JS:
You need to use js to do this
change this to