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

feat(locations): perbarui pengelolaan pemilihan lokasi

Browse Source 
- 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
2025-03-13 08:55:53 +07:00
parent 6f899fa131
commit 934d293d2e
1 changed files with 87 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -135,171 +135,118 @@ if (districtSelect && !villageSelect) {
} }
if (villageSelect) { if (villageSelect) {
let tomvillage = new TomSelect('#village_code', settings); let tomvillage, tomdistrict, tomcities, tomprovince;
let tomdistrict = new TomSelect('#district_code', {
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, ...settings,
onChange: function (value) { onChange: function (value) {
// Destroy only if necessary (prevents unnecessary re-initialization) resetFields(3);
if (tomvillage) {
tomvillage.destroy();
}
let url = 'locations/villages/district/' + value; if (value) {
fetch(url) let url = 'locations/villages/district/' + value;
.then(response => response.json()) fetch(url)
.then(data => { .then(response => response.json())
const options = data.map(item => ({ .then(data => {
value: item.code, const options = data.map(item => ({
text: item.name value: item.code,
})); text: item.name
}));
tomvillage = new TomSelect('#village_code', { tomvillage.clear();
...settings, // Spread existing settings (including createOnBlur: false) tomvillage.clearOptions();
options: options 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, ...settings,
onChange: function (value) { onChange: function (value) {
// Destroy only if necessary (prevents unnecessary re-initialization) resetFields(2);
if (tomdistrict) {
tomdistrict.destroy();
}
let url = 'locations/districts/city/' + value; if (value) {
fetch(url) let url = 'locations/districts/city/' + value;
.then(response => response.json()) fetch(url)
.then(data => { .then(response => response.json())
const options = data.map(item => ({ .then(data => {
value: item.code, const options = data.map(item => ({
text: item.name value: item.code,
})); text: item.name
}));
tomdistrict = new TomSelect('#district_code', { tomdistrict.clear();
...settings, // Spread existing settings (including createOnBlur: false) tomdistrict.clearOptions();
options: options, tomdistrict.addOptions(options);
onChange: function (value) { })
// Destroy only if necessary (prevents unnecessary re-initialization) .catch(error => {
if (tomvillage) { console.error('Error fetching data:', error);
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', { tomprovince = new TomSelect('#province_code', {
...settings, // Spread existing settings ...settings,
onChange: function (value) { onChange: function (value) {
console.log('Province selected:', value); resetFields(1);
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomcities) {
tomcities.destroy();
}
let url = 'locations/cities/province/' + value; if (value) {
fetch(url) let url = 'locations/cities/province/' + value;
.then(response => response.json()) fetch(url)
.then(data => { .then(response => response.json())
const options = data.map(item => ({ .then(data => {
value: item.code, const options = data.map(item => ({
text: item.name value: item.code,
})); text: item.name
}));
tomcities = new TomSelect('#city_code', { tomcities.clear();
...settings, // Spread existing settings (including createOnBlur: false) tomcities.clearOptions();
options: options, tomcities.addOptions(options);
onChange: function (value) { })
// Destroy only if necessary (prevents unnecessary re-initialization) .catch(error => {
if (tomdistrict) { console.error('Error fetching data:', error);
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) { if (postalCode) {
villageSelect.addEventListener('change', function (event) { villageSelect.addEventListener('change', function (event) {
fetch('locations/villages/postal-code/' + event.target.value) if (event.target.value) {
.then(response => response.json()) fetch('locations/villages/postal-code/' + event.target.value)
.then(data => { .then(response => response.json())
postalCode.value = data.postal_code; .then(data => {
}) postalCode.value = data.postal_code;
})
.catch(error => {
console.error('Error fetching postal code:', error);
});
} else {
postalCode.value = "";
}
}); });
} }
} }