Skip to content

A
atlas
Commit 9ab13a31 by kalyanikk Committed by Suma Shivaprasad
Options

ATLAS-1046 : UI: Search pagination refinements

parent 425237d5
Showing with 123 additions and 42 deletions
dashboardv2/public/css/scss/main.scss
......@@ -249,8 +249,8 @@ ul {
.ellipsis {
text-overflow: ellipsis;
max-width: 98%;
overflow: hidden;
margin-bottom: 10px;
}
.modal-body {
......
dashboardv2/public/css/scss/override.scss
......@@ -169,3 +169,16 @@
}
}
}
.backgrid-paginator ul {
margin: 0px;
float: right;
border-radius: 10px;
overflow: hidden;
}
.backgrid-paginator ul > .disabled > span,
.backgrid-paginator ul > .disabled > a,
.backgrid-paginator ul > .disabled > a:hover {
cursor: pointer;
}
dashboardv2/public/css/scss/search.scss
......@@ -92,3 +92,7 @@ input {
margin-top: 10px;
cursor: pointer
}
.labelShowRecord {
line-height: 40px;
}
dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
......@@ -20,8 +20,8 @@
</div>
</div>
<div class="auditTable">
<div id="r_auditTableLayoutView"></div>
<ul class="pager">
<span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
<ul class="pager pull-right">
<li>
<button class="btn" data-id="previousAuditData">Previous</button>
</li>
......@@ -29,4 +29,5 @@
<button class="btn" data-id="nextAuditData">Next</button>
</li>
</ul>
<div id="r_auditTableLayoutView"></div>
</div>
dashboardv2/public/js/templates/common/TableLayout_tmpl.html
......@@ -14,6 +14,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="row banded">
<div data-id="r_footerRecords" class="col-sm-6 margin-top-10"></div>
<div data-id="r_pagination" class="col-sm-6 text-right"></div>
</div>
<div class="clearfix">
<div class="form-group pull-right no-margin">
<div data-id="control" class="pull-right"></div>
......@@ -33,7 +37,3 @@
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
<div class="row banded">
<div data-id="r_footerRecords" class="col-sm-6 margin-top-10"></div>
<div data-id="r_pagination" class="col-sm-6 text-right"></div>
</div>
dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
......@@ -20,10 +20,9 @@
</div>
<div class="ellipsis"><span class="searchResult" style=" font-size: 16px;"></span></div>
<div class="searchTable">
<div id="r_searchResultTableLayoutView">
</div>
<span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
<div data-id="paginationDiv" style="display:none">
<ul class="pager">
<ul class="pager pull-right">
<li>
<button class="btn" data-id="previousData" disabled=true>Previous</button>
</li>
......@@ -32,5 +31,7 @@
</li>
</ul>
</div>
<div id="r_searchResultTableLayoutView">
</div>
</div>
</div>
dashboardv2/public/js/utils/TableLayout.js
......@@ -308,10 +308,9 @@ define(['require',
renderFooterRecords: function(collectionState) {
var collState = collectionState;
var totalRecords = collState.totalRecords || 0;
var pageStartIndex = totalRecords ? (collState.currentPage * collState.pageSize) : 0;
var pageStartIndex = totalRecords ? (collState.currentPage * collState.pageSize) : 1;
var pageEndIndex = pageStartIndex + this.collection.length;
this.$('[data-id="r_footerRecords"]').html('Showing ' + (totalRecords ? pageStartIndex + 1 : 0) + ' to ' + pageEndIndex + ' of ' + totalRecords + ' entries');
this.$('[data-id="r_footerRecords"]').html('<h5>Showing ' + (totalRecords ? pageStartIndex + 1 : 0) + ' - ' + pageEndIndex + '</h5>');
return this;
},
/**
......
dashboardv2/public/js/views/audit/AuditTableLayoutView.js
......@@ -41,7 +41,8 @@ define(['require',
auditValue: "[data-id='auditValue']",
auditCreate: "[data-id='auditCreate']",
previousAuditData: "[data-id='previousAuditData']",
nextAuditData: "[data-id='nextAuditData']"
nextAuditData: "[data-id='nextAuditData']",
pageRecordText: "[data-id='pageRecordText']"
},
/** ui events hash */
events: function() {
......@@ -58,7 +59,7 @@ define(['require',
initialize: function(options) {
_.extend(this, _.pick(options, 'globalVent', 'guid'));
this.entityCollection = new VEntityList();
this.count = 25;
this.count = 26;
this.entityCollection.url = "/api/atlas/entities/" + this.guid + "/audit";
this.entityCollection.modelAttrName = "events"
this.entityModel = new this.entityCollection.model();
......@@ -76,6 +77,9 @@ define(['require',
filterOpts: {},
paginatorOpts: {}
};
this.currPage = 1;
// this.pageFrom = 1;
// this.pageTo = this.count;
},
onRender: function() {
$.extend(this.entityCollection.queryParams, { count: this.count });
......@@ -86,6 +90,32 @@ define(['require',
});
this.renderTableLayoutView();
},
getToOffset: function() {
var toOffset = 0;
if (this.entityCollection.models.length < this.count) {
toOffset = ((this.currPage - 1) * (this.count - 1) + (this.entityCollection.models.length));
} else {
toOffset = ((this.currPage - 1) * (this.count - 1) + (this.entityCollection.models.length - 1));
}
return toOffset;
},
renderOffset: function(options) {
var that = this;
if (options.nextClick) {
options.previous.removeAttr("disabled");
if (that.entityCollection.length != 0) {
that.currPage++;
that.ui.pageRecordText.html("Showing " + ((that.currPage - 1) * (that.count - 1) + 1) + " - " + that.getToOffset());
}
}
if (options.previousClick) {
options.next.removeAttr("disabled");
if (that.currPage > 1 && that.entityCollection.models.length) {
that.currPage--;
that.ui.pageRecordText.html("Showing " + ((that.currPage - 1) * (that.count - 1) + 1) + " - " + that.getToOffset());
}
}
},
fetchCollection: function(options) {
var that = this;
this.$('.fontLoader').show();
......@@ -97,26 +127,23 @@ define(['require',
}
this.entityCollection.fetch({
success: function() {
that.$('.fontLoader').hide();
that.$('.auditTable').show();
options.previous.attr('disabled', true);
if (that.entityCollection.models.length <= 1) {
if (that.entityCollection.models.length < that.count) {
options.previous.attr('disabled', true);
options.next.attr('disabled', true);
}
if (that.entityCollection.models.length == 1 && that.next == that.entityCollection.last().get('eventKey')) {
if (!options.nextClick && !options.previousClick) {
that.ui.pageRecordText.html("Showing " + ((that.currPage - 1) * (that.count - 1) + 1) + " - " + that.getToOffset());
}
that.$('.fontLoader').hide();
that.$('.auditTable').show();
that.renderOffset(options);
if ((that.entityCollection.models.length < that.count && that.currPage == 1) && that.next == that.entityCollection.last().get('eventKey')) {
options.next.attr('disabled', true);
options.previous.removeAttr("disabled");
that.entityCollection.reset();
} else {
if (that.entityCollection.models.length > 0) {
that.next = that.entityCollection.last().get('eventKey');
if (options.nextClick) {
options.previous.removeAttr("disabled");
}
if (options.previousClick) {
options.previous.removeAttr("disabled");
}
if (that.pervOld.length == 0) {
if (that.pervOld.length === 0) {
options.previous.attr('disabled', true);
}
}
......@@ -134,6 +161,9 @@ define(['require',
globalVent: that.globalVent,
columns: cols
})));
if (!(that.entityCollection.models.length < that.count)) {
that.RAuditTableLayoutView.$el.find('table tr').last().hide()
}
});
},
getAuditTableColumns: function() {
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
......@@ -53,7 +53,8 @@ define(['require',
showMoreLessTerm: '[data-id="showMoreLessTerm"]',
paginationDiv: '[data-id="paginationDiv"]',
previousData: "[data-id='previousData']",
nextData: "[data-id='nextData']"
nextData: "[data-id='nextData']",
pageRecordText: "[data-id='pageRecordText']"
},
/** ui events hash */
......@@ -114,9 +115,11 @@ define(['require',
this.entityModel = new VEntity();
this.searchCollection = new VSearchList();
this.limit = 25;
this.firstFetch = true;
this.fetchList = 0;
if (options.value.searchType == "dsl") {
if (options.value.searchType === "dsl" || options.value.type === "dsl") {
pagination = false;
this.offset = 0;
} else {
pagination = true;
}
......@@ -125,7 +128,7 @@ define(['require',
includeFilter: false,
includePagination: pagination,
includePageSize: false,
includeFooterRecords: false,
includeFooterRecords: pagination,
includeSizeAbleColumns: false,
gridOpts: {
emptyText: 'No Record found!',
......@@ -216,15 +219,48 @@ define(['require',
}
Globals.searchApiCallRef = this.searchCollection.fetch({
success: function() {
if (that.searchCollection.length === 0) {
if (that.searchCollection.models.length < that.limit) {
that.ui.nextData.attr('disabled', true);
}
Globals.searchApiCallRef = undefined;
if (that.searchCollection.toJSON().length == 0) {
if (that.offset === 0) {
that.pageFrom = 1;
that.pageTo = that.limit;
if (that.searchCollection.length > 0) {
that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.searchCollection.length);
}
} else if (that.searchCollection.models.length && !that.previousClick) {
//on next click, adding "1" for showing the another records..
that.pageFrom = that.pageTo + 1;
that.pageTo = that.pageTo + that.searchCollection.models.length;
if (that.pageFrom && that.pageTo) {
that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.pageTo);
}
} else if (that.previousClick) {
that.pageTo = (that.pageTo - (that.pageTo - that.pageFrom)) - 1;
//if limit is 0 then result is change to 1 because page count is showing from 1
that.pageFrom = (that.pageFrom - that.limit === 0 ? 1 : that.pageFrom - that.limit);
that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.pageTo);
}
if (that.searchCollection.models.length === 0) {
that.checkTableFetch();
that.offset = that.offset - that.limit;
if (that.firstFetch) {
that.ui.paginationDiv.hide();
that.renderTableLayoutView();
}
}
if (that.firstFetch) {
that.firstFetch = false;
}
that.renderTableLayoutView();
var resultData = that.searchCollection.fullCollection.length + ' results for <b>' + that.searchCollection.queryParams.query + '</b>'
if (that.offset < that.limit) {
that.ui.previousData.attr('disabled', true);
}
// checking length for not rendering the table
if (that.searchCollection.models.length) {
that.renderTableLayoutView();
}
var resultData = 'Results for <b>' + that.searchCollection.queryParams.query + '</b>'
var multiAssignData = '<a href="javascript:void(0)" class="inputAssignTag multiSelect" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i>' + " " + 'Assign Term</a>'
that.$('.searchResult').html(resultData + multiAssignData);
},
......@@ -282,7 +318,7 @@ define(['require',
this.$('.fontLoader').hide();
this.$('.searchTable').show();
this.$('.searchResult').show();
if (this.value.searchType == "dsl") {
if (this.value.searchType == "dsl" || this.value.type === "dsl") {
this.ui.paginationDiv.show();
} else {
this.ui.paginationDiv.hide();
......@@ -591,9 +627,7 @@ define(['require',
return that.offset;
}
});
if (this.offset > this.limit) {
this.ui.nextData.attr('disabled', true);
}
this.previousClick = false;
this.fetchCollection();
},
onClickpreviousData: function() {
......@@ -605,9 +639,7 @@ define(['require',
return that.offset;
}
});
if (this.offset <= that.limit) {
this.ui.previousData.attr('disabled', true);
}
this.previousClick = true;
this.fetchCollection();
},
});
......
release-log.txt
......@@ -6,6 +6,7 @@ INCOMPATIBLE CHANGES:
ALL CHANGES:
ATLAS-1046 UI: Search pagination refinements (Kalyanikashikar via sumasai)
ATLAS-1056 Differentiate between tag and term using attribute "taxonomy.namespace" (kevalbhat18 via sumasai)
ATLAS-1059 Change log level to debug for search APIs(sumasai)
ATLAS-1049 Fix validation while filtering by supertypes(mneethiraj via sumasai)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment