Browse Source
[MIG+REF][11] web_widget_x2many_2d_matrix
[MIG+REF][11] web_widget_x2many_2d_matrix
The widget has been completely refactored to benefit from the new MVC paradigm introduced in v11.pull/1106/head
Simone Orsi
7 years ago
committed by
Jairo Llopis
Jairo Llopis
10 changed files with 614 additions and 515 deletions
-
53web_widget_x2many_2d_matrix/README.rst
-
7web_widget_x2many_2d_matrix/__manifest__.py
-
BINweb_widget_x2many_2d_matrix/static/description/icon.png
-
BINweb_widget_x2many_2d_matrix/static/description/screenshot.png
-
9web_widget_x2many_2d_matrix/static/src/css/web_widget_x2many_2d_matrix.css
-
416web_widget_x2many_2d_matrix/static/src/js/2d_matrix_renderer.js
-
433web_widget_x2many_2d_matrix/static/src/js/web_widget_x2many_2d_matrix.js
-
172web_widget_x2many_2d_matrix/static/src/js/widget_x2many_2d_matrix.js
-
36web_widget_x2many_2d_matrix/static/src/xml/web_widget_x2many_2d_matrix.xml
-
3web_widget_x2many_2d_matrix/views/assets.xml
|
Before Width: 80 | Height: 80 | Size: 5.0 KiB After Width: 90 | Height: 90 | Size: 2.4 KiB |
|
Before Width: 914 | Height: 349 | Size: 19 KiB After Width: 1240 | Height: 471 | Size: 22 KiB |
@ -1,8 +1,3 @@ |
|||||
.oe_form_field_x2many_2d_matrix th.oe_link |
|
||||
{ |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.oe_form_field_x2many_2d_matrix .oe_list_content > tbody > tr > td.oe_list_field_cell |
|
||||
{ |
|
||||
white-space: normal; |
|
||||
|
.o_field_x2many_2d_matrix .row-total { |
||||
|
font-weight: bold; |
||||
} |
} |
||||
@ -0,0 +1,416 @@ |
|||||
|
/* Copyright 2018 Simone Orsi <simone.orsi@camptocamp.com> |
||||
|
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
|
||||
|
|
||||
|
odoo.define('web_widget_x2many_2d_matrix.X2Many2dMatrixRenderer', function (require) { |
||||
|
"use strict"; |
||||
|
|
||||
|
// heavily inspired by Odoo's `ListRenderer`
|
||||
|
var BasicRenderer = require('web.BasicRenderer'); |
||||
|
var config = require('web.config'); |
||||
|
var field_utils = require('web.field_utils'); |
||||
|
var utils = require('web.utils'); |
||||
|
var FIELD_CLASSES = { |
||||
|
// copied from ListRenderer
|
||||
|
float: 'o_list_number', |
||||
|
integer: 'o_list_number', |
||||
|
monetary: 'o_list_number', |
||||
|
text: 'o_list_text', |
||||
|
}; |
||||
|
|
||||
|
var X2Many2dMatrixRenderer = BasicRenderer.extend({ |
||||
|
|
||||
|
init: function (parent, state, params) { |
||||
|
this._super.apply(this, arguments); |
||||
|
this.editable = params.editable; |
||||
|
this.columns = params.matrix_data.columns; |
||||
|
this.rows = params.matrix_data.rows; |
||||
|
this.matrix_data = params.matrix_data; |
||||
|
}, |
||||
|
/** |
||||
|
* Main render function for the matrix widget. It is rendered as a table. For now, |
||||
|
* this method does not wait for the field widgets to be ready. |
||||
|
* |
||||
|
* @override |
||||
|
* @private |
||||
|
* returns {Deferred} this deferred is resolved immediately |
||||
|
*/ |
||||
|
_renderView: function () { |
||||
|
var self = this; |
||||
|
|
||||
|
this.$el |
||||
|
.removeClass('table-responsive') |
||||
|
.empty(); |
||||
|
|
||||
|
var $table = $('<table>').addClass('o_list_view table table-condensed table-striped'); |
||||
|
this.$el |
||||
|
.addClass('table-responsive') |
||||
|
.append($table); |
||||
|
|
||||
|
this._computeColumnAggregates(); |
||||
|
this._computeRowAggregates(); |
||||
|
|
||||
|
$table |
||||
|
.append(this._renderHeader()) |
||||
|
.append(this._renderBody()); |
||||
|
if (self.matrix_data.show_column_totals) { |
||||
|
$table.append(this._renderFooter()); |
||||
|
} |
||||
|
return this._super(); |
||||
|
}, |
||||
|
/** |
||||
|
* Render the table body. Looks for the table body and renders the rows in it. |
||||
|
* Also it sets the tabindex on every input element. |
||||
|
* |
||||
|
* @private |
||||
|
* return {jQueryElement} The table body element that was just filled. |
||||
|
*/ |
||||
|
_renderBody: function () { |
||||
|
var $body = $('<tbody>').append(this._renderRows()); |
||||
|
_.each($body.find('input'), function (td, i) { |
||||
|
$(td).attr('tabindex', i); |
||||
|
}); |
||||
|
return $body; |
||||
|
}, |
||||
|
/** |
||||
|
* Render the table head of our matrix. Looks for the first table head |
||||
|
* and inserts the header into it. |
||||
|
* |
||||
|
* @private |
||||
|
* @return {jQueryElement} The thead element that was inserted into. |
||||
|
*/ |
||||
|
_renderHeader: function () { |
||||
|
var $tr = $('<tr>').append('<th/>'); |
||||
|
$tr= $tr.append(_.map(this.columns, this._renderHeaderCell.bind(this))); |
||||
|
if (this.matrix_data.show_row_totals) { |
||||
|
$tr.append($('<th/>', {class: 'total'})); |
||||
|
} |
||||
|
return $('<thead>').append($tr); |
||||
|
}, |
||||
|
/** |
||||
|
* Render a single header cell. Creates a th and adds the description as text. |
||||
|
* |
||||
|
* @private |
||||
|
* @param {jQueryElement} node |
||||
|
* @returns {jQueryElement} the created <th> node. |
||||
|
*/ |
||||
|
_renderHeaderCell: function (node) { |
||||
|
var name = node.attrs.name; |
||||
|
var field = this.state.fields[name]; |
||||
|
var $th = $('<th>'); |
||||
|
if (!field) { |
||||
|
return $th; |
||||
|
} |
||||
|
var description; |
||||
|
if (node.attrs.widget) { |
||||
|
description = this.state.fieldsInfo.list[name].Widget.prototype.description; |
||||
|
} |
||||
|
if (description === undefined) { |
||||
|
description = node.attrs.string || field.string; |
||||
|
} |
||||
|
$th.text(description).data('name', name); |
||||
|
|
||||
|
if (field.type === 'float' || field.type === 'integer' || field.type === 'monetary') { |
||||
|
$th.addClass('text-right'); |
||||
|
} |
||||
|
|
||||
|
if (config.debug) { |
||||
|
var fieldDescr = { |
||||
|
field: field, |
||||
|
name: name, |
||||
|
string: description || name, |
||||
|
record: this.state, |
||||
|
attrs: node.attrs, |
||||
|
}; |
||||
|
this._addFieldTooltip(fieldDescr, $th); |
||||
|
} |
||||
|
return $th; |
||||
|
}, |
||||
|
/** |
||||
|
* Proxy call to function rendering single row. |
||||
|
* |
||||
|
* @private |
||||
|
* @returns {String} a string with the generated html. |
||||
|
* |
||||
|
*/ |
||||
|
|
||||
|
_renderRows: function () { |
||||
|
return _.map(this.rows, this._renderRow.bind(this)); |
||||
|
}, |
||||
|
/** |
||||
|
* Render a single row with all its columns. Renders all the cells and then wraps them with a <tr>. |
||||
|
* If aggregate is set on the row it also will generate the aggregate cell. |
||||
|
* |
||||
|
* @private |
||||
|
* @param {Object} row: The row that will be rendered. |
||||
|
* @returns {jQueryElement} the <tr> element that has been rendered. |
||||
|
*/ |
||||
|
_renderRow: function (row) { |
||||
|
var self = this; |
||||
|
var $tr = $('<tr/>', {class: 'o_data_row'}); |
||||
|
$tr = $tr.append(self._renderLabelCell(row.data[0])); |
||||
|
var $cells = _.map(this.columns, function (node, index) { |
||||
|
var record = row.data[index]; |
||||
|
// make the widget use our field value for each cell
|
||||
|
node.attrs.name = self.matrix_data.field_value; |
||||
|
return self._renderBodyCell(record, node, index, {mode:''}); |
||||
|
}); |
||||
|
$tr = $tr.append($cells); |
||||
|
if (row.aggregate) { |
||||
|
$tr.append(self._renderAggregateRowCell(row)); |
||||
|
} |
||||
|
return $tr; |
||||
|
}, |
||||
|
/** |
||||
|
* Renders the label for a specific row. |
||||
|
* |
||||
|
* @private |
||||
|
* @params {Object} record: Contains the information about the record. |
||||
|
* @params {jQueryElement} the cell that was rendered. |
||||
|
*/ |
||||
|
_renderLabelCell: function(record) { |
||||
|
var $td = $('<td>'); |
||||
|
var value = record.data[this.matrix_data.field_y_axis]; |
||||
|
if (value.type == 'record') { |
||||
|
// we have a related record
|
||||
|
value = value.data.display_name; |
||||
|
} |
||||
|
// get 1st column filled w/ Y label
|
||||
|
$td.text(value); |
||||
|
return $td; |
||||
|
}, |
||||
|
/** |
||||
|
* Create a cell and fill it with the aggregate value. |
||||
|
* |
||||
|
* @private |
||||
|
* @param {Object} row: the row object to aggregate. |
||||
|
* @returns {jQueryElement} The rendered cell. |
||||
|
*/ |
||||
|
_renderAggregateRowCell: function (row) { |
||||
|
var $cell = $('<td/>', {class: 'row-total text-right'}); |
||||
|
this._apply_aggregate_value($cell, row.aggregate); |
||||
|
return $cell; |
||||
|
}, |
||||
|
/** |
||||
|
* Render a single body Cell. |
||||
|
* Gets the field and renders the widget. We force the edit mode, since |
||||
|
* we always want the widget to be editable. |
||||
|
* |
||||
|
* @private |
||||
|
* @param {Object} record: Contains the data for this cell |
||||
|
* @param {jQueryElement} node: The HTML of the field. |
||||
|
* @param {int} colIndex: The index of the current column. |
||||
|
* @param {Object} options: The obtions used for the widget |
||||
|
* @returns {jQueryElement} the rendered cell. |
||||
|
*/ |
||||
|
_renderBodyCell: function (record, node, colIndex, options) { |
||||
|
var tdClassName = 'o_data_cell'; |
||||
|
if (node.tag === 'button') { |
||||
|
tdClassName += ' o_list_button'; |
||||
|
} else if (node.tag === 'field') { |
||||
|
var typeClass = FIELD_CLASSES[this.state.fields[node.attrs.name].type]; |
||||
|
if (typeClass) { |
||||
|
tdClassName += (' ' + typeClass); |
||||
|
} |
||||
|
if (node.attrs.widget) { |
||||
|
tdClassName += (' o_' + node.attrs.widget + '_cell'); |
||||
|
} |
||||
|
} |
||||
|
// TODO roadmap: here we should collect possible extra params
|
||||
|
// the user might want to attach to each single cell.
|
||||
|
var $td = $('<td>', { |
||||
|
'class': tdClassName, |
||||
|
'data-form-id': record.id, |
||||
|
'data-id': record.data.id, |
||||
|
}); |
||||
|
// We register modifiers on the <td> element so that it gets the correct
|
||||
|
// modifiers classes (for styling)
|
||||
|
var modifiers = this._registerModifiers(node, record, $td, _.pick(options, 'mode')); |
||||
|
// If the invisible modifiers is true, the <td> element is left empty.
|
||||
|
// Indeed, if the modifiers was to change the whole cell would be
|
||||
|
// rerendered anyway.
|
||||
|
if (modifiers.invisible && !(options && options.renderInvisible)) { |
||||
|
return $td; |
||||
|
} |
||||
|
options.mode = 'edit'; // enforce edit mode
|
||||
|
var widget = this._renderFieldWidget(node, record, _.pick(options, 'mode')); |
||||
|
this._handleAttributes(widget.$el, node); |
||||
|
return $td.append(widget.$el); |
||||
|
}, |
||||
|
/** |
||||
|
* Wraps the column aggregate with a tfoot element |
||||
|
* |
||||
|
* @private |
||||
|
* @returns {jQueryElement} The footer element with the cells in it. |
||||
|
*/ |
||||
|
_renderFooter: function () { |
||||
|
var $cells = this._renderAggregateColCells(); |
||||
|
if ($cells) { |
||||
|
return $('<tfoot>').append($('<tr>').append('<td/>').append($cells)); |
||||
|
} |
||||
|
return; |
||||
|
}, |
||||
|
/** |
||||
|
* Render the Aggregate cells for the column. |
||||
|
* |
||||
|
* @private |
||||
|
* @returns {List} the rendered cells |
||||
|
*/ |
||||
|
_renderAggregateColCells: function () { |
||||
|
var self = this; |
||||
|
return _.map(this.columns, function (column, index) { |
||||
|
var $cell = $('<td>', {class: 'col-total text-right'}); |
||||
|
if (column.aggregate) { |
||||
|
self._apply_aggregate_value($cell, column.aggregate); |
||||
|
} |
||||
|
return $cell; |
||||
|
}); |
||||
|
}, |
||||
|
/** |
||||
|
* Compute the column aggregates. |
||||
|
* This function is called everytime the value is changed. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
_computeColumnAggregates: function () { |
||||
|
if (!this.matrix_data.show_column_totals) { |
||||
|
return; |
||||
|
} |
||||
|
var self = this, |
||||
|
fname = this.matrix_data.field_value, |
||||
|
field = this.state.fields[fname]; |
||||
|
if (!field) { return; } |
||||
|
var type = field.type; |
||||
|
if (type !== 'integer' && type !== 'float' && type !== 'monetary') { |
||||
|
return; |
||||
|
} |
||||
|
_.each(self.columns, function (column, index) { |
||||
|
column.aggregate = { |
||||
|
fname: fname, |
||||
|
ftype: type, |
||||
|
// TODO: translate
|
||||
|
help: 'Sum', |
||||
|
value: 0 |
||||
|
}; |
||||
|
_.each(self.rows, function (row) { |
||||
|
// var record = _.findWhere(self.state.data, {id: col.data.id});
|
||||
|
column.aggregate.value += row.data[index].data[fname]; |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
/** |
||||
|
* Compute the row aggregates. |
||||
|
* This function is called everytime the value is changed. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
_computeRowAggregates: function () { |
||||
|
if (!this.matrix_data.show_row_totals) { |
||||
|
return; |
||||
|
} |
||||
|
var self = this, |
||||
|
fname = this.matrix_data.field_value, |
||||
|
field = this.state.fields[fname]; |
||||
|
if (!field) { return; } |
||||
|
var type = field.type; |
||||
|
if (type !== 'integer' && type !== 'float' && type !== 'monetary') { |
||||
|
return; |
||||
|
} |
||||
|
_.each(self.rows, function (row) { |
||||
|
row.aggregate = { |
||||
|
fname: fname, |
||||
|
ftype: type, |
||||
|
// TODO: translate
|
||||
|
help: 'Sum', |
||||
|
value: 0 |
||||
|
}; |
||||
|
_.each(row.data, function (col) { |
||||
|
row.aggregate.value += col.data[fname]; |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
/** |
||||
|
* Takes the given Value, formats it and adds it to the given cell. |
||||
|
* |
||||
|
* @private |
||||
|
* @param {jQueryElement} $cell: The Cell where the aggregate should be added. |
||||
|
* @param {Object} aggregate: The object which contains the information about the aggregate value |
||||
|
*/ |
||||
|
_apply_aggregate_value: function ($cell, aggregate) { |
||||
|
var field = this.state.fields[aggregate.fname], |
||||
|
formatter = field_utils.format[field.type]; |
||||
|
var formattedValue = formatter(aggregate.value, field, {escape: true, }); |
||||
|
$cell.addClass('total').attr('title', aggregate.help).html(formattedValue); |
||||
|
}, |
||||
|
/** |
||||
|
* Check if the change was successful and then update the grid. |
||||
|
* This function is required on relational fields. |
||||
|
* |
||||
|
* @params {Object} state: Contains the current state of the field & all the data |
||||
|
* @params {String} id: the id of the updated object. |
||||
|
* @params {Array} fields: The fields we have in the view. |
||||
|
* @params {Object} ev: The event object. |
||||
|
* @returns {Deferred} The deferred object thats gonna be resolved when the change is made. |
||||
|
*/ |
||||
|
confirmUpdate: function (state, id, fields, ev) { |
||||
|
var self = this; |
||||
|
this.state = state; |
||||
|
return this.confirmChange(state, id, fields, ev).then(function () { |
||||
|
self._refresh(id); |
||||
|
}); |
||||
|
}, |
||||
|
/** |
||||
|
* Refresh our grid. |
||||
|
* |
||||
|
* @private |
||||
|
*/ |
||||
|
_refresh: function (id) { |
||||
|
this._updateRow(id); |
||||
|
this._refreshColTotals(); |
||||
|
this._refreshRowTotals(); |
||||
|
}, |
||||
|
/** |
||||
|
*Update row data in our internal rows. |
||||
|
* |
||||
|
* @params {String} id: The id of the row that needs to be updated. |
||||
|
*/ |
||||
|
_updateRow: function (id) { |
||||
|
var self = this, |
||||
|
record = _.findWhere(self.state.data, {id: id}); |
||||
|
_.each(self.rows, function(row) { |
||||
|
_.each(row.data, function(col, i) { |
||||
|
if (col.id == id) { |
||||
|
row.data[i] = record; |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
/** |
||||
|
* Update the row total. |
||||
|
*/ |
||||
|
_refreshColTotals: function () { |
||||
|
this._computeColumnAggregates(); |
||||
|
this.$('tfoot').replaceWith(this._renderFooter()); |
||||
|
}, |
||||
|
/** |
||||
|
* Update the column total. |
||||
|
*/ |
||||
|
_refreshRowTotals: function () { |
||||
|
var self = this; |
||||
|
this._computeRowAggregates(); |
||||
|
var $rows = self.$el.find('tr.o_data_row'); |
||||
|
_.each(self.rows, function(row, i) { |
||||
|
if (row.aggregate) { |
||||
|
$($rows[i]).find('.row-total') |
||||
|
.replaceWith(self._renderAggregateRowCell(row)); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
/* |
||||
|
x2m fields expect this |
||||
|
*/ |
||||
|
getEditableRecordID: function (){ return false;} |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
return X2Many2dMatrixRenderer; |
||||
|
}); |
||||
@ -1,433 +0,0 @@ |
|||||
/* Copyright 2015 Holger Brunn <hbrunn@therp.nl> |
|
||||
* Copyright 2016 Pedro M. Baeza <pedro.baeza@tecnativa.com> |
|
||||
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
|
|
||||
|
|
||||
odoo.define('web_widget_x2many_2d_matrix.widget', function (require) { |
|
||||
"use strict"; |
|
||||
|
|
||||
var core = require('web.core'); |
|
||||
var FieldManagerMixin = require('web.FieldManagerMixin'); |
|
||||
var Widget = require('web.Widget'); |
|
||||
var fieldRegistry = require('web.field_registry'); |
|
||||
var widgetRegistry = require('web.widget_registry'); |
|
||||
var widgetOne2many = widgetRegistry.get('one2many'); |
|
||||
var data = require('web.data'); |
|
||||
var $ = require('jquery'); |
|
||||
|
|
||||
var WidgetX2Many2dMatrix = widgetOne2Many.extend(FieldManagerMixin, { |
|
||||
template: 'FieldX2Many2dMatrix', |
|
||||
widget_class: 'oe_form_field_x2many_2d_matrix', |
|
||||
|
|
||||
// those will be filled with rows from the dataset
|
|
||||
by_x_axis: {}, |
|
||||
by_y_axis: {}, |
|
||||
by_id: {}, |
|
||||
// configuration values
|
|
||||
field_x_axis: 'x', |
|
||||
field_label_x_axis: 'x', |
|
||||
field_y_axis: 'y', |
|
||||
field_label_y_axis: 'y', |
|
||||
field_value: 'value', |
|
||||
x_axis_clickable: true, |
|
||||
y_axis_clickable: true, |
|
||||
// information about our datatype
|
|
||||
is_numeric: false, |
|
||||
show_row_totals: true, |
|
||||
show_column_totals: true, |
|
||||
// this will be filled with the model's fields_get
|
|
||||
fields: {}, |
|
||||
// Store fields used to fill HTML attributes
|
|
||||
fields_att: {}, |
|
||||
|
|
||||
parse_boolean: function(val) |
|
||||
{ |
|
||||
if (val.toLowerCase() === 'true' || val === '1') { |
|
||||
return true; |
|
||||
} |
|
||||
return false; |
|
||||
}, |
|
||||
|
|
||||
// read parameters
|
|
||||
init: function (parent, fieldname, record, therest) { |
|
||||
var res = this._super(parent, fieldname, record, therest); |
|
||||
FieldManagerMixin.init.call(this); |
|
||||
var node = record.fieldsInfo[therest.viewType][fieldname]; |
|
||||
|
|
||||
this.field_x_axis = node.field_x_axis || this.field_x_axis; |
|
||||
this.field_y_axis = node.field_y_axis || this.field_y_axis; |
|
||||
this.field_label_x_axis = node.field_label_x_axis || this.field_x_axis; |
|
||||
this.field_label_y_axis = node.field_label_y_axis || this.field_y_axis; |
|
||||
this.x_axis_clickable = this.parse_boolean(node.x_axis_clickable || '1'); |
|
||||
this.y_axis_clickable = this.parse_boolean(node.y_axis_clickable || '1'); |
|
||||
this.field_value = node.field_value || this.field_value; |
|
||||
for (var property in node) { |
|
||||
if (property.startsWith("field_att_")) { |
|
||||
this.fields_att[property.substring(10)] = node[property]; |
|
||||
} |
|
||||
} |
|
||||
this.field_editability = node.field_editability || this.field_editability; |
|
||||
this.show_row_totals = this.parse_boolean(node.show_row_totals || '1'); |
|
||||
this.show_column_totals = this.parse_boolean(node.show_column_totals || '1'); |
|
||||
this.init_fields(); |
|
||||
// this.set_value(undefined);
|
|
||||
|
|
||||
return res; |
|
||||
}, |
|
||||
|
|
||||
init_fields: function() { |
|
||||
return; |
|
||||
}, |
|
||||
|
|
||||
// return a field's value, id in case it's a one2many field
|
|
||||
get_field_value: function(row, field, many2one_as_name) |
|
||||
// FIXME looks silly
|
|
||||
{ |
|
||||
if(this.fields[field].type == 'many2one' && _.isArray(row[field])) |
|
||||
{ |
|
||||
if(many2one_as_name) |
|
||||
{ |
|
||||
return row[field][1]; |
|
||||
} |
|
||||
else |
|
||||
{ |
|
||||
return row[field][0]; |
|
||||
} |
|
||||
} |
|
||||
return row[field]; |
|
||||
}, |
|
||||
|
|
||||
// setup our datastructure for simple access in the template
|
|
||||
set_value: function(value_) |
|
||||
{ |
|
||||
var self = this, |
|
||||
result = this._super(value_); |
|
||||
|
|
||||
self.by_x_axis = {}; |
|
||||
self.by_y_axis = {}; |
|
||||
self.by_id = {}; |
|
||||
|
|
||||
return $.when(result).then(function() |
|
||||
{ |
|
||||
return self.dataset._model.call('fields_get').then(function(fields) |
|
||||
{ |
|
||||
self.fields = fields; |
|
||||
self.is_numeric = fields[self.field_value].type == 'float'; |
|
||||
self.show_row_totals &= self.is_numeric; |
|
||||
self.show_column_totals &= self.is_numeric; |
|
||||
}) |
|
||||
// if there are cached writes on the parent dataset, read below
|
|
||||
// only returns the written data, which is not enough to properly
|
|
||||
// set up our data structure. Read those ids here and patch the
|
|
||||
// cache
|
|
||||
.then(function() |
|
||||
{ |
|
||||
var ids_written = _.map( |
|
||||
self.dataset.to_write, function(x) { return x.id }); |
|
||||
if(!ids_written.length) |
|
||||
{ |
|
||||
return; |
|
||||
} |
|
||||
return (new data.Query(self.dataset._model)) |
|
||||
.filter([['id', 'in', ids_written]]) |
|
||||
.all() |
|
||||
.then(function(rows) |
|
||||
{ |
|
||||
_.each(rows, function(row) |
|
||||
{ |
|
||||
var cache = _.find( |
|
||||
self.dataset.cache, |
|
||||
function(x) { return x.id == row.id } |
|
||||
); |
|
||||
_.extend(cache.values, row, _.clone(cache.values)); |
|
||||
}) |
|
||||
}) |
|
||||
}) |
|
||||
.then(function() |
|
||||
{ |
|
||||
return self.dataset.read_ids(self.dataset.ids, self.fields).then(function(rows) |
|
||||
{ |
|
||||
// setup data structure
|
|
||||
_.each(rows, function(row) |
|
||||
{ |
|
||||
self.add_xy_row(row); |
|
||||
}); |
|
||||
if(self.is_started && !self.no_rerender) |
|
||||
{ |
|
||||
self.renderElement(); |
|
||||
self.compute_totals(); |
|
||||
self.setup_many2one_axes(); |
|
||||
self.$el.find('.edit').on( |
|
||||
'change', self.proxy(self.xy_value_change)); |
|
||||
self.effective_readonly_change(); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// do whatever needed to setup internal data structure
|
|
||||
add_xy_row: function(row) |
|
||||
{ |
|
||||
var x = this.get_field_value(row, this.field_x_axis), |
|
||||
y = this.get_field_value(row, this.field_y_axis); |
|
||||
// row is a *copy* of a row in dataset.cache, fetch
|
|
||||
// a reference to this row in order to have the
|
|
||||
// internal data structure point to the same data
|
|
||||
// the dataset manipulates
|
|
||||
_.every(this.dataset.cache, function(cached_row) |
|
||||
{ |
|
||||
if(cached_row.id == row.id) |
|
||||
{ |
|
||||
row = cached_row.values; |
|
||||
// new rows don't have that
|
|
||||
row.id = cached_row.id; |
|
||||
return false; |
|
||||
} |
|
||||
return true; |
|
||||
}); |
|
||||
this.by_x_axis[x] = this.by_x_axis[x] || {}; |
|
||||
this.by_y_axis[y] = this.by_y_axis[y] || {}; |
|
||||
this.by_x_axis[x][y] = row; |
|
||||
this.by_y_axis[y][x] = row; |
|
||||
this.by_id[row.id] = row; |
|
||||
}, |
|
||||
|
|
||||
// get x axis values in the correct order
|
|
||||
get_x_axis_values: function() |
|
||||
{ |
|
||||
return _.keys(this.by_x_axis); |
|
||||
}, |
|
||||
|
|
||||
// get y axis values in the correct order
|
|
||||
get_y_axis_values: function() |
|
||||
{ |
|
||||
return _.keys(this.by_y_axis); |
|
||||
}, |
|
||||
|
|
||||
// get the label for a value on the x axis
|
|
||||
get_x_axis_label: function(x) |
|
||||
{ |
|
||||
return this.get_field_value( |
|
||||
_.first(_.values(this.by_x_axis[x])), |
|
||||
this.field_label_x_axis, true); |
|
||||
}, |
|
||||
|
|
||||
// get the label for a value on the y axis
|
|
||||
get_y_axis_label: function(y) |
|
||||
{ |
|
||||
return this.get_field_value( |
|
||||
_.first(_.values(this.by_y_axis[y])), |
|
||||
this.field_label_y_axis, true); |
|
||||
}, |
|
||||
|
|
||||
// return the class(es) the inputs should have
|
|
||||
get_xy_value_class: function() |
|
||||
{ |
|
||||
var classes = 'oe_form_field oe_form_required'; |
|
||||
if(this.is_numeric) |
|
||||
{ |
|
||||
classes += ' oe_form_field_float'; |
|
||||
} |
|
||||
return classes; |
|
||||
}, |
|
||||
|
|
||||
// return row id of a coordinate
|
|
||||
get_xy_id: function(x, y) |
|
||||
{ |
|
||||
return this.by_x_axis[x][y]['id']; |
|
||||
}, |
|
||||
|
|
||||
get_xy_att: function(x, y) |
|
||||
{ |
|
||||
var vals = {}; |
|
||||
for (var att in this.fields_att) { |
|
||||
var val = this.get_field_value( |
|
||||
this.by_x_axis[x][y], this.fields_att[att]); |
|
||||
// Discard empty values
|
|
||||
if (val) { |
|
||||
vals[att] = val; |
|
||||
} |
|
||||
} |
|
||||
return vals; |
|
||||
}, |
|
||||
|
|
||||
// return the value of a coordinate
|
|
||||
get_xy_value: function(x, y) |
|
||||
{ |
|
||||
return this.get_field_value( |
|
||||
this.by_x_axis[x][y], this.field_value); |
|
||||
}, |
|
||||
|
|
||||
// validate a value
|
|
||||
validate_xy_value: function(val) |
|
||||
{ |
|
||||
try |
|
||||
{ |
|
||||
this.parse_xy_value(val); |
|
||||
} |
|
||||
catch(e) |
|
||||
{ |
|
||||
return false; |
|
||||
} |
|
||||
return true; |
|
||||
}, |
|
||||
|
|
||||
// parse a value from user input
|
|
||||
parse_xy_value: function(val) |
|
||||
{ |
|
||||
return val; |
|
||||
}, |
|
||||
|
|
||||
// format a value from the database for display
|
|
||||
format_xy_value: function(val) |
|
||||
{ |
|
||||
return val; |
|
||||
}, |
|
||||
|
|
||||
// compute totals
|
|
||||
compute_totals: function() |
|
||||
{ |
|
||||
var self = this, |
|
||||
grand_total = 0, |
|
||||
totals_x = {}, |
|
||||
totals_y = {}, |
|
||||
rows = this.by_id, |
|
||||
deferred = $.Deferred(); |
|
||||
_.each(rows, function(row) |
|
||||
{ |
|
||||
var key_x = self.get_field_value(row, self.field_x_axis), |
|
||||
key_y = self.get_field_value(row, self.field_y_axis); |
|
||||
totals_x[key_x] = (totals_x[key_x] || 0) + self.get_field_value(row, self.field_value); |
|
||||
totals_y[key_y] = (totals_y[key_y] || 0) + self.get_field_value(row, self.field_value); |
|
||||
grand_total += self.get_field_value(row, self.field_value); |
|
||||
}); |
|
||||
_.each(totals_y, function(total, y) |
|
||||
{ |
|
||||
self.$el.find( |
|
||||
_.str.sprintf('td.row_total[data-y="%s"]', y)).text( |
|
||||
self.format_xy_value(total)); |
|
||||
}); |
|
||||
_.each(totals_x, function(total, x) |
|
||||
{ |
|
||||
self.$el.find( |
|
||||
_.str.sprintf('td.column_total[data-x="%s"]', x)).text( |
|
||||
self.format_xy_value(total)); |
|
||||
}); |
|
||||
self.$el.find('.grand_total').text( |
|
||||
self.format_xy_value(grand_total)) |
|
||||
deferred.resolve({ |
|
||||
totals_x: totals_x, |
|
||||
totals_y: totals_y, |
|
||||
grand_total: grand_total, |
|
||||
rows: rows, |
|
||||
}); |
|
||||
return deferred; |
|
||||
}, |
|
||||
|
|
||||
setup_many2one_axes: function() |
|
||||
{ |
|
||||
if(this.fields[this.field_x_axis].type == 'many2one' && this.x_axis_clickable) |
|
||||
{ |
|
||||
this.$el.find('th[data-x]').addClass('oe_link') |
|
||||
.click(_.partial( |
|
||||
this.proxy(this.many2one_axis_click), |
|
||||
this.field_x_axis, 'x')); |
|
||||
} |
|
||||
if(this.fields[this.field_y_axis].type == 'many2one' && this.y_axis_clickable) |
|
||||
{ |
|
||||
this.$el.find('tr[data-y] th').addClass('oe_link') |
|
||||
.click(_.partial( |
|
||||
this.proxy(this.many2one_axis_click), |
|
||||
this.field_y_axis, 'y')); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
many2one_axis_click: function(field, id_attribute, e) |
|
||||
{ |
|
||||
this.do_action({ |
|
||||
type: 'ir.actions.act_window', |
|
||||
name: this.fields[field].string, |
|
||||
res_model: this.fields[field].relation, |
|
||||
res_id: $(e.currentTarget).data(id_attribute), |
|
||||
views: [[false, 'form']], |
|
||||
target: 'current', |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
start: function() |
|
||||
{ |
|
||||
var self = this; |
|
||||
this.$el.find('.edit').on( |
|
||||
'change', self.proxy(this.xy_value_change)); |
|
||||
this.compute_totals(); |
|
||||
this.setup_many2one_axes(); |
|
||||
this.on("change:effective_readonly", |
|
||||
this, this.proxy(this.effective_readonly_change)); |
|
||||
this.effective_readonly_change(); |
|
||||
return this._super(); |
|
||||
}, |
|
||||
|
|
||||
xy_value_change: function(e) |
|
||||
{ |
|
||||
var $this = $(e.currentTarget), |
|
||||
val = $this.val(); |
|
||||
if(this.validate_xy_value(val)) |
|
||||
{ |
|
||||
var data = {}, value = this.parse_xy_value(val); |
|
||||
data[this.field_value] = value; |
|
||||
|
|
||||
$this.siblings('.read').text(this.format_xy_value(value)); |
|
||||
$this.val(this.format_xy_value(value)); |
|
||||
|
|
||||
this.dataset.write($this.data('id'), data); |
|
||||
this.by_id[$this.data('id')][this.field_value] = value; |
|
||||
$this.parent().removeClass('oe_form_invalid'); |
|
||||
this.compute_totals(); |
|
||||
} |
|
||||
else |
|
||||
{ |
|
||||
$this.parent().addClass('oe_form_invalid'); |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
effective_readonly_change: function() |
|
||||
{ |
|
||||
this.$el |
|
||||
.find('tbody .edit') |
|
||||
.toggle(!this.get('effective_readonly')); |
|
||||
this.$el |
|
||||
.find('tbody .read') |
|
||||
.toggle(this.get('effective_readonly')); |
|
||||
this.$el.find('.edit').first().focus(); |
|
||||
}, |
|
||||
|
|
||||
is_syntax_valid: function() |
|
||||
{ |
|
||||
return this.$el.find('.oe_form_invalid').length == 0; |
|
||||
}, |
|
||||
|
|
||||
load_views: function() { |
|
||||
// Needed for removing the initial empty tree view when the widget
|
|
||||
// is loaded
|
|
||||
var self = this, |
|
||||
result = this._super(); |
|
||||
|
|
||||
return $.when(result).then(function() |
|
||||
{ |
|
||||
self.renderElement(); |
|
||||
self.compute_totals(); |
|
||||
self.$el.find('.edit').on( |
|
||||
'change', self.proxy(self.xy_value_change)); |
|
||||
}); |
|
||||
}, |
|
||||
}); |
|
||||
|
|
||||
fieldRegistry.add( |
|
||||
'x2many_2d_matrix', WidgetX2Many2dMatrix |
|
||||
); |
|
||||
|
|
||||
return { |
|
||||
WidgetX2Many2dMatrix: WidgetX2Many2dMatrix |
|
||||
}; |
|
||||
}); |
|
||||
@ -0,0 +1,172 @@ |
|||||
|
/* Copyright 2015 Holger Brunn <hbrunn@therp.nl> |
||||
|
* Copyright 2016 Pedro M. Baeza <pedro.baeza@tecnativa.com> |
||||
|
* Copyright 2018 Simone Orsi <simone.orsi@camptocamp.com> |
||||
|
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
|
||||
|
|
||||
|
odoo.define('web_widget_x2many_2d_matrix.widget', function (require) { |
||||
|
"use strict"; |
||||
|
|
||||
|
var core = require('web.core'); |
||||
|
// var FieldManagerMixin = require('web.FieldManagerMixin');
|
||||
|
var field_registry = require('web.field_registry'); |
||||
|
var relational_fields = require('web.relational_fields'); |
||||
|
var weContext = require('web_editor.context'); |
||||
|
// var Helpers = require('web_widget_x2many_2d_matrix.helpers');
|
||||
|
var AbstractField = require('web.AbstractField'); |
||||
|
var X2Many2dMatrixRenderer = require('web_widget_x2many_2d_matrix.X2Many2dMatrixRenderer'); |
||||
|
|
||||
|
var WidgetX2Many2dMatrix = relational_fields.FieldOne2Many.extend({ |
||||
|
widget_class: 'o_form_field_x2many_2d_matrix', |
||||
|
/** |
||||
|
* Initialize the widget & parameters. |
||||
|
* |
||||
|
* @param {Object} parent: contains the form view. |
||||
|
* @param {String} name: the name of the field. |
||||
|
* @param {Object} record: Contains the information about the database records. |
||||
|
* @param {Object} options: Contains the view options. |
||||
|
*/ |
||||
|
init: function (parent, name, record, options) { |
||||
|
this._super(parent, name, record, options); |
||||
|
this.init_params(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Initialize the widget specific parameters. |
||||
|
* Sets the axis and the values. |
||||
|
*/ |
||||
|
init_params: function () { |
||||
|
var node = this.attrs; |
||||
|
this.by_x_axis = {}; |
||||
|
this.by_y_axis = {}; |
||||
|
this.field_x_axis = node.field_x_axis || this.field_x_axis; |
||||
|
this.field_y_axis = node.field_y_axis || this.field_y_axis; |
||||
|
this.field_label_x_axis = node.field_label_x_axis || this.field_x_axis; |
||||
|
this.field_label_y_axis = node.field_label_y_axis || this.field_y_axis; |
||||
|
this.x_axis_clickable = this.parse_boolean(node.x_axis_clickable || '1'); |
||||
|
this.y_axis_clickable = this.parse_boolean(node.y_axis_clickable || '1'); |
||||
|
this.field_value = node.field_value || this.field_value; |
||||
|
// TODO: is this really needed? Holger?
|
||||
|
for (var property in node) { |
||||
|
if (property.startsWith("field_att_")) { |
||||
|
this.fields_att[property.substring(10)] = node[property]; |
||||
|
} |
||||
|
} |
||||
|
// and this?
|
||||
|
this.field_editability = node.field_editability || this.field_editability; |
||||
|
this.show_row_totals = this.parse_boolean(node.show_row_totals || '1'); |
||||
|
this.show_column_totals = this.parse_boolean(node.show_column_totals || '1'); |
||||
|
this.init_matrix(); |
||||
|
}, |
||||
|
/** |
||||
|
* Initializes the Value matrix. |
||||
|
* Puts the values in the grid. If we have related items we use the display name. |
||||
|
*/ |
||||
|
init_matrix: function(){ |
||||
|
var self = this, |
||||
|
records = self.recordData[this.name].data; |
||||
|
_.each(records, function(record) { |
||||
|
var x = record.data[self.field_x_axis], |
||||
|
y = record.data[self.field_y_axis]; |
||||
|
if (x.type == 'record') { |
||||
|
// we have a related record
|
||||
|
x = x.data.display_name; |
||||
|
} |
||||
|
if (y.type == 'record') { |
||||
|
// we have a related record
|
||||
|
y = y.data.display_name; |
||||
|
} |
||||
|
self.by_x_axis[x] = self.by_x_axis[x] || {}; |
||||
|
self.by_y_axis[y] = self.by_y_axis[y] || {}; |
||||
|
self.by_x_axis[x][y] = record; |
||||
|
self.by_y_axis[y][x] = record; |
||||
|
}); |
||||
|
// init columns
|
||||
|
self.columns = []; |
||||
|
$.each(self.by_x_axis, function(x){ |
||||
|
self.columns.push(self._make_column(x)); |
||||
|
}); |
||||
|
self.rows = []; |
||||
|
$.each(self.by_y_axis, function(y){ |
||||
|
self.rows.push(self._make_row(y)); |
||||
|
}); |
||||
|
self.matrix_data = { |
||||
|
'field_value': self.field_value, |
||||
|
'field_x_axis': self.field_x_axis, |
||||
|
'field_y_axis': self.field_y_axis, |
||||
|
'columns': self.columns, |
||||
|
'rows': self.rows, |
||||
|
'show_row_totals': self.show_row_totals, |
||||
|
'show_column_totals': self.show_column_totals |
||||
|
}; |
||||
|
|
||||
|
}, |
||||
|
/** |
||||
|
* Create scaffold for a column. |
||||
|
* |
||||
|
* @params {String} x: The string used as a column title |
||||
|
*/ |
||||
|
_make_column: function(x){ |
||||
|
return { |
||||
|
// simulate node parsed on xml arch
|
||||
|
'tag': 'field', |
||||
|
'attrs': { |
||||
|
'name': this.field_x_axis, |
||||
|
'string': x |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
/** |
||||
|
* Create scaffold for a row. |
||||
|
* |
||||
|
* @params {String} x: The string used as a row title |
||||
|
*/ |
||||
|
_make_row: function(y){ |
||||
|
var self = this; |
||||
|
// use object so that we can attach more data if needed
|
||||
|
var row = {'data': []}; |
||||
|
$.each(self.by_x_axis, function(x) { |
||||
|
row.data.push(self.by_y_axis[y][x]); |
||||
|
}); |
||||
|
return row; |
||||
|
}, |
||||
|
/** |
||||
|
*Parse a String containing a Python bool or 1 and convert it to a proper bool. |
||||
|
* |
||||
|
* @params {String} val: the string to be parsed. |
||||
|
* @returns {Boolean} The parsed boolean. |
||||
|
*/ |
||||
|
parse_boolean: function(val) { |
||||
|
if (val.toLowerCase() === 'true' || val === '1') { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
/** |
||||
|
*Create the matrix renderer and add its output to our element |
||||
|
* |
||||
|
* @returns {Deferred} A deferred object to be completed when it finished rendering. |
||||
|
*/ |
||||
|
_render: function () { |
||||
|
if (!this.view) { |
||||
|
return this._super(); |
||||
|
} |
||||
|
var arch = this.view.arch, |
||||
|
viewType = 'list'; |
||||
|
this.renderer = new X2Many2dMatrixRenderer(this, this.value, { |
||||
|
arch: arch, |
||||
|
editable: true, |
||||
|
viewType: viewType, |
||||
|
matrix_data: this.matrix_data |
||||
|
}); |
||||
|
this.$el.addClass('o_field_x2many o_field_x2many_2d_matrix'); |
||||
|
return this.renderer.appendTo(this.$el); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
field_registry.add('x2many_2d_matrix', WidgetX2Many2dMatrix); |
||||
|
|
||||
|
return { |
||||
|
WidgetX2Many2dMatrix: WidgetX2Many2dMatrix |
||||
|
}; |
||||
|
}); |
||||
@ -1,36 +0,0 @@ |
|||||
<templates> |
|
||||
<t t-name="FieldX2Many2dMatrix"> |
|
||||
<div t-att-class="widget.widget_class"> |
|
||||
<table class="o_list_view table table-condensed table-striped"> |
|
||||
<thead> |
|
||||
<tr class="oe_list_header_columns"> |
|
||||
<th /> |
|
||||
<th t-foreach="widget.get_x_axis_values()" t-as="x" t-att-data-x="x"> |
|
||||
<t t-esc="widget.get_x_axis_label(x)" /> |
|
||||
</th> |
|
||||
<th t-if="widget.show_row_totals">Total</th> |
|
||||
</tr> |
|
||||
</thead> |
|
||||
<tbody> |
|
||||
<tr t-foreach="widget.get_y_axis_values()" t-as="y" t-att-data-y="y"> |
|
||||
<th><t t-esc="widget.get_y_axis_label(y)" /></th> |
|
||||
<td t-foreach="widget.get_x_axis_values()" t-as="x" t-att-class="'' + (widget.is_numeric ? ' oe_number' : '')" t-att-data-x="x"> |
|
||||
<span t-att-class="widget.get_xy_value_class()"> |
|
||||
<input class="edit o_form_input oe_edit_only" t-att-data-id="widget.get_xy_id(x, y)" t-att-value="widget.format_xy_value(widget.get_xy_value(x, y))" t-att="widget.get_xy_att(x, y)"/> |
|
||||
<span class="read oe_read_only"><t t-esc="widget.format_xy_value(widget.get_xy_value(x, y))" /></span> |
|
||||
</span> |
|
||||
</td> |
|
||||
<td t-if="widget.show_row_totals" class="row_total oe_number" t-att-data-y="y"/> |
|
||||
</tr> |
|
||||
</tbody> |
|
||||
<tfoot t-if="widget.show_column_totals"> |
|
||||
<tr> |
|
||||
<th>Total</th> |
|
||||
<td t-foreach="widget.get_x_axis_values()" t-as="x" class="oe_list_footer oe_number column_total" t-att-data-x="x" /> |
|
||||
<td class="grand_total oe_number" /> |
|
||||
</tr> |
|
||||
</tfoot> |
|
||||
</table> |
|
||||
</div> |
|
||||
</t> |
|
||||
</templates> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue