opensem/build/js/include/form/multi-select.js

function initMultiselect(model, item, route, availables, associated, event)
{
    console.log('initMultiselect');
    console.log(route);
    var toggle_button = "#toggle_button_" + model;
    var assoc_form = model + "_assoc_form";
    var assoc_submit = '#' + model + '_assoc_submit';
    var assoc_selection = '#' + model + '_search_selection';
    var assoc_selectable = '#' + model + '_search_selectable';
    var list = '#' + model + '_list';

    $(assoc_submit).off('click').on('click', function(event) {
        event.preventDefault();
        $('form[name="' + assoc_form + '"]').submit();
    });

    $(toggle_button).off('click').on('click', function(event) {
        if (!$(assoc_submit).is(':hover')) {
            event.preventDefault();
            $(toggle_button + " .header-wrapper .glyph-icon:first-child").toggleClass("icon-caret-right icon-caret-down");
            $(assoc_submit).toggleClass('hidden');
            $(this).parents(".content-box:first").find(".content-box-wrapper").slideToggle(100, function() {
                admin_content.orderSelect($(list));
                renderMultiselect(list, model, item, availables, associated);
                modobox.resize();
            });
        }
    });

    $('form[name="'+assoc_form+'"]').off('submit').on('submit', function() {
        var error = 0;
        var datas = $(this).serializeJSON();

        if (error == 0) {
            datas["language"] = getLang();
            $.ajax({
                type: "POST",
                dataType: "json",
                url: laroute.route(route),
                data: datas,
                success: function(response) {
                    if (response.error == -1) {
                        header.logout();
                    } else if (response.error == -6) {
                        admin_content.alertNotFound();
                    } else {
                        admin_content.showSuccessMsg('.information_messages_manage', 'informations_has_been_saved');
                        if (response.nb > 0) {
                            $(toggle_button + " .bs-badge").removeClass("opacity-3");
                        } else {
                            $(toggle_button + " .bs-badge").addClass("opacity-3");
                        }
                        $(toggle_button + " .bs-badge").html(response.nb);
                        setTimeout(function(){
                            $(toggle_button).click();
                        }, 1000);
                    }
                },
                error: function() {
                    admin_content.showCustomErrorMsg('.information_messages_manage', translate.getText.an_error_occured);
                }
            });
        } else {
            admin_content.showCustomErrorMsg('.information_messages_manage', translate.getText.an_error_occured);
        }
    });

    $(assoc_submit).off('click').on('click', function(event) {
        event.preventDefault();
        $('form[name="'+assoc_form+'"]').submit();
    });

    $(".ms-container").append('<i class="glyph-icon center-icon icon-exchange text-white"></i>');
}

function renderMultiselect(selector, model, item, availables, associated, parent)
{
    console.log('renderMultiselect');
    var assoc_submit = "#" + model + "_assoc_submit";
    var assoc_form = model + "_assoc_form";
    var assoc_toggle = "#toggle_button_" + model;
    var assoc_list = "#" + model + "_list"; 
    var assoc_selectable = '#' + model + '_search_selectable';
    var assoc_selection = '#' + model + '_search_selection';
    var assoc_selected = '#ms-' + model + '_list';
    var select_all = 'select-all-' + item;
    var deselect_all = 'deselect-all-' + item;

    var selectableHeader = (typeof(availables) != 'undefined') ? "<div class='col-md-12 text-center'><label class='light'>"+availables+"</label></div>" : '';
    var selectionHeader = (typeof(associated) != 'undefined') ? "<div class='col-md-12 text-center'><label class='green'>"+associated+"</label></div>" : '';

    $(selector).multiSelect({
        selectableHeader: selectableHeader + "<input type='text' id='"+assoc_selectable+"' class='mb-2 form-control quicksearch selectable-search styled' autocomplete='off' placeholder='"+translate.getText.search+"...'>",
        selectionHeader: selectionHeader + "<input type='text' id='"+assoc_selection+"' class='mb-2 form-control quicksearch selectable-search styled' autocomplete='off' placeholder='"+translate.getText.search+"...'>",
        selectableFooter: "<button id='"+select_all+"' class='btn btn-alt btn-success btn-block mt-2 noradius pr-3'><span>"+translate.getText.select_all+"</span><i class='glyph-icon icon-arrow-right pull-right'></i></button>",
        selectionFooter: "<button id='"+deselect_all+"' class='btn btn-alt btn-danger btn-block mt-2 noradius pl-3'><i class='glyph-icon icon-arrow-left pull-left'></i><span>"+translate.getText.deselect_all+"</span></button>",
        afterInit: function(ms) {
            var that = this,
            $selectableSearch = that.$selectableUl.prev(),
            $selectionSearch = that.$selectionUl.prev(),
            selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
            selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString).on('keydown', function(e){
                if (e.which === 40) {
                    that.$selectableUl.focus();
                    return false;
                }
            });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString).on('keydown', function(e){
                if (e.which == 40) {
                    that.$selectionUl.focus();
                    return false;
                }
            });

            $(select_all).off('click').on('click', function() {
                console.log('select_all');
                console.log('#ms-' + model + '_list');
                if ($(assoc_selectable).val() == "") {
                    $(list).multiSelect('select_all');
                } else {
                    $('#ms-' + model + '_list .ms-elem-selectable').each(function() {
                        if(!$(this).is(':hidden')) { $(this).click(); }
                    });
                }
                return false;
            });

            $(deselect_all).off('click').on('click', function() {
                if ($(assoc_selection).val() == "") {
                    $(list).multiSelect('deselect_all');
                } else {
                    $('#ms-' + model + '_list .ms-elem-selection').each(function() {
                        if(!$(this).is(':hidden')) { $(this).click(); }
                    });
                }
                return false;
            });

        },
        afterSelect: function(){
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function(){
            this.qs1.cache();
            this.qs2.cache();
        }
    });


}