From 4987002a9dd989497e9d09b0be2ce2017fe6bbc4 Mon Sep 17 00:00:00 2001 From: Daeng Deni Mardaeni Date: Tue, 13 Aug 2024 10:42:03 +0700 Subject: [PATCH] Feature #6 : Update - 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 --- app/Http/Controllers/VillagesController.php | 8 + resources/assets/js/app.js | 178 +++++++++++++++++++- resources/views/cities/index.blade.php | 123 +++++++------- resources/views/districts/index.blade.php | 137 ++++++++------- resources/views/provinces/index.blade.php | 143 ++++++++-------- resources/views/villages/index.blade.php | 167 +++++++++--------- routes/api.php | 4 - routes/web.php | 2 + 8 files changed, 469 insertions(+), 293 deletions(-) diff --git a/app/Http/Controllers/VillagesController.php b/app/Http/Controllers/VillagesController.php index e55afde..88726f1 100644 --- a/app/Http/Controllers/VillagesController.php +++ b/app/Http/Controllers/VillagesController.php @@ -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()); + } + } diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index f2af0c2..93396b3 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -9,6 +9,8 @@ let settings = { const provinceSelect = document.querySelector('#province_code'); const citySelect = document.querySelector('#city_code'); const districtSelect = document.querySelector('#district_code'); +const villageSelect = document.querySelector('#village_code'); +const postalCode = document.querySelector('#postal_code'); if (provinceSelect && !citySelect) { 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 tomcities = new TomSelect('#city_code',{ + let tomcities = new TomSelect('#city_code', { ...settings, onChange: function (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; + }) + }); + } +} + + diff --git a/resources/views/cities/index.blade.php b/resources/views/cities/index.blade.php index 143f75e..10229d7 100644 --- a/resources/views/cities/index.blade.php +++ b/resources/views/cities/index.blade.php @@ -16,70 +16,69 @@ @endpush @section('content') -
-
-
-
-

- List of Cities -

-
-
- +
+
+
+

+ List of Cities +

+
+
+ - - -
- Export to Excel - Add City -
+ + +
+ Export to Excel + Add City
-
-
- - - - - - - - - - -
- - - Code - - - City - - - Province - - Action
+
+
+
+ + + + + + + + + + +
+ + + Code + + + City + + + Province + + Action
+
+
+
+ Show + per page
-
-
- Show - per page -
-
- - +
+ +
@@ -94,7 +93,7 @@ function deleteData(data) { Swal.fire({ title: 'Are you sure?', - text: "You won't be able to revert this!" , + text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', @@ -111,7 +110,7 @@ $.ajax(`locations/cities/${data}`, { type: 'DELETE' }).then((response) => { - swal.fire('Deleted!', 'User has been deleted.','success').then(() => { + swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => { window.location.reload(); }); }).catch((error) => { diff --git a/resources/views/districts/index.blade.php b/resources/views/districts/index.blade.php index 03cfff0..8022dbc 100644 --- a/resources/views/districts/index.blade.php +++ b/resources/views/districts/index.blade.php @@ -16,78 +16,77 @@ @endpush @section('content') -
-
-
-
-

- List of Districts -

-
-
- +
+
+
+

+ List of Districts +

+
+
+ - + - - -
- Export to Excel - Add District -
+ + +
+ Export to Excel + Add District
-
-
- - - - - - - - - - - -
- - - Code - - - District - - - City - - - Province - - Action
+
+
+
+ + + + + + + + + + + +
+ + + Code + + + District + + + City + + + Province + + Action
+
+
+
+ Show + per page
-
-
- Show - per page -
-
- - +
+ +
@@ -102,7 +101,7 @@ function deleteData(data) { Swal.fire({ title: 'Are you sure?', - text: "You won't be able to revert this!" , + text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', @@ -119,7 +118,7 @@ $.ajax(`locations/districts/${data}`, { type: 'DELETE' }).then((response) => { - swal.fire('Deleted!', 'User has been deleted.','success').then(() => { + swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => { window.location.reload(); }); }).catch((error) => { diff --git a/resources/views/provinces/index.blade.php b/resources/views/provinces/index.blade.php index 836d969..c73fbe5 100644 --- a/resources/views/provinces/index.blade.php +++ b/resources/views/provinces/index.blade.php @@ -5,79 +5,78 @@ @endsection @section('content') -
-
-
-
-

- List of Provinces -

-
-
-