[IMP] website_(profile, slides): add custom pager to show on all users / courses pages

If there are too much users to show on the page and to avoid performance
issues, a pager is now applied on the all users page.

A new pager based on website_pager is added in order to ease the navigation
through the potential high number of pages. 'Go to first page' and 'Go to last
page' buttons have been added and the design of the pager have been adapted
to be more integrated into the new eLearning platform.

Also add the pager on the slide page if search category is applied. The pager
was already computed in the controller but not displayed.

Task ID : 1946160
PR #31697

6 files changed, 80 insertions, 6 deletions

diff --git a/addons/portal/controllers/portal.py b/addons/portal/controllers/portal.py
index fbfa39ebe89..2efa54b5c17 100644
--- a/addons/portal/controllers/portal.py
+++ b/addons/portal/controllers/portal.py
@@ -55,6 +55,10 @@ def pager(url, total, page=1, step=30, scope=5, url_args=None):
             'url': get_url(page),
             'num': page
         },
+        "page_first": {
+            'url': get_url(1),
+            'num': 1
+        },
         "page_start": {
             'url': get_url(pmin),
             'num': pmin
@@ -71,6 +75,10 @@ def pager(url, total, page=1, step=30, scope=5, url_args=None):
             'url': get_url(pmax),
             'num': pmax
         },
+        "page_last": {
+            'url': get_url(page_count),
+            'num': page_count
+        },
         "pages": [
             {'url': get_url(page_num), 'num': page_num} for page_num in range(pmin, pmax+1)
         ]
diff --git a/addons/website_profile/controllers/main.py b/addons/website_profile/controllers/main.py
index ea0ccd3f0cb..4d0e58efbe8 100644
--- a/addons/website_profile/controllers/main.py
+++ b/addons/website_profile/controllers/main.py
@@ -13,6 +13,7 @@ from odoo.osv import expression
 
 
 class WebsiteProfile(http.Controller):
+    PAGER_MAX_PAGE = 5
 
     # Profile
     # ---------------------------------------------------
diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index 3eb9f3b4003..224b46b1c84 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -137,6 +137,43 @@ $owprofile-tabs-height: 37px;
     }
 }
 
+.o_wprofile_pager {
+    li.page-item {
+        a.page-link {
+            background-color: transparent;
+            border: 0;
+            color: $gray-600;
+            transition-duration: .3s;
+
+            &:hover {
+                color: $primary;
+            }
+        }
+
+        &.active {
+            a.page-link {
+                color: $white;
+            }
+        }
+
+        &.o_wprofile_pager_arrow a {
+            color: $primary;
+
+            &:hover {
+                transform: scaleX(1.50) scaleY(1.50);
+            }
+        }
+
+        &.o_wprofile_pager_arrow.disabled a {
+            color: $gray-600;
+        }
+
+        .page-link:focus {
+            box-shadow: 0 0 0 0;
+        }
+    }
+}
+
 
 // Other stuffs
 .country_flag {
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 96de581b036..2a108ef8906 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -400,8 +400,8 @@
                     <t t-call="website_profile.all_user_card"/>
                 </tr>
             </table>
-            <div class="float-left">
-                <t t-call="website.pager"/>
+            <div class="form-inline justify-content-center">
+                <t t-call="website_profile.pager_nobox"/>
             </div>
         </div>
     </template>
@@ -442,4 +442,25 @@
         </td>
     </template>
 
+    <!-- Custom Pager: lighter than existing one, no box around number, first / end displayed -->
+    <template id="pager_nobox" name="Pager (not box display)">
+        <ul t-if="pager['page_count'] > 1" t-attf-class="o_wprofile_pager font-weight-bold pagination m-0">
+            <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == 1 else ''}">
+                <a t-att-href=" pager['page_first']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="fa fa-step-backward"/></a>
+            </li>
+            <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == 1 else ''}">
+                <a t-att-href=" pager['page_previous']['url'] if pager['page']['num'] != 1 else None" class="page-link"><i class="fa fa-caret-left"/></a>
+            </li>
+            <t t-foreach="pager['pages']" t-as="page">
+                <li t-attf-class="page-item #{'active disabled bg-primary rounded-circle' if page['num'] == pager['page']['num'] else ''}"> <a t-att-href="page['url']" class="page-link" t-raw="page['num']"></a></li>
+            </t>
+            <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == pager['page_count'] else ''}">
+                <a t-att-href="pager['page_next']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="fa fa-caret-right"/></a>
+            </li>
+            <li t-attf-class="page-item o_wprofile_pager_arrow #{'disabled' if pager['page']['num'] == pager['page_count'] else ''}">
+                <a t-att-href=" pager['page_last']['url'] if pager['page']['num'] != pager['page_count'] else None" class="page-link"><i class="fa fa-step-forward"/></a>
+            </li>
+        </ul>
+    </template>
+
 </data></odoo>
diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py
index 22abb5ded9c..e92bd961b30 100644
--- a/addons/website_slides/controllers/main.py
+++ b/addons/website_slides/controllers/main.py
@@ -5,6 +5,7 @@ import base64
 import itertools
 import logging
 import werkzeug
+import math
 
 from odoo import http, modules, tools, _
 from odoo.exceptions import AccessError, UserError
@@ -329,10 +330,11 @@ class WebsiteSlides(WebsiteProfile):
         order = request.env['slide.slide']._order_by_strategy[actual_sorting]
         pager_args['sorting'] = actual_sorting
 
-        pager_count = request.env['slide.slide'].sudo().search_count(domain)
-        pager = request.website.pager(url=pager_url, total=pager_count, page=page,
-                                      step=self.SLIDES_PER_PAGE, scope=self.SLIDES_PER_PAGE,
-                                      url_args=pager_args)
+        slide_count = request.env['slide.slide'].sudo().search_count(domain)
+        page_count = math.ceil(slide_count / self.SLIDES_PER_PAGE)
+        pager = request.website.pager(url=pager_url, total=slide_count, page=page,
+                                      step=self.SLIDES_PER_PAGE, url_args=pager_args,
+                                      scope=page_count if page_count < self.PAGER_MAX_PAGE else self.PAGER_MAX_PAGE)
 
         values = {
             'channel': channel,
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index f3bb816b327..4e5795b81f3 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -422,6 +422,11 @@
     <div class="row">
         <div class="col" t-field="channel.description_html"/>
     </div>
+    <t t-if="search_category">
+        <div class="form-inline justify-content-center">
+            <t t-call="website_profile.pager_nobox"></t>
+        </div>
+    </t>
 </template>
 
 <template id='lesson_card' name="Lesson Card">