From c1d122139b3b128f149cfc5598626495543fb63a Mon Sep 17 00:00:00 2001 From: "afiq.hamzah" Date: Sun, 5 Mar 2023 16:44:16 +0800 Subject: [PATCH] Update postcode concerns - 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) --- public/js/postcode-concerns.js | 140 ++++++++++++++++++++++ resources/views/customers/index.blade.php | 64 +++++----- 2 files changed, 172 insertions(+), 32 deletions(-) create mode 100644 public/js/postcode-concerns.js diff --git a/public/js/postcode-concerns.js b/public/js/postcode-concerns.js new file mode 100644 index 0000000..3c3d58e --- /dev/null +++ b/public/js/postcode-concerns.js @@ -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(); +}); diff --git a/resources/views/customers/index.blade.php b/resources/views/customers/index.blade.php index eaafcda..a14e789 100644 --- a/resources/views/customers/index.blade.php +++ b/resources/views/customers/index.blade.php @@ -132,9 +132,11 @@
Poskod
Daerah
- +
- +
Negeri
@@ -269,7 +271,12 @@
Poskod
Daerah
-
+
+ +
+
Negeri
Umur
@@ -391,7 +398,10 @@
Poskod
Daerah
-
+ +
+ +
Negeri
Umur
@@ -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 @@ - + @endpush @endsection