Repository: atlas Updated Branches: refs/heads/branch-0.8 6bc3aee11 -> 41b48c82f
ATLAS-3007 : UI : Add go to page and page limit option for local pagination Project: http://git-wip-us.apache.org/repos/asf/atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/atlas/commit/c62934ae Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/c62934ae Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/c62934ae Branch: refs/heads/branch-0.8 Commit: c62934aed35bd61faee998f4277f9f3275546e37 Parents: 6bc3aee Author: kevalbhatt <kbh...@apache.org> Authored: Wed Jan 2 17:09:39 2019 +0530 Committer: kevalbhatt <kbh...@apache.org> Committed: Thu Jan 3 15:26:35 2019 +0530 ---------------------------------------------------------------------- .../js/templates/common/TableLayout_tmpl.html | 12 +- .../search/SearchResultLayoutView_tmpl.html | 2 +- dashboardv2/public/js/utils/TableLayout.js | 118 +++++++++++++------ .../public/js/views/schema/SchemaLayoutView.js | 3 +- .../js/views/search/SearchResultLayoutView.js | 9 +- .../js/views/tag/TagDetailTableLayoutView.js | 2 + 6 files changed, 99 insertions(+), 47 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/atlas/blob/c62934ae/dashboardv2/public/js/templates/common/TableLayout_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/common/TableLayout_tmpl.html b/dashboardv2/public/js/templates/common/TableLayout_tmpl.html index 82d6c39..60ccc2f 100644 --- a/dashboardv2/public/js/templates/common/TableLayout_tmpl.html +++ b/dashboardv2/public/js/templates/common/TableLayout_tmpl.html @@ -45,7 +45,17 @@ <div class="row clearfix banded pagination-box"> <div class="col-sm-offset-4 col-sm-8"> <div class="inline-content-fr"> - <div data-id="r_pagination" class="inline"></div> + <div data-id="r_pagination" data-id="paginationDiv" class="inline"></div> + {{#if includeGotoPage}} + <div class="inline col-sm-4" data-id="paginationDiv" style="display:none"> + <div class="input-group" data-id="goToPageDiv"> + <input type="text" class="form-control number-input" data-id="gotoPage" placeholder="Goto Page" /> + <span class="input-group-btn"> + <button class="btn btn-default" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button> + </span> + </div> + </div> + {{/if}} {{#if includePageSize}} <div class="inline"> <div class="inline-content"> http://git-wip-us.apache.org/repos/asf/atlas/blob/c62934ae/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html b/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html index 02d1fef..9a39289 100644 --- a/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html @@ -88,7 +88,7 @@ <div class="input-group" data-id="goToPageDiv"> <input type="text" class="form-control number-input" data-id="gotoPage" placeholder="Goto Page" /> <span class="input-group-btn"> - <button class="btn btn-secondary" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button> + <button class="btn btn-default" type="button" data-id="gotoPagebtn" title="Goto Page" disabled="disabled">Go!</button> </span> </div> </div> http://git-wip-us.apache.org/repos/asf/atlas/blob/c62934ae/dashboardv2/public/js/utils/TableLayout.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/TableLayout.js b/dashboardv2/public/js/utils/TableLayout.js index 2113832..9f5db6f 100644 --- a/dashboardv2/public/js/utils/TableLayout.js +++ b/dashboardv2/public/js/utils/TableLayout.js @@ -24,13 +24,15 @@ define(['require', 'hbs!tmpl/common/TableLayout_tmpl', 'utils/Messages', 'utils/Utils', + 'utils/Globals', + 'utils/CommonViewFunction', 'backgrid-filter', 'backgrid-paginator', 'backgrid-sizeable', 'backgrid-orderable', 'backgrid-select-all', 'backgrid-columnmanager' -], function(require, Backbone, FSTablelayoutTmpl, Messages, Utils) { +], function(require, Backbone, FSTablelayoutTmpl, Messages, Utils, Globals, CommonViewFunction) { 'use strict'; var FSTableLayout = Backbone.Marionette.LayoutView.extend( @@ -125,12 +127,16 @@ define(['require', includeAtlasPagination: false, + includeAtlasPageSize: false, + includeFilter: false, includeHeaderSearch: false, includePageSize: false, + includeGotoPage: false, + includeFooterRecords: true, includeColumnManager: false, @@ -147,6 +153,7 @@ define(['require', var events = {}, that = this; events['change ' + this.ui.selectPageSize] = 'onPageSizeChange'; + events['change ' + this.ui.showPage] = 'changePageLimit'; events["click " + this.ui.nextData] = "onClicknextData"; events["click " + this.ui.previousData] = "onClickpreviousData"; events["click " + this.ui.gotoPagebtn] = 'gotoPagebtn'; @@ -174,15 +181,9 @@ define(['require', initialize: function(options) { this.limit = 25; this.offset = 0; - _.extend(this, _.pick(options, 'collection', 'columns', 'includePagination', 'includeHeaderSearch', 'includeFilter', 'includePageSize', - 'includeFooterRecords', 'includeColumnManager', 'includeSizeAbleColumns', 'includeOrderAbleColumns', 'includeTableLoader', 'includeAtlasPagination', 'atlasPaginationOpts')); - _.extend(this, this.atlasPaginationOpts); + _.extend(this, _.omit(options, 'gridOpts', 'atlasPaginationOpts')); + _.extend(this, options.atlasPaginationOpts); _.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns }); - _.extend(this.filterOpts, options.filterOpts); - _.extend(this.paginatorOpts, options.paginatorOpts); - _.extend(this.controlOpts, options.controlOpts); - _.extend(this.columnOpts, options.columnOpts); - this.bindEvents(); }, @@ -197,6 +198,9 @@ define(['require', this.listenTo(this.collection, 'reset', function(collection, options) { this.$('div[data-id="r_tableSpinner"]').removeClass('show'); + this.ui.gotoPage.val(''); + this.ui.gotoPage.parent().removeClass('has-error'); + this.ui.gotoPagebtn.prop("disabled", true); if (this.includePagination) { this.renderPagination(); } @@ -204,7 +208,7 @@ define(['require', this.renderFooterRecords(this.collection.state); } if (this.includeAtlasPagination) { - this.renderAtlasPagination(options); + this.renderAtlasPagination(collection, options); } }, this); @@ -261,14 +265,24 @@ define(['require', if (this.includeColumnManager) { this.renderColumnManager(); } + var pageSizeEl = null; if (this.includePageSize) { - this.ui.selectPageSize.select2({ + pageSizeEl = this.ui.selectPageSize; + } else if (this.includeAtlasPageSize) { + pageSizeEl = this.ui.showPage; + } + if (pageSizeEl) { + pageSizeEl.select2({ data: _.sortBy(_.union([25, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500], [this.collection.state.pageSize])), tags: true, dropdownCssClass: "number-input", multiple: false }); - this.ui.selectPageSize.val(this.collection.state.pageSize).trigger('change', { "skipViewChange": true }); + var val = this.collection.state.pageSize; + if (this.value && this.value.pageLimit) { + val = this.limit; + } + pageSizeEl.val(val).trigger('change', { "skipViewChange": true }); } }, @@ -305,6 +319,7 @@ define(['require', this.rPagination.show(new Backgrid.Extension.Paginator(options)); } else if (this.regions.rPagination) { this.$('div[data-id="r_pagination"]').show(new Backgrid.Extension.Paginator(options)); + this.showHideGoToPage(); } }, @@ -392,6 +407,14 @@ define(['require', } }, + showHideGoToPage: function() { + if (this.collection.state.pageSize > this.collection.fullCollection.length) { + this.ui.paginationDiv.hide(); + } else { + this.ui.paginationDiv.show(); + } + }, + /** * show/hide filter of the grid */ @@ -423,6 +446,9 @@ define(['require', * ColumnManager for the table */ renderColumnManager: function() { + if (!this.columns) { + return; + } var that = this, $el = this.columnOpts.el || this.$("[data-id='control']"), colManager = new Backgrid.Extension.ColumnManager(this.columns, this.columnOpts.opts), @@ -446,7 +472,6 @@ define(['require', that.collection.trigger("state-changed"); }); }, - renderSizeAbleColumns: function() { // Add sizeable columns var that = this, @@ -507,11 +532,17 @@ define(['require', onPageSizeChange: function(e, options) { if (!options || !options.skipViewChange) { var pagesize = $(e.currentTarget).val(); + if (pagesize == 0) { + this.ui.selectPageSize.data('select2').$container.addClass('has-error'); + return; + } else { + this.ui.selectPageSize.data('select2').$container.removeClass('has-error'); + } this.collection.state.pageSize = parseInt(pagesize, 10); - this.collection.state.currentPage = this.collection.state.firstPage; + this.showHideGoToPage(); if (this.collection.mode == "client") { - this.collection.reset(this.collection.toJSON()); + this.collection.fullCollection.reset(this.collection.fullCollection.toJSON()); } else { this.collection.fetch({ sort: false, @@ -521,6 +552,9 @@ define(['require', } } }, + /** + atlasNextBtn + **/ onClicknextData: function() { this.offset = this.offset + this.limit; _.extend(this.collection.queryParams, { @@ -532,14 +566,15 @@ define(['require', this.triggerUrl(); } } - this.ui.gotoPage.val(''); - this.ui.gotoPage.parent().removeClass('has-error'); if (this.fetchCollection) { this.fetchCollection({ next: true }); } }, + /** + atlasPrevBtn + **/ onClickpreviousData: function() { this.offset = this.offset - this.limit; if (this.offset <= -1) { @@ -554,15 +589,15 @@ define(['require', this.triggerUrl(); } } - this.ui.gotoPage.val(''); - this.ui.gotoPage.parent().removeClass('has-error'); if (this.fetchCollection) { this.fetchCollection({ previous: true }); } }, - // TODO : Need to add pageLimit for atlasPagination + /** + atlasPageLimit + **/ changePageLimit: function(e, obj) { if (!obj || (obj && !obj.skipViewChange)) { var limit = parseInt(this.ui.showPage.val()); @@ -581,35 +616,42 @@ define(['require', this.triggerUrl(); } } - this.ui.gotoPage.val(''); - this.ui.gotoPage.parent().removeClass('has-error'); _.extend(this.collection.queryParams, { limit: this.limit, offset: this.offset }); this.fetchCollection(); } }, + /** + atlasGotoBtn & Local Goto Btn + **/ gotoPagebtn: function(e) { var that = this; var goToPage = parseInt(this.ui.gotoPage.val()); if (!(_.isNaN(goToPage) || goToPage <= -1)) { - this.offset = (goToPage - 1) * this.limit; - if (this.offset <= -1) { - this.offset = 0; - } - _.extend(this.collection.queryParams, { limit: this.limit, offset: this.offset }); - if (this.offset == (this.pageFrom - 1)) { - Utils.notifyInfo({ - content: Messages.search.onSamePage + if (this.collection.mode == "client") { + return this.collection.getPage((goToPage - 1), { + reset: true }); } else { - if (this.value) { - this.value.pageOffset = this.offset; - if (this.triggerUrl) { - this.triggerUrl(); - } + this.offset = (goToPage - 1) * this.limit; + if (this.offset <= -1) { + this.offset = 0; } - // this.offset is updated in gotoPagebtn function so use next button calculation. - if (this.fetchCollection) { - this.fetchCollection({ 'next': true }); + _.extend(this.collection.queryParams, { limit: this.limit, offset: this.offset }); + if (this.offset == (this.pageFrom - 1)) { + Utils.notifyInfo({ + content: Messages.search.onSamePage + }); + } else { + if (this.value) { + this.value.pageOffset = this.offset; + if (this.triggerUrl) { + this.triggerUrl(); + } + } + // this.offset is updated in gotoPagebtn function so use next button calculation. + if (this.fetchCollection) { + this.fetchCollection({ 'next': true }); + } } } } http://git-wip-us.apache.org/repos/asf/atlas/blob/c62934ae/dashboardv2/public/js/views/schema/SchemaLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/schema/SchemaLayoutView.js b/dashboardv2/public/js/views/schema/SchemaLayoutView.js index f20ec2b..a8b1bee 100644 --- a/dashboardv2/public/js/views/schema/SchemaLayoutView.js +++ b/dashboardv2/public/js/views/schema/SchemaLayoutView.js @@ -92,7 +92,8 @@ define(['require', collection: this.schemaCollection, includeFilter: false, includePagination: true, - includePageSize: false, + includePageSize: true, + includeGotoPage: true, includeFooterRecords: true, includeOrderAbleColumns: false, gridOpts: { http://git-wip-us.apache.org/repos/asf/atlas/blob/c62934ae/dashboardv2/public/js/views/search/SearchResultLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js b/dashboardv2/public/js/views/search/SearchResultLayoutView.js index d1da75b..80a1f4e 100644 --- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js +++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js @@ -389,6 +389,9 @@ define(['require', skipDefaultError: true, sort: false, success: function(dataOrCollection, response) { + that.ui.gotoPage.val(''); + that.ui.gotoPage.parent().removeClass('has-error'); + that.ui.gotoPagebtn.prop("disabled", true); Globals.searchApiCallRef = undefined; var isFirstPage = that.offset === 0, dataLength = 0, @@ -1011,8 +1014,6 @@ define(['require', this.value.pageOffset = this.offset; this.triggerUrl(); } - this.ui.gotoPage.val(''); - this.ui.gotoPage.parent().removeClass('has-error'); this.fetchCollection(null, { next: true }); @@ -1029,8 +1030,6 @@ define(['require', this.value.pageOffset = this.offset; this.triggerUrl(); } - this.ui.gotoPage.val(''); - this.ui.gotoPage.parent().removeClass('has-error'); this.fetchCollection(null, { previous: true }); @@ -1079,8 +1078,6 @@ define(['require', this.value.pageOffset = this.offset; this.triggerUrl(); } - this.ui.gotoPage.val(''); - this.ui.gotoPage.parent().removeClass('has-error'); _.extend(this.searchCollection.queryParams, { limit: this.limit, offset: this.offset }); this.fetchCollection(); } http://git-wip-us.apache.org/repos/asf/atlas/blob/c62934ae/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js b/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js index 141cfa3..d934b76 100644 --- a/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js +++ b/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js @@ -89,6 +89,8 @@ define(['require', includePagination: true, includePageSize: false, includeFooterRecords: true, + includePageSize: true, + includeGotoPage: true, gridOpts: { className: "table table-hover backgrid table-quickMenu", emptyText: 'No records found!'
