[FIX] web: sort pivot rows in comparison mode

Before this commit, it was not possible to sort
the rows of a pivot view while in comparison
mode. This fix makes it now possible. Note that
in comparison mode, a click on a header of type
"measure" will sort the rows according to the
column values coming from the data of interest.

closes odoo/odoo#28411

3 files changed, 55 insertions, 10 deletions

diff --git a/addons/web/static/src/js/views/pivot/pivot_controller.js b/addons/web/static/src/js/views/pivot/pivot_controller.js
index 48b5fb033fa..a573a6fa4cb 100644
--- a/addons/web/static/src/js/views/pivot/pivot_controller.js
+++ b/addons/web/static/src/js/views/pivot/pivot_controller.js
@@ -336,7 +336,8 @@ var PivotController = AbstractController.extend({
         var col_id = $target.data('id');
         var measure = $target.data('measure');
         var isAscending = $target.hasClass('o_pivot_measure_row_sorted_asc');
-        this.model.sortRows(col_id, measure, isAscending);
+        var dataType = $target.data('data_type');
+        this.model.sortRows(col_id, measure, isAscending, dataType);
         this.update({}, {reload: false});
     },
     /**
diff --git a/addons/web/static/src/js/views/pivot/pivot_model.js b/addons/web/static/src/js/views/pivot/pivot_model.js
index 1a0d3625440..5a6423fbe34 100644
--- a/addons/web/static/src/js/views/pivot/pivot_model.js
+++ b/addons/web/static/src/js/views/pivot/pivot_model.js
@@ -457,16 +457,23 @@ var PivotModel = AbstractModel.extend({
      * @param {any} col_id
      * @param {any} measure
      * @param {any} descending
+     * @param {'data'|'comparisonData'|'variation'} [dataType]
      */
-    sortRows: function (col_id, measure, descending) {
+    sortRows: function (col_id, measure, descending, dataType) {
         var cells = this.data.cells;
+        var comparisonFunction = compare;
+        if (this.data.compare) {
+            dataType = dataType || 'data';
+            comparisonFunction = specialCompare;
+        }
         this._traverseTree(this.data.main_row.root, function (header) {
-            header.children.sort(compare);
+            header.children.sort(comparisonFunction);
         });
         this.data.sorted_column = {
             id: col_id,
             measure: measure,
             order: descending ? 'desc' : 'asc',
+            dataType: dataType,
         };
         function _getValue (id1, id2) {
             if ((id1 in cells) && (id2 in cells[id1])) {
@@ -476,12 +483,26 @@ var PivotModel = AbstractModel.extend({
         }
 
         function compare (row1, row2) {
-            var values1 = _getValue(row1.id, col_id),
-                values2 = _getValue(row2.id, col_id),
-                value1 = values1 ? values1[measure] : 0,
-                value2 = values2 ? values2[measure] : 0;
+            var values1 = _getValue(row1.id, col_id);
+            var values2 = _getValue(row2.id, col_id);
+            var value1 = values1 ? values1[measure] : 0;
+            var value2 = values2 ? values2[measure] : 0;
             return descending ? value1 - value2 : value2 - value1;
         }
+        function specialCompare (row1, row2) {
+            var values1 = _getValue(row1.id, col_id);
+            var values2 = _getValue(row2.id, col_id);
+            var value1 = values1 ? values1[measure] : {data: 0, comparisonData: 0, variation: {magnitude: 0}};
+            var value2 = values2 ? values2[measure] : {data: 0, comparisonData: 0, variation: {magnitude: 0}};
+            if (dataType === 'variation') {
+                return descending ?
+                        value1[dataType].magnitude - value2[dataType].magnitude:
+                        value2[dataType].magnitude - value1[dataType].magnitude;
+            }
+            return descending ?
+                        value1[dataType] - value2[dataType]:
+                        value2[dataType] - value1[dataType];
+        }
     },
     /**
      * Toggle the active state for a given measure, then reload the data.
diff --git a/addons/web/static/src/js/views/pivot/pivot_renderer.js b/addons/web/static/src/js/views/pivot/pivot_renderer.js
index 68f2f4bf86d..d49550ab81e 100644
--- a/addons/web/static/src/js/views/pivot/pivot_renderer.js
+++ b/addons/web/static/src/js/views/pivot/pivot_renderer.js
@@ -116,6 +116,8 @@ var PivotRenderer = AbstractRenderer.extend({
     _renderHeaders: function ($thead, headers, nbrCols) {
         var self = this;
         var i, j, cell, $row, $cell;
+        var measure, dataType;
+        var id, measureCellIds = [];
 
         var groupbyLabels = _.map(this.state.colGroupBys, function (gb) {
             return self.state.fields[gb.split(':')[0]].string;
@@ -144,10 +146,13 @@ var PivotRenderer = AbstractRenderer.extend({
                     $cell.data('id', cell.id);
                 }
                 if (cell.measure) {
+                    measure = cell.measure;
+                    measureCellIds.push(cell.id);
                     $cell.addClass('o_pivot_measure_row text-muted')
-                        .text(this.state.fields[cell.measure].string);
-                    $cell.data('id', cell.id).data('measure', cell.measure);
-                    if (!this.compare && cell.id === this.state.sortedColumn.id && cell.measure === this.state.sortedColumn.measure) {
+                        .text(this.state.fields[measure].string);
+                    $cell.data('id', cell.id).data('measure', measure);
+                    if (cell.id === this.state.sortedColumn.id &&
+                        measure === this.state.sortedColumn.measure) {
                         $cell.addClass('o_pivot_measure_row_sorted_' + this.state.sortedColumn.order);
                         if (this.state.sortedColumn.order == 'asc') {
                             $cell.attr('aria-sorted', 'ascending');
@@ -167,12 +172,30 @@ var PivotRenderer = AbstractRenderer.extend({
         }
         if (this.compare) {
             var colLabels = [this.timeRangeDescription, this.comparisonTimeRangeDescription, 'Variation'];
+            var dataTypes = ['data', 'comparisonData', 'variation'];
             $row = $('<tr>');
             for (i = 0; i < 3 * nbrCols; i++) {
+                id = measureCellIds[~~(i / 3)];
+                measure = this.state.measures[(~~(i / 3)) % this.state.measures.length];
+                dataType = dataTypes[i % 3];
                 $cell = $('<th>')
+                    .addClass('o_pivot_measure_row text-muted')
+                    .data('data_type', dataType)
+                    .data('id', id)
+                    .data('measure', measure)
                     .text(colLabels[i % 3])
                     .attr('rowspan', 1)
                     .attr('colspan', 1);
+                if (dataType === this.state.sortedColumn.dataType &&
+                    id === this.state.sortedColumn.id &&
+                    measure === this.state.sortedColumn.measure) {
+                    $cell.addClass('o_pivot_measure_row_sorted_' + this.state.sortedColumn.order);
+                    if (this.state.sortedColumn.order === 'asc') {
+                        $cell.attr('aria-sorted', 'ascending');
+                    } else {
+                        $cell.attr('aria-sorted', 'descending');
+                    }
+                }
                 $row.append($cell);
             }
             $thead.append($row);