diff --git a/main/webapp/modules/core/langs/translation-en.json b/main/webapp/modules/core/langs/translation-en.json index b2a9df2b2762..65ef0d289e46 100644 --- a/main/webapp/modules/core/langs/translation-en.json +++ b/main/webapp/modules/core/langs/translation-en.json @@ -592,6 +592,7 @@ "core-views/move-to-left": "Move column left", "core-views/move-to-right": "Move column right", "core-views/show-as": "Show as", + "core-views/goto-page": "$1 of $2 {{plural:$2|page|pages}}", "core-views/first": "first", "core-views/previous": "previous", "core-views/next": "next", diff --git a/main/webapp/modules/core/langs/translation-es.json b/main/webapp/modules/core/langs/translation-es.json index 2a94eb0afbce..c513262b4f02 100644 --- a/main/webapp/modules/core/langs/translation-es.json +++ b/main/webapp/modules/core/langs/translation-es.json @@ -531,6 +531,7 @@ "core-views/judg-actions2": "acciones del parámetro", "core-views/to-text": "A texto", "core-views/reg-exp": "regex", + "core-views/goto-page": "$1 de $2 {{plural:$2|página|paginas}}", "core-views/word-facet": "Faceta por palabra", "core-views/collapse-left": "Contraer todas las columnas a la izquierda", "core-views/clear-recon": "Quitar la información de cotejo", diff --git a/main/webapp/modules/core/langs/translation-fr.json b/main/webapp/modules/core/langs/translation-fr.json index 3918949f27d8..a9e49e677a5e 100644 --- a/main/webapp/modules/core/langs/translation-fr.json +++ b/main/webapp/modules/core/langs/translation-fr.json @@ -537,6 +537,7 @@ "core-views/view": "Aperçu", "core-views/extend-not-supported": "Ce service de réconciliation de supporte pas l'extension de données. Essayez de supprimer le service et de l'ajouter à nouveau. Si le problème persiste, contactez le fournisseur de service.", "core-views/to-text": "En texte", + "core-views/goto-page": "$1 de $2 page(s)", "core-views/first": "première", "core-views/word-facet": "Facette par mot", "core-views/check-format": "Merci de vérifier le format du fichier.", diff --git a/main/webapp/modules/core/scripts/views/data-table/data-table-view.js b/main/webapp/modules/core/scripts/views/data-table/data-table-view.js index a257df57959d..34775685798f 100644 --- a/main/webapp/modules/core/scripts/views/data-table/data-table-view.js +++ b/main/webapp/modules/core/scripts/views/data-table/data-table-view.js @@ -41,7 +41,10 @@ function DataTableView(div) { this._columnHeaderUIs = []; this._shownulls = false; + this._currentPageNumber = 1; this._showRows(0); + + this._refocusPageInput = false; } DataTableView._extenders = []; @@ -79,6 +82,7 @@ DataTableView.prototype.resize = function() { }; DataTableView.prototype.update = function(onDone) { + this._currentPageNumber = 1; this._showRows(0, onDone); }; @@ -107,6 +111,7 @@ DataTableView.prototype.render = function() { '' ); var elmts = DOM.bind(html); + this._div.empty().append(html); ui.summaryBar.updateResultCount(); @@ -134,7 +139,6 @@ DataTableView.prototype.render = function() { } this._renderDataTables(elmts.table[0], elmts.tableHeader[0]); - this._div.empty().append(html); // show/hide null values in cells $(".data-table-null").toggle(self._shownulls); @@ -160,6 +164,8 @@ DataTableView.prototype._renderSortingControls = function(sortingControls) { DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagingControls) { var self = this; + self._lastPageNumber = Math.floor((theProject.rowModel.filtered - 1) / this._pageSize) + 1; + var from = (theProject.rowModel.start + 1); var to = Math.min(theProject.rowModel.filtered, theProject.rowModel.start + theProject.rowModel.limit); @@ -173,8 +179,30 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin previousPage.addClass("inaction"); } - $('').addClass("viewpanel-pagingcount").html(" " + from + " - " + to + " ").appendTo(pagingControls); + var pageControlsSpan = $('').attr("id", "viewpanel-paging-current"); + + var pageInputSize = 20 + (8 * ui.dataTableView._lastPageNumber.toString().length); + var currentPageInput = $('') + .change(function(evt) { self._onChangeGotoPage(this, evt); }) + .keydown(function(evt) { self._onKeyDownGotoPage(this, evt); }) + .attr("id", "viewpanel-paging-current-input") + .attr("min", 1) + .attr("max", self._lastPageNumber) + .attr("required", "required") + .val(self._currentPageNumber) + .css("width", pageInputSize +"px"); + + pageControlsSpan.append($.i18n('core-views/goto-page', '', self._lastPageNumber)); + pageControlsSpan.appendTo(pagingControls); + $('span#currentPageInput').replaceWith($(currentPageInput)); + + if(self._refocusPageInput == true) { + self._refocusPageInput = false; + var currentPageInputForFocus = $('input#viewpanel-paging-current-input'); + currentPageInputForFocus.ready(function(evt) { setTimeout(() => { currentPageInputForFocus.focus(); }, 250); }); + } + var nextPage = $(''+$.i18n('core-views/next')+' ›').appendTo(pagingControls); var lastPage = $(''+$.i18n('core-views/last')+' »').appendTo(pagingControls); if (theProject.rowModel.start + theProject.rowModel.limit < theProject.rowModel.filtered) { @@ -433,20 +461,60 @@ DataTableView.prototype._showRows = function(start, onDone) { }, this._sorting); }; +DataTableView.prototype._onChangeGotoPage = function(elmt, evt) { + var gotoPageNumber = parseInt($('input#viewpanel-paging-current-input').val()); + + if(typeof gotoPageNumber != "number" || isNaN(gotoPageNumber) || gotoPageNumber == "") { + $('input#viewpanel-paging-current-input').val(this._currentPageNumber); + return; + } + + if(gotoPageNumber > this._lastPageNumber) gotoPageNumber = this._lastPageNumber; + if(gotoPageNumber < 1) gotoPageNumber = 1; + + this._currentPageNumber = gotoPageNumber; + this._showRows((gotoPageNumber - 1) * this._pageSize); +}; + +DataTableView.prototype._onKeyDownGotoPage = function(elmt, evt) { + var keyDownCode = event.which; + + if([38, 40].indexOf(keyDownCode) == -1) return; + if(self._refocusPageInput == true) return; + + evt.preventDefault(); + this._refocusPageInput = true; + + var newPageValue = $('input#viewpanel-paging-current-input')[0].value; + if(keyDownCode == 38) { // Up arrow + if(newPageValue <= 1) return; + this._onClickPreviousPage(elmt, evt); + } + + if(keyDownCode == 40) { // Down arrow + if(newPageValue >= this._lastPageNumber) return; + this._onClickNextPage(elmt, evt); + } +}; + DataTableView.prototype._onClickPreviousPage = function(elmt, evt) { + this._currentPageNumber--; this._showRows(theProject.rowModel.start - this._pageSize); }; DataTableView.prototype._onClickNextPage = function(elmt, evt) { + this._currentPageNumber++; this._showRows(theProject.rowModel.start + this._pageSize); }; DataTableView.prototype._onClickFirstPage = function(elmt, evt) { + this._currentPageNumber = 1; this._showRows(0); }; DataTableView.prototype._onClickLastPage = function(elmt, evt) { - this._showRows(Math.floor((theProject.rowModel.filtered - 1) / this._pageSize) * this._pageSize); + this._currentPageNumber = this._lastPageNumber; + this._showRows((this._lastPageNumber - 1) * this._pageSize); }; DataTableView.prototype._getSortingCriteriaCount = function() { diff --git a/main/webapp/modules/core/styles/views/data-table-view.less b/main/webapp/modules/core/styles/views/data-table-view.less index 29259108fb6f..ffe877937985 100644 --- a/main/webapp/modules/core/styles/views/data-table-view.less +++ b/main/webapp/modules/core/styles/views/data-table-view.less @@ -55,6 +55,45 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. font-weight: bold; } +.viewpanel-rowrecord a { + background-color: @fill_primary; + margin: 0px 1px 0px 1px; + padding: 2px 5px 2px 5px; + .rounded_corners(4px); + } + +.viewpanel-pagesize a { + background-color: @fill_primary; + margin: 0px 2px 0px 2px; + padding: 2px 3px 2px 3px; + .rounded_corners(4px); + } + +div.viewpanel-pagesize span:first-of-type { + margin: 0px 0px 0px 20px; +} + +.viewpanel-paging a { + background-color: @fill_primary; + margin: 0px 4px 0px 4px; + padding: 2px 10px 2px 10px; + .rounded_corners(4px); + } + +.viewpanel-paging span#viewpanel-paging-current { + margin: 0 10px 0 10px; + padding: 0px; + } + +.viewpanel-paging input#viewpanel-paging-current-input { + width: 60px; + margin: 0px; + padding: 0px; + height: 16px; + position: relative; + top: -2px; + } + .data-table-header { width: 1px; position: relative;