From a21576207e2ff55a75885fcb1c5731b42fded1fc Mon Sep 17 00:00:00 2001 From: Nick Arnold Date: Thu, 12 Mar 2015 12:17:14 -0700 Subject: [PATCH 1/4] Set paging to 25 on the grid for demonstration. --- webapp/Connector/src/model/Grid.js | 2 +- webapp/Connector/src/view/Grid.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/webapp/Connector/src/model/Grid.js b/webapp/Connector/src/model/Grid.js index fe06bfbb9..2c04c5e2c 100644 --- a/webapp/Connector/src/model/Grid.js +++ b/webapp/Connector/src/model/Grid.js @@ -184,7 +184,7 @@ Ext.define('Connector.model.Grid', { getMaxRows : function() { - var max = 500; + var max = 25; var params = LABKEY.ActionURL.getParameters(); if (Ext.isDefined(params['maxRows'])) { diff --git a/webapp/Connector/src/view/Grid.js b/webapp/Connector/src/view/Grid.js index 1f34fa319..88ab4ac8d 100644 --- a/webapp/Connector/src/view/Grid.js +++ b/webapp/Connector/src/view/Grid.js @@ -408,6 +408,7 @@ Ext.define('Connector.view.Grid', { columns: model.get('columnSet'), filterArray: model.getFilterArray(true), maxRows: maxRows, + pageSize: maxRows, remoteSort: true }; @@ -425,6 +426,7 @@ Ext.define('Connector.view.Grid', { store.on('load', function(store) { var rowCount = store.getCount(); + console.log('store has', rowCount, 'records.'); var cmp = Ext.getCmp('gridrowcountcmp'); if (cmp) { From 69df2ec6433849586c137173dfe34721c0ea0231 Mon Sep 17 00:00:00 2001 From: labkey-martyp Date: Mon, 16 Mar 2015 14:53:03 -0700 Subject: [PATCH 2/4] Spec 22558 Grid paging Added grid paging to data grid. Can be turned on/off with Connector.view.Grid.paging. --- webapp/Connector/src/model/Grid.js | 2 +- webapp/Connector/src/view/Grid.js | 140 +++++++++++++++++++++++++++-- 2 files changed, 136 insertions(+), 6 deletions(-) diff --git a/webapp/Connector/src/model/Grid.js b/webapp/Connector/src/model/Grid.js index 2c04c5e2c..fe06bfbb9 100644 --- a/webapp/Connector/src/model/Grid.js +++ b/webapp/Connector/src/model/Grid.js @@ -184,7 +184,7 @@ Ext.define('Connector.model.Grid', { getMaxRows : function() { - var max = 25; + var max = 500; var params = LABKEY.ActionURL.getParameters(); if (Ext.isDefined(params['maxRows'])) { diff --git a/webapp/Connector/src/view/Grid.js b/webapp/Connector/src/view/Grid.js index 88ab4ac8d..694e16aae 100644 --- a/webapp/Connector/src/view/Grid.js +++ b/webapp/Connector/src/view/Grid.js @@ -17,6 +17,8 @@ Ext.define('Connector.view.Grid', { headerHeight: 160, + paging: true, + constructor : function(config) { this.callParent([config]); this.addEvents('applyfilter', 'removefilter', 'measureselected'); @@ -123,6 +125,74 @@ Ext.define('Connector.view.Grid', { }); }, + _createFooter : function() { + + return Ext.create ('Ext.container.Container', { + height: this.headerHeight, + ui: 'custom', + margin: '10 0 0 15', + id: 'grid-paging-footer', + layout: { + type: 'hbox', + align: 'center' + }, + items: [{ + // This allows for the following items to be centered + xtype: 'box', + flex: 1, + autoEl: { + tag: 'div' + } + },{ + xtype: 'button', + text: '<<', + margin: '0 15 0 0', + handler: this.requestFirstPage, + scope: this + },{ + xtype: 'button', + text: '<', + margin: '0 15 0 0', + handler: this.requestPreviousPage, + scope: this + },{ + xtype: 'textfield', + id: 'grid-page-number', + hideLabel: true, + width: 30, + value: 1, + enableKeyEvents: true, + listeners: { + specialkey: this.requestPage + } + },{ + xtype: 'label', + text: 'of ' + Math.ceil(this.getGrid().getStore().totalCount/this.getGrid().getStore().pageSize), + margin: '5 10 0 5' + + },{ + xtype: 'button', + text: '>', + margin: '0 15 0 0', + handler: this.requestNextPage, + scope: this + },{ + xtype: 'button', + text: '>>', + margin: '0 15 0 0', + handler: this.requestLastPage, + scope: this + },{ + // This allows for the following items to be centered + xtype: 'box', + flex: 1, + autoEl: { + tag: 'div' + } + }] + }); + }, + _showOverlay : function() { if (!this.NO_SHOW) { @@ -227,10 +297,14 @@ Ext.define('Connector.view.Grid', { if (prevGridId != null && prevGridId != newGrid.getId()) { this.remove(prevGridId, true); + if(this.paging && this.footer) + this.remove(this.footer, true); this._hideOverlay(); } this.add(newGrid); + if (this.paging) + this.footer = this.add(this._createFooter()); }, this, {single: true}); }, @@ -407,8 +481,8 @@ Ext.define('Connector.view.Grid', { queryName: model.get('queryName'), columns: model.get('columnSet'), filterArray: model.getFilterArray(true), - maxRows: maxRows, - pageSize: maxRows, + maxRows: this.paging ? 25 : maxRows, + pageSize: this.paging ? 25 : maxRows, remoteSort: true }; @@ -426,7 +500,6 @@ Ext.define('Connector.view.Grid', { store.on('load', function(store) { var rowCount = store.getCount(); - console.log('store has', rowCount, 'records.'); var cmp = Ext.getCmp('gridrowcountcmp'); if (cmp) { @@ -439,7 +512,7 @@ Ext.define('Connector.view.Grid', { this.fireEvent('hideload', this); } - if (rowCount >= maxRows) { + if (rowCount >= maxRows && !this.paging) { this.showLimitMessage(maxRows); } }, this); @@ -451,7 +524,11 @@ Ext.define('Connector.view.Grid', { var box = this.getBox(); var width = box.width - 27; - var height = box.height - this.headerHeight + 93; + var height; + if (this.paging) + height = box.height - this.headerHeight + 43; + else + height = box.height - this.headerHeight + 93; return { width: width, @@ -674,6 +751,59 @@ Ext.define('Connector.view.Grid', { } }, + updatePageNumber: function() { + var store = this.getGrid().getStore(); + if (this.footer) { + var page = this.footer.getComponent('grid-page-number'); + if (page) + page.setValue(store.currentPage); + } + }, + + requestFirstPage: function() { + this.getGrid().getStore().loadPage(1); + this.updatePageNumber(); + }, + + requestPreviousPage: function() { + var store = this.getGrid().getStore(); + if (store.currentPage > 1) + { + store.previousPage(); + this.updatePageNumber(); + } + }, + + requestNextPage: function() { + var store = this.getGrid().getStore(); + if (store.currentPage < Math.ceil(store.totalCount/store.pageSize)) + { + store.nextPage(); + this.updatePageNumber(); + } + }, + + requestLastPage: function() { + var store = this.getGrid().getStore(); + store.loadPage(Math.ceil(store.totalCount/store.pageSize)); + this.updatePageNumber(); + }, + + requestPage: function(f,e) { + if (e.getKey() == e.ENTER) + { + var main = this.getBubbleParent().getBubbleParent(); + var store = main.getGrid().getStore(); + + var pageNo = parseInt(this.getValue()); + if (pageNo <= Math.ceil(store.totalCount / store.pageSize) && pageNo > 0) + { + store.loadPage(pageNo); + main.updatePageNumber(); + } + } + }, + showLimitMessage : function(max) { var msg = 'The app only shows up ' + max + ' rows. Export to see all data.'; From 14ddac25d4d3f706fb68315527620d0100654796 Mon Sep 17 00:00:00 2001 From: labkey-martyp Date: Fri, 20 Mar 2015 14:42:01 -0700 Subject: [PATCH 3/4] Spec 22558: Paging support for grid. Update footer function added to update total and current page. Updated automated tests to include paging. --- test/src/org/labkey/test/pages/DataGrid.java | 27 +++++++++++++-- test/src/org/labkey/test/tests/CDSTest.java | 35 +++++++++++++++++++- test/src/org/labkey/test/util/CDSHelper.java | 2 +- webapp/Connector/src/model/Grid.js | 2 +- webapp/Connector/src/view/Grid.js | 27 +++++++++++++-- 5 files changed, 86 insertions(+), 7 deletions(-) diff --git a/test/src/org/labkey/test/pages/DataGrid.java b/test/src/org/labkey/test/pages/DataGrid.java index 0417e8bcd..0b2ef05b2 100644 --- a/test/src/org/labkey/test/pages/DataGrid.java +++ b/test/src/org/labkey/test/pages/DataGrid.java @@ -145,9 +145,9 @@ public Void apply(Void aVoid) public void assertRowCount(int count) { - if (count > 1000) + if (count > 25) { - _test.waitForElements(Locators.dataRow, 1000); + _test.waitForElements(Locators.dataRow, 25); Assert.assertEquals("Wrong number of rows in export", count, getExportRowCount()); } else @@ -156,11 +156,26 @@ public void assertRowCount(int count) } } + public void assertPageTotal(int pages) + { + _test.waitForElement(Locators.totalPages.containing(Integer.toString(pages))); + } + + public void assertCurrentPage(int page) + { + _test.waitForFormElementToEqual(Locators.currentPage, Integer.toString(page)); + } + public void assertSortPresent(String columnName) { _test.waitForElement(Locator.tagWithClassContaining("div", "x-column-header-sort-").withText(columnName)); } + public void assertCellContent(String content) + { + _test.waitForElement(Locators.cellLocator(content)); + } + @LogMethod public void sort(@LoggedParam final String columnName) { @@ -191,6 +206,12 @@ public int getExportRowCount() } } + public void setCurrentPage(int page) + { + _test.setFormElement(Locators.currentPage, Integer.toString(page)); + _test.pressEnter(Locators.currentPage); + } + public File exportGrid() { return _test.clickAndWaitForDownload(Locator.css("a.gridexportbtn")); @@ -211,6 +232,8 @@ public static class Locators public static Locator.CssLocator grid = Locator.css("div.connector-grid"); public static Locator.CssLocator dataRow = grid.append(Locator.css("tr.x-grid-data-row")); public static Locator.CssLocator sysmsg = Locator.css("div.sysmsg"); + public static Locator.CssLocator totalPages = Locator.css("label.x-box-item"); + public static Locator.CssLocator currentPage = Locator.css("input.x-form-field"); public static Locator.XPathLocator columnHeaderLocator(String columnHeaderName) { diff --git a/test/src/org/labkey/test/tests/CDSTest.java b/test/src/org/labkey/test/tests/CDSTest.java index df83206dd..49acf2565 100644 --- a/test/src/org/labkey/test/tests/CDSTest.java +++ b/test/src/org/labkey/test/tests/CDSTest.java @@ -616,12 +616,27 @@ public void verifyGrid() CDSHelper.NavigationLink.GRID.makeNavigationSelection(this); - waitForText("Export to see all data."); // grid warning + waitForText("View data grid"); // grid warning gridColumnSelector.addGridColumn("NAb", "Point IC50", true, true); gridColumnSelector.addGridColumn("NAb", "Lab", false, true); grid.ensureColumnsPresent("Point IC50", "Lab"); grid.assertRowCount(2969); + grid.assertPageTotal(119); + + grid.sort("Subject Id"); + click(CDSHelper.Locators.cdsButtonLocator(">>")); + grid.assertCurrentPage(119); + grid.assertCellContent("9181"); + grid.assertCellContent("9199"); + + click(CDSHelper.Locators.cdsButtonLocator("<")); + grid.assertCurrentPage(118); + grid.assertCellContent("9156"); + grid.assertCellContent("9180"); + click(CDSHelper.Locators.cdsButtonLocator("<<")); + grid.assertCellContent("193001"); + grid.assertCellContent("193002"); // // Navigate to Summary to apply a filter @@ -656,18 +671,31 @@ public void verifyGrid() grid.setFacet("Race", "White"); grid.assertRowCount(702); + grid.assertPageTotal(29); _asserts.assertFilterStatusCounts(84,3,3); + grid.sort("Subject Id"); + click(CDSHelper.Locators.cdsButtonLocator(">")); + grid.assertCurrentPage(2); + grid.assertCellContent("9149"); + grid.assertCellContent("9102"); + + grid.setCurrentPage(20); + grid.assertCellContent("193087"); + grid.assertCellContent("193088"); + log("Change column set and ensure still filtered"); gridColumnSelector.addGridColumn("NAb", "Point IC50", false, true); grid.ensureColumnsPresent("Point IC50"); grid.assertRowCount(702); + grid.assertPageTotal(29); _asserts.assertFilterStatusCounts(84, 3, 3); log("Add a lookup column"); gridColumnSelector.addLookupColumn("NAb", "Lab", "PI"); grid.ensureColumnsPresent("Point IC50", "Lab", "PI"); grid.assertRowCount(702); + grid.assertPageTotal(29); _asserts.assertFilterStatusCounts(84, 3, 3); log("Filter on a looked-up column"); @@ -675,17 +703,20 @@ public void verifyGrid() waitForElement(CDSHelper.Locators.filterMemberLocator("Race: = White")); waitForElement(CDSHelper.Locators.filterMemberLocator("Lab/PI: = Mark Igra")); grid.assertRowCount(443); + grid.assertPageTotal(18); _asserts.assertFilterStatusCounts(15, 2, 2); log("Filter undo on grid"); cds.clearFilter(); grid.assertRowCount(2969); + grid.assertPageTotal(119); _asserts.assertDefaultFilterStatusCounts(); click(Locator.linkWithText("Undo")); waitForElement(CDSHelper.Locators.filterMemberLocator("Race: = White")); waitForElement(CDSHelper.Locators.filterMemberLocator("Lab/PI: = Mark Igra")); grid.assertRowCount(443); + grid.assertPageTotal(18); _asserts.assertFilterStatusCounts(15, 2, 2); grid.setFilter("Point IC50", "Is Greater Than", "60"); @@ -694,8 +725,10 @@ public void verifyGrid() grid.assertRowCount(13); grid.clearFilters("Point IC50"); grid.assertRowCount(2135); + grid.assertPageTotal(86); grid.clearFilters("PI"); grid.assertRowCount(2969); + grid.assertPageTotal(119); assertElementPresent(Locator.css(".filterpanel").containing("All subjects")); // ensure there are no app filters remaining grid.sort("Lab"); diff --git a/test/src/org/labkey/test/util/CDSHelper.java b/test/src/org/labkey/test/util/CDSHelper.java index 55676dffe..e933db4b0 100644 --- a/test/src/org/labkey/test/util/CDSHelper.java +++ b/test/src/org/labkey/test/util/CDSHelper.java @@ -56,7 +56,7 @@ public void enterApplication() { _test.goToProjectHome(); _test.clickAndWait(Locator.linkWithText("Application")); - _test.addUrlParameter("maxRows=1000&_showPlotData=true"); + _test.addUrlParameter("_showPlotData=true"); _test.assertElementNotPresent(Locator.linkWithText("Home")); _test.waitForElement(Locator.tagContainingText("h1", "Welcome to the HIV Vaccine")); diff --git a/webapp/Connector/src/model/Grid.js b/webapp/Connector/src/model/Grid.js index fe06bfbb9..2c04c5e2c 100644 --- a/webapp/Connector/src/model/Grid.js +++ b/webapp/Connector/src/model/Grid.js @@ -184,7 +184,7 @@ Ext.define('Connector.model.Grid', { getMaxRows : function() { - var max = 500; + var max = 25; var params = LABKEY.ActionURL.getParameters(); if (Ext.isDefined(params['maxRows'])) { diff --git a/webapp/Connector/src/view/Grid.js b/webapp/Connector/src/view/Grid.js index 694e16aae..13340aed5 100644 --- a/webapp/Connector/src/view/Grid.js +++ b/webapp/Connector/src/view/Grid.js @@ -166,6 +166,7 @@ Ext.define('Connector.view.Grid', { specialkey: this.requestPage } },{ + id: 'grid-page-total', xtype: 'label', text: 'of ' + Math.ceil(this.getGrid().getStore().totalCount/this.getGrid().getStore().pageSize), margin: '5 10 0 5' @@ -193,6 +194,23 @@ Ext.define('Connector.view.Grid', { }); }, + _updateFooter : function() { + if (this.footer) { + + var totalPagesEl = this.footer.getComponent('grid-page-total'); + var totalPages = Math.ceil(this.getGrid().getStore().totalCount/this.getGrid().getStore().pageSize); + if (totalPagesEl) + totalPagesEl.setText("of " + totalPages); + + var currentPageEl = this.footer.getComponent('grid-page-number'); + if (currentPageEl && parseInt(currentPageEl.getValue()) > totalPages) { + this.requestFirstPage() + } + + this.updatePageNumber(); + } + }, + _showOverlay : function() { if (!this.NO_SHOW) { @@ -481,8 +499,8 @@ Ext.define('Connector.view.Grid', { queryName: model.get('queryName'), columns: model.get('columnSet'), filterArray: model.getFilterArray(true), - maxRows: this.paging ? 25 : maxRows, - pageSize: this.paging ? 25 : maxRows, + maxRows: maxRows, + pageSize: maxRows, remoteSort: true }; @@ -515,6 +533,9 @@ Ext.define('Connector.view.Grid', { if (rowCount >= maxRows && !this.paging) { this.showLimitMessage(maxRows); } + + this._updateFooter(); + }, this); return store; @@ -756,7 +777,9 @@ Ext.define('Connector.view.Grid', { if (this.footer) { var page = this.footer.getComponent('grid-page-number'); if (page) + { page.setValue(store.currentPage); + } } }, From 5118a04d5c92d4ba20cc6d77e7257cae7d530ad5 Mon Sep 17 00:00:00 2001 From: labkey-martyp Date: Mon, 23 Mar 2015 18:01:31 -0700 Subject: [PATCH 4/4] Spec 22558: Paging support for grid. Comment and log updated automated tests. --- test/src/org/labkey/test/tests/CDSTest.java | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/test/src/org/labkey/test/tests/CDSTest.java b/test/src/org/labkey/test/tests/CDSTest.java index 49acf2565..c2a31a304 100644 --- a/test/src/org/labkey/test/tests/CDSTest.java +++ b/test/src/org/labkey/test/tests/CDSTest.java @@ -624,6 +624,10 @@ public void verifyGrid() grid.assertRowCount(2969); grid.assertPageTotal(119); + // + // Check paging buttons with known dataset. Verify with first and last subject id on page. + // + log("Verify grid paging"); grid.sort("Subject Id"); click(CDSHelper.Locators.cdsButtonLocator(">>")); grid.assertCurrentPage(119); @@ -674,6 +678,10 @@ public void verifyGrid() grid.assertPageTotal(29); _asserts.assertFilterStatusCounts(84,3,3); + // + // Check paging buttons and page selector with filtered dataset. + // + log("Verify grid paging with filtered dataset"); grid.sort("Subject Id"); click(CDSHelper.Locators.cdsButtonLocator(">")); grid.assertCurrentPage(2);