Feature #5 : Activate Filter Button on Table on Each Module Location

app/Http/Controllers/CitiesController.php

@@ -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->where('code', 'LIKE', "%$search[1]%");
-                $q->orWhere('name', 'LIKE', "%$search%");
+                $q->orWhere('name', 'LIKE', "%$search[1]%");
-                $q->orWhereRelation('province','name', 'LIKE', "%$search%");
+                $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,
         ]);
     }
 

app/Http/Controllers/DistrictsController.php

@@ -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->where('code', 'LIKE', "%$search[2]%");
-                $q->orWhere('name', 'LIKE', "%$search%");
+                $q->orWhere('name', 'LIKE', "%$search[2]%");
-                $q->orWhereRelation('city','name', 'LIKE', "%$search%");
-                $q->orWhereRelation('city.province','name', 'LIKE', "%$search%");
             });
         }
 
@@ -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,
         ]);
     }
 

app/Http/Controllers/LocationController.php

@@ -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)
-    {
-        //
-    }
-}

app/Http/Controllers/ProvincesController.php

@@ -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,
         ]);
     }
 

resources/views/cities/index.blade.php

@@ -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">
+                            <select id="province_code" name="province_code" class="select select-sm w-[150px]">
-                                <option value="1">
+                                <option value="">Select Province</option>
-                                    Active
+                                @foreach($provinces as $province)
-                                </option>
+                                    <option value="{{ $province->code }}">
-                                <option value="2">
+                                        {{ $province->name }}
-                                    Disabled
+                                    </option>
-                                </option>
+                                @endforeach
-                                <option value="2">
-                                    Pending
-                                </option>
                             </select>
-                            <select class="select select-sm w-28">
+
-                                <option value="desc">
+                            <label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i>
-                                    Latest
+                                <input placeholder="Search Cities" id="search" type="text" value="">
-                                </option>
+                            </label>
-                                <option value="asc">
+                            <button class="search btn btn-sm btn-outline btn-primary">
-                                    Oldest
-                                </option>
-                            </select>
-                            <button class="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 () {
+        searchInput.addEventListener('keyup', function () {
-            const searchValue = this.value.trim();
+            const _province = document.getElementById('province_code').value;
-            dataTable.search(searchValue, true);
+            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

resources/views/districts/create.blade.php

@@ -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>

resources/views/districts/index.blade.php

@@ -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">
+                            <select id="province_code" name="province_code" class="select select-sm w-[150px]">
-                                <option value="1">
+                                <option value="">Select Province</option>
-                                    Active
+                                @foreach($provinces as $province)
-                                </option>
+                                    <option value="{{ $province->code }}">
-                                <option value="2">
+                                        {{ $province->name }}
-                                    Disabled
+                                    </option>
-                                </option>
+                                @endforeach
-                                <option value="2">
-                                    Pending
-                                </option>
                             </select>
-                            <select class="select select-sm w-28">
+
-                                <option value="desc">
+                            <select id="city_code" name="city_code" class="select select-sm w-[250px]">
-                                    Latest
+                                <option value="">Select City</option>
-                                </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 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 () {
+        searchInput.addEventListener('keyup', function () {
-            const searchValue = this.value.trim();
+            const _province = document.getElementById('province_code').value;
-            dataTable.search(searchValue, true);
+            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

resources/views/provinces/index.blade.php

@@ -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