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

Change poskod input interaction

Browse Source 
- On unvailable postcode number teller typed, the daerah and negeri input becomes available. Allowing for the unvailable postcode to be registered to DB
This commit is contained in:
afiq.hamzah
2023-03-02 18:30:00 +08:00
parent 3dcfd0bd68
commit e03d9165f2
3 changed files with 166 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/mykad-reader-customer.js
Vendored
+1 -1
View File
@@ -205,7 +205,7 @@ let original_photo_loader = document.querySelector("#photo-mykad").src;
let mykad_modal = document.querySelector("#daftar_pelanggan_mykad_reader"); let mykad_modal = document.querySelector("#daftar_pelanggan_mykad_reader");
let photo_container = mykad_modal.querySelector("#photo-mykad-container"); let photo_container = mykad_modal.querySelector("#photo-mykad-container");
modal_form.querySelector("input[name='name']").value = data.OrgName; modal_form.querySelector("textarea[name='name']").value = data.OrgName;
modal_form.querySelector("input[name='noic']").value = getMyKadNumberWithoutHypens(data.IDNum); modal_form.querySelector("input[name='noic']").value = getMyKadNumberWithoutHypens(data.IDNum);
modal_form.querySelector("input[name='tarikh_lahir']").value = getFormattedDateOfBirth(data.BirthDate); modal_form.querySelector("input[name='tarikh_lahir']").value = getFormattedDateOfBirth(data.BirthDate);
modal_form.querySelector("input[name='negeri_lahir']").value = data.BirthPlace; modal_form.querySelector("input[name='negeri_lahir']").value = data.BirthPlace;
public/js/poskod-concerns.js
Vendored
View File
resources/views/customers/index.blade.php
+165 -17
View File
@@ -6,6 +6,15 @@
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
} }
.select2-container .select2-selection--single {
height: 37px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 0px;
}
</style> </style>
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
@@ -121,13 +130,7 @@
</select> </select>
</div> </div>
<div class="col-md-4">Ahli</div> <div class="col-md-4">Ahli</div>
<div class="col-md-8">
<select class="form-control" name="kumpulan_sahabat" id="kumpulan_sahabat">
<option value="0">Tidak</option>
<option value="1">Kumpulan PKINK</option>
<option value="2">Sahabat</option>
</select>
</div>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@@ -137,15 +140,18 @@
<div class="col-md-4">Poskod</div> <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-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-4">Daerah</div>
<div class="col-md-8"><input class="form-control" type="text" name="daerah" id="daerah" readonly autocomplete="off"></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>
</div>
<div class="col-md-4">Negeri</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"></div> <div class="col-md-8"><input class="form-control" type="text" name="negeri" id="negeri" autocomplete="off" readonly required></div>
<div class="col-md-4">Umur</div> <div class="col-md-4">Umur</div>
<div class="col-md-8"><input class="form-control" type="text" name="age" id="age" readonly></div> <div class="col-md-8"><input class="form-control" type="text" name="age" id="age" readonly></div>
<div class="col-md-4">Bangsa</div> <div class="col-md-4">Bangsa</div>
<div class="col-md-8"> <div class="col-md-8">
<select class="form-control" name="bangsa" id="bangsa"> <select class="form-control" name="bangsa" id="bangsa">
<option selected value="M">Melayu</option> <option value="M">Melayu</option>
<option value="C">Cina</option> <option value="C">Cina</option>
<option value="I">India</option> <option value="I">India</option>
<option value="L">Lain-lain</option> <option value="L">Lain-lain</option>
@@ -219,7 +225,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="row form-group"> <div class="row form-group">
<div class="col-md-4">Nama</div> <div class="col-md-4">Nama</div>
<div class="col-md-8"><input class="form-control" type="text" name="name" id="name" autocomplete="off" placeholder="Nama" readonly></div> <div class="col-md-8"><textarea class="form-control" style="resize:none" name="name" id="name" autocomplete="off" placeholder="Nama" readonly></textarea></div>
<div class="col-md-4">No KP</div> <div class="col-md-4">No KP</div>
<div class="col-md-8"><input class="form-control" type="text" name="noic" id="noic" value="{{$noic ?? ''}}" readonly></div> <div class="col-md-8"><input class="form-control" type="text" name="noic" id="noic" value="{{$noic ?? ''}}" readonly></div>
<div class="col-md-4">Tarikh Lahir</div> <div class="col-md-4">Tarikh Lahir</div>
@@ -267,13 +273,13 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="row form-group"> <div class="row form-group">
<div class="col-md-4">Alamat</div> <div class="col-md-4">Alamat</div>
<div class="col-md-8"><textarea class="form-control" style="resize:none" name="alamat" id="alamat" cols="30" rows="3" placeholder="Alamat Pelanggan" readonly></textarea></div> <div class="col-md-8"><textarea class="form-control" style="resize:none" name="alamat" id="alamat" cols="30" rows="3" placeholder="Alamat Pelanggan"></textarea></div>
<div class="col-md-4">Poskod</div> <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" readonly></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-4">Daerah</div>
<div class="col-md-8"><input class="form-control" type="text" name="daerah" id="daerah" readonly autocomplete="off" readonly></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-4">Negeri</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" readonly></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> <div class="col-md-4">Umur</div>
<div class="col-md-8"><input class="form-control" type="text" name="age" id="age" readonly></div> <div class="col-md-8"><input class="form-control" type="text" name="age" id="age" readonly></div>
<div class="col-md-4">Bangsa</div> <div class="col-md-4">Bangsa</div>
@@ -393,9 +399,9 @@
<div class="col-md-4">Poskod</div> <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-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-4">Daerah</div>
<div class="col-md-8"><input class="form-control" type="text" name="daerah" id="passport_daerah" readonly autocomplete="off"></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-4">Negeri</div> <div class="col-md-4">Negeri</div>
<div class="col-md-8"><input class="form-control" type="text" name="negeri" id="passport_negeri" readonly autocomplete="off"></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> <div class="col-md-4">Umur</div>
<div class="col-md-8"><input class="form-control" type="text" name="age" id="passport_age" readonly></div> <div class="col-md-8"><input class="form-control" type="text" name="age" id="passport_age" readonly></div>
<div class="col-md-4">Bangsa</div> <div class="col-md-4">Bangsa</div>
@@ -548,6 +554,81 @@
reader.readAsDataURL(this.files[0]); reader.readAsDataURL(this.files[0]);
}); });
let handlePoskodDetail_NotFound = (modal) => {
let input_negeri = modal.querySelector('input#negeri');
let input_daerah = modal.querySelector('input#daerah');
let select_daerah = modal.querySelector('select#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');
};
let data_daerah = getAllNegeri().then(response => response.json())
.then(x => x.map(y => {
return {
"id": y.koddaerah,
"text": y.namadaerah + ' - ' + y.negeri.negeri,
}
})).then(x => {
$('#select-daerah').select2({
placeholder: "Sila pilih daerah pelanggan",
dropdownParent: $('#daftar_pelanggan'),
closeOnSelect: true,
data: x,
});
}).then(() => $('#select-daerah').val('').trigger('change'));
};
$('select.select2-daerah').on('select2:select', function (e) {
let caller = e.target || e.srcElement;
let modal = caller.closest('div.modal.fade');
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())
};
let input_negeri = modal.querySelector('input#negeri');
getDaerahDetail(selected_daerah.id).then(x => input_negeri.value = x.negeri);
});
let handlePoskodDetail_Found = (modal) => {
let input_negeri = modal.querySelector('input#negeri');
let input_daerah = modal.querySelector('input#daerah');
let select_daerah = modal.querySelector('select#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 = '';
};
$('#poskod').change(function(){ $('#poskod').change(function(){
var poskod = this.value; var poskod = this.value;
@@ -555,6 +636,14 @@
method:'GET', method:'GET',
url:api_url+'/api/poskod/'+poskod, url:api_url+'/api/poskod/'+poskod,
success:function(poskod_detail){ success:function(poskod_detail){
let parent_modal = document.querySelector('#daftar_pelanggan');
if(Object.keys(poskod_detail).length === 0){
handlePoskodDetail_NotFound(parent_modal);
return;
}
var koddaerah = poskod_detail['koddaerah']; var koddaerah = poskod_detail['koddaerah'];
var kodnegeri = poskod_detail['kodnegeri']; var kodnegeri = poskod_detail['kodnegeri'];
$.ajax({ $.ajax({
@@ -571,10 +660,69 @@
$('#daerah').val(daerah['namadaerah']); $('#daerah').val(daerah['namadaerah']);
} }
}); });
handlePoskodDetail_Found(parent_modal);
} }
}); });
}); });
$('#daftar_pelanggan_mykad_reader input#poskod').change(function(){
var poskod = this.value;
$.ajax({
method:'GET',
url:api_url+'/api/poskod/'+poskod,
success:function(poskod_detail){
let parent_modal = document.querySelector('#daftar_pelanggan_mykad_reader');
if(Object.keys(poskod_detail).length === 0){
handlePoskodDetail_NotFound(parent_modal);
return;
}
var koddaerah = poskod_detail['koddaerah'];
var kodnegeri = poskod_detail['kodnegeri'];
$.ajax({
url:api_url+'/api/negeri/'+kodnegeri,
method:'GET',
success:function(negeri){
$('#daftar_pelanggan_mykad_reader #negeri').val(negeri['negeri']);
}
});
$.ajax({
url:api_url+'/api/daerah/'+koddaerah,
method:'GET',
success:function(daerah){
$('#daftar_pelanggan_mykad_reader #daerah').val(daerah['namadaerah']);
}
});
handlePoskodDetail_Found(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(){ $('#passport_poskod').change(function(){
var poskod = this.value; var poskod = this.value;