daengdeni/location
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 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
Download Patch File Download Diff File Expand all files Collapse all files

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

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