egroupware_official/api/js/etemplate/et2_widget_itempicker.js

/**
 * EGroupware eTemplate2 - JS Itempicker object
 * derived from et2_link_entry widget @copyright 2011 Nathan Gray
 *
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package etemplate
 * @subpackage api
 * @link https://www.egroupware.org
 * @author Christian Binder
 * @author Nathan Gray
 * @copyright 2012 Christian Binder
 * @copyright 2011 Nathan Gray
 */
/*egw:uses
    /vendor/bower-asset/jquery/dist/jquery.js;
    et2_core_inputWidget;
    et2_core_valueWidget;
    et2_extension_itempicker_actions;
    egw_action.egw_action_common;
*/
import { et2_createWidget, et2_register_widget } from "./et2_core_widget";
import { et2_inputWidget } from "./et2_core_inputWidget";
import { ClassWithAttributes } from "./et2_core_inheritance";
import { et2_csvSplit, et2_no_init } from "./et2_core_common";
import { egw } from "../jsapi/egw_global";
/**
 * Class which implements the "itempicker" XET-Tag
 *
 * @augments et2_inputWidget
 */
export class et2_itempicker extends et2_inputWidget {
    /**
     * Constructor
     *
     * @memberOf et2_itempicker
     */
    constructor(_parent, _attrs, _child) {
        // Call the inherited constructor
        super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_itempicker._attributes, _child || {}));
        this.last_search = ""; // Remember last search value
        this.action = null; // Action function for button
        this.current_app = ""; // Remember currently chosen application
        this.div = null;
        this.left = null;
        this.right = null;
        this.right_container = null;
        this.app_select = null;
        this.search = null;
        this.button_action = null;
        this.itemlist = null;
        this.div = null;
        this.left = null;
        this.right = null;
        this.right_container = null;
        this.app_select = null;
        this.search = null;
        this.button_action = null;
        this.itemlist = null;
        if (this.options.action !== null && typeof this.options.action == "string") {
            this.action = new egwFnct(this, "javaScript:" + this.options.action);
        }
        else {
            console.log("itempicker widget: no action provided for button");
        }
        this.createInputWidget();
    }
    clearSearchResults() {
        this.search.val("");
        this.itemlist.html("");
        this.search.focus();
        this.clear.hide();
    }
    createInputWidget() {
        let _self = this;
        this.div = jQuery(document.createElement("div"));
        this.left = jQuery(document.createElement("div"));
        this.right = jQuery(document.createElement("div"));
        this.right_container = jQuery(document.createElement("div"));
        this.app_select = jQuery(document.createElement("ul"));
        this.search = jQuery(document.createElement("input"));
        this.clear = jQuery(document.createElement("span"));
        this.itemlist = jQuery(document.createElement("div"));
        // Container elements
        this.div.addClass("et2_itempicker");
        this.left.addClass("et2_itempicker_left");
        this.right.addClass("et2_itempicker_right");
        this.right_container.addClass("et2_itempicker_right_container");
        // Application select
        this.app_select.addClass("et2_itempicker_app_select");
        let item_count = 0;
        for (let key in this.options.select_options) {
            let img_icon = this.egw().image(key + "/navbar");
            if (img_icon === null) {
                continue;
            }
            let img = jQuery(document.createElement("img"));
            img.attr("src", img_icon);
            let item = jQuery(document.createElement("li"));
            item.attr("id", key)
                .click(function () {
                _self.selectApplication(jQuery(this));
            })
                .append(img);
            if (item_count == 0) {
                this.selectApplication(item); // select first item by default
            }
            this.app_select.append(item);
            item_count++;
        }
        // Search input field
        this.search.addClass("et2_itempicker_search");
        this.search.keyup(function () {
            let request = {};
            request.term = jQuery(this).val();
            _self.query(request);
        });
        this.set_blur(this.options.blur, this.search);
        // Clear button for search
        this.clear
            .addClass("et2_itempicker_clear ui-icon ui-icon-close")
            .click(function () {
            _self.clearSearchResults();
        })
            .hide();
        // Action button
        this.button_action = et2_createWidget("button", {});
        jQuery(this.button_action.getDOMNode()).addClass("et2_itempicker_button_action");
        this.button_action.set_label(this.egw().lang(this.options.action_label));
        this.button_action.click = function () { _self.doAction(); };
        // Itemlist
        this.itemlist.attr("id", "itempicker_itemlist");
        this.itemlist.addClass("et2_itempicker_itemlist");
        // Put everything together
        this.left.append(this.app_select);
        this.right_container.append(this.search);
        this.right_container.append(this.clear);
        this.right_container.append(this.button_action.getDOMNode());
        this.right_container.append(this.itemlist);
        this.right.append(this.right_container);
        this.div.append(this.right); // right before left to have a natural
        this.div.append(this.left); // z-index for left div over right div
        this.setDOMNode(this.div[0]);
    }
    doAction() {
        if (this.action !== null) {
            let data = {};
            data.app = this.current_app;
            data.value = this.options.value;
            data.checked = this.getSelectedItems();
            return this.action.exec(this, data);
        }
        return false;
    }
    getSelectedItems() {
        let items = [];
        jQuery(this.itemlist).children("ul").children("li.selected").each(function (index) {
            items[index] = jQuery(this).attr("id");
        });
        return items;
    }
    /**
     * Ask server for entries matching selected app/type and filtered by search string
     */
    query(request) {
        if (request.term.length < 3) {
            return true;
        }
        // Remember last search
        this.last_search = request.term;
        // Allow hook / tie in
        if (this.options.query && typeof this.options.query == 'function') {
            if (!this.options.query(request, response))
                return false;
        }
        //if(request.term in this.cache) {
        //	return response(this.cache[request.term]);
        //}
        this.itemlist.addClass("loading");
        this.clear.css("display", "inline-block");
        egw.json("EGroupware\\Api\\Etemplate\\Widget\\ItemPicker::ajax_item_search", [this.current_app, '', request.term, request.options], this.queryResults, this, true, this).sendRequest();
    }
    /**
     * Server found some results for query
     */
    queryResults(data) {
        this.itemlist.removeClass("loading");
        this.updateItemList(data);
    }
    selectApplication(app) {
        this.clearSearchResults();
        jQuery(".et2_itempicker_app_select li").removeClass("selected");
        app.addClass("selected");
        this.current_app = app.attr("id");
        return true;
    }
    set_blur(_value, input) {
        if (typeof input == 'undefined')
            input = this.search;
        if (_value) {
            input.attr("placeholder", _value); // HTML5
            if (!input[0].placeholder) {
                // Not HTML5
                if (input.val() == "")
                    input.val(_value);
                input.focus(input, function (e) {
                    let placeholder = _value;
                    if (e.data.val() == placeholder)
                        e.data.val("");
                }).blur(input, function (e) {
                    let placeholder = _value;
                    if (e.data.val() == "")
                        e.data.val(placeholder);
                });
                if (input.val() == "")
                    input.val(_value);
            }
        }
        else {
            this.search.removeAttr("placeholder");
        }
    }
    transformAttributes(_attrs) {
        super.transformAttributes(_attrs);
        _attrs["select_options"] = {};
        if (_attrs["application"]) {
            let apps = et2_csvSplit(_attrs["application"], null, ",");
            for (let i = 0; i < apps.length; i++) {
                _attrs["select_options"][apps[i]] = this.egw().lang(apps[i]);
            }
        }
        else {
            _attrs["select_options"] = this.egw().link_app_list('query');
        }
        // Check whether the options entry was found, if not read it from the
        // content array.
        if (_attrs["select_options"] == null) {
            _attrs["select_options"] = this.getArrayMgr('content')
                .getEntry("options-" + this.id);
        }
        // Default to an empty object
        if (_attrs["select_options"] == null) {
            _attrs["select_options"] = {};
        }
    }
    updateItemList(data) {
        let list = jQuery(document.createElement("ul"));
        let item_count = 0;
        for (let id in data) {
            let item = jQuery(document.createElement("li"));
            if (item_count % 2 == 0) {
                item.addClass("row_on");
            }
            else {
                item.addClass("row_off");
            }
            item.attr("id", id)
                .html(data[id])
                .click(function (e) {
                if (e.ctrlKey || e.metaKey) {
                    // add to selection
                    jQuery(this).addClass("selected");
                }
                else if (e.shiftKey) {
                    // select range
                    let start = jQuery(this).siblings(".selected").first();
                    if ((start === null || start === void 0 ? void 0 : start.length) == 0) {
                        // no start item - cannot select range - select single item
                        jQuery(this).addClass("selected");
                        return true;
                    }
                    let end = jQuery(this);
                    // swap start and end if start appears after end in dom hierarchy
                    if (start.index() > end.index()) {
                        let startOld = start;
                        start = end;
                        end = startOld;
                    }
                    // select start to end
                    start.addClass("selected");
                    start.nextUntil(end).addClass("selected");
                    end.addClass("selected");
                }
                else {
                    // select single item
                    jQuery(this).siblings(".selected").removeClass("selected");
                    jQuery(this).addClass("selected");
                }
            });
            list.append(item);
            item_count++;
        }
        this.itemlist.html(list);
    }
}
et2_itempicker._attributes = {
    "action": {
        "name": "Action callback",
        "type": "string",
        "default": false,
        "description": "Callback for action.  Must be a function(context, data)"
    },
    "action_label": {
        "name": "Action label",
        "type": "string",
        "default": "Action",
        "description": "Label for action button"
    },
    "application": {
        "name": "Application",
        "type": "string",
        "default": "",
        "description": "Limit to the listed application or applications (comma separated)"
    },
    "blur": {
        "name": "Placeholder",
        "type": "string",
        "default": et2_no_init,
        "description": "This text get displayed if an input-field is empty and does not have the input-focus (blur). It can be used to show a default value or a kind of help-text."
    },
    "value": {
        "name": "value",
        "type": "any",
        "default": "",
        "description": "Optional itempicker value(s) - can be used for e.g. environmental information"
    },
    "query": {
        "name": "Query callback",
        "type": "any",
        "default": false,
        "description": "Callback before query to server.  Must return true, or false to abort query."
    }
};
et2_itempicker.legacyOptions = ["application"];
et2_register_widget(et2_itempicker, ["itempicker"]);
//# sourceMappingURL=et2_widget_itempicker.js.map