KoPKB/kaunter
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

Update postcode concerns

Browse Source 
- 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)
This commit is contained in:
afiq.hamzah
2023-03-05 16:44:16 +08:00
parent 7b79496ccc
commit c1d122139b
2 changed files with 172 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/postcode-concerns.js
Vendored
+140
View File
@@ -0,0 +1,140 @@
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();
});
resources/views/customers/index.blade.php
+32 -32
View File
@@ -132,9 +132,11 @@
<div class="col-md-4">Poskod</div>
<div class="col-md-8"><input class="form-control" type="text" name="poskod" id="poskod" autocomplete="off" placeholder="Poskod"></div>
<div class="col-md-4">Daerah</div>
<div class="col-md-8" style="display: none;"><input class="form-control" type="text" name="daerah" id="daerah" autocomplete="off" readonly required></div>
<div class="col-md-8" style="display: none;">
<input class="form-control" type="text" name="daerah" id="daerah" autocomplete="off" readonly required>
</div>
<div class="col-md-8">
<select class="select2-daerah form-control" name="select-daerah" id="select-daerah" data-placeholder="Pilih daerah" style="width: 100%;" readonly disabled></select>
<select class="select2-daerah form-control" name="select-daerah" id="select-daerah" data-placeholder="Sila pilih daerah" style="width: 100%;" readonly disabled></select>
</div>
<div class="col-md-4">Negeri</div>
<div class="col-md-8"><input class="form-control" type="text" name="negeri" id="negeri" autocomplete="off" readonly required></div>
@@ -269,7 +271,12 @@
<div class="col-md-4">Poskod</div>
<div class="col-md-8"><input class="form-control" type="text" name="poskod" id="poskod" autocomplete="off" placeholder="Poskod"></div>
<div class="col-md-4">Daerah</div>
<div class="col-md-8"><input class="form-control" type="text" name="daerah" id="daerah" readonly autocomplete="off" required></div>
<div class="col-md-8">
<input class="form-control" type="text" name="daerah" id="daerah" autocomplete="off" readonly required>
</div>
<div class="col-md-8" style="display: none;">
<select class="select2-daerah form-control" name="select-daerah" id="select-daerah" data-placeholder="Pilih daerah" style="width: 100%;" readonly disabled></select>
</div>
<div class="col-md-4">Negeri</div>
<div class="col-md-8"><input class="form-control" type="text" name="negeri" id="negeri" readonly autocomplete="off" required></div>
<div class="col-md-4">Umur</div>
@@ -391,7 +398,10 @@
<div class="col-md-4">Poskod</div>
<div class="col-md-8"><input class="form-control" type="text" name="poskod" id="passport_poskod" autocomplete="off" placeholder="Poskod"></div>
<div class="col-md-4">Daerah</div>
<div class="col-md-8"><input class="form-control" type="text" name="daerah" id="passport_daerah" autocomplete="off" readonly></div>
<div class="col-md-8" style="display: none;"><input class="form-control" type="text" name="daerah" id="passport_daerah" autocomplete="off" readonly required></div>
<div class="col-md-8">
<select class="select2-daerah form-control" name="select-daerah" id="select-daerah" data-placeholder="Pilih daerah" style="width: 100%;" readonly disabled></select>
</div>
<div class="col-md-4">Negeri</div>
<div class="col-md-8"><input class="form-control" type="text" name="negeri" id="passport_negeri" autocomplete="off" readonly ></div>
<div class="col-md-4">Umur</div>
@@ -557,8 +567,8 @@
let parent_modal = document.querySelector('#daftar_pelanggan');
if(Object.keys(poskod_detail).length === 0){
handlePoskodDetail_NotFound(parent_modal);
return;
handlePoskodDetail_NotFound_MyKad(parent_modal);
return;
}
var koddaerah = poskod_detail['koddaerah'];
@@ -578,7 +588,7 @@
}
});
handlePoskodDetail_Found(parent_modal);
handlePoskodDetail_Found_MyKad(parent_modal);
}
});
});
@@ -593,10 +603,10 @@
let parent_modal = document.querySelector('#daftar_pelanggan_mykad_reader');
if(Object.keys(poskod_detail).length === 0){
handlePoskodDetail_NotFound(parent_modal);
return;
}
if(Object.keys(poskod_detail).length === 0){
handlePoskodDetail_NotFound_MyKad(parent_modal);
return;
}
var koddaerah = poskod_detail['koddaerah'];
var kodnegeri = poskod_detail['kodnegeri'];
@@ -615,31 +625,12 @@
}
});
handlePoskodDetail_Found(parent_modal);
handlePoskodDetail_Found_MyKad(parent_modal);
}
});
});
$('#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');
input_negeri.value = '';
input_daerah.value = '';
input_poskod.value = '';
input_poskod.readOnly = false;
input_daerah.readOnly = true;
input_negeri.readOnly = true;
input_poskod.focus();
});
$('#passport_poskod').change(function(){
var poskod = this.value;
@@ -647,6 +638,13 @@
method:'GET',
url:api_url+'/api/poskod/'+poskod,
success:function(poskod_detail){
let parent_modal = document.querySelector('#passport_pelanggan');
if(Object.keys(poskod_detail).length === 0){
handlePoskodDetail_NotFound_Passport(parent_modal);
return;
}
var koddaerah = poskod_detail['koddaerah'];
var kodnegeri = poskod_detail['kodnegeri'];
$.ajax({
@@ -663,6 +661,8 @@
$('#passport_daerah').val(daerah['namadaerah']);
}
});
handlePoskodDetail_Found_Passport(parent_modal);
}
});
});
@@ -1274,7 +1274,7 @@
</script>
<script src="{{ asset('js/iris-mykad-websocket-client-api.js') }}"></script>
<script src="{{ asset('js/mykad-reader-customer.js') }}"></script>
<script src="{{ asset('js/poskod-concerns.js') }}"></script>
<script src="{{ asset('js/postcode-concerns.js') }}"></script>
@endpush
@endsection