Feature #5 : Activate Filter Button on Table on Each Module Location
This commit is contained in:
parent
d73a006ce0
commit
ae1a6c6513
@ -17,7 +17,8 @@ class CitiesController extends Controller
|
||||
public $user;
|
||||
|
||||
public function index(){
|
||||
return view('location::cities.index');
|
||||
$provinces = Province::all();
|
||||
return view('location::cities.index', compact('provinces'));
|
||||
}
|
||||
|
||||
public function create(){
|
||||
@ -78,10 +79,14 @@ class CitiesController extends Controller
|
||||
// Apply search filter if provided
|
||||
if ($request->has('search') && !empty($request->get('search'))) {
|
||||
$search = $request->get('search');
|
||||
$search = explode('|', $search);
|
||||
if(isset($search[0]) &&!empty($search[0])){
|
||||
$query->where('province_code',$search[0]);
|
||||
}
|
||||
$query->where(function ($q) use ($search) {
|
||||
$q->where('code', 'LIKE', "%$search%");
|
||||
$q->orWhere('name', 'LIKE', "%$search%");
|
||||
$q->orWhereRelation('province','name', 'LIKE', "%$search%");
|
||||
$q->where('code', 'LIKE', "%$search[1]%");
|
||||
$q->orWhere('name', 'LIKE', "%$search[1]%");
|
||||
$q->orWhereRelation('province','name', 'LIKE', "%$search[1]%");
|
||||
});
|
||||
}
|
||||
|
||||
@ -108,7 +113,7 @@ class CitiesController extends Controller
|
||||
$filteredRecords = $query->count();
|
||||
|
||||
// Get the data for the current page
|
||||
$cities = $query->with('province')->get();
|
||||
$data = $query->with('province')->get();
|
||||
|
||||
// Calculate the page count
|
||||
$pageCount = ceil($totalRecords/$request->get('size'));
|
||||
@ -124,7 +129,7 @@ class CitiesController extends Controller
|
||||
'pageCount' => $pageCount,
|
||||
'page' => $currentPage,
|
||||
'totalCount' => $totalRecords,
|
||||
'data' => $cities,
|
||||
'data' => $data,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@ -16,7 +16,8 @@ class DistrictsController extends Controller
|
||||
public $user;
|
||||
|
||||
public function index(){
|
||||
return view('location::districts.index');
|
||||
$provinces = Province::all();
|
||||
return view('location::districts.index', compact('provinces'));
|
||||
}
|
||||
|
||||
public function create(){
|
||||
@ -78,11 +79,16 @@ class DistrictsController extends Controller
|
||||
// Apply search filter if provided
|
||||
if ($request->has('search') && !empty($request->get('search'))) {
|
||||
$search = $request->get('search');
|
||||
$search = explode('|', $search);
|
||||
if(isset($search[0]) &&!empty($search[0])){
|
||||
$query->where('province_code',$search[0]);
|
||||
}
|
||||
if(isset($search[1]) &&!empty($search[1])){
|
||||
$query->where('city_code',$search[1]);
|
||||
}
|
||||
$query->where(function ($q) use ($search) {
|
||||
$q->where('code', 'LIKE', "%$search%");
|
||||
$q->orWhere('name', 'LIKE', "%$search%");
|
||||
$q->orWhereRelation('city','name', 'LIKE', "%$search%");
|
||||
$q->orWhereRelation('city.province','name', 'LIKE', "%$search%");
|
||||
$q->where('code', 'LIKE', "%$search[2]%");
|
||||
$q->orWhere('name', 'LIKE', "%$search[2]%");
|
||||
});
|
||||
}
|
||||
|
||||
@ -109,7 +115,7 @@ class DistrictsController extends Controller
|
||||
$filteredRecords = $query->count();
|
||||
|
||||
// Get the data for the current page
|
||||
$cities = $query->with('city.province')->get();
|
||||
$data = $query->with('city.province')->get();
|
||||
|
||||
// Calculate the page count
|
||||
$pageCount = ceil($totalRecords/$request->get('size'));
|
||||
@ -125,7 +131,7 @@ class DistrictsController extends Controller
|
||||
'pageCount' => $pageCount,
|
||||
'page' => $currentPage,
|
||||
'totalCount' => $totalRecords,
|
||||
'data' => $cities,
|
||||
'data' => $data,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace Modules\Location\Http\Controllers;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use Illuminate\Http\RedirectResponse;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Http\Response;
|
||||
|
||||
class LocationController extends Controller
|
||||
{
|
||||
/**
|
||||
* Display a listing of the resource.
|
||||
*/
|
||||
public function index()
|
||||
{
|
||||
return view('location::index');
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the form for creating a new resource.
|
||||
*/
|
||||
public function create()
|
||||
{
|
||||
return view('location::create');
|
||||
}
|
||||
|
||||
/**
|
||||
* Store a newly created resource in storage.
|
||||
*/
|
||||
public function store(Request $request): RedirectResponse
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the specified resource.
|
||||
*/
|
||||
public function show($id)
|
||||
{
|
||||
return view('location::show');
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the form for editing the specified resource.
|
||||
*/
|
||||
public function edit($id)
|
||||
{
|
||||
return view('location::edit');
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the specified resource in storage.
|
||||
*/
|
||||
public function update(Request $request, $id): RedirectResponse
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the specified resource from storage.
|
||||
*/
|
||||
public function destroy($id)
|
||||
{
|
||||
//
|
||||
}
|
||||
}
|
||||
@ -107,7 +107,7 @@ class ProvincesController extends Controller
|
||||
$filteredRecords = $query->count();
|
||||
|
||||
// Get the data for the current page
|
||||
$provinces = $query->get();
|
||||
$data = $query->get();
|
||||
|
||||
// Calculate the page count
|
||||
$pageCount = ceil($totalRecords/$request->get('size'));
|
||||
@ -123,7 +123,7 @@ class ProvincesController extends Controller
|
||||
'pageCount' => $pageCount,
|
||||
'page' => $currentPage,
|
||||
'totalCount' => $totalRecords,
|
||||
'data' => $provinces,
|
||||
'data' => $data,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@ -4,42 +4,40 @@
|
||||
{{ Breadcrumbs::render('locations.cities') }}
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.ts-dropdown,
|
||||
.ts-control,
|
||||
.ts-control input {
|
||||
| font-size: 12 px;
|
||||
line-height: 14px !important;
|
||||
}
|
||||
</style
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<div class="grid">
|
||||
<div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="true" id="cities-table" data-api-url="{{ route('locations.cities.datatables') }}">
|
||||
<div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="cities-table" data-api-url="{{ route('locations.cities.datatables') }}">
|
||||
<div class="card-header py-5 flex-wrap">
|
||||
<h3 class="card-title">
|
||||
List of Cities
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2 lg:gap-5">
|
||||
<div class="flex">
|
||||
<label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
|
||||
<input placeholder="Search cities" id="search" type="text" value="">
|
||||
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2.5">
|
||||
<select class="select select-sm w-28">
|
||||
<option value="1">
|
||||
Active
|
||||
</option>
|
||||
<option value="2">
|
||||
Disabled
|
||||
</option>
|
||||
<option value="2">
|
||||
Pending
|
||||
</option>
|
||||
<select id="province_code" name="province_code" class="select select-sm w-[150px]">
|
||||
<option value="">Select Province</option>
|
||||
@foreach($provinces as $province)
|
||||
<option value="{{ $province->code }}">
|
||||
{{ $province->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<select class="select select-sm w-28">
|
||||
<option value="desc">
|
||||
Latest
|
||||
</option>
|
||||
<option value="asc">
|
||||
Oldest
|
||||
</option>
|
||||
</select>
|
||||
<button class="btn btn-sm btn-outline btn-primary">
|
||||
|
||||
<label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i>
|
||||
<input placeholder="Search Cities" id="search" type="text" value="">
|
||||
</label>
|
||||
<button class="search btn btn-sm btn-outline btn-primary">
|
||||
<i class="ki-filled ki-setting-4"> </i> <Filters></Filters>
|
||||
</button>
|
||||
<div class="h-[24px] border border-r-gray-200"> </div>
|
||||
@ -127,6 +125,7 @@
|
||||
<script type="module">
|
||||
const element = document.querySelector('#cities-table');
|
||||
const searchInput = document.getElementById('search');
|
||||
const searchButton = document.querySelector('.search');
|
||||
|
||||
const apiUrl = element.getAttribute('data-api-url');
|
||||
const dataTableOptions = {
|
||||
@ -173,9 +172,16 @@
|
||||
|
||||
let dataTable = new KTDataTable(element, dataTableOptions);
|
||||
// Custom search functionality
|
||||
searchInput.addEventListener('input', function () {
|
||||
const searchValue = this.value.trim();
|
||||
dataTable.search(searchValue, true);
|
||||
searchInput.addEventListener('keyup', function () {
|
||||
const _province = document.getElementById('province_code').value;
|
||||
const _search = searchInput.value.trim();
|
||||
dataTable.search(`${_province}|${_search}`, true);
|
||||
});
|
||||
|
||||
searchButton.addEventListener('click', function () {
|
||||
const _province = document.getElementById('province_code').value;
|
||||
const _search = searchInput.value.trim();
|
||||
dataTable.search(`${_province}|${_search}`, true);
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<div class="card pb-2.5">
|
||||
<div class="card-header" id="basic_settings">
|
||||
<h3 class="card-title">
|
||||
{{ isset($district->id) ? 'Edit' : 'Add' }} City
|
||||
{{ isset($district->id) ? 'Edit' : 'Add' }} District
|
||||
</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="{{ route('locations.districts.index') }}" class="btn btn-xs btn-info">Back</a>
|
||||
|
||||
@ -4,42 +4,44 @@
|
||||
{{ Breadcrumbs::render('locations.districts') }}
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.ts-dropdown,
|
||||
.ts-control,
|
||||
.ts-control input {
|
||||
| font-size: 12 px;
|
||||
line-height: 14px !important;
|
||||
}
|
||||
</style
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<div class="grid">
|
||||
<div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="true" id="districts-table" data-api-url="{{ route('locations.districts.datatables') }}">
|
||||
<div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="districts-table" data-api-url="{{ route('locations.districts.datatables') }}">
|
||||
<div class="card-header py-5 flex-wrap">
|
||||
<h3 class="card-title">
|
||||
List of Districts
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2 lg:gap-5">
|
||||
<div class="flex">
|
||||
<label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
|
||||
<input placeholder="Search districts" id="search" type="text" value="">
|
||||
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2.5">
|
||||
<select class="select select-sm w-28">
|
||||
<option value="1">
|
||||
Active
|
||||
</option>
|
||||
<option value="2">
|
||||
Disabled
|
||||
</option>
|
||||
<option value="2">
|
||||
Pending
|
||||
</option>
|
||||
<select id="province_code" name="province_code" class="select select-sm w-[150px]">
|
||||
<option value="">Select Province</option>
|
||||
@foreach($provinces as $province)
|
||||
<option value="{{ $province->code }}">
|
||||
{{ $province->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<select class="select select-sm w-28">
|
||||
<option value="desc">
|
||||
Latest
|
||||
</option>
|
||||
<option value="asc">
|
||||
Oldest
|
||||
</option>
|
||||
|
||||
<select id="city_code" name="city_code" class="select select-sm w-[250px]">
|
||||
<option value="">Select City</option>
|
||||
</select>
|
||||
<button class="btn btn-sm btn-outline btn-primary">
|
||||
|
||||
<label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i>
|
||||
<input placeholder="Search Districts" id="search" type="text" value="">
|
||||
</label>
|
||||
<button class="search btn btn-sm btn-outline btn-primary">
|
||||
<i class="ki-filled ki-setting-4"> </i> <Filters></Filters>
|
||||
</button>
|
||||
<div class="h-[24px] border border-r-gray-200"> </div>
|
||||
@ -131,11 +133,13 @@
|
||||
<script type="module">
|
||||
const element = document.querySelector('#districts-table');
|
||||
const searchInput = document.getElementById('search');
|
||||
const searchButton = document.querySelector('.search');
|
||||
|
||||
const apiUrl = element.getAttribute('data-api-url');
|
||||
const dataTableOptions = {
|
||||
apiEndpoint: apiUrl,
|
||||
pageSize: 5,
|
||||
responsive: true,
|
||||
columns: {
|
||||
select: {
|
||||
render: (item, data, context) => {
|
||||
@ -183,9 +187,18 @@
|
||||
|
||||
let dataTable = new KTDataTable(element, dataTableOptions);
|
||||
// Custom search functionality
|
||||
searchInput.addEventListener('input', function () {
|
||||
const searchValue = this.value.trim();
|
||||
dataTable.search(searchValue, true);
|
||||
searchInput.addEventListener('keyup', function () {
|
||||
const _province = document.getElementById('province_code').value;
|
||||
const _city = document.getElementById('city_code').value;
|
||||
const _search = searchInput.value.trim();
|
||||
dataTable.search(`${_province}|${_city}|${_search}`, true);
|
||||
});
|
||||
|
||||
searchButton.addEventListener('click', function () {
|
||||
const _province = document.getElementById('province_code').value;
|
||||
const _city = document.getElementById('city_code').value;
|
||||
const _search = searchInput.value.trim();
|
||||
dataTable.search(`${_province}|${_city}|${_search}`, true);
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<div class="grid">
|
||||
<div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="true" id="provinces-table" data-api-url="{{ route('locations.provinces.datatables') }}">
|
||||
<div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="provinces-table" data-api-url="{{ route('locations.provinces.datatables') }}">
|
||||
<div class="card-header py-5 flex-wrap">
|
||||
<h3 class="card-title">
|
||||
List of Provinces
|
||||
@ -165,7 +165,9 @@
|
||||
// Custom search functionality
|
||||
searchInput.addEventListener('input', function () {
|
||||
const searchValue = this.value.trim();
|
||||
dataTable.search(searchValue, true);
|
||||
if(searchValue.length > 3) {
|
||||
dataTable.search(searchValue, true);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
Loading…
Reference in New Issue
Block a user