egroupware/etemplate/js/et2_widget_historylog.js

485 lines
14 KiB
JavaScript
Raw Normal View History

2012-05-24 17:45:29 +02:00
/**
* EGroupware eTemplate2 - JS History log
2012-05-24 17:45:29 +02:00
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package etemplate
* @subpackage api
* @link http://www.egroupware.org
* @author Nathan Gray
* @copyright 2012 Nathan Gray
* @version $Id$
*/
"use strict";
/*egw:uses
jquery.jquery;
jquery.jquery-ui;
et2_core_valueWidget;
// Include the grid classes
et2_dataview;
*/
/**
* 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
2012-05-24 17:45:29 +02:00
*/
var et2_historylog = et2_valueWidget.extend([et2_IDataProvider],
{
createNamespace: true,
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. "
}
},
legacyOptions: ["status_id"],
2012-05-24 17:45:29 +02:00
columns: [
2012-05-30 20:54:23 +02:00
{'id': 'user_ts', caption: 'Date', 'width': '120px', widget_type: 'date-time'},
2012-05-24 17:45:29 +02:00
{'id': 'owner', caption: 'User', 'width': '150px', widget_type: 'select-account'},
{'id': 'status', caption: 'Changed', 'width': '120px', widget_type: 'select'},
{'id': 'new_value', caption: 'New Value', 'width': '50%'},
{'id': 'old_value', caption: 'Old Value', 'width': '50%'}
2012-05-24 17:45:29 +02:00
],
TIMESTAMP: 0, OWNER: 1, FIELD: 2, NEW_VALUE: 3, OLD_VALUE: 4,
/**
* Constructor
*
* @memberOf et2_historylog
*/
2012-05-24 17:45:29 +02:00
init: function() {
this._super.apply(this, arguments);
this.div = $j(document.createElement("div"))
.addClass("et2_historylog");
this.innerDiv = $j(document.createElement("div"))
.appendTo(this.div);
},
set_status_id: function(_new_id) {
this.options.status_id = _new_id;
},
2012-05-24 17:45:29 +02:00
doLoadingFinished: function() {
this._super.apply(this, arguments);
2012-05-24 17:45:29 +02:00
// Find the tab widget, if there is one
var tabs = this;
do {
tabs = tabs._parent;
} while (tabs != this.getRoot() && tabs._type != 'tabbox');
if(tabs != this.getRoot())
{
// Find the tab index
for(var i = 0; i < tabs.tabData.length; i++)
{
// Find the tab
if(tabs.tabData[i].contentDiv.has(this.div).length)
{
// Bind the action to when the tab is selected
var handler = function(e) {
e.data.div.unbind("click.history");
e.data.history.finishInit();
e.data.history.dynheight.update(function(_w, _h) {
e.data.history.dataview.resize(_w, _h);
});
};
tabs.tabData[i].flagDiv.bind("click.history",{"history": this, div: tabs.tabData[i].flagDiv}, handler);
// Display if history tab is selected
if(i == tabs.get_active_tab())
{
tabs.tabData[i].flagDiv.trigger("click.history");
}
2012-05-24 17:45:29 +02:00
break;
}
}
}
else
{
this.finishInit();
}
},
/**
* Finish initialization which was skipped until tab was selected
*/
2012-05-24 17:45:29 +02:00
finishInit: function() {
// 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: 'historylog::get_rows'
};
2012-05-24 17:45:29 +02:00
// Create the dynheight component which dynamically scales the inner
// container.
this.dynheight = new et2_dynheight(this.div.parent(),
2012-05-24 17:45:29 +02:00
this.innerDiv, 250
);
// Create the outer grid container
this.dataview = new et2_dataview(this.innerDiv, this.egw());
var dataview_columns = [];
for (var i = 0; i < this.columns.length; i++)
{
dataview_columns[i] = {"id": this.columns[i].id, "caption": this.columns[i].caption, "width":this.columns[i].width};
}
this.dataview.setColumns(dataview_columns);
2012-05-24 17:45:29 +02:00
// Create widgets for columns that stay the same, and set up varying widgets
this.createWidgets();
// Create the gridview controller
var linkCallback = function() {};
this.controller = new et2_dataview_controller(null, this.dataview.grid,
this, this.rowCallback, linkCallback, this,
null
);
// Trigger the initial update
this.controller.update();
// Write something inside the column headers
for (var i = 0; i < this.columns.length; i++)
{
$j(this.dataview.getHeaderContainerNode(i)).text(this.columns[i].caption);
}
// Register a resize callback
var self = this;
$j(window).on('resize.' +this.options.value.app + this.options.value.id, function() {
2012-05-24 17:45:29 +02:00
self.dynheight.update(function(_w, _h) {
self.dataview.resize(_w, _h);
});
});
},
/**
* Destroys all
2012-05-24 17:45:29 +02:00
*/
destroy: function() {
// Unbind, if bound
if(this.options.value && !this.options.value.id)
{
$j(window).off('.' +this.options.value.app + this.options.value.id);
}
2012-05-24 17:45:29 +02:00
// Free the widgets
for(var i = 0; i < this.columns.length; i++)
{
if(this.columns[i].widget) this.columns[i].widget.destroy();
}
for(var key in this.fields)
{
this.fields[key].widget.destroy();
}
2012-05-30 01:05:26 +02:00
if(this.diff) this.diff.widget.destroy();
2012-05-24 17:45:29 +02:00
// Free the grid components
2012-05-30 01:05:26 +02:00
if(this.dataview) this.dataview.free();
if(this.rowProvider) this.rowProvider.free();
if(this.controller) this.controller.free();
if(this.dynheight) this.dynheight.free();
2012-05-24 17:45:29 +02:00
this._super.apply(this, arguments);
},
2012-07-09 21:04:32 +02:00
/**
* Create all needed widgets for new / old values
*/
2012-05-24 17:45:29 +02:00
createWidgets: function() {
// Constant widgets - first 3 columns
for(var i = 0; i < this.columns.length; i++)
{
if(this.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 == this.FIELD ? this.options.status_id : this.columns[i].id)};
2012-05-24 17:45:29 +02:00
this.columns[i].widget = et2_createWidget(this.columns[i].widget_type, attrs, this);
this.columns[i].widget.transformAttributes(attrs);
this.columns[i].nodes = $j(this.columns[i].widget.getDetachedNodes());
}
}
// Add in handling for links
if(typeof this.options.value['status-widgets']['~link~'] == 'undefined')
{
this.columns[this.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')
{
this.columns[this.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')
{
this.columns[this.FIELD].widget.optionValues['user_agent_action'] = this.egw().lang('User-agent & action');
}
2012-05-24 17:45:29 +02:00
// Per-field widgets - new value & old value
this.fields = {};
var labels = this.columns[this.FIELD].widget.optionValues;
// Custom fields - Need to create one that's all read-only for proper display
var 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(var 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);
}
2012-07-09 21:04:32 +02:00
// 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
this.columns[this.FIELD].widget.set_select_options(labels);
// From app
2012-05-24 17:45:29 +02:00
for(var key in this.options.value['status-widgets'])
{
var field = this.options.value['status-widgets'][key];
var attrs = {'readonly': true, 'id': key};
var options = null;
if(typeof field == 'object')
{
attrs['select_options'] = field;
}
2012-07-09 21:04:32 +02:00
// Check for options after the type, ex: link-entry:infolog
else if (field.indexOf(':') > 0)
{
var options = field.split(':');
field = options.shift();
}
2012-05-24 17:45:29 +02:00
var widget = et2_createWidget(typeof field == 'string' ? field : 'select', attrs, this);
2012-07-09 21:04:32 +02:00
// Parse / set legacy options
if(options)
{
var mgr = this.getArrayMgr("content");
for(var i = 0; i < options.length && i < widget.legacyOptions.length; i++)
{
// Not set
if(options[i] == "") continue;
2012-07-09 21:04:32 +02:00
var attr = widget.attributes[widget.legacyOptions[i]];
var 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[widget.legacyOptions[i]] = attrValue;
if(typeof widget['set_'+widget.legacyOptions[i]] == 'function')
{
widget['set_'+widget.legacyOptions[i]].call(widget, attrValue);
}
else
{
widget.options[widget.legacyOptions[i]] = attrValue;
}
}
}
if(widget.instanceOf(et2_selectbox)) widget.options.multiple = true;
2012-05-24 17:45:29 +02:00
widget.transformAttributes(attrs);
2012-07-09 21:04:32 +02:00
// Save to use for each row
2012-05-24 17:45:29 +02:00
this.fields[key] = {
attrs: attrs,
widget: widget,
nodes: jQuery(widget.getDetachedNodes())
};
}
// Widget for text diffs
var diff = et2_createWidget('diff', {}, this);
this.diff = {
widget: diff,
nodes: jQuery(diff.getDetachedNodes())
};
},
getDOMNode: function(_sender) {
if (_sender == this)
{
return this.div[0];
}
for (var i = 0; i < this.columns.length; i++)
{
if (_sender == this.columns[i].widget)
{
return this.dataview.getHeaderContainerNode(i);
}
}
return null;
},
dataFetch: function (_queriedRange, _callback, _context) {
// Skip getting data if there's no ID
if(!this.value.id) return;
2012-05-24 17:45:29 +02:00
// Pass the fetch call to the API
this.egw().dataFetch(
2012-05-24 17:45:29 +02:00
this.getInstanceManager().etemplate_exec_id,
_queriedRange,
this._filters,
this.id,
_callback,
_context,
[]
2012-05-24 17:45:29 +02:00
);
},
// Needed by interface
dataRegisterUID: function (_uid, _callback, _context) {
this.egw().dataRegisterUID(_uid, _callback, _context, this.getInstanceManager().etemplate_exec_id,
this.id);
},
dataUnregisterUID: function (_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.
*/
rowCallback: function(_data, _row, _idx, _entry) {
var tr = _row.getDOMNode();
jQuery(tr).attr("valign","top");
var row = this.dataview.rowProvider.getPrototype("default");
var self = this;
$j("div", row).each(function (i) {
var nodes = [];
var widget = self.columns[i].widget;
if(typeof widget == 'undefined' && typeof self.fields[_data.status] != 'undefined')
{
nodes = self.fields[_data.status].nodes.clone();
widget = self.fields[_data.status].widget;
}
else if (widget)
{
nodes = self.columns[i].nodes.clone();
}
else if ((
// Already parsed & cached
typeof _data[self.columns[self.NEW_VALUE].id] == "object" &&
typeof _data[self.columns[self.NEW_VALUE].id].new != "undefined") ||
// Large old value
self._needsDiffWidget(_data['status'], _data[self.columns[self.OLD_VALUE].id]) ||
// Large new value
self._needsDiffWidget(_data['status'], _data[self.columns[self.NEW_VALUE].id]))
2012-05-24 17:45:29 +02:00
{
// Large text value - span both columns, and show a nice diff
2012-05-24 17:45:29 +02:00
var jthis = jQuery(this);
2012-07-09 21:04:32 +02:00
if(i == self.NEW_VALUE)
2012-05-24 17:45:29 +02:00
{
// Diff widget
2012-05-24 17:45:29 +02:00
widget = self.diff.widget;
nodes = self.diff.nodes.clone();
if (typeof _data[self.columns[self.NEW_VALUE].id] == "string")
{
_data[self.columns[i].id] = {
'old': _data[self.columns[i+1].id],
'new': _data[self.columns[i].id]
};
}
2012-05-24 17:45:29 +02:00
// Skip column 4
jthis.parents("td").attr("colspan", 2)
.css("border-right", "none");
jthis.css("width", (self.dataview.columnMgr.columnWidths[i] + self.dataview.columnMgr.columnWidths[i+1]-10)+'px');
2012-05-24 17:45:29 +02:00
if(widget) widget.setDetachedAttributes(nodes, {
value:_data[self.columns[i].id],
label: jthis.parents("td").prev().text()
});
2012-05-24 17:45:29 +02:00
// Skip column 4
jthis.parents("td").next().remove();
2012-05-24 17:45:29 +02:00
}
}
else
{
// No widget fallback - display actual value
2012-05-24 17:45:29 +02:00
nodes = '<span>'+_data[self.columns[i].id] + '</span>';
}
if(widget) widget.setDetachedAttributes(nodes, {value:_data[self.columns[i].id]});
$j(this).append(nodes);
});
$j(tr).append(row.children());
return tr;
},
/**
* How to tell if the row needs a diff widget or not
*/
_needsDiffWidget: function(columnName, value) {
if(typeof value !== "string")
{
this.egw().debug("warn", "Crazy diff value", value);
return false;
}
return columnName == 'note' || columnName == 'description' || (value && (value.length > 50 || value.match(/\n/g)));
2012-05-24 17:45:29 +02:00
},
});
et2_register_widget(et2_historylog, ['historylog']);