afiq.hamzah
c1d122139b
- Change filename to postcode-concerns.js - Refactor postcode-concerns.js implementations - Make daerah input and select2-daerah element changed dynamically according to requirements (if no postcode detail found, select2-daerah will be renndered and vice-versa)
141 lines
4.6 KiB
JavaScript
Vendored
141 lines
4.6 KiB
JavaScript
Vendored
let handlePoskodDetail_NotFound_MyKad = (modal) => {
|
|
|
|
|
|
let input_negeri = modal.querySelector('input#negeri');
|
|
let input_daerah = modal.querySelector('input#daerah');
|
|
let select_daerah = modal.querySelector('select#select-daerah');
|
|
|
|
handlePoskodDetail_NotFound(modal, input_negeri, input_daerah, select_daerah);
|
|
}
|
|
|
|
let handlePoskodDetail_Found_MyKad = (modal) => {
|
|
|
|
let input_negeri = modal.querySelector('input#negeri');
|
|
let input_daerah = modal.querySelector('input#daerah');
|
|
let select_daerah = modal.querySelector('select#select-daerah');
|
|
|
|
handlePoskodDetail_Found(input_negeri, input_daerah, select_daerah);
|
|
}
|
|
|
|
let handlePoskodDetail_NotFound_Passport = (modal) => {
|
|
|
|
let input_negeri = modal.querySelector('input#passport_negeri');
|
|
let input_daerah = modal.querySelector('input#passport_daerah');
|
|
let select_daerah = modal.querySelector('select#select-daerah');
|
|
|
|
handlePoskodDetail_NotFound(modal, input_negeri, input_daerah, select_daerah);
|
|
}
|
|
|
|
let handlePoskodDetail_Found_Passport = (modal) => {
|
|
|
|
let input_negeri = modal.querySelector('input#passport_negeri');
|
|
let input_daerah = modal.querySelector('input#passport_daerah');
|
|
let select_daerah = modal.querySelector('select#select-daerah');
|
|
|
|
handlePoskodDetail_Found(input_negeri, input_daerah, select_daerah);
|
|
}
|
|
|
|
let handlePoskodDetail_NotFound = (modal, input_negeri, input_daerah, select_daerah) => {
|
|
|
|
input_daerah.closest('div.col-md-8').style.display = 'none';
|
|
input_daerah.disabled = true;
|
|
|
|
select_daerah.closest('div.col-md-8').style.display = 'block';
|
|
select_daerah.disabled = false;
|
|
select_daerah.readOnly = false;
|
|
|
|
input_negeri.value = '';
|
|
input_negeri.placeholder = '';
|
|
|
|
let getAllNegeri = () => {
|
|
return fetch(api_url + '/api/daerah');
|
|
};
|
|
|
|
$(select_daerah).attr("data-placeholder","Sila pilih daerah");
|
|
$(select_daerah).val('').trigger('change');
|
|
|
|
getAllNegeri().then(response => response.json())
|
|
.then(x => x.map(y => {
|
|
return {
|
|
"id": y.namadaerah,
|
|
"text": y.namadaerah + ' - ' + y.negeri.negeri,
|
|
}
|
|
})).then(x => {
|
|
$(select_daerah).select2({
|
|
placeholder: "Sila pilih daerah pelanggan",
|
|
closeOnSelect: true,
|
|
dropdownPosition: 'below',
|
|
data: x,
|
|
});
|
|
}).then(() => $(select_daerah).val('').trigger('change'));
|
|
|
|
|
|
};
|
|
|
|
let handlePoskodDetail_Found = (input_negeri, input_daerah, select_daerah) => {
|
|
|
|
select_daerah.closest('div.col-md-8').style.display = 'none';
|
|
select_daerah.disabled = 'true';
|
|
|
|
input_daerah.closest('div.col-md-8').style.display = 'block';
|
|
input_daerah.disabled = false;
|
|
|
|
input_negeri.readOnly = true;
|
|
input_negeri.placeholder = '';
|
|
input_daerah.readOnly = true;
|
|
input_daerah.placeholder = '';
|
|
};
|
|
|
|
$('select.select2-daerah').on('select2:select', function (e) {
|
|
|
|
let caller = e.target || e.srcElement;
|
|
let modal = caller.closest('div.modal.fade');
|
|
let input_negeri = modal.querySelector('input[name="negeri"]');
|
|
|
|
let selected_daerah = e.params.data;
|
|
|
|
let getDaerahDetail = (koddaerah) => {
|
|
return fetch(api_url + '/api/daerah/' + koddaerah)
|
|
.then(response => response.json())
|
|
.then(x => fetch(api_url + '/api/negeri/' + x.kodnegeri))
|
|
.then(response => response.json())
|
|
};
|
|
|
|
getDaerahDetail(selected_daerah.id).then(x => input_negeri.value = x.negeri);
|
|
});
|
|
|
|
$('#daftar_pelanggan_mykad_reader textarea#alamat').change(function(){
|
|
let modal = document.querySelector('#daftar_pelanggan_mykad_reader');
|
|
let input_poskod = modal.querySelector('input#poskod');
|
|
let input_daerah = modal.querySelector('input#daerah');
|
|
let input_negeri = modal.querySelector('input#negeri');
|
|
let select_daerah = modal.querySelector('select#select-daerah');
|
|
|
|
input_poskod.value = '';
|
|
input_poskod.readOnly = false;
|
|
|
|
input_daerah.value = '';
|
|
input_daerah.closest('div.col-md-8').style.display = 'none';
|
|
input_daerah.disabled = true;
|
|
input_daerah.readOnly = true;
|
|
|
|
select_daerah.closest('div.col-md-8').style.display = 'block';
|
|
select_daerah.disabled = true;
|
|
select_daerah.readOnly = false;
|
|
|
|
// Handle stubborn select2
|
|
let isSelect2exist = modal.querySelector('span.select2');
|
|
if(isSelect2exist){
|
|
modal.querySelector('span.select2')
|
|
.querySelector('span.select2-selection__rendered')
|
|
.remove();
|
|
}
|
|
|
|
select_daerah.value = ''
|
|
|
|
input_negeri.value = '';
|
|
input_negeri.readOnly = true;
|
|
|
|
input_poskod.focus();
|
|
});
|