Add operation to allow newly poskod to registred through the API

public/js/postcode-concerns.js

@@ -39,10 +39,12 @@ let handlePoskodDetail_NotFound = (modal, input_negeri, input_daerah, select_dae
 
     input_daerah.closest('div.col-md-8').style.display = 'none';
     input_daerah.disabled = true;
+    input_daerah.required = false;
 
     select_daerah.closest('div.col-md-8').style.display = 'block';
     select_daerah.disabled = false;
     select_daerah.readOnly = false;
+    select_daerah.required = true;
 
     input_negeri.value = '';
     input_negeri.placeholder = '';
@@ -54,21 +56,25 @@ let handlePoskodDetail_NotFound = (modal, input_negeri, input_daerah, select_dae
     $(select_daerah).attr("data-placeholder","Sila pilih daerah");
     $(select_daerah).val('').trigger('change');
 
-    getAllNegeri().then(response => response.json())
+    getAllNegeri()
+        .then(response => response.json())
         .then(x => x.map(y => {
             return {
                 "id": y.namadaerah,
                 "text": y.namadaerah + ' - ' + y.negeri.negeri,
+                "data-koddaerah": y.koddaerah,
             }
-        })).then(x => {
+        }))
+        .then(x => {
             $(select_daerah).select2({
                 placeholder: "Sila pilih daerah pelanggan",
                 closeOnSelect: true,
                 dropdownPosition: 'below',
                 data: x,
+                dropdownParent: $(modal),
             });
-        }).then(() => $(select_daerah).val('').trigger('change'));
-
+        })
+        .then(() => $(select_daerah).val('').trigger('change'));
 
 };
 
@@ -76,9 +82,11 @@ let handlePoskodDetail_Found = (input_negeri, input_daerah, select_daerah) => {
 
     select_daerah.closest('div.col-md-8').style.display = 'none';
     select_daerah.disabled = 'true';
+    select_daerah.required = false;
 
     input_daerah.closest('div.col-md-8').style.display = 'block';
     input_daerah.disabled = false;
+    input_daerah.required = true;
 
     input_negeri.readOnly = true;
     input_negeri.placeholder = '';
@@ -93,6 +101,7 @@ $('select.select2-daerah').on('select2:select', function (e) {
     let input_negeri = modal.querySelector('input[name="negeri"]');
 
     let selected_daerah = e.params.data;
+    let selected_kod_daerah = selected_daerah['data-koddaerah'];
 
     let getDaerahDetail = (koddaerah) => {
         return fetch(api_url + '/api/daerah/' + koddaerah)
@@ -101,7 +110,27 @@ $('select.select2-daerah').on('select2:select', function (e) {
             .then(response => response.json())
     };
 
-    getDaerahDetail(selected_daerah.id).then(x => input_negeri.value = x.negeri);
+    let populatePostcodeRegistrationInputs = (koddaerah, kodnegeri) => {
+        const input_koddaerah = document.createElement("input");
+        input_koddaerah.className = "d-none";
+        input_koddaerah.name = "koddaerah";
+        input_koddaerah.value = koddaerah;
+
+        const input_kodnegeri = document.createElement("input");
+        input_kodnegeri.className = "d-none";
+        input_kodnegeri.name = "kodnegeri";
+        input_kodnegeri.value = kodnegeri;
+
+        modal.querySelector('form').appendChild(input_koddaerah);
+        modal.querySelector('form').appendChild(input_kodnegeri);
+    }
+
+    getDaerahDetail(selected_kod_daerah)
+        .then(x => {
+            populatePostcodeRegistrationInputs(selected_kod_daerah, x.kodnegeri)
+            return x;
+        })
+        .then(x => input_negeri.value = x.negeri);
 });
 
 $('#daftar_pelanggan_mykad_reader textarea#alamat').change(function(){