Fix HTML logic of job-page.html.
- prev, next buttons should be hidden when they're empty.
- clicking prev or next should only update either prev_cursor or next_cursor
Bug: chromium:1266577
Change-Id: If30c17c518a5fbe3a773fa18898527057e630055
Reviewed-on: https://chromium-review.googlesource.com/c/catapult/+/3269145
Reviewed-by: Ryan Heise <heiserya@google.com>
Commit-Queue: Eduardo Yap <eduardoyap@google.com>
diff --git a/dashboard/dashboard/pinpoint/elements/jobs-page.html b/dashboard/dashboard/pinpoint/elements/jobs-page.html
index f7b4d93..103abe7 100644
--- a/dashboard/dashboard/pinpoint/elements/jobs-page.html
+++ b/dashboard/dashboard/pinpoint/elements/jobs-page.html
@@ -27,6 +27,11 @@
right: 2em;
}
+ .pagination {
+ position: absolute;
+ right: 100px;
+ }
+
.pagination a {
color: black;
float: right;
@@ -65,8 +70,8 @@
auth-headers="[[authHeaders]]">
</jobs-table>
<div class="pagination">
- <a hidden$=[[jobs.next]] on-click="changePage">Next</span>
- <a hidden$=[[jobs.prev]] on-click="changePage">Prev</span>
+ <a hidden$=[[!jobs.next]] on-click="nextPage">Next</span>
+ <a hidden$=[[!jobs.prev]] on-click="prevPage">Prev</span>
</div>
</loading-wrapper>
<new-job-fab auth-headers="[[authHeaders]]"></new-job-fab>
@@ -91,7 +96,7 @@
},
params: {
computed: 'computeParams(prev_cursor, next_cursor)'
- }
+ },
},
jobCount(jobs) {
@@ -101,8 +106,13 @@
return String(jobs.count);
},
- changePage(event) {
+ prevPage(event) {
this.set('prev_cursor', this.jobs.prev_cursor);
+ this.set('next_cursor', '');
+ },
+
+ nextPage(event) {
+ this.set('prev_cursor', '');
this.set('next_cursor', this.jobs.next_cursor);
},