[FIX] website_slides: fix display of lessons in training course

Currently slides are displayed in a reorderable list, using current user
access rights. This means external customers see only published and free
lessons.

However purpose of course page is to display all lessons, and display
only available ones as clickable. Other one should be displayed as muted
to tease people.

Note that a specific lesson page does check for access rights. Here we
just display all lessons names. A label for free preview is also added.

Fetch of data when displaying a channel is therefore a bit modified as
there are less differences between training and documentation channels.
User progress is also updated to be easier to use in templates.

Commit linked to task ID 1941250 and PR #31453

2 files changed, 21 insertions, 37 deletions

diff --git a/addons/website_slides/static/src/js/slides_course_slides_list.js b/addons/website_slides/static/src/js/slides_course_slides_list.js
index 756026b5a0c..93376a08d31 100644
--- a/addons/website_slides/static/src/js/slides_course_slides_list.js
+++ b/addons/website_slides/static/src/js/slides_course_slides_list.js
@@ -28,17 +28,17 @@ sAnimations.registry.websiteSlidesCourseSlidesList = sAnimations.Class.extend({
      * @private
      */
     _bindSortable: function () {
-        this.$('ul.o_wslides_slides_list_container').sortable({
+        this.$('ul.o_wslides_js_slides_list_container').sortable({
             handle: '.fa-arrows',
             stop: this._reorderCategories.bind(this),
             items: '.o_wslides_slide_list_category'
         });
 
-        this.$('.o_wslides_slides_list_container ul').sortable({
+        this.$('.o_wslides_js_slides_list_container ul').sortable({
             handle: '.fa-arrows',
-            connectWith: '.o_wslides_slides_list_container ul',
+            connectWith: '.o_wslides_js_slides_list_container ul',
             stop: this._reorderSlides.bind(this),
-            items: '.o_wslides_slides_list_slide:not(.o_wslides_empty_category)'
+            items: '.o_wslides_slides_list_slide:not(.o_wslides_js_slides_list_empty)'
         });
     },
 
@@ -50,8 +50,8 @@ sAnimations.registry.websiteSlidesCourseSlidesList = sAnimations.Class.extend({
      * @private
      */
     _checkForEmptySections: function (){
-        this.$('.o_wslides_slides_list_container ul').each(function (){
-            var $emptyCategory = $(this).find('.o_wslides_empty_category');
+        this.$('.o_wslides_js_slides_list_container ul').each(function (){
+            var $emptyCategory = $(this).find('.o_wslides_js_slides_list_empty');
             if ($(this).find('li.o_wslides_slides_list_slide[data-slide-id]').length === 0) {
                 $emptyCategory.removeClass('d-none').addClass('d-flex');
             } else {
@@ -130,7 +130,7 @@ sAnimations.registry.websiteSlidesCourseSlidesList = sAnimations.Class.extend({
      * @private
      */
     _updateHref: function () {
-        this.$(".o_wslides_slides_list_slide_link").each(function (){
+        this.$(".o_wslides_js_slides_list_slide_link").each(function (){
             var href = $(this).attr('href');
             var operator = href.indexOf('?') !== -1 ? '&' : '?';
             $(this).attr('href', href + operator + "fullscreen=1");
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index f1fdfd9b2c5..c8d35376e17 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -2,7 +2,7 @@
 $nav-tabs-border-color: #dddddd !default;
 $body-bg: #FFFFFF !default;
 $MAX-Z-INDEX : 2147483647 !default;
-
+$gray-50: #f4f4f4 !default;
 
 // Common to new slides pages
 // **************************************************
@@ -204,49 +204,33 @@ $MAX-Z-INDEX : 2147483647 !default;
 }
 
 .o_wslides_course_main {
-        .o_wslides_course_content_aside {
-            max-width: 286px;
-            .bg-white {
-                max-width: 256px;
-                background-color: white;
-                padding-bottom: 8px;
-                 > div.row {
-                    padding-left: 15px;
-                    padding-right: 15px;
-                 }
-            }
+    .o_wslides_course_content_aside {
+        max-width: 286px;
+        .bg-white {
+            max-width: 256px;
+            background-color: white;
+            padding-bottom: 8px;
+             > div.row {
+                padding-left: 15px;
+                padding-right: 15px;
+             }
         }
+    }
 }
 
 // Slides list reordering widget
 .o_wslides_slides_list {
-    padding: 0;
-
-    ul {
-        list-style: none;
-        padding: 0;
-    }
-
-    .o_wslides_slide_list_category_container {
-        margin: 0;
-        background-color: #ddd;
-        display: flex;
-        list-style: none;
-        font-size: 1.05rem;
-        border-bottom: 1px solid #ccc;
-    }
-
     .o_wslides_slides_list_slide {
         &.o_not_editable {
             height: 0px;
         }
 
         &:nth-child(odd) {
-            background-color: #f6f6f6;
+            background-color: $gray-50;
         }
 
         &:nth-child(even) {
-            background-color: #f9f9f9;
+            background-color: $gray-100;
         }
 
         .o_wslides_slides_list_slide_controls {