fineui/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js

import { shortcut, Widget, extend, emptyFn, createWidget, isKey, Selection, map, contains, remove, pushDistinct, Controller, VerticalLayout, createItems, delay, isNotNull } from "@/core";
import { ButtonGroup, Loader } from "@/base";
import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case";

@shortcut()
export class SearchMultiSelectLoader extends Widget {
    static xtype = "bi.search_multi_select_loader";

    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-multi-select-loader",
            logic: {
                dynamic: true,
            },
            el: {
                height: 400,
            },
            valueFormatter: emptyFn,
            itemsCreator: emptyFn,
            itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
            onLoaded: emptyFn,
        });
    }

    _init() {
        super._init(...arguments);

        const opts = this.options;
        let hasNext = false;

        this.storeValue = opts.value || {};
        this._assertValue(this.storeValue);

        this.button_group = createWidget({
            type: SelectList.xtype,
            element: this,
            logic: opts.logic,
            toolbar: {
                type: MultiSelectBar.xtype,
                cls: "bi-list-item-active",
                height: this.options.itemHeight,
                iconWrapperWidth: 36,
            },
            el: extend(
                {
                    onLoaded: opts.onLoaded,
                    el: {
                        type: Loader.xtype,
                        isDefaultInit: false,
                        logic: {
                            dynamic: true,
                            scrolly: true,
                        },
                        el: {
                            chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
                            behaviors: {
                                redmark: () => true,
                            },
                            layouts: [
                                {
                                    type: VerticalLayout.xtype,
                                }
                            ],
                        },
                    },
                },
                opts.el
            ),
            itemsCreator: (op, callback) => {
                const startValue = this._startValue;
                this.storeValue &&
                    (op = extend(op || {}, {
                        selectedValues:
                            isKey(startValue) &&
                            this.storeValue.type === Selection.Multi
                                ? this.storeValue.value.concat(startValue)
                                : this.storeValue.value,
                    }));
                opts.itemsCreator(op, ob => {
                    hasNext = ob.hasNext;
                    let firstItems = [];
                    if (op.times === 1 && this.storeValue) {
                        const json = map(this.storeValue.value, (i, v) => {
                            const txt = opts.valueFormatter(v) || v;
                            
                            return {
                                text: txt,
                                value: v,
                                title: txt,
                                selected:
                                    this.storeValue.type === Selection.Multi,
                            };
                        });
                        if (
                            isKey(this._startValue) &&
                            !contains(this.storeValue.value, this._startValue)
                        ) {
                            const txt =
                                opts.valueFormatter(startValue) || startValue;
                            json.unshift({
                                text: txt,
                                value: startValue,
                                title: txt,
                                selected: true,
                            });
                        }
                        firstItems = this._createItems(json);
                    }
                    callback(
                        firstItems.concat(this._createItems(ob.items)),
                        ob.keyword || ""
                    );
                    if (op.times === 1 && this.storeValue) {
                        isKey(startValue) &&
                            (this.storeValue.type === Selection.All
                                ? remove(this.storeValue.value, startValue)
                                : pushDistinct(
                                    this.storeValue.value,
                                    startValue
                                ));
                        this.setValue(this.storeValue);
                    }
                    op.times === 1 && this._scrollToTop();
                });
            },
            hasNext: () => hasNext,
            value: this.storeValue,
        });
        this.button_group.on(Controller.EVENT_CHANGE, () => {
            this.fireEvent(Controller.EVENT_CHANGE, arguments);
        });
        this.button_group.on(SelectList.EVENT_CHANGE, () => {
            this.fireEvent(SearchMultiSelectLoader.EVENT_CHANGE, ...arguments);
        });
    }

    _createItems(items) {
        return createItems(items, {
            type: MultiSelectItem.xtype,
            logic: this.options.logic,
            cls: "bi-list-item-active",
            height: this.options.itemHeight,
            selected: this.isAllSelected(),
            iconWrapperWidth: 36,
        });
    }

    _scrollToTop() {
        delay(() => {
            this.button_group.element.scrollTop(0);
        }, 30);
    }

    isAllSelected() {
        return this.button_group.isAllSelected();
    }

    _assertValue(val) {
        val || (val = {});
        val.type || (val.type = Selection.Multi);
        val.value || (val.value = []);
    }

    setStartValue(v) {
        this._startValue = v;
    }

    setValue(v) {
        this.storeValue = v || {};
        this._assertValue(this.storeValue);
        this.button_group.setValue(this.storeValue);
    }

    getValue() {
        return this.button_group.getValue();
    }

    getAllButtons() {
        return this.button_group.getAllButtons();
    }

    empty() {
        this.button_group.empty();
    }

    populate(items) {
        if (isNotNull(items)) {
            arguments[0] = this._createItems(items);
        }
        this.button_group.populate(...arguments);
    }

    resetHeight(h) {
        this.button_group.resetHeight(h);
    }

    resetWidth(w) {
        this.button_group.resetWidth(w);
    }
}