[IMP] website_slides_survey: add certification badges section to ranks badge page

This commit adds a section to distinguish the certification badges from the
other badges users may obtain in eLearning. Certification badges are available
on the ranks page, linked to a running survey. Clicking on them directly
redirects into the linked course.

Task ID : 1961053
PR #32594

3 files changed, 42 insertions, 27 deletions

diff --git a/addons/website_profile/controllers/main.py b/addons/website_profile/controllers/main.py
index cfe1f5a96a4..3d14024d1a0 100644
--- a/addons/website_profile/controllers/main.py
+++ b/addons/website_profile/controllers/main.py
@@ -171,8 +171,7 @@ class WebsiteProfile(http.Controller):
             domain = expression.AND([[('challenge_ids.challenge_category', '=', kwargs.get('badge_category'))], domain])
         return domain
 
-    @http.route('/profile/ranks_badges', type='http', auth="public", website=True, sitemap=True)
-    def view_ranks_badges(self, **kwargs):
+    def _prepare_ranks_badges_values(self, **kwargs):
         ranks = []
         if 'badge_category' not in kwargs:
             Rank = request.env['gamification.karma.rank']
@@ -180,7 +179,7 @@ class WebsiteProfile(http.Controller):
 
         Badge = request.env['gamification.badge']
         badges = Badge.sudo().search(self._prepare_badges_domain(**kwargs))
-        badges = sorted(badges, key=lambda b: b.granted_users_count, reverse=True)
+        badges = badges.sorted("granted_users_count", reverse=True)
         values = self._prepare_user_values(searches={'badges': True})
 
         values.update({
@@ -188,6 +187,11 @@ class WebsiteProfile(http.Controller):
             'badges': badges,
             'user': request.env.user,
         })
+        return values
+
+    @http.route('/profile/ranks_badges', type='http', auth="public", website=True, sitemap=True)
+    def view_ranks_badges(self, **kwargs):
+        values = self._prepare_ranks_badges_values(**kwargs)
         return request.render("website_profile.rank_badge_main", values)
 
     # All Users Page
diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index 07ac29b67fa..60a47bc7bc8 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -228,6 +228,10 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
     }
 }
 
+.wprofile_badge_img {
+    height: 2.5em;
+}
+
 
 // Other stuffs
 .country_flag {
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 1b3c85ea599..50694cbcbfe 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -423,33 +423,40 @@
     </template>
 
     <template id="badge_content" name="Badges Page content">
-        <div class="row">
-            <div class="col-12">
-                <h1 class="mt-4 mt-lg-2">Badges</h1>
-                <p class="lead">
-                    Besides gaining reputation with your questions and answers,
-                    you receive badges for being especially helpful.<br class="d-none d-lg-inline-block"/>Badges
-                    appear on your profile page, and your posts.
-                </p>
+        <div id="website_profile_badges">
+            <div class="row">
+                <div class="col-12">
+                    <h1 class="mt-4 mt-lg-2">Badges</h1>
+                    <p class="lead">
+                        Besides gaining reputation with your questions and answers,
+                        you receive badges for being especially helpful.<br class="d-none d-lg-inline-block"/>Badges
+                        appear on your profile page, and your posts.
+                    </p>
+                </div>
             </div>
-        </div>
-        <table class="table table-sm mb64">
-            <tr t-foreach="badges" t-as="badge">
-                <td class="align-middle">
-                    <img t-if="not badge.image_1920 and badge.level" t-attf-src="/website_profile/static/src/img/badge_#{badge.level}.svg"
-                         class="my-1" style="height:2.5em" t-att-alt="badge.name"/>
-                    <img t-else="" t-att-src="website.image_url(badge, 'image_1024')" class="my-1" style="height:2.5em" t-att-alt="badge.name"/>
-                    <h6 t-field="badge.name" class="d-inline my-0"/>
-                </td>
-                <td class="align-middle d-none d-md-table-cell">
+            <div class="row col-12 align-items-center p-0" t-foreach="badges" t-as="badge">
+                <div class="col-3 d-flex align-items-center">
+                    <t t-call="website_profile.badge_header"/>
+                </div>
+                <div class="col-6">
+                    <span t-field="badge.description"/>
+                </div>
+                <div class="col-3 text-right">
                     <b t-esc="badge.granted_users_count"/>
                     <i class="text-muted"> awarded users</i>
-                </td>
-                <td class="align-middle">
-                    <span t-field="badge.description"/>
-                </td>
-            </tr>
-        </table>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <template id="badge_header">
+        <img t-if="not badge.image_1920 and badge.level" t-attf-src="/website_profile/static/src/img/badge_#{badge.level}.svg"
+                class="my-1 mr-1 wprofile_badge_img" t-att-alt="badge.name"/>
+        <img t-else="" t-att-src="website.image_url(badge, 'image_1024')" class="my-1 mr-1 wprofile_badge_img" t-att-alt="badge.name"/>
+        <a t-if="badge_url" t-att-href="badge_url">
+            <h6 t-field="badge.name" class="d-inline my-0"/>
+        </a>
+        <h6 t-else="" t-field="badge.name" class="d-inline my-0"/>
     </template>
 
     <!--Private profile-->