This module allows to show an x2many field with 3-tuples +($x_value, $y_value, $value) in a table
+| + | $x_value1 | +$x_value2 | +
|---|---|---|
| $y_value1 | +$value(1/1) | +$value(2/1) | +
| $y_value2 | +$value(1/2) | +$value(2/2) | +
where value(n/n) is editable.
+An example use case would be: Select some projects and some employees so that +a manager can easily fill in the planned_hours for one task per employee. The +result could look like this:
+
+The beauty of this is that you have an arbitrary amount of columns with this +widget, trying to get this in standard x2many lists involves some quite ugly +hacks.
+Table of contents
+Use this widget by saying:
++<field name="my_field" widget="x2many_2d_matrix" /> ++
This assumes that my_field refers to a model with the fields x, y and +value. If your fields are named differently, pass the correct names as +attributes:
++<field name="my_field" widget="x2many_2d_matrix" field_x_axis="my_field1" field_y_axis="my_field2" field_value="my_field3"> + <tree> + <field name="my_field"/> + <field name="my_field1"/> + <field name="my_field2"/> + <field name="my_field3"/> + </tree> +</field> ++
You can pass the following parameters:
+You need a data structure already filled with values. Let’s assume we want to +use this widget in a wizard that lets the user fill in planned hours for one +task per project per user. In this case, we can use project.task as our +data model and point to it from our wizard. The crucial part is that we fill +the field in the default function:
++from odoo import fields, models + +class MyWizard(models.TransientModel): + _name = 'my.wizard' + + def _default_task_ids(self): + # your list of project should come from the context, some selection + # in a previous wizard or wherever else + projects = self.env['project.project'].browse([1, 2, 3]) + # same with users + users = self.env['res.users'].browse([1, 2, 3]) + return [ + (0, 0, { + 'name': 'Sample task name', + 'project_id': p.id, + 'user_id': u.id, + 'planned_hours': 0, + 'message_needaction': False, + 'date_deadline': fields.Date.today(), + }) + # if the project doesn't have a task for the user, + # create a new one + if not p.task_ids.filtered(lambda x: x.user_id == u) else + # otherwise, return the task + (4, p.task_ids.filtered(lambda x: x.user_id == u)[0].id) + for p in projects + for u in users + ] + + task_ids = fields.Many2many('project.task', default=_default_task_ids) ++
Now in our wizard, we can use:
++<field name="task_ids" widget="x2many_2d_matrix" field_x_axis="project_id" field_y_axis="user_id" field_value="planned_hours"> + <tree> + <field name="task_ids"/> + <field name="project_id"/> + <field name="user_id"/> + <field name="planned_hours"/> + </tree> +</field> ++
Bugs are tracked on GitHub Issues. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us smashing it by providing a detailed and welcomed +feedback.
+Do not contact contributors directly about support or help with technical issues.
+This module is maintained by the OCA.
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use.
+This module is part of the OCA/web project on GitHub.
+You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.
+| '); + $tr = $tr.append(_.map( + this.columns, + this._renderHeaderCell.bind(this) + )); + if (this.matrix_data.show_row_totals) { + $tr.append($(' | ', {class: 'total'})); + } + return $('').append($tr); + }, + + /** + * Render a single header cell. + * + * Creates a th and adds the description as text. + * + * @private + * @param {jQueryElement} node + * @returns {jQueryElement} the created | node. + */ + _renderHeaderCell: function (node) { + var name = node.attrs.name; + var field = this.state.fields[name]; + var $th = $(' | '); + if (!field) { + return $th; + } + var description = null; + if (node.attrs.widget) { + description = this.state.fieldsInfo.list[name] + .Widget.prototype.description; + } + if (_.isNull(description)) { + 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 | ||||||
|---|---|---|---|---|---|---|---|---|---|
| '); + 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 = $(' | ', {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 = $(' | ', { + 'class': tdClassName, + }); + if (_.isUndefined(record)) { + // Without record, nothing elese to do + return $td; + } + $td.attr({ + 'data-form-id': record.id, + 'data-id': record.data.id, + }); + // We register modifiers on the | 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 | 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; + } + // Enforce mode of the parent + options.mode = this.getParent().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) { + var $tr = $(' | |||||
| ').append($cells); + var $total_cell = this._renderTotalCell(); + if ($total_cell) { + $tr.append($total_cell); + } + return $(' | ', {class: 'col-total text-right'}); + this._apply_aggregate_value($cell, this.total); + return $cell; + }, + + /** + * Render the Aggregate cells for the column. + * + * @private + * @returns {List} the rendered cells + */ + _renderAggregateColCells: function () { + var self = this; + return _.map(this.columns, function (column) { + var $cell = $(' | ', {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 fname = this.matrix_data.field_value,
+ field = this.state.fields[fname];
+ if (!field) {
+ return;
+ }
+ var type = field.type;
+ if (!~['integer', 'float', 'monetary'].indexOf(type)) {
+ return;
+ }
+ this.total = {
+ fname: fname,
+ ftype: type,
+ help: _t('Sum Total'),
+ value: 0,
+ };
+ _.each(this.columns, function (column, index) {
+ column.aggregate = {
+ fname: fname,
+ ftype: type,
+ help: _t('Sum'),
+ value: 0,
+ };
+ _.each(this.rows, function (row) {
+ // TODO Use only one _.propertyOf in underscore 1.9.0+
+ try {
+ column.aggregate.value += row.data[index].data[fname];
+ } catch (error) {
+ // Nothing to do
+ }
+ });
+ this.total.value += column.aggregate.value;
+ }.bind(this));
+ },
+
+ /**
+ * @override
+ */
+ updateState: function (state, params) {
+ if (params.matrix_data) {
+ this._saveMatrixData(params.matrix_data);
+ }
+ return this._super.apply(this, arguments);
+ },
+
+ /**
+ * Traverse the fields matrix with the keyboard
+ *
+ * @override
+ * @private
+ * @param {OdooEvent} event "navigation_move" event
+ */
+ _onNavigationMove: function (event) {
+ var widgets = this.__parentedChildren,
+ index = widgets.indexOf(event.target),
+ first = index === 0,
+ last = index === widgets.length - 1,
+ move = 0;
+ // Guess if we have to move the focus
+ if (event.data.direction === "next" && !last) {
+ move = 1;
+ } else if (event.data.direction === "previous" && !first) {
+ move = -1;
+ }
+ // Move focus
+ if (move) {
+ var target = widgets[index + move];
+ index = this.allFieldWidgets[target.record.id].indexOf(target);
+ this._activateFieldWidget(target.record, index, {inc: 0});
+ event.stopPropagation();
+ }
+ },
+
+ /**
+ * 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 fname = this.matrix_data.field_value,
+ field = this.state.fields[fname];
+ if (!field) {
+ return;
+ }
+ var type = field.type;
+ if (!~['integer', 'float', 'monetary'].indexOf(type)) {
+ return;
+ }
+ _.each(this.rows, function (row) {
+ row.aggregate = {
+ fname: fname,
+ ftype: type,
+ help: _t('Sum'),
+ value: 0,
+ };
+ _.each(row.data, function (col) {
+ // TODO Use _.property in underscore 1.9+
+ try {
+ row.aggregate.value += col.data[fname];
+ } catch (error) {
+ // Nothing to do
+ }
+ });
+ });
+ },
+
+ /**
+ * 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.
+ *
+ * @param {Object} state
+ * Contains the current state of the field & all the data
+ *
+ * @param {String} id
+ * the id of the updated object.
+ *
+ * @param {Array} fields
+ * The fields we have in the view.
+ *
+ * @param {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
+ * @param {String} id Datapoint ID
+ */
+ _refresh: function (id) {
+ this._updateRow(id);
+ this._refreshColTotals();
+ this._refreshRowTotals();
+ },
+
+ /**
+ *Update row data in our internal rows.
+ *
+ * @param {String} id: The id of the row that needs to be updated.
+ */
+ _updateRow: function (id) {
+ var record = _.findWhere(this.state.data, {id: id}),
+ _id = _.property("id");
+ _.each(this.rows, function (row) {
+ _.each(row.data, function (col, i) {
+ if (_id(col) === 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));
+ }
+ });
+ },
+
+ /**
+ * X2many fields expect this
+ *
+ * @returns {null}
+ */
+ getEditableRecordID: function () {
+ return null;
+ },
+
+ });
+
+ return X2Many2dMatrixRenderer;
+});
diff --git a/web_widget_x2many_2d_matrix/static/src/js/abstract_view_matrix_limit_extend.js b/web_widget_x2many_2d_matrix/static/src/js/abstract_view_matrix_limit_extend.js
new file mode 100644
index 000000000000..5b24c457a1ae
--- /dev/null
+++ b/web_widget_x2many_2d_matrix/static/src/js/abstract_view_matrix_limit_extend.js
@@ -0,0 +1,17 @@
+odoo.define( "web_widget_x2many_2d_matrix.matrix_limit_extend", function (require) {
+"use strict";
+
+ var AbstractView = require("web.AbstractView");
+
+ AbstractView.include({
+ // We extend this method so that the view is not limited to
+ // just 40 cells when the 'x2many_2d_matrix' widget is used.
+ _setSubViewLimit: function (attrs) {
+ this._super(attrs);
+ if (attrs.widget === "x2many_2d_matrix") {
+ attrs.limit = Infinity;
+ }
+ },
+ });
+ }
+);
diff --git a/web_widget_x2many_2d_matrix/static/src/js/widget_x2many_2d_matrix.js b/web_widget_x2many_2d_matrix/static/src/js/widget_x2many_2d_matrix.js
new file mode 100644
index 000000000000..addf7cd4087e
--- /dev/null
+++ b/web_widget_x2many_2d_matrix/static/src/js/widget_x2many_2d_matrix.js
@@ -0,0 +1,224 @@
+/* Copyright 2015 Holger Brunn |