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"); + } else { + $th.addClass("text-center"); + } + + if (config.isDebug()) { + 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, + function (row) { + row.attrs.name = this.matrix_data.field_value; + return this._renderRow(row); + }.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"}); + this.applyAggregateValue($cell, row); + 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 === "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; + + if (node.tag === "widget") { + return $td.append(this._renderWidget(record, node)); + } + var $el = this._renderFieldWidget(node, record, _.pick(options, "mode")); + return $td.append($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"}); + this.applyAggregateValue($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 = $(" | ");
+ if (config.isDebug()) {
+ $cell.addClass(column.attrs.name);
+ }
+ if (column.aggregate) {
+ self.applyAggregateValue($cell, column);
+ }
+ 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 = {
+ attrs: {
+ name: fname,
+ },
+ aggregate: {
+ help: _t("Sum Total"),
+ value: 0,
+ },
+ };
+ _.each(
+ this.columns,
+ function (column, index) {
+ column.aggregate = {
+ 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.aggregate.value += column.aggregate.value;
+ }.bind(this)
+ );
+ },
+
+ _getRecord: function (recordId) {
+ var record = null;
+ utils.traverse_records(this.state, function (r) {
+ if (r.id === recordId) {
+ record = r;
+ }
+ });
+ return record;
+ },
+
+ /**
+ * @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 = {
+ 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} axis
+ * The object which contains the information about the aggregate value axis
+ */
+ applyAggregateValue: function ($cell, axis) {
+ var field = this.state.fields[axis.attrs.name];
+ var value = axis.aggregate.value;
+ var help = axis.aggregate.help;
+ var fieldInfo = this.state.fieldsInfo.list[axis.attrs.name];
+ var formatFunc =
+ field_utils.format[fieldInfo.widget ? fieldInfo.widget : field.type];
+ var formattedValue = formatFunc(value, field, {escape: true});
+ $cell.addClass("o_list_number").attr("title", 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/2d_matrix_view.js b/web_widget_x2many_2d_matrix/static/src/js/2d_matrix_view.js
new file mode 100644
index 000000000..a223cf804
--- /dev/null
+++ b/web_widget_x2many_2d_matrix/static/src/js/2d_matrix_view.js
@@ -0,0 +1,22 @@
+/* Copyright 2019 Alexandre Díaz
+ * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
+
+odoo.define("web_widget_x2many_2d_matrix.X2Many2dMatrixView", function (require) {
+ "use strict";
+
+ var BasicView = require("web.BasicView");
+
+ BasicView.include({
+ _processField: function (viewType, field, attrs) {
+ // Workaround for kanban mode rendering.
+ // Source of the issue: https://github.com/OCA/OCB/blob/12.0/addons/web/static/src/js/views/basic/basic_view.js#L303 .
+ // See https://github.com/OCA/web/pull/1404#pullrequestreview-305813206 .
+ // In the long term we should a way to handle kanban mode
+ // better (eg: a specific renderer).
+ if (attrs.widget === "x2many_2d_matrix") {
+ attrs.mode = "tree";
+ }
+ return this._super(viewType, field, attrs);
+ },
+ });
+});
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 000000000..3303f86cb
--- /dev/null
+++ b/web_widget_x2many_2d_matrix/static/src/js/abstract_view_matrix_limit_extend.js
@@ -0,0 +1,16 @@
+odoo.define("web_widget_x2many_2d_matrix.matrix_limit_extend", function (require) {
+ "use strict";
+
+ var FormView = require("web.FormView");
+
+ FormView.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 000000000..118206925
--- /dev/null
+++ b/web_widget_x2many_2d_matrix/static/src/js/widget_x2many_2d_matrix.js
@@ -0,0 +1,260 @@
+/* Copyright 2015 Holger Brunn |