client/paging: notify about empty results

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);

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,

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) {

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);