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

@@ -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

@@ -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);
+                handlePoskodDetail_NotFound_MyKad(parent_modal);
-		    return;
+                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){
+            if(Object.keys(poskod_detail).length === 0){
-		    handlePoskodDetail_NotFound(parent_modal);
+                handlePoskodDetail_NotFound_MyKad(parent_modal);
-		    return;
+                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