[IMP] website_slides: allow to toggle free preview from frontend

Purpose of this commit is to ease slides / lessons management in eLearning
frontend.

The publisher will now be able to see if a slide is in preview mode from
the slide list in frontend of eLearning.

He'll be able to activate/deactivate the free preview mode with a button.

Task 1999705.

closes odoo/odoo#34182

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

6 files changed, 68 insertions, 1 deletions

diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py
index 3b1cf6ac981..0494ae698c3 100644
--- a/addons/website_slides/controllers/main.py
+++ b/addons/website_slides/controllers/main.py
@@ -658,6 +658,13 @@ class WebsiteSlides(WebsiteProfile):
 
         return False
 
+    @http.route('/slides/slide/toggle_is_preview', type='json', auth='user', website=True)
+    def slide_preview(self, slide_id):
+        slide = request.env['slide.slide'].browse(int(slide_id))
+        if slide.channel_id.can_publish:
+            slide.is_preview = not slide.is_preview
+        return slide.is_preview
+
     @http.route(['/slides/slide/send_share_email'], type='json', auth='user', website=True)
     def slide_send_share_email(self, slide_id, email):
         slide = request.env['slide.slide'].browse(int(slide_id))
diff --git a/addons/website_slides/static/src/js/slides_slide_toggle_is_preview.js b/addons/website_slides/static/src/js/slides_slide_toggle_is_preview.js
new file mode 100644
index 00000000000..604170b646a
--- /dev/null
+++ b/addons/website_slides/static/src/js/slides_slide_toggle_is_preview.js
@@ -0,0 +1,40 @@
+odoo.define('website_slides.slide.preview', function (require) {
+    'use strict';
+
+    var publicWidget = require('web.public.widget');
+
+    publicWidget.registry.websiteSlidesSlideToggleIsPreview = publicWidget.Widget.extend({
+        selector: '.o_wslides_js_slide_toggle_is_preview',
+        xmlDependencies: ['/website_slides/static/src/xml/slide_management.xml'],
+        events: {
+            'click': '_onPreviewSlideClick',
+        },
+
+        _toggleSlidePreview: function($slideTarget) {
+            this._rpc({
+                route: '/slides/slide/toggle_is_preview',
+                params: {
+                    slide_id: $slideTarget.data('slideId')
+                },
+            }).then(function (isPreview) {
+                if (isPreview) {
+                    $slideTarget.removeClass('badge-light badge-hide border');
+                    $slideTarget.addClass('badge-success');
+                } else {
+                    $slideTarget.removeClass('badge-success');
+                    $slideTarget.addClass('badge-light badge-hide border');
+                }
+            });
+        },
+
+        _onPreviewSlideClick: function (ev) {
+            ev.preventDefault();
+            this._toggleSlidePreview($(ev.currentTarget));
+        },
+    });
+
+    return {
+        websiteSlidesSlideToggleIsPreview: publicWidget.registry.websiteSlidesSlideToggleIsPreview
+    };
+
+});
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 0f64a46ea8e..4a3a1278b83 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -272,6 +272,21 @@ $o-wslides-fs-side-width: 300px;
             border: 1px solid $border-color;
         }
 
+        .o_wslides_slides_list_slide {
+
+            a {
+                text-decoration: none;
+            }
+
+            .badge-hide {
+                display: none;
+            }
+
+            &:hover .badge-hide {
+                display: block;
+            }
+        }
+
         .o_wslides_slides_list_slide_hilight {
             background-color: #1252F3;
             height: 1px;
diff --git a/addons/website_slides/static/src/xml/slide_management.xml b/addons/website_slides/static/src/xml/slide_management.xml
index b402c1e3fd3..53397b20e12 100644
--- a/addons/website_slides/static/src/xml/slide_management.xml
+++ b/addons/website_slides/static/src/xml/slide_management.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
+
     <t t-name="slides.slide.archive">
         <div>
             <p>Are you sure you want to archive this slide ?</p>
diff --git a/addons/website_slides/views/assets.xml b/addons/website_slides/views/assets.xml
index b4aa5dff9d2..3e596427b51 100644
--- a/addons/website_slides/views/assets.xml
+++ b/addons/website_slides/views/assets.xml
@@ -14,6 +14,7 @@
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_upload.js"/>
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_category_add.js"/>
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_slide_archive.js"/>
+                <script type="text/javascript" src="/website_slides/static/src/js/slides_slide_toggle_is_preview.js"/>
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_slide_like.js"/>
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_course_slides_list.js"/>
                 <script type="text/javascript" src="/website_slides/static/src/js/slides_course_fullscreen_player.js"/>
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 0ea39c59f84..6fbdde87bc5 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -409,7 +409,10 @@
                 <t t-esc="channel_progress[slide.id].get('quiz_karma_won', 0) if channel_progress[slide.id].get('completed') else channel_progress[slide.id].get('quiz_karma_gain', 0)"/> xp
             </span>
             <span class="badge badge-danger font-weight-normal px-2 py-1 m-1" t-if="not slide.website_published">Unpublished</span>
-            <span class="badge badge-success font-weight-normal px-2 py-1 m-1" t-if="slide.is_preview and not channel.is_member">Free preview</span>
+            <a t-if="channel.can_upload" href="#">
+                <span t-att-data-slide-id="slide.id" t-attf-class="o_wslides_js_slide_toggle_is_preview badge #{'badge-success' if slide.is_preview else 'badge-light badge-hide border'} font-weight-normal px-2 py-1 m-1">Free preview</span>
+            </a>
+            <span t-elif="slide.is_preview and not channel.is_member" class="badge badge-success font-weight-normal px-2 py-1 m-1">Free preview</span>
         </div>
 
         <div t-if="channel.is_member or channel.can_publish" class="pt-2 pb-2 border-left ml-2 mr-2 pl-2 d-flex align-items-center o_wslides_slides_list_slide_controls">