[FIX] web: grouped list view: group's pager

Before this rev., there was no pager rendered in groups that
contain more than 'limit' records.

addons/web/static/src/js/views/list/list_renderer.js

@@ -6,6 +6,7 @@ var config = require('web.config');
 var core = require('web.core');
 var Domain = require('web.Domain');
 var field_utils = require('web.field_utils');
+var Pager = require('web.Pager');
 var session = require('web.session');
 var utils = require('web.utils');
 
@@ -72,6 +73,7 @@ var ListRenderer = BasicRenderer.extend({
             }).value();
         this.hasSelectors = params.hasSelectors;
         this.selection = [];
+        this.pagers = []; // instantiated pagers (only for grouped lists)
     },
 
     //--------------------------------------------------------------------------
@@ -350,6 +352,36 @@ var ListRenderer = BasicRenderer.extend({
         }
         return $('<tfoot>').append($('<tr>').append($cells));
     },
+    /**
+     * Renders the pager for a given group
+     *
+     * @private
+     * @param {Object} group
+     * @returns {JQueryElement} the pager's $el
+     */
+    _renderGroupPager: function (group) {
+        var pager = new Pager(this, group.count, group.offset + 1, group.limit);
+        pager.on('pager_changed', this, function (newState) {
+            var self = this;
+            pager.disable();
+            this.trigger_up('load', {
+                id: group.id,
+                limit: newState.limit,
+                offset: newState.current_min - 1,
+                on_success: function (reloadedGroup) {
+                    _.extend(group, reloadedGroup);
+                    self._renderView();
+                },
+                on_fail: pager.enable.bind(pager),
+            });
+        });
+        // register the pager so that it can be destroyed on next rendering
+        this.pagers.push(pager);
+
+        var fragment = document.createDocumentFragment();
+        pager.appendTo(fragment); // starts the pager
+        return pager.$el;
+    },
     /**
      * Render the row that represent a group
      *
@@ -380,6 +412,11 @@ var ListRenderer = BasicRenderer.extend({
                             .toggleClass('fa-caret-down', group.isOpen);
             $th.prepend($arrow);
         }
+        if (group.isOpen && !group.groupedBy.length && (group.count > group.data.length)) {
+            var $pager = this._renderGroupPager(group);
+            var $lastCell = $cells[$cells.length-1];
+            $lastCell.addClass('o_group_pager').append($pager);
+        }
         return $('<tr>')
                     .addClass('o_group_header')
                     .data('group', group)
@@ -553,6 +590,11 @@ var ListRenderer = BasicRenderer.extend({
      */
     _renderView: function () {
         var self = this;
+
+        // destroy the previously instantiated pagers, if any
+        _.invoke(this.pagers, 'destroy');
+        this.pagers = [];
+
         var $table = $('<table>').addClass('o_list_view table table-condensed table-striped');
         this.$el.empty().append($table);
         var is_grouped = !!this.state.groupedBy.length;

addons/web/static/src/less/list_view.less

@@ -78,6 +78,8 @@
 
     // Grouped list views
     tbody > tr.o_group_header {
+        height: 31px;
+
         .o-vertical-gradient(#fcfcfc, #dedede);
 
         .o_group_name {
@@ -87,6 +89,8 @@
             cursor: text;
             .user-select(none);
             text-align: right;
+            padding-top: 0;
+            padding-bottom: 0;
             .o_pager_previous, .o_pager_next {
                 background-color: @odoo-list-group-header-color;
                 &:hover {

addons/web/static/test/views/list_tests.js

@@ -1204,6 +1204,44 @@ QUnit.module('Views', {
 
         list.destroy();
     });
+
+    QUnit.test('grouped list with a pager in a group', function (assert) {
+        assert.expect(6);
+        this.data.foo.records[3].bar = true;
+
+        var list = createView({
+            View: ListView,
+            model: 'foo',
+            data: this.data,
+            arch: '<tree><field name="foo"/><field name="bar"/></tree>',
+            groupBy: ['bar'],
+            viewOptions: {
+                limit: 3,
+            },
+        });
+
+        var headerHeight = list.$('.o_group_header').css('height');
+
+        // basic rendering checks
+        list.$('.o_group_header').click();
+        assert.strictEqual(list.$('.o_group_header').css('height'), headerHeight,
+            "height of group header shouldn't have changed");
+        assert.ok(list.$('.o_group_header td:last').hasClass('o_group_pager'),
+            "last cell of open group header should have classname 'o_group_header'");
+        assert.strictEqual(list.$('.o_pager_value').text(), '1-3',
+            "pager's value should be correct");
+        assert.strictEqual(list.$('.o_data_row').length, 3,
+            "open group should display 3 records");
+
+        // go to next page
+        list.$('.o_pager_next').click();
+        assert.strictEqual(list.$('.o_pager_value').text(), '4-4',
+            "pager's value should be correct");
+        assert.strictEqual(list.$('.o_data_row').length, 1,
+            "open group should display 1 record");
+
+        list.destroy();
+    });
 });
 
 });