MLDW-progress.js

export function MultiSelectDropdownListWidget({
    widget_name,
    data,
    default_text,
    null_value = null,
    on_update = () => {},
    value,
    limit,
}){
    // A widget mostly similar to `DropdownListWidget` but 
    // used in cases of multiple dropdown selection.

    // Initializing values specific to `MultiSelectDropdownListWidget`;
    this.limit = limit;
    this.data_selected = []; // Populate the dropdown values selected by user

    DropdownListWidget.call(this, {
        widget_name,
        data,
        default_text,
        null_value,
        on_update,
        value,
    })

    if(limit === undefined){
        this.limit = 2;
        blueslip.warn(
            "Multiselect dropdown-list-widget: Called without limit value; using 2 as the limit",
        );
    }
}

MultiSelectDropdownListWidget.prototype = Object.create(DropdownListWidget.prototype);

// Set the button text as per the selected data
MultiSelectDropdownListWidget.prototype.render_button_text = function (elem, limit) {
    const items_selected = this.data_selected.length;
    let text = "";

    if(items_selected === 0){
        this.render_default_text(elem);
        return;
    }
    else if (limit >= items_selected) {
        const data_selected = this.data.filter((data) => this.selected_data.includes(data.value));
        text = data_selected.map((data) => data.name).toString();
    } else {
        text = `${items_selected} selected`;
    }

    elem.text(text);
    elem.removeClass("text-warning");
    elem.closest(".input-group").find(".dropdown_list_reset_button:enabled").show();
};

// Override the `DrodownListWidget` render function.
MultiSelectDropdownListWidget.prototype.render = function(value){
    const elem = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.widget_name)}_name`);

    if (!value || value === this.null_value) {
        this.render_default_text(elem);
        return;
    }
    this.render_button_text(elem, this.limit);
};

MultiSelectDropdownListWidget.prototype.setup_dropdown_widget = function (data) {
    const dropdown_list_body = $(
        `#${CSS.escape(this.container_id)} .dropdown-list-body`,
    ).expectOne();
    const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`);

    ListWidget.create(dropdown_list_body, data, {
        name: `${CSS.escape(this.widget_name)}_list`,
        modifier(item) {
            return render_dropdown_list({item});
        },
        multiselect: {
            selected_items: this.data_selected,
        },
        filter: {
            element: search_input,
            predicate(item, value) {
                return item.name.toLowerCase().includes(value);
            },
        },
        simplebar_container: $(`#${CSS.escape(this.container_id)} .dropdown-list-wrapper`),
    });

};