feat(locations): perbarui pengelolaan pemilihan lokasi
- Menambahkan fungsi reset untuk membersihkan pilihan kota, distrik, dan desa. - Mengoptimalkan inisialisasi TomSelect untuk menghindari penghancuran yang tidak perlu. - Memperbaiki pengambilan data untuk kota, distrik, dan desa berdasarkan pilihan pengguna. - Menangani kesalahan saat mengambil data dengan menambahkan log kesalahan.
This commit is contained in:
Daeng Deni Mardaeni
@@ -135,171 +135,118 @@ if (districtSelect && !villageSelect) {
|
||||
}
|
||||
|
||||
if (villageSelect) {
|
||||
let tomvillage = new TomSelect('#village_code', settings);
|
||||
let tomdistrict = new TomSelect('#district_code', {
|
||||
let tomvillage, tomdistrict, tomcities, tomprovince;
|
||||
|
||||
const resetFields = (fromLevel) => {
|
||||
if (fromLevel <= 1) {
|
||||
citySelect.value = "";
|
||||
if (tomcities) tomcities.clear();
|
||||
}
|
||||
if (fromLevel <= 2) {
|
||||
districtSelect.value = "";
|
||||
if (tomdistrict) tomdistrict.clear();
|
||||
}
|
||||
if (fromLevel <= 3) {
|
||||
villageSelect.value = "";
|
||||
if (tomvillage) tomvillage.clear();
|
||||
}
|
||||
if (postalCode) postalCode.value = "";
|
||||
};
|
||||
|
||||
tomvillage = new TomSelect('#village_code', settings);
|
||||
|
||||
tomdistrict = new TomSelect('#district_code', {
|
||||
...settings,
|
||||
onChange: function (value) {
|
||||
// Destroy only if necessary (prevents unnecessary re-initialization)
|
||||
if (tomvillage) {
|
||||
tomvillage.destroy();
|
||||
}
|
||||
resetFields(3);
|
||||
|
||||
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
|
||||
}));
|
||||
if (value) {
|
||||
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
|
||||
tomvillage.clear();
|
||||
tomvillage.clearOptions();
|
||||
tomvillage.addOptions(options);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let tomcities = new TomSelect('#city_code', {
|
||||
tomcities = new TomSelect('#city_code', {
|
||||
...settings,
|
||||
onChange: function (value) {
|
||||
// Destroy only if necessary (prevents unnecessary re-initialization)
|
||||
if (tomdistrict) {
|
||||
tomdistrict.destroy();
|
||||
}
|
||||
resetFields(2);
|
||||
|
||||
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
|
||||
}));
|
||||
if (value) {
|
||||
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);
|
||||
});
|
||||
}
|
||||
tomdistrict.clear();
|
||||
tomdistrict.clearOptions();
|
||||
tomdistrict.addOptions(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
|
||||
tomprovince = new TomSelect('#province_code', {
|
||||
...settings,
|
||||
onChange: function (value) {
|
||||
console.log('Province selected:', value);
|
||||
// Destroy only if necessary (prevents unnecessary re-initialization)
|
||||
if (tomcities) {
|
||||
tomcities.destroy();
|
||||
}
|
||||
resetFields(1);
|
||||
|
||||
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
|
||||
}));
|
||||
if (value) {
|
||||
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);
|
||||
});
|
||||
}
|
||||
tomcities.clear();
|
||||
tomcities.clearOptions();
|
||||
tomcities.addOptions(options);
|
||||
})
|
||||
.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;
|
||||
})
|
||||
if (event.target.value) {
|
||||
fetch('locations/villages/postal-code/' + event.target.value)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
postalCode.value = data.postal_code;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching postal code:', error);
|
||||
});
|
||||
} else {
|
||||
postalCode.value = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user