The issue
Realtime can't update Discussion List after I enable Pagination.
Then I check the source code of Pagination. It's extend discussion list view and do pagination action. May be it's the reason why realtime can't update discussion list. Pagination is a necessary extension for me. How can I fix it. Thank you.
extend(DiscussionList.prototype, 'view', function (view) {
// info about discussions
const state = this.attrs.state;
if (!state.usePaginationMode) {
return;
}
const params = state.getParams();
//
let DiscussionListView;
//
if (state.isEmpty()) {
const text = app.translator.trans('core.forum.discussion_list.empty_text');
DiscussionListView = (
Placeholder.component({text})
);
view.children = [];
view.children.push(DiscussionListView);
return;
}
//
if (!state.isLoading()) {
let dicussionsOnPage = [];
const pages = state.getPages();
const pageSize = state.pageSize;
//
for (let index = 0; index < pages.length; index++) {
const page = pages[index];
if (page.number == state.location.page) {
page.items.map((discussion, itemNum) => {
dicussionsOnPage.push(
<li key={discussion.id()} data-id={discussion.id()} role="article" aria-setsize="-1" aria-posinset={page.number * pageSize + itemNum}>
{DiscussionListItem.component({discussion, params})}
</li>
);
});
break;
}
}
//
DiscussionListView = (
<ul role="feed" className="DiscussionList-discussions">
{dicussionsOnPage.map((i) => i)}
</ul>
);
//
view.children = [];
view.children.push(DiscussionListView);
// define buttons
let buttonFirst = Button.component({
title: "First",
icon: 'fa-solid fa-angles-left',
className: 'Button Button--icon',
onclick: () => {
state.ctrl.toPage(1);
}
});
let buttonBack = Button.component({
title: "Back",
icon: 'fa-solid fa-angle-left',
className: 'Button Button--icon',
onclick: () => {
let page = state.page().number;
state.ctrl.toPage(parseInt(page) - 1);
}
});
let buttonNext = Button.component({
title: "Next",
icon: 'fa-solid fa-angle-right',
className: 'Button Button--icon',
onclick: () => {
let page = state.page().number;
state.ctrl.toPage(parseInt(page) + 1);
}
});
let buttonLast = Button.component({
title: "Last",
icon: 'fa-solid fa-angles-right',
className: 'Button Button--icon',
onclick: () => {
let page = parseInt(state.totalPages());
state.ctrl.toPage(parseInt(page));
}
});
//
function JumpFunc(){
let input = parseInt(document.getElementById('nodeloc-inputJump').value);
if (Number.isFinite(input) && Number.isSafeInteger(input)) {
if (input != state.page().number) {
if (1 <= input && input <= state.totalPages()) {
state.ctrl.toPage(input);
}
}
}
}
let inputJump = m('input.FromControl', {
id: 'nodeloc-inputJump',
placeholder: state.page().number === undefined ? '' : `${state.page().number}`,
onkeydown: (event) => {
event.redraw = false;
if(event.keyCode == 13){
event.redraw = true;
JumpFunc();
}
}
});
let buttonJump = Button.component({
title: "Jump",
icon: 'fa-solid fa-reply',
className: 'Button Button--icon',
onclick: JumpFunc
});
//
let buttonPage = [];
let buttons;
let toolbar;
//
state.ctrl.pageList().map(function (page) {
let me = this;
buttonPage.push(Button.component({
title: parseInt(page),
icon: '',
className: (page == me.page().number) ? 'Button Button--primary' : 'Button',
'data-page': page,
onclick: (page != me.page().number) ? () => {
me.ctrl.toPage(parseInt(page));
} : ''
}, m('strong', {className: ''}, parseInt(page))));
}, state);
//
buttons = [buttonFirst].concat(buttonBack, buttonPage, buttonNext, buttonLast,
inputJump, buttonJump);
//
toolbar = {
view: function (vnode) {
return m('div', {id: 'toolbar' + Math.floor((Math.random() * 10) + 1), className: 'Pagination'},
m('ul', {class: 'IndexPage-toolbar-view'}, vnode.attrs.groupbuttons.map((ibutton) => {
return m('li', {class: ''}, ibutton);
}))
);
}
}
//
app.forum.attribute('NodelocPagination.NavBarPosition') == 'above' && !state.isLoading()
? view.children.unshift(m(toolbar, {groupbuttons: buttons})) : '';
app.forum.attribute('NodelocPagination.NavBarPosition') == 'under' && !state.isLoading()
? view.children.push(m(toolbar, {groupbuttons: buttons})) : '';
app.forum.attribute('NodelocPagination.NavBarPosition') == 'both' && !state.isLoading()
? view.children.unshift(m(toolbar, {groupbuttons: buttons}))
&& view.children.push(m(toolbar, {groupbuttons: buttons})) : '';
}
});
