egroupware/api/js/etemplate/et2_widget_historylog.js

/**
 * EGroupware eTemplate2 - JS History log
 *
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package etemplate
 * @subpackage api
 * @link https://www.egroupware.org
 * @author Nathan Gray
 * @copyright 2012 Nathan Gray
 */
import { et2_createWidget, et2_register_widget, et2_registry } from "./et2_core_widget";
import { ClassWithAttributes } from "./et2_core_inheritance";
import { et2_valueWidget } from "./et2_core_valueWidget";
import { et2_dataview } from "./et2_dataview";
import { et2_dataview_column } from "./et2_dataview_model_columns";
import { et2_dataview_controller } from "./et2_dataview_controller";
import { et2_diff } from "./et2_widget_diff";
import { et2_IDetachedDOM } from "./et2_core_interfaces";
import { et2_dynheight } from "./et2_widget_dynheight";
import { et2_selectbox } from "./et2_widget_selectbox";
/**
 * eTemplate history log widget displays a list of changes to the current record.
 * The widget is encapsulated, and only needs the record's ID, and a map of
 * fields:widgets for display.
 *
 * It defers its initialization until the tab that it's on is selected, to avoid
 * wasting time if the user never looks at it.
 *
 * @augments et2_valueWidget
 */
export class et2_historylog extends et2_valueWidget {
    /**
     * Constructor
     *
     * @memberOf et2_historylog
     */
    constructor(_parent, _attrs, _child) {
        super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_historylog._attributes, _child || {}));
        this.div = jQuery(document.createElement("div"))
            .addClass("et2_historylog");
        this.innerDiv = jQuery(document.createElement("div"))
            .appendTo(this.div);
    }
    set_status_id(_new_id) {
        this.options.status_id = _new_id;
    }
    doLoadingFinished() {
        super.doLoadingFinished();
        // Find the tab
        let tab = this.get_tab_info();
        if (tab) {
            // Bind the action to when the tab is selected
            const handler = function (e) {
                e.data.div.unbind("click.history");
                // Bind on click tap, because we need to update history size
                // after a rezise happend and history log was not the active tab
                e.data.div.bind("click.history", { "history": e.data.history, div: tab.flagDiv }, function (e) {
                    if (e.data.history && e.data.history.dynheight) {
                        e.data.history.dynheight.update(function (_w, _h) {
                            e.data.history.dataview.resize(_w, _h);
                        });
                    }
                });
                if (typeof e.data.history.dataview == "undefined") {
                    e.data.history.finishInit();
                    if (e.data.history.dynheight) {
                        e.data.history.dynheight.update(function (_w, _h) {
                            e.data.history.dataview.resize(_w, _h);
                        });
                    }
                }
            };
            tab.flagDiv.bind("click.history", { "history": this, div: tab.flagDiv }, handler);
            // Display if history tab is selected
            if (tab.contentDiv.is(':visible') && typeof this.dataview == 'undefined') {
                tab.flagDiv.trigger("click.history");
            }
        }
        else {
            this.finishInit();
        }
        return true;
    }
    _createNamespace() {
        return true;
    }
    /**
     * Finish initialization which was skipped until tab was selected
     */
    finishInit() {
        // No point with no ID
        if (!this.options.value || !this.options.value.id) {
            return;
        }
        this._filters = {
            record_id: this.options.value.id,
            appname: this.options.value.app,
            get_rows: this.options.get_rows
        };
        // Warn if status_id is the same as history id, that causes overlap and missing labels
        if (this.options.status_id === this.id) {
            this.egw().debug("warn", "status_id attribute should not be the same as historylog ID");
        }
        // Create the dynheight component which dynamically scales the inner
        // container.
        this.div.parentsUntil('.et2_tabs').height('100%');
        const parent = this.get_tab_info();
        this.dynheight = new et2_dynheight(parent ? parent.contentDiv : this.div.parent(), this.innerDiv, 250);
        // Create the outer grid container
        this.dataview = new et2_dataview(this.innerDiv, this.egw());
        const dataview_columns = [];
        let _columns = typeof this.options.columns === "string" ?
            this.options.columns.split(',') : this.options.columns;
        for (var i = 0; i < et2_historylog.columns.length; i++) {
            dataview_columns[i] = {
                "id": et2_historylog.columns[i].id,
                "caption": et2_historylog.columns[i].caption,
                "width": et2_historylog.columns[i].width,
                "visibility": _columns.indexOf(et2_historylog.columns[i].id) < 0 ?
                    et2_dataview_column.ET2_COL_VISIBILITY_INVISIBLE : et2_dataview_column.ET2_COL_VISIBILITY_VISIBLE
            };
        }
        this.dataview.setColumns(dataview_columns);
        // Create widgets for columns that stay the same, and set up varying widgets
        this.createWidgets();
        // Create the gridview controller
        const linkCallback = function () {
        };
        this.controller = new et2_dataview_controller(null, this.dataview.grid);
        this.controller.setContext(this);
        this.controller.setDataProvider(this);
        this.controller.setLinkCallback(linkCallback);
        this.controller.setRowCallback(this.rowCallback);
        this.controller.setActionObjectManager(null);
        const total = typeof this.options.value.total !== "undefined" ?
            this.options.value.total : 0;
        // This triggers an invalidate, which updates the grid
        this.dataview.grid.setTotalCount(total);
        // Insert any data sent from server, so invalidate finds data already
        if (this.options.value.rows && this.options.value.num_rows) {
            this.controller.loadInitialData(this.options.value.dataStorePrefix, this.options.value.row_id, this.options.value.rows);
            // Remove, to prevent duplication
            delete this.options.value.rows;
            // This triggers an invalidate, which updates the grid
            this.dataview.grid.setTotalCount(total);
        }
        else {
            // Trigger the initial update
            this.controller.update();
        }
        // Write something inside the column headers
        for (var i = 0; i < et2_historylog.columns.length; i++) {
            jQuery(this.dataview.getHeaderContainerNode(i)).text(et2_historylog.columns[i].caption);
        }
        // Register a resize callback
        jQuery(window).on('resize.' + this.options.value.app + this.options.value.id, function () {
            if (this && typeof this.dynheight != 'undefined')
                this.dynheight.update(function (_w, _h) {
                    this.dataview.resize(_w, _h);
                }.bind(this));
        }.bind(this));
    }
    /**
     * Destroys all
     */
    destroy() {
        // Unbind, if bound
        if (this.options.value && !this.options.value.id) {
            jQuery(window).off('.' + this.options.value.app + this.options.value.id);
        }
        // Free the widgets
        for (let i = 0; i < et2_historylog.columns.length; i++) {
            if (et2_historylog.columns[i].widget)
                et2_historylog.columns[i].widget.destroy();
        }
        for (let key in this.fields) {
            this.fields[key].widget.destroy();
        }
        // Free the grid components
        if (this.dataview)
            this.dataview.destroy();
        if (this.controller)
            this.controller.destroy();
        if (this.dynheight)
            this.dynheight.destroy();
        super.destroy();
    }
    /**
     * Create all needed widgets for new / old values
     */
    createWidgets() {
        // Constant widgets - first 3 columns
        for (let i = 0; i < et2_historylog.columns.length; i++) {
            if (et2_historylog.columns[i].widget_type) {
                // Status ID is allowed to be remapped to something else.  Only affects the widget ID though
                var attrs = { 'readonly': true, 'id': (i == et2_historylog.FIELD ? this.options.status_id : et2_historylog.columns[i].id) };
                et2_historylog.columns[i].widget = et2_createWidget(et2_historylog.columns[i].widget_type, attrs, this);
                et2_historylog.columns[i].widget.transformAttributes(attrs);
                et2_historylog.columns[i].nodes = jQuery(et2_historylog.columns[i].widget.getDetachedNodes());
            }
        }
        // Add in handling for links
        if (typeof this.options.value['status-widgets']['~link~'] == 'undefined') {
            et2_historylog.columns[et2_historylog.FIELD].widget.optionValues['~link~'] = this.egw().lang('link');
            this.options.value['status-widgets']['~link~'] = 'link';
        }
        // Add in handling for files
        if (typeof this.options.value['status-widgets']['~file~'] == 'undefined') {
            et2_historylog.columns[et2_historylog.FIELD].widget.optionValues['~file~'] = this.egw().lang('File');
            this.options.value['status-widgets']['~file~'] = 'vfs';
        }
        // Add in handling for user-agent & action
        if (typeof this.options.value['status-widgets']['user_agent_action'] == 'undefined') {
            et2_historylog.columns[et2_historylog.FIELD].widget.optionValues['user_agent_action'] = this.egw().lang('User-agent & action');
        }
        // Per-field widgets - new value & old value
        this.fields = {};
        let labels = et2_historylog.columns[et2_historylog.FIELD].widget.optionValues;
        // Custom fields - Need to create one that's all read-only for proper display
        let cf_widget = et2_createWidget('customfields', { 'readonly': true }, this);
        cf_widget.loadFields();
        // Override this or it may damage the real values
        cf_widget.getValue = function () { return null; };
        for (let key in cf_widget.widgets) {
            // Add label
            labels[cf_widget.prefix + key] = cf_widget.options.customfields[key].label;
            // If it doesn't support detached nodes, just treat it as text
            if (cf_widget.widgets[key].getDetachedNodes) {
                var nodes = cf_widget.widgets[key].getDetachedNodes();
                for (var i = 0; i < nodes.length; i++) {
                    if (nodes[i] == null)
                        nodes.splice(i, 1);
                }
                // Save to use for each row
                this.fields[cf_widget.prefix + key] = {
                    attrs: cf_widget.widgets[key].options,
                    widget: cf_widget.widgets[key],
                    nodes: jQuery(nodes)
                };
            }
        }
        // Add all cf labels
        et2_historylog.columns[et2_historylog.FIELD].widget.set_select_options(labels);
        // From app
        for (var key in this.options.value['status-widgets']) {
            let attrs = jQuery.extend({ 'readonly': true, 'id': key }, this.getArrayMgr('modifications').getEntry(key));
            const field = attrs.type || this.options.value['status-widgets'][key];
            const options = null;
            const widget = this._create_widget(key, field, attrs, options);
            if (widget === null) {
                continue;
            }
            if (widget.instanceOf(et2_selectbox))
                widget.options.multiple = true;
            widget.transformAttributes(attrs);
            // Save to use for each row
            let nodes = widget._children.length ? [] : jQuery(widget.getDetachedNodes());
            for (let i = 0; i < widget._children.length; i++) {
                // @ts-ignore
                nodes.push(jQuery(widget._children[i].getDetachedNodes()));
            }
            this.fields[key] = {
                attrs: attrs,
                widget: widget,
                nodes: nodes
            };
        }
        // Widget for text diffs
        const diff = et2_createWidget('diff', {}, this);
        this.diff = {
            // @ts-ignore
            widget: diff,
            nodes: jQuery(diff.getDetachedNodes())
        };
    }
    _create_widget(key, field, attrs, options) {
        let widget = null;
        // If field has multiple parts (is object) and isn't an obvious select box
        if (typeof field === 'object') {
            // Check for multi-part statuses needing multiple widgets
            let need_box = false; //!this.getArrayMgr('sel_options').getEntry(key);
            for (let j in field) {
                // Require widget to be a widget, to avoid invalid widgets
                // (and template, which is a widget and an infolog todo status)
                if (et2_registry[field[j]] && ['template'].indexOf(field[j]) < 0) // && (et2_registry[field[j]].prototype.instanceOf(et2_valueWidget))
                 {
                    need_box = true;
                    break;
                }
            }
            if (need_box) {
                // Multi-part value needs multiple widgets
                widget = et2_createWidget('vbox', attrs, this);
                for (var i in field) {
                    let type = field[i];
                    const child_attrs = jQuery.extend({}, attrs);
                    if (typeof type === 'object') {
                        child_attrs['select_options'] = field[i];
                        type = 'select';
                    }
                    else {
                        delete child_attrs['select_options'];
                    }
                    child_attrs.id = i;
                    const child = this._create_widget(i, type, child_attrs, options);
                    widget.addChild(child);
                    child.transformAttributes(child_attrs);
                }
            }
            else {
                attrs['select_options'] = field;
            }
        }
        // Check for options after the type, ex: link-entry:infolog
        else if (field.indexOf(':') > 0) {
            var options = field.split(':');
            field = options.shift();
        }
        if (widget === null) {
            widget = et2_createWidget(typeof field === 'string' ? field : 'select', attrs, this);
        }
        if (!widget.instanceOf(et2_IDetachedDOM)) {
            this.egw().debug("warn", this, "Invalid widget " + field + " for " + key + ".  Status widgets must implement et2_IDetachedDOM.");
            return null;
        }
        // Parse / set legacy options
        if (options) {
            const mgr = this.getArrayMgr("content");
            let legacy = widget.constructor.legacyOptions || [];
            for (let i = 0; i < options.length && i < legacy.length; i++) {
                // Not set
                if (options[i] === "")
                    continue;
                const attr = widget.attributes[legacy[i]];
                let attrValue = options[i];
                // If the attribute is marked as boolean, parse the
                // expression as bool expression.
                if (attr.type === "boolean") {
                    attrValue = mgr.parseBoolExpression(attrValue);
                }
                else {
                    attrValue = mgr.expandName(attrValue);
                }
                attrs[legacy[i]] = attrValue;
                if (typeof widget['set_' + legacy[i]] === 'function') {
                    widget['set_' + legacy[i]].call(widget, attrValue);
                }
                else {
                    widget.options[legacy[i]] = attrValue;
                }
            }
        }
        return widget;
    }
    getDOMNode(_sender) {
        if (_sender == this) {
            return this.div[0];
        }
        for (let i = 0; i < et2_historylog.columns.length; i++) {
            if (_sender == et2_historylog.columns[i].widget) {
                return this.dataview.getHeaderContainerNode(i);
            }
        }
        return null;
    }
    dataFetch(_queriedRange, _callback, _context) {
        // Skip getting data if there's no ID
        if (!this.value.id)
            return;
        // Set num_rows to fetch via nextmatch
        if (this.options.value['num_rows'])
            _queriedRange['num_rows'] = this.options.value['num_rows'];
        const historylog = this;
        // Pass the fetch call to the API
        this.egw().dataFetch(this.getInstanceManager().etemplate_exec_id, _queriedRange, this._filters, this.id, function (_response) {
            _callback.call(this, _response);
        }, _context, []);
    }
    // Needed by interface
    dataRegisterUID(_uid, _callback, _context) {
        this.egw().dataRegisterUID(_uid, _callback, _context, this.getInstanceManager().etemplate_exec_id, this.id);
    }
    dataUnregisterUID(_uid, _callback, _context) {
        // Needed by interface
    }
    /**
     * The row callback gets called by the gridview controller whenever
     * the actual DOM-Nodes for a node with the given data have to be
     * created.
     *
     * @param {type} _data
     * @param {type} _row
     * @param {type} _idx
     * @param {type} _entry
     */
    rowCallback(_data, _row, _idx, _entry) {
        let tr = _row.getDOMNode();
        jQuery(tr).attr("valign", "top");
        let row = this.dataview.rowProvider.getPrototype("default");
        let self = this;
        jQuery("div", row).each(function (i) {
            let nodes = [];
            let widget = et2_historylog.columns[i].widget;
            let value = _data[et2_historylog.columns[i].id];
            if (et2_historylog.OWNER === i && _data['share_email']) {
                // Show share email instead of owner
                widget = undefined;
                value = _data['share_email'];
            }
            // Get widget from list, unless it needs a diff widget
            if ((typeof widget == 'undefined' || widget == null) && typeof self.fields[_data.status] != 'undefined' && (i < et2_historylog.NEW_VALUE ||
                i >= et2_historylog.NEW_VALUE && (self.fields[_data.status].nodes || !self._needsDiffWidget(_data['status'], _data[et2_historylog.columns[et2_historylog.OLD_VALUE].id])))) {
                widget = self.fields[_data.status].widget;
                if (!widget._children.length) {
                    nodes = self.fields[_data.status].nodes.clone();
                }
                for (var j = 0; j < widget._children.length; j++) {
                    // @ts-ignore
                    nodes.push(self.fields[_data.status].nodes[j].clone());
                    if (widget._children[j].instanceOf(et2_diff)) {
                        self._spanValueColumns(jQuery(this));
                    }
                }
            }
            else if (widget) {
                nodes = et2_historylog.columns[i].nodes.clone();
            }
            else if ((
            // Already parsed & cached
            typeof _data[et2_historylog.columns[et2_historylog.NEW_VALUE].id] == "object" &&
                typeof _data[et2_historylog.columns[et2_historylog.NEW_VALUE].id] != "undefined" &&
                _data[et2_historylog.columns[et2_historylog.NEW_VALUE].id] !== null) || // typeof null === 'object'
                // Large old value
                self._needsDiffWidget(_data['status'], _data[et2_historylog.columns[et2_historylog.OLD_VALUE].id]) ||
                // Large new value
                self._needsDiffWidget(_data['status'], _data[et2_historylog.columns[et2_historylog.NEW_VALUE].id])) {
                // Large text value - span both columns, and show a nice diff
                let jthis = jQuery(this);
                if (i === et2_historylog.NEW_VALUE) {
                    // Diff widget
                    widget = self.diff.widget;
                    nodes = self.diff.nodes.clone();
                    if (widget)
                        widget.setDetachedAttributes(nodes, {
                            value: value,
                            label: jthis.parents("td").prev().text()
                        });
                    self._spanValueColumns(jthis);
                }
            }
            else {
                // No widget fallback - display actual value
                nodes = jQuery('<span>').text(value === null ? '' : value);
            }
            if (widget) {
                if (widget._children.length) {
                    // Multi-part values
                    const box = jQuery(widget.getDOMNode()).clone();
                    for (var j = 0; j < widget._children.length; j++) {
                        const id = widget._children[j].id;
                        const widget_value = value ? value[id] || "" : "";
                        widget._children[j].setDetachedAttributes(nodes[j], { value: widget_value });
                        box.append(nodes[j]);
                    }
                    nodes = box;
                }
                else {
                    widget.setDetachedAttributes(nodes, { value: value });
                }
            }
            jQuery(this).append(nodes);
        });
        jQuery(tr).append(row.children());
        return tr;
    }
    /**
     * How to tell if the row needs a diff widget or not
     *
     * @param {string} columnName
     * @param {string} value
     * @returns {Boolean}
     */
    _needsDiffWidget(columnName, value) {
        if (typeof value !== "string" && value) {
            this.egw().debug("warn", "Crazy diff value", value);
            return false;
        }
        return value === '***diff***';
    }
    /**
     * Make a single row's new value cell span across both new value and old value
     * columns.  Used for diff widget.
     *
     * @param {jQuery} row jQuery wrapped row node
     */
    _spanValueColumns(row) {
        // Stretch column 4
        row.parents("td").attr("colspan", 2)
            .css("border-right", "none");
        row.css("width", (this.dataview.getColumnMgr().getColumnWidth(et2_historylog.NEW_VALUE) +
            this.dataview.getColumnMgr().getColumnWidth(et2_historylog.OLD_VALUE) - 10) + 'px');
        // Skip column 5
        row.parents("td").next().remove();
    }
    resize(_height) {
        if (typeof this.options != 'undefined' && _height
            && typeof this.options.resize_ratio != 'undefined') {
            // apply the ratio
            _height = (this.options.resize_ratio != '') ? _height * this.options.resize_ratio : _height;
            if (_height != 0) {
                // 250px is the default value for history widget
                // if it's not loaded yet and window is resized
                // then add the default height with excess_height
                if (this.div.height() == 0)
                    _height += 250;
                this.div.height(this.div.height() + _height);
                // trigger the history registered resize
                // in order to update the height with new value
                this.div.trigger('resize.' + this.options.value.app + this.options.value.id);
            }
        }
        if (this.dynheight) {
            this.dynheight.update();
        }
        // Resize diff widgets to match new space
        if (this.dataview) {
            const columns = this.dataview.getColumnMgr();
            jQuery('.et2_diff', this.div).closest('.innerContainer')
                .width(columns.getColumnWidth(et2_historylog.NEW_VALUE) + columns.getColumnWidth(et2_historylog.OLD_VALUE));
        }
    }
}
et2_historylog._attributes = {
    "value": {
        "name": "Value",
        "type": "any",
        "description": "Object {app: ..., id: ..., status-widgets: {}} where status-widgets is a map of fields to widgets used to display those fields"
    },
    "status_id": {
        "name": "status_id",
        "type": "string",
        "default": "status",
        "description": "The history widget is traditionally named 'status'.  If you name another widget in the same template 'status', you can use this attribute to re-name the history widget.  "
    },
    "columns": {
        "name": "columns",
        "type": "string",
        "default": "user_ts,owner,status,new_value,old_value",
        "description": "Columns to display.  Default is user_ts,owner,status,new_value,old_value"
    },
    "get_rows": {
        "name": "get_rows",
        "type": "string",
        "default": "EGroupware\\Api\\Storage\\History::get_rows",
        "description": "Method to get rows"
    }
};
et2_historylog.legacyOptions = ["status_id"];
et2_historylog.columns = [
    { 'id': 'user_ts', caption: 'Date', 'width': '120px', widget_type: 'date-time', widget: null, nodes: null },
    { 'id': 'owner', caption: 'User', 'width': '150px', widget_type: 'select-account', widget: null, nodes: null },
    { 'id': 'status', caption: 'Changed', 'width': '120px', widget_type: 'select', widget: null, nodes: null },
    { 'id': 'new_value', caption: 'New Value', 'width': '50%', widget: null, nodes: null },
    { 'id': 'old_value', caption: 'Old Value', 'width': '50%', widget: null, nodes: null }
];
et2_historylog.TIMESTAMP = 0;
et2_historylog.OWNER = 1;
et2_historylog.FIELD = 2;
et2_historylog.NEW_VALUE = 3;
et2_historylog.OLD_VALUE = 4;
et2_register_widget(et2_historylog, ['historylog']);
//# sourceMappingURL=et2_widget_historylog.js.map