From d3979d63dc874c84ef4f18bdf5d39088377e765b Mon Sep 17 00:00:00 2001 From: rr- Date: Tue, 12 Apr 2016 18:17:46 +0200 Subject: [PATCH] client/paging: notify about empty results --- client/css/main.css | 6 ++++++ client/js/events.js | 3 ++- client/js/util/views.js | 3 +++ client/js/views/manual_page_view.js | 30 ++++++++++++++++++----------- 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/client/css/main.css b/client/css/main.css index bbec016..3f584aa 100644 --- a/client/css/main.css +++ b/client/css/main.css @@ -7,6 +7,8 @@ --inactive-tab-text-color: var(--inactive-link-color); --active-tab-text-color: var(--text-color); --active-tab-background-color: #E5E5E5; + --message-info-border-color: #BDF; + --message-info-background-color: #E3EFF9; --message-error-border-color: #FCC; --message-error-background-color: #FFF5F5; --message-success-border-color: #D3E3D3; @@ -159,6 +161,10 @@ nav.text-nav ul li.active a { text-align: left; padding: 0.5em 1em; } +.message.info { + border: 1px solid var(--message-info-border-color); + background: var(--message-info-background-color); +} .message.error { border: 1px solid var(--message-error-border-color); background: var(--message-error-background-color); diff --git a/client/js/events.js b/client/js/events.js index 5c5bdb0..d8532a0 100644 --- a/client/js/events.js +++ b/client/js/events.js @@ -25,7 +25,8 @@ function notify(messageClass, message) { module.exports = { Success: 1, Error: 2, - Authentication: 3, + Info: 3, + Authentication: 4, notify: notify, listen: listen, diff --git a/client/js/util/views.js b/client/js/util/views.js index 35abd71..df31f69 100644 --- a/client/js/util/views.js +++ b/client/js/util/views.js @@ -48,10 +48,13 @@ function makeVoidElement(name, attributes) { function listenToMessages(target) { events.unlisten(events.Success); events.unlisten(events.Error); + events.unlisten(events.Info); events.listen( events.Success, msg => { _messageHandler(target, msg, 'success'); }); events.listen( events.Error, msg => { _messageHandler(target, msg, 'error'); }); + events.listen( + events.Info, msg => { _messageHandler(target, msg, 'info'); }); } function clearMessages(target) { diff --git a/client/js/views/manual_page_view.js b/client/js/views/manual_page_view.js index d458257..7a166e7 100644 --- a/client/js/views/manual_page_view.js +++ b/client/js/views/manual_page_view.js @@ -21,8 +21,9 @@ class ManualPageView { const source = this.holderTemplate(); const pageContentHolder = source.querySelector('.page-content-holder'); const pageNav = source.querySelector('.page-nav'); + const currentPage = ctx.initialPage; - ctx.requestPage(ctx.initialPage).then(response => { + ctx.requestPage(currentPage).then(response => { let pageRendererCtx = response; pageRendererCtx.target = pageContentHolder; ctx.pageRenderer.render(pageRendererCtx); @@ -37,8 +38,8 @@ class ManualPageView { for (let i = totalPages - threshold; i <= totalPages; i++) { pagesVisible.push(i); } - for (let i = ctx.initialPage - threshold; - i <= ctx.initialPage + threshold; + for (let i = currentPage - threshold; + i <= currentPage + threshold; i++) { pagesVisible.push(i); } @@ -57,19 +58,26 @@ class ManualPageView { pages.push({ number: page, link: ctx.clientUrl.format({page: page}), - active: ctx.initialPage === page, + active: currentPage === page, }); lastPage = page; } - views.showView(pageNav, this.navTemplate({ - prevLink: ctx.clientUrl.format({page: ctx.initialPage - 1}), - nextLink: ctx.clientUrl.format({page: ctx.initialPage + 1}), - prevLinkActive: ctx.initialPage > 1, - nextLinkActive: ctx.initialPage < totalPages, - pages: pages, - })); + + if (response.total) { + views.showView(pageNav, this.navTemplate({ + prevLink: ctx.clientUrl.format({page: currentPage - 1}), + nextLink: ctx.clientUrl.format({page: currentPage + 1}), + prevLinkActive: currentPage > 1, + nextLinkActive: currentPage < totalPages, + pages: pages, + })); + } + views.listenToMessages(target); views.showView(target, source); + if (response.total < (currentPage - 1) * response.pageSize) { + events.notify(events.Info, 'No data to show'); + } }, response => { views.listenToMessages(target); views.showView(target, source);