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

2024-08-10 20:13:04 +07:00
parent d73a006ce0
commit ae1a6c6513
8 changed files with 107 additions and 142 deletions
--- a/resources/views/cities/index.blade.php
+++ b/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">
-                                <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
--- a/resources/views/districts/create.blade.php
+++ b/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>
--- a/resources/views/districts/index.blade.php
+++ b/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">
-                                <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
--- a/resources/views/provinces/index.blade.php
+++ b/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