chess/resources/views/content/ref/Model/action.blade.php

<script>    
    var dualListBox; 
    // INIT FORM
    function clearForm() {
        $('#get_id').val('');
        $("#formData")[0].reset();
        validation.resetForm();
        $('#mForm_title').html(`Tambah Data`);
        $('#mForm_subTitle').html(`Tambah Data `+title);
        reInitForm();      
        dualListBox.remove_all_button.click();
        dualListBox.available.forEach(v => {
            $(v).removeClass('dual-listbox__item--selected')
        })
        // $('#kt_dual_listbox_1').children("option").each(function() {
        //     $(this).prop('selected', false);
        // })
                                             
        /* dualListBox.available.forEach(v => {
            var id = $(v).data('id');
            (id==14)?$(v).addClass('dual-listbox__item--selected'):'';
            dualListBox.add_button.click()            
        }); */
    }
    
    function edit(id) {
        clearForm();
        $('#mForm').modal('show');
        znLoadingModal('mForm');
        $('#mForm_title').html(`Edit Data`);
        $('#mForm_subTitle').html(`Edit Data `+title);
    
        let formData = new FormData();
        formData.append('id',id);
        doPost(routeEdit, formData, function (msg, res) {            
            znLoadingModalEnd('mForm');        
            var data = res.data;            
            console.log(data)
            $('#get_id').val(data.head.id);
            $('#description').val(data.head.description);            
            var active = data.head.is_active?'true':'false';
            $('#is_active').val(active);            
            data.detail.forEach(dV => {
                dualListBox.available.forEach(v => {
                    var id = $(v).data('id');
                    // (id==dV.task_id)?$(v).addClass('dual-listbox__item--selected'):'';
                    if(id==dV.task_id) {
                        $(v).addClass('dual-listbox__item--selected')
                        dualListBox.add_button.click()            
                    }
                });
            });
        })
    }

    function storeCustom() {
        let myForm = document.getElementById('formData');
        let formData = new FormData(myForm);       

        validation.validate().then(function(status) {
            if(status == 'Valid') {
                popConfirm("Konfirmasi",
                    '<div class="mt-2">Yakin Akan Menyimpan Data Ini ?</div>',function() {            
                    znLoadingModal('mForm');
                    doPost(routeStoreCustom, formData, function (msg, data) {
                        console.log(data);
                        znLoadingModalEnd('mForm');
                        if (data == null){
                            znNotif("danger", msg);
                        }else {
                            if(data.rc == 0){
                                znNotif('success','Berhasil Menyimpan Data');
                                $('#mForm').modal('hide');
                                table.ajax.url(routeTable).load();
                            }else{
                                znNotif("danger", data.rm);
                            }
                        }
                    })
                });    
            }
        });
    }

    // Class definition
    var KTDualListbox = function() {
        // Private functions
        var initDualListbox = function() {
            // Dual Listbox
            // var listBoxes = $(".dual-listbox");
            var listBoxes = $("#kt_dual_listbox_1");

            listBoxes.each(function() {
                var $this = $(this);
                // get titles
                var availableTitle = ($this.attr("data-available-title") != null) ? $this.attr("data-available-title") : "Available options";
                var selectedTitle = ($this.attr("data-selected-title") != null) ? $this.attr("data-selected-title") : "Selected options";

                // get button labels
                var addLabel = ($this.attr("data-add") != null) ? $this.attr("data-add") : "Add";
                var removeLabel = ($this.attr("data-remove") != null) ? $this.attr("data-remove") : "Remove";
                var addAllLabel = ($this.attr("data-add-all") != null) ? $this.attr("data-add-all") : "Add All";
                var removeAllLabel = ($this.attr("data-remove-all") != null) ? $this.attr("data-remove-all") : "Remove All";

                // get options
                var options = [];
                $this.children("option").each(function() {
                    var value = $(this).val();
                    var label = $(this).text();
                    options.push({
                        text: label,
                        value: value
                    });
                });
                // console.log(options)

                // get search option
                var search = ($this.attr("data-search") != null) ? $this.attr("data-search") : "";

                // init dual listbox
                dualListBox = new DualListbox($this.get(0), {
                    addEvent: function(value) {                         
                    },
                    removeEvent: function(value) {                                                
                    },
                    availableTitle: availableTitle,
                    selectedTitle: selectedTitle,
                    addButtonText: addLabel,
                    removeButtonText: removeLabel,
                    addAllButtonText: addAllLabel,
                    removeAllButtonText: removeAllLabel,
                    // options: options,
                });

                if (search == "false") {
                    dualListBox.search.classList.add("dual-listbox__search--hidden");
                }
            });
        };

        return {
            // public functions
            init: function() {
                initDualListbox();
            },
        };
    }();
    
    //VALIDASI
    $(document).ready(function () {        
        validation = FormValidation.formValidation(
			KTUtil.getById('formData'),
			{
				fields: {
					description: {
						validators: {
							notEmpty: {
								message: 'Wajib diisi!'
							}
						}
					},																															
				},
				plugins: {
					trigger: new FormValidation.plugins.Trigger(),
					bootstrap: new FormValidation.plugins.Bootstrap()
				}
			}
		);
        KTDualListbox.init();
    });
</script>