[IMP] website_profile: merge ranks/badges pages

Merge ranks & badges pages. This commit adapt the final page
layout, controllers and templates.

Added the badge category filter. If used in url parameter, hide ranks and show
only the badge part of the page, filtered on matching badge_category.

Task ID : 1941250
PR #31567

Co-authored-by: @stefanorigano
Co-authored-by: @dbeguin

1 files changed, 49 insertions, 58 deletions

diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index b115d553e8a..c92f12e1e19 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -179,7 +179,7 @@
                             <div t-if="user.rank_id" class="d-flex align-items-center">
                                 <small class="font-weight-bold mr-2">Rank:</small>
                                 <img t-attf-src="/web/image/gamification.karma.rank/#{user.rank_id.id}/image_small" height="16" alt="" class="mr-1"/>
-                                <a href="/profile/ranks" t-field="user.rank_id"/>
+                                <a href="/profile/ranks_badges" t-field="user.rank_id"/>
                             </div>
                             <button class="btn btn-sm d-md-none bg-white border" type="button" data-toggle="collapse" data-target="#o_wprofile_sidebar_collapse" aria-expanded="false" aria-controls="o_wprofile_sidebar_collapse">More info</button>
                         </div>
@@ -288,18 +288,18 @@
             <p class="text-muted">No badge yet</p>
         </div>
         <div class="text-right">
-            <a t-if="not user.badge_ids and badge_category" t-attf-href="/profile/badge?category=#{badge_category}"><i class="fa fa-arrow-right"/> Check available badges</a>
-            <a t-else="" href="/profile/badge" class="btn btn-link btn-sm"><i class="fa fa-arrow-right mr-1"/>Check all available badges</a>
+            <a t-if="not user.badge_ids and badge_category" t-attf-href="/profile/ranks_badges?badge_category=#{badge_category}"><i class="fa fa-arrow-right"/> Check available badges</a>
+            <a t-else="" href="/profile/ranks_badges" class="btn btn-link btn-sm"><i class="fa fa-arrow-right mr-1"/>Check all available badges</a>
         </div>
     </template>
 
-    <!-- About Rank Page -->
-    <template id="rank_main" name="Ranks Page">
+    <!-- About Ranks and badges Page -->
+    <template id="rank_badge_main" name="Ranks Page">
         <t t-call="website.layout">
             <div class="container mb32 mt48">
-                <div class="row justify-content-between">
-                    <div class="col-12 col-md-6">
-                        <h1>Ranks &amp; Badges</h1>
+                <div class="row justify-content-between" t-if="ranks">
+                    <div class="col-12 col-md-6 col-lg-5">
+                        <h1>Ranks</h1>
                         <p class="lead mb-4">Keep learning with <t t-esc="user.company_id.name"/>. Collect points on the forum or on the eLearning platform. Those points will make you reach new ranks.</p>
                         <h5>How do I earn badges?</h5>
                         <p>When you finish a course or reach milestones, you're awarded badges.</p>
@@ -307,64 +307,55 @@
                         <p>You can score more points by answering quizzes at the end of each course content. Points can also be earned on the forum. Follow this link to the guidelines of the forum.</p>
                     </div>
                     <div class="col-12 col-md-5 col-lg-4">
-                        <t t-call="website_profile.rank_content"/>
-                    </div>
-                </div>
-            </div>
-        </t>
-    </template>
-
-    <template id="rank_content" name="Rank Page content">
-        <h5 class="text-muted my-2">Ranks</h5>
-        <div class="row flex-column">
-            <t t-foreach="ranks" t-as="rank">
-                <t t-set="order_inverse" t-value="6 - rank.id"/>
-
-                <div t-attf-class="col order-#{order_inverse}">
-                    <div class="media align-items-center py-2 border-top">
-                        <img height="50" t-attf-src="/web/image/gamification.karma.rank/#{rank.id}/image" class="mr-2" alt="Rank badge"/>
-                        <div class="media-body">
-                            <h5 class="mt-0 mb-0" t-field="rank.name"/>
-                            <span class="badge badge-success"><span t-field="rank.karma_min"/></span> point<span t-if="rank.karma_min">s</span>
+                        <div class="card">
+                            <div class="card-header border-bottom-0">Ranks</div>
+                            <ul class="list-group list-group-flush">
+                                <t t-foreach="ranks" t-as="rank">
+                                    <li t-attf-class="list-group-item">
+                                        <div class="media align-items-center">
+                                            <img height="40" t-attf-src="/web/image/gamification.karma.rank/#{rank.id}/image" class="mr-2" alt="Rank badge"/>
+                                            <div class="media-body">
+                                                <h5 class="mt-0 mb-0" t-field="rank.name"/>
+                                                <span class="badge badge-success"><span t-field="rank.karma_min"/></span> point<span t-if="rank.karma_min">s</span>
+                                            </div>
+                                        </div>
+                                    </li>
+                                </t>
+                            </ul>
                         </div>
                     </div>
                 </div>
-            </t>
-        </div>
-    </template>
-
-    <!-- About Badge Page -->
-    <template id="badge_main" name="Badges Page">
-        <t t-call="website.layout">
-            <div class="container mb32 mt48">
-                <t t-call="website_profile.badge_content">
-                </t>
+                <t t-call="website_profile.badge_content"/>
             </div>
         </t>
     </template>
 
     <template id="badge_content" name="Badges Page content">
-            <h1>Badges</h1>
-            <p class="lead">
-                Besides gaining reputation with your questions and answers,
-                you receive badges for being especially helpful.<br/>Badges
-                appear on your profile page, and your posts.
-            </p>
-            <table class="table table-sm mt32 mb64">
-                <tr t-foreach="badges" t-as="badge">
-                    <td class="align-middle">
-                        <img t-attf-src="/website_profile/static/src/img/badge_#{badge.level}.svg" class="my-1" style="height:2.5em" alt=""/>
-                        <h6 t-field="badge.name" class="d-inline my-0"/>
-                    </td>
-                    <td class="align-middle d-none d-md-table-cell">
-                        <b t-esc="badge.stat_count_distinct"/>
-                        <i class="text-muted"> awarded users</i>
-                    </td>
-                    <td class="align-middle">
-                        <span t-field="badge.description"/>
-                    </td>
-                </tr>
-            </table>
+        <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>
+        <table class="table table-sm mb64">
+            <tr t-foreach="badges" t-as="badge">
+                <td class="align-middle">
+                    <img t-attf-src="/website_profile/static/src/img/badge_#{badge.level}.svg" class="my-1" style="height:2.5em" t-att-alt="badge.level"/>
+                    <h6 t-field="badge.name" class="d-inline my-0"/>
+                </td>
+                <td class="align-middle d-none d-md-table-cell">
+                    <b t-esc="badge.stat_count_distinct"/>
+                    <i class="text-muted"> awarded users</i>
+                </td>
+                <td class="align-middle">
+                    <span t-field="badge.description"/>
+                </td>
+            </tr>
+        </table>
     </template>
 
     <!--Private profile-->