client/paging: notify about empty results
This commit is contained in:
parent
68c966ff7d
commit
d3979d63dc
4 changed files with 30 additions and 12 deletions
|
@ -7,6 +7,8 @@
|
||||||
--inactive-tab-text-color: var(--inactive-link-color);
|
--inactive-tab-text-color: var(--inactive-link-color);
|
||||||
--active-tab-text-color: var(--text-color);
|
--active-tab-text-color: var(--text-color);
|
||||||
--active-tab-background-color: #E5E5E5;
|
--active-tab-background-color: #E5E5E5;
|
||||||
|
--message-info-border-color: #BDF;
|
||||||
|
--message-info-background-color: #E3EFF9;
|
||||||
--message-error-border-color: #FCC;
|
--message-error-border-color: #FCC;
|
||||||
--message-error-background-color: #FFF5F5;
|
--message-error-background-color: #FFF5F5;
|
||||||
--message-success-border-color: #D3E3D3;
|
--message-success-border-color: #D3E3D3;
|
||||||
|
@ -159,6 +161,10 @@ nav.text-nav ul li.active a {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
}
|
}
|
||||||
|
.message.info {
|
||||||
|
border: 1px solid var(--message-info-border-color);
|
||||||
|
background: var(--message-info-background-color);
|
||||||
|
}
|
||||||
.message.error {
|
.message.error {
|
||||||
border: 1px solid var(--message-error-border-color);
|
border: 1px solid var(--message-error-border-color);
|
||||||
background: var(--message-error-background-color);
|
background: var(--message-error-background-color);
|
||||||
|
|
|
@ -25,7 +25,8 @@ function notify(messageClass, message) {
|
||||||
module.exports = {
|
module.exports = {
|
||||||
Success: 1,
|
Success: 1,
|
||||||
Error: 2,
|
Error: 2,
|
||||||
Authentication: 3,
|
Info: 3,
|
||||||
|
Authentication: 4,
|
||||||
|
|
||||||
notify: notify,
|
notify: notify,
|
||||||
listen: listen,
|
listen: listen,
|
||||||
|
|
|
@ -48,10 +48,13 @@ function makeVoidElement(name, attributes) {
|
||||||
function listenToMessages(target) {
|
function listenToMessages(target) {
|
||||||
events.unlisten(events.Success);
|
events.unlisten(events.Success);
|
||||||
events.unlisten(events.Error);
|
events.unlisten(events.Error);
|
||||||
|
events.unlisten(events.Info);
|
||||||
events.listen(
|
events.listen(
|
||||||
events.Success, msg => { _messageHandler(target, msg, 'success'); });
|
events.Success, msg => { _messageHandler(target, msg, 'success'); });
|
||||||
events.listen(
|
events.listen(
|
||||||
events.Error, msg => { _messageHandler(target, msg, 'error'); });
|
events.Error, msg => { _messageHandler(target, msg, 'error'); });
|
||||||
|
events.listen(
|
||||||
|
events.Info, msg => { _messageHandler(target, msg, 'info'); });
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearMessages(target) {
|
function clearMessages(target) {
|
||||||
|
|
|
@ -21,8 +21,9 @@ class ManualPageView {
|
||||||
const source = this.holderTemplate();
|
const source = this.holderTemplate();
|
||||||
const pageContentHolder = source.querySelector('.page-content-holder');
|
const pageContentHolder = source.querySelector('.page-content-holder');
|
||||||
const pageNav = source.querySelector('.page-nav');
|
const pageNav = source.querySelector('.page-nav');
|
||||||
|
const currentPage = ctx.initialPage;
|
||||||
|
|
||||||
ctx.requestPage(ctx.initialPage).then(response => {
|
ctx.requestPage(currentPage).then(response => {
|
||||||
let pageRendererCtx = response;
|
let pageRendererCtx = response;
|
||||||
pageRendererCtx.target = pageContentHolder;
|
pageRendererCtx.target = pageContentHolder;
|
||||||
ctx.pageRenderer.render(pageRendererCtx);
|
ctx.pageRenderer.render(pageRendererCtx);
|
||||||
|
@ -37,8 +38,8 @@ class ManualPageView {
|
||||||
for (let i = totalPages - threshold; i <= totalPages; i++) {
|
for (let i = totalPages - threshold; i <= totalPages; i++) {
|
||||||
pagesVisible.push(i);
|
pagesVisible.push(i);
|
||||||
}
|
}
|
||||||
for (let i = ctx.initialPage - threshold;
|
for (let i = currentPage - threshold;
|
||||||
i <= ctx.initialPage + threshold;
|
i <= currentPage + threshold;
|
||||||
i++) {
|
i++) {
|
||||||
pagesVisible.push(i);
|
pagesVisible.push(i);
|
||||||
}
|
}
|
||||||
|
@ -57,19 +58,26 @@ class ManualPageView {
|
||||||
pages.push({
|
pages.push({
|
||||||
number: page,
|
number: page,
|
||||||
link: ctx.clientUrl.format({page: page}),
|
link: ctx.clientUrl.format({page: page}),
|
||||||
active: ctx.initialPage === page,
|
active: currentPage === page,
|
||||||
});
|
});
|
||||||
lastPage = page;
|
lastPage = page;
|
||||||
}
|
}
|
||||||
views.showView(pageNav, this.navTemplate({
|
|
||||||
prevLink: ctx.clientUrl.format({page: ctx.initialPage - 1}),
|
if (response.total) {
|
||||||
nextLink: ctx.clientUrl.format({page: ctx.initialPage + 1}),
|
views.showView(pageNav, this.navTemplate({
|
||||||
prevLinkActive: ctx.initialPage > 1,
|
prevLink: ctx.clientUrl.format({page: currentPage - 1}),
|
||||||
nextLinkActive: ctx.initialPage < totalPages,
|
nextLink: ctx.clientUrl.format({page: currentPage + 1}),
|
||||||
pages: pages,
|
prevLinkActive: currentPage > 1,
|
||||||
}));
|
nextLinkActive: currentPage < totalPages,
|
||||||
|
pages: pages,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
views.listenToMessages(target);
|
views.listenToMessages(target);
|
||||||
views.showView(target, source);
|
views.showView(target, source);
|
||||||
|
if (response.total < (currentPage - 1) * response.pageSize) {
|
||||||
|
events.notify(events.Info, 'No data to show');
|
||||||
|
}
|
||||||
}, response => {
|
}, response => {
|
||||||
views.listenToMessages(target);
|
views.listenToMessages(target);
|
||||||
views.showView(target, source);
|
views.showView(target, source);
|
||||||
|
|
Loading…
Reference in a new issue