Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stop using jquery simple pagination #157

Merged

Conversation

leemyongpakvn
Copy link
Contributor

@leemyongpakvn leemyongpakvn commented Mar 15, 2023

Questions Answers
Description? simplePagination.js has been outdated for 7 years and is not available in npm. As discussed at disscussion 31624, we need to replace it by a simpler custom JS pagination code.
It is a chance to replace old jquery get by new fetch API too.
(other contributors can try to replace jquery post by fetch API or even remove unnecessary JS code :)
Type? refacto
BC breaks? no
Deprecations? no
Fixed ticket? Fixes PrestaShop/PrestaShop#31781
How to test? Apply PR changes, then Check whether comment list pagination works as usual.
There is a behavior change for comment list with over 9 pages when click ... sign: old pagination show an input box to enter page number, while new pagination reveal the hidden page number instead.

Copy link
Contributor

@matthieu-rolland matthieu-rolland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you for your contribution 👍

I gave you some feedback

$commentsTotalPages = ceil($commentsNb / $commentsPerPage);
$commentsNav .= '<ul>';
$prevCount = 0;
$commentsNav .= '<li data-page="' . $prevCount . '" id="pcl_page_' . $prevCount . '"><span class="prev"><i class="material-icons">chevron_left</i></span></li>';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe it would be better to have a dedicated template for $commentsNav rather than writing serious HTML in PHP?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. This pure HTML is moved to TPL.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you

let i = start + step;
if (4 < Math.abs(stop - start)) {
$(pageIdPrefix + i).removeClass('hidden').removeClass('disabled');
$(pageIdPrefix + i + ' span').html(i);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using template literals instead of contatenating with + (here and in other selectors when applicable)

Suggested change
$(pageIdPrefix + i + ' span').html(i);
$(`${pageIdPrefix}${i} span`).html(i);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Applied. We have a bunch of $$$ now 🏦

@kpodemski
Copy link
Contributor

Hi @leemyongpakvn

LGTM! One thing I need clarification on, to me, it looks like a BC Break. Imagine this. If somebody updates the module and has an override on the list comments, it won't work anymore. The same goes for the view file. What do you think?

Also, cc @Hlavtox @Oksydan :)

@leemyongpakvn
Copy link
Contributor Author

@kpodemski I agree current changes in views/templates/hook/product-comments-list.tpl is a BC break in case a theme overrided product-comments-list.tpl. By the way, both classic-theme and hummingbird do not override this file.
Generating pagination in PHP like my previous commit then inject it to <div id="product-comments-list-pagination"></div> in TPL by JS can solve this BC (no change in template file so no theme override - if any - will be affected :).

@leemyongpakvn
Copy link
Contributor Author

After rechecking views/js/list-comments.js I'm quite sure that changes in views/templates/hook/product-comments-list.tpl is not a BC break as it looks like. Because whatever a theme developer wrote in the theme product-comments-list.tpl, pagination div $('#product-comments-list-pagination') content is still generated by function paginateComments.
Moreover, the module productcomments.css is kept with just a few minor tweaks so the theme layout won't be affected either.

Copy link
Contributor

@florine2623 florine2623 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @leemyongpakvn ,

Thanks for your PR !

LGTM, it is QA ✅

Screen.Recording.2023-03-31.at.14.46.01.mov

@Progi1984 Progi1984 added this to the 5.0.4 milestone Mar 31, 2023
@kpodemski kpodemski merged commit de5160c into PrestaShop:dev Mar 31, 2023
@kpodemski
Copy link
Contributor

well done @leemyongpakvn 👏🏻

I see more and more PRs from you, and more complicated ones, I hope we can have you as a committer soon :D

@leemyongpakvn
Copy link
Contributor Author

leemyongpakvn commented Apr 1, 2023

@kpodemski I'm simplifying complex things ;) Becoming a committer can make my contributions and some other contributors ones move faster but I'm worried about something that @matks's scared of. The less active status of the 2 safest-looking maintainers (according to my point of view :) and the increasing concern of matks about Instances of abusive and harassing in recent weeks even make me more worried 😟
So I'm feel comfortable to become a scoped-commiter on some repos that I feel familiar the most: docs, examples-modules, blockreassurance, productcomments and classic-theme. Bigger scope can create bigger troubles. Wdyt ?

@leemyongpakvn leemyongpakvn deleted the stop-using-jquerySimplePagination branch May 5, 2023 13:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

simplePagination.js library in productcomments module is obsolete
5 participants