daengdeni/location
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature #6 : Update

Browse Source 
- Add Get Village by District Code
- Add Get Postal Code by Village Code
- Update Filter on Villages, District, and City, add dropdown to select province, city, district before filter for faster filter
This commit is contained in:
Daeng Deni Mardaeni 2024-08-13 10:42:03 +07:00
parent b75db02f27
commit 4987002a9d
8 changed files with 469 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/Http/Controllers/VillagesController.php
View File

@ -158,4 +158,12 @@
]); ]);
} }
public function getVillagesByDistrictId($id){
return response()->json(Village::where('district_code', $id)->get());
}
public function getPostalCodesByVillageId($id){
return response()->json(Village::where('code', $id)->first());
}
} }

178
resources/assets/js/app.js
View File

@ -9,6 +9,8 @@ let settings = {
const provinceSelect = document.querySelector('#province_code'); const provinceSelect = document.querySelector('#province_code');
const citySelect = document.querySelector('#city_code'); const citySelect = document.querySelector('#city_code');
const districtSelect = document.querySelector('#district_code'); const districtSelect = document.querySelector('#district_code');
const villageSelect = document.querySelector('#village_code');
const postalCode = document.querySelector('#postal_code');
if (provinceSelect && !citySelect) { if (provinceSelect && !citySelect) {
new TomSelect('#province_code', settings); new TomSelect('#province_code', settings);
@ -46,9 +48,9 @@ if (citySelect && !districtSelect) {
}); });
} }
if (districtSelect) { if (districtSelect && !villageSelect) {
let tomdistrict = new TomSelect('#district_code', settings); let tomdistrict = new TomSelect('#district_code', settings);
let tomcities = new TomSelect('#city_code',{ let tomcities = new TomSelect('#city_code', {
...settings, ...settings,
onChange: function (value) { onChange: function (value) {
console.log('City selected:', value); console.log('City selected:', value);
@ -131,3 +133,175 @@ if (districtSelect) {
} }
}); });
} }
if (villageSelect) {
let tomvillage = new TomSelect('#village_code', settings);
let tomdistrict = new TomSelect('#district_code', {
...settings,
onChange: function (value) {
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomvillage) {
tomvillage.destroy();
}
let url = 'locations/villages/district/' + value;
fetch(url)
.then(response => response.json())
.then(data => {
const options = data.map(item => ({
value: item.code,
text: item.name
}));
tomvillage = new TomSelect('#village_code', {
...settings, // Spread existing settings (including createOnBlur: false)
options: options
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
});
let tomcities = new TomSelect('#city_code', {
...settings,
onChange: function (value) {
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomdistrict) {
tomdistrict.destroy();
}
let url = 'locations/districts/city/' + value;
fetch(url)
.then(response => response.json())
.then(data => {
const options = data.map(item => ({
value: item.code,
text: item.name
}));
tomdistrict = new TomSelect('#district_code', {
...settings, // Spread existing settings (including createOnBlur: false)
options: options,
onChange: function (value) {
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomvillage) {
tomvillage.destroy();
}
let url = 'locations/villages/district/' + value;
fetch(url)
.then(response => response.json())
.then(data => {
const options = data.map(item => ({
value: item.code,
text: item.name
}));
tomvillage = new TomSelect('#village_code', {
...settings, // Spread existing settings (including createOnBlur: false)
options: options
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
});
let tomprovince = new TomSelect('#province_code', {
...settings, // Spread existing settings
onChange: function (value) {
console.log('Province selected:', value);
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomcities) {
tomcities.destroy();
}
let url = 'locations/cities/province/' + value;
fetch(url)
.then(response => response.json())
.then(data => {
const options = data.map(item => ({
value: item.code,
text: item.name
}));
tomcities = new TomSelect('#city_code', {
...settings, // Spread existing settings (including createOnBlur: false)
options: options,
onChange: function (value) {
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomdistrict) {
tomdistrict.destroy();
}
let url = 'locations/districts/city/' + value;
fetch(url)
.then(response => response.json())
.then(data => {
const options = data.map(item => ({
value: item.code,
text: item.name
}));
tomdistrict = new TomSelect('#district_code', {
...settings, // Spread existing settings (including createOnBlur: false)
options: options,
onChange: function (value) {
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomvillage) {
tomvillage.destroy();
}
let url = 'locations/villages/district/' + value;
fetch(url)
.then(response => response.json())
.then(data => {
const options = data.map(item => ({
value: item.code,
text: item.name
}));
tomvillage = new TomSelect('#village_code', {
...settings, // Spread existing settings (including createOnBlur: false)
options: options
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
});
if (postalCode) {
villageSelect.addEventListener('change', function (event) {
fetch('locations/villages/postal-code/' + event.target.value)
.then(response => response.json())
.then(data => {
postalCode.value = data.postal_code;
})
});
}
}

123
resources/views/cities/index.blade.php
View File

@ -16,70 +16,69 @@
@endpush @endpush
@section('content') @section('content')
<div class="container-fluid"> <div class="grid">
<div class="grid"> <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 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">
<div class="card-header py-5 flex-wrap"> <h3 class="card-title">
<h3 class="card-title"> List of Cities
List of Cities </h3>
</h3> <div class="flex flex-wrap gap-2 lg:gap-5">
<div class="flex flex-wrap gap-2 lg:gap-5"> <div class="flex flex-wrap gap-2.5">
<div class="flex flex-wrap gap-2.5"> <select id="province_code" name="province_code" class="select select-sm w-[150px]">
<select id="province_code" name="province_code" class="select select-sm w-[150px]"> <option value="">Select Province</option>
<option value="">Select Province</option> @foreach($provinces as $province)
@foreach($provinces as $province) <option value="{{ $province->code }}">
<option value="{{ $province->code }}"> {{ $province->name }}
{{ $province->name }} </option>
</option> @endforeach
@endforeach </select>
</select>
<label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i> <label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i>
<input placeholder="Search Cities" id="search" type="text" value=""> <input placeholder="Search Cities" id="search" type="text" value="">
</label> </label>
<button class="search btn btn-sm btn-outline btn-primary"> <button class="search btn btn-sm btn-outline btn-primary">
<i class="ki-filled ki-setting-4"> </i> <Filters></Filters> <i class="ki-filled ki-setting-4"> </i>
</button> <Filters></Filters>
<div class="h-[24px] border border-r-gray-200"> </div> </button>
<a class="btn btn-sm btn-light" href="{{ route('locations.cities.export') }}"> Export to Excel </a> <div class="h-[24px] border border-r-gray-200"></div>
<a class="btn btn-sm btn-primary" href="{{ route('locations.cities.create') }}"> Add City </a> <a class="btn btn-sm btn-light" href="{{ route('locations.cities.export') }}"> Export to Excel </a>
</div> <a class="btn btn-sm btn-primary" href="{{ route('locations.cities.create') }}"> Add City </a>
</div> </div>
</div> </div>
<div class="card-body"> </div>
<div class="scrollable-x-auto"> <div class="card-body">
<table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true"> <div class="scrollable-x-auto">
<thead> <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
<tr> <thead>
<th class="w-14"> <tr>
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/> <th class="w-14">
</th> <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
<th class="min-w-[250px]" data-datatable-column="code"> </th>
<span class="sort"> <span class="sort-label"> Code </span> <th class="min-w-[250px]" data-datatable-column="code">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Code </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="name"> </th>
<span class="sort"> <span class="sort-label"> City </span> <th class="min-w-[250px]" data-datatable-column="name">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> City </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="province"> </th>
<span class="sort"> <span class="sort-label"> Province </span> <th class="min-w-[250px]" data-datatable-column="province">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Province </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th> </th>
</tr> <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
</thead> </tr>
</table> </thead>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
</div> </div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium"> <div class="flex items-center gap-4">
<div class="flex items-center gap-2"> <span data-datatable-info="true"> </span>
Show <div class="pagination" data-datatable-pagination="true">
<select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true"> </span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -94,7 +93,7 @@
function deleteData(data) { function deleteData(data) {
Swal.fire({ Swal.fire({
title: 'Are you sure?', title: 'Are you sure?',
text: "You won't be able to revert this!" , text: "You won't be able to revert this!",
icon: 'warning', icon: 'warning',
showCancelButton: true, showCancelButton: true,
confirmButtonColor: '#3085d6', confirmButtonColor: '#3085d6',
@ -111,7 +110,7 @@
$.ajax(`locations/cities/${data}`, { $.ajax(`locations/cities/${data}`, {
type: 'DELETE' type: 'DELETE'
}).then((response) => { }).then((response) => {
swal.fire('Deleted!', 'User has been deleted.','success').then(() => { swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => {
window.location.reload(); window.location.reload();
}); });
}).catch((error) => { }).catch((error) => {

137
resources/views/districts/index.blade.php
View File

@ -16,78 +16,77 @@
@endpush @endpush
@section('content') @section('content')
<div class="container-fluid"> <div class="grid">
<div class="grid"> <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 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">
<div class="card-header py-5 flex-wrap"> <h3 class="card-title">
<h3 class="card-title"> List of Districts
List of Districts </h3>
</h3> <div class="flex flex-wrap gap-2 lg:gap-5">
<div class="flex flex-wrap gap-2 lg:gap-5"> <div class="flex flex-wrap gap-2.5">
<div class="flex flex-wrap gap-2.5"> <select id="province_code" name="province_code" class="select select-sm w-[150px]">
<select id="province_code" name="province_code" class="select select-sm w-[150px]"> <option value="">Select Province</option>
<option value="">Select Province</option> @foreach($provinces as $province)
@foreach($provinces as $province) <option value="{{ $province->code }}">
<option value="{{ $province->code }}"> {{ $province->name }}
{{ $province->name }} </option>
</option> @endforeach
@endforeach </select>
</select>
<select id="city_code" name="city_code" class="select select-sm w-[250px]"> <select id="city_code" name="city_code" class="select select-sm w-[250px]">
<option value="">Select City</option> <option value="">Select City</option>
</select> </select>
<label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i> <label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i>
<input placeholder="Search Districts" id="search" type="text" value=""> <input placeholder="Search Districts" id="search" type="text" value="">
</label> </label>
<button class="search btn btn-sm btn-outline btn-primary"> <button class="search btn btn-sm btn-outline btn-primary">
<i class="ki-filled ki-setting-4"> </i> <Filters></Filters> <i class="ki-filled ki-setting-4"> </i>
</button> <Filters></Filters>
<div class="h-[24px] border border-r-gray-200"> </div> </button>
<a class="btn btn-sm btn-light" href="{{ route('locations.districts.export') }}"> Export to Excel </a> <div class="h-[24px] border border-r-gray-200"></div>
<a class="btn btn-sm btn-primary" href="{{ route('locations.districts.create') }}"> Add District </a> <a class="btn btn-sm btn-light" href="{{ route('locations.districts.export') }}"> Export to Excel </a>
</div> <a class="btn btn-sm btn-primary" href="{{ route('locations.districts.create') }}"> Add District </a>
</div> </div>
</div> </div>
<div class="card-body"> </div>
<div class="scrollable-x-auto"> <div class="card-body">
<table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true"> <div class="scrollable-x-auto">
<thead> <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
<tr> <thead>
<th class="w-14"> <tr>
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/> <th class="w-14">
</th> <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
<th class="min-w-[250px]" data-datatable-column="code"> </th>
<span class="sort"> <span class="sort-label"> Code </span> <th class="min-w-[250px]" data-datatable-column="code">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Code </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="name"> </th>
<span class="sort"> <span class="sort-label"> District </span> <th class="min-w-[250px]" data-datatable-column="name">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> District </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="city"> </th>
<span class="sort"> <span class="sort-label"> City </span> <th class="min-w-[250px]" data-datatable-column="city">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> City </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="province"> </th>
<span class="sort"> <span class="sort-label"> Province </span> <th class="min-w-[250px]" data-datatable-column="province">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Province </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th> </th>
</tr> <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
</thead> </tr>
</table> </thead>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
</div> </div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium"> <div class="flex items-center gap-4">
<div class="flex items-center gap-2"> <span data-datatable-info="true"> </span>
Show <div class="pagination" data-datatable-pagination="true">
<select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true"> </span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -102,7 +101,7 @@
function deleteData(data) { function deleteData(data) {
Swal.fire({ Swal.fire({
title: 'Are you sure?', title: 'Are you sure?',
text: "You won't be able to revert this!" , text: "You won't be able to revert this!",
icon: 'warning', icon: 'warning',
showCancelButton: true, showCancelButton: true,
confirmButtonColor: '#3085d6', confirmButtonColor: '#3085d6',
@ -119,7 +118,7 @@
$.ajax(`locations/districts/${data}`, { $.ajax(`locations/districts/${data}`, {
type: 'DELETE' type: 'DELETE'
}).then((response) => { }).then((response) => {
swal.fire('Deleted!', 'User has been deleted.','success').then(() => { swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => {
window.location.reload(); window.location.reload();
}); });
}).catch((error) => { }).catch((error) => {

143
resources/views/provinces/index.blade.php
View File

@ -5,79 +5,78 @@
@endsection @endsection
@section('content') @section('content')
<div class="container-fluid"> <div class="grid">
<div class="grid"> <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 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">
<div class="card-header py-5 flex-wrap"> <h3 class="card-title">
<h3 class="card-title"> List of Provinces
List of Provinces </h3>
</h3> <div class="flex flex-wrap gap-2 lg:gap-5">
<div class="flex flex-wrap gap-2 lg:gap-5"> <div class="flex">
<div class="flex"> <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
<label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i> <input placeholder="Search provinces" id="search" type="text" value="">
<input placeholder="Search provinces" id="search" type="text" value="">
</label> </label>
</div> </div>
<div class="flex flex-wrap gap-2.5"> <div class="flex flex-wrap gap-2.5">
<select class="select select-sm w-28"> <select class="select select-sm w-28">
<option value="1"> <option value="1">
Active Active
</option> </option>
<option value="2"> <option value="2">
Disabled Disabled
</option> </option>
<option value="2"> <option value="2">
Pending Pending
</option> </option>
</select> </select>
<select class="select select-sm w-28"> <select class="select select-sm w-28">
<option value="desc"> <option value="desc">
Latest Latest
</option> </option>
<option value="asc"> <option value="asc">
Oldest Oldest
</option> </option>
</select> </select>
<button class="btn btn-sm btn-outline btn-primary"> <button class="btn btn-sm btn-outline btn-primary">
<i class="ki-filled ki-setting-4"> </i> <Filters></Filters> <i class="ki-filled ki-setting-4"> </i>
</button> <Filters></Filters>
<div class="h-[24px] border border-r-gray-200"> </div> </button>
<a class="btn btn-sm btn-light" href="{{ route('locations.provinces.export') }}"> Export to Excel </a> <div class="h-[24px] border border-r-gray-200"></div>
<a class="btn btn-sm btn-primary" href="{{ route('locations.provinces.create') }}"> Add Province </a> <a class="btn btn-sm btn-light" href="{{ route('locations.provinces.export') }}"> Export to Excel </a>
</div> <a class="btn btn-sm btn-primary" href="{{ route('locations.provinces.create') }}"> Add Province </a>
</div> </div>
</div> </div>
<div class="card-body"> </div>
<div class="scrollable-x-auto"> <div class="card-body">
<table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true"> <div class="scrollable-x-auto">
<thead> <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
<tr> <thead>
<th class="w-14"> <tr>
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/> <th class="w-14">
</th> <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
<th class="min-w-[250px]" data-datatable-column="code"> </th>
<span class="sort"> <span class="sort-label"> Code </span> <th class="min-w-[250px]" data-datatable-column="code">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Code </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="name"> </th>
<span class="sort"> <span class="sort-label"> Province </span> <th class="min-w-[250px]" data-datatable-column="name">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Province </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th> </th>
</tr> <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
</thead> </tr>
</table> </thead>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
</div> </div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium"> <div class="flex items-center gap-4">
<div class="flex items-center gap-2"> <span data-datatable-info="true"> </span>
Show <div class="pagination" data-datatable-pagination="true">
<select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true"> </span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -92,7 +91,7 @@
function deleteData(data) { function deleteData(data) {
Swal.fire({ Swal.fire({
title: 'Are you sure?', title: 'Are you sure?',
text: "You won't be able to revert this!" , text: "You won't be able to revert this!",
icon: 'warning', icon: 'warning',
showCancelButton: true, showCancelButton: true,
confirmButtonColor: '#3085d6', confirmButtonColor: '#3085d6',
@ -109,7 +108,7 @@
$.ajax(`locations/provinces/${data}`, { $.ajax(`locations/provinces/${data}`, {
type: 'DELETE' type: 'DELETE'
}).then((response) => { }).then((response) => {
swal.fire('Deleted!', 'User has been deleted.','success').then(() => { swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => {
window.location.reload(); window.location.reload();
}); });
}).catch((error) => { }).catch((error) => {
@ -165,7 +164,7 @@
// Custom search functionality // Custom search functionality
searchInput.addEventListener('input', function () { searchInput.addEventListener('input', function () {
const searchValue = this.value.trim(); const searchValue = this.value.trim();
if(searchValue.length > 3) { if (searchValue.length > 3) {
dataTable.search(searchValue, true); dataTable.search(searchValue, true);
} }
}); });

167
resources/views/villages/index.blade.php
View File

@ -16,96 +16,94 @@
@endpush @endpush
@section('content') @section('content')
<div class="container-fluid"> <div class="grid">
<div class="grid"> <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="villages-table" data-api-url="{{ route('locations.villages.datatables') }}">
<div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="villages-table" data-api-url="{{ route('locations.villages.datatables') }}"> <div class="card-header py-5 flex-wrap">
<div class="card-header py-5 flex-wrap"> <h3 class="card-title">
<h3 class="card-title"> List of Vilalges
List of Vilalges </h3>
</h3> <div class="flex flex-wrap gap-2">
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-1.5">
<div class="flex flex-wrap gap-1.5"> <select id="province_code" name="province_code" class="select select-sm w-[150px]">
<select id="province_code" name="province_code" class="select select-sm w-[150px]"> <option value="">Select Province</option>
<option value="">Select Province</option> @foreach($provinces as $province)
@foreach($provinces as $province) <option value="{{ $province->code }}">
<option value="{{ $province->code }}"> {{ $province->name }}
{{ $province->name }} </option>
</option> @endforeach
@endforeach </select>
</select>
<select id="city_code" name="city_code" class="select select-sm w-[250px]"> <select id="city_code" name="city_code" class="select select-sm w-[250px]">
<option value="">Select City</option> <option value="">Select City</option>
</select> </select>
<select id="district_code" name="district_code" class="select select-sm w-[150px]"> <select id="district_code" name="district_code" class="select select-sm w-[150px]">
<option value="">Select District</option> <option value="">Select District</option>
</select> </select>
<label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i> <label class="input input-sm w-[150px]"> <i class="ki-filled ki-magnifier"> </i>
<input placeholder="Search villages" id="search" type="text" value=""> <input placeholder="Search villages" id="search" type="text" value="">
</label> </label>
<button class="search btn btn-sm btn-outline btn-primary"> <button class="search btn btn-sm btn-outline btn-primary">
<i class="ki-filled ki-setting-4"> </i> <i class="ki-filled ki-setting-4"> </i>
<Filters></Filters> <Filters></Filters>
</button> </button>
<div class="h-[24px] border border-r-gray-200"></div> <div class="h-[24px] border border-r-gray-200"></div>
<a class="btn btn-sm btn-light" href="{{ route('locations.villages.export') }}"> Export to Excel </a> <a class="btn btn-sm btn-light" href="{{ route('locations.villages.export') }}"> Export to Excel </a>
<a class="btn btn-sm btn-primary" href="{{ route('locations.villages.create') }}"> Add District </a> <a class="btn btn-sm btn-primary" href="{{ route('locations.villages.create') }}"> Add District </a>
</div>
</div> </div>
</div> </div>
<div class="card-body"> </div>
<div class="scrollable-x-auto"> <div class="card-body">
<table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true"> <div class="scrollable-x-auto">
<thead> <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
<tr> <thead>
<th class="w-14"> <tr>
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/> <th class="w-14">
</th> <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
<th class="min-w-[100px]" data-datatable-column="code"> </th>
<span class="sort"> <span class="sort-label"> Code </span> <th class="min-w-[100px]" data-datatable-column="code">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Code </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="name"> </th>
<span class="sort"> <span class="sort-label"> Village </span> <th class="min-w-[250px]" data-datatable-column="name">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Village </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="alt_name"> </th>
<span class="sort"> <span class="sort-label"> Alternative Name </span> <th class="min-w-[250px]" data-datatable-column="alt_name">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Alternative Name </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[50px]" data-datatable-column="postal_code"> </th>
<span class="sort"> <span class="sort-label"> Postal Code </span> <th class="min-w-[50px]" data-datatable-column="postal_code">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Postal Code </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="district"> </th>
<span class="sort"> <span class="sort-label"> District </span> <th class="min-w-[250px]" data-datatable-column="district">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> District </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="city"> </th>
<span class="sort"> <span class="sort-label"> City </span> <th class="min-w-[250px]" data-datatable-column="city">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> City </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[250px]" data-datatable-column="province"> </th>
<span class="sort"> <span class="sort-label"> Province </span> <th class="min-w-[250px]" data-datatable-column="province">
<span class="sort-icon"> </span> </span> <span class="sort"> <span class="sort-label"> Province </span>
</th> <span class="sort-icon"> </span> </span>
<th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th> </th>
</tr> <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
</thead> </tr>
</table> </thead>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
</div> </div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium"> <div class="flex items-center gap-4">
<div class="flex items-center gap-2"> <span data-datatable-info="true"> </span>
Show <div class="pagination" data-datatable-pagination="true">
<select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true"> </span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -120,7 +118,7 @@
function deleteData(data) { function deleteData(data) {
Swal.fire({ Swal.fire({
title: 'Are you sure?', title: 'Are you sure?',
text: "You won't be able to revert this!" , text: "You won't be able to revert this!",
icon: 'warning', icon: 'warning',
showCancelButton: true, showCancelButton: true,
confirmButtonColor: '#3085d6', confirmButtonColor: '#3085d6',
@ -214,6 +212,7 @@
}; };
let dataTable = new KTDataTable(element, dataTableOptions); let dataTable = new KTDataTable(element, dataTableOptions);
dataTable.showSpinner();
// Custom search functionality // Custom search functionality
searchInput.addEventListener('keyup', function () { searchInput.addEventListener('keyup', function () {
const _province = document.getElementById('province_code').value; const _province = document.getElementById('province_code').value;

4
routes/api.php
View File

@ -13,7 +13,3 @@ use Modules\Location\Http\Controllers\LocationController;
* is assigned the "api" middleware group. Enjoy building your API! * is assigned the "api" middleware group. Enjoy building your API!
* *
*/ */
Route::middleware(['auth:sanctum'])->prefix('v1')->group(function () {
Route::apiResource('location', LocationController::class)->names('location');
});

2
routes/web.php
View File

@ -47,6 +47,8 @@ use Illuminate\Support\Facades\Route;
Route::get('restore/{id}', [VillagesController::class, 'restore'])->name('restore'); Route::get('restore/{id}', [VillagesController::class, 'restore'])->name('restore');
Route::get('datatables', [VillagesController::class, 'dataForDatatables'])->name('datatables'); Route::get('datatables', [VillagesController::class, 'dataForDatatables'])->name('datatables');
Route::get('export', [VillagesController ::class, 'export'])->name('export'); Route::get('export', [VillagesController ::class, 'export'])->name('export');
Route::get('district/{district_code}', [VillagesController::class, 'getVillagesByDistrictId'])->name('district');
Route::get('postal-code/{village_code}', [VillagesController::class, 'getPostalCodesByVillageId'])->name('postalcode');
}); });
Route::resource('villages', VillagesController::class); Route::resource('villages', VillagesController::class);
}); });