[IMP] website_slides: add progressbar and completed tag

- Teacher can now see the progress of his students on the attendees' list.

- The completion of a course was recomputed even if the course is completed
  now it's fixed to 100 when completed.

- Added a progressbar in course page in front-end to allow the user to see
  it's progression. When completed, the tag completed is displayed instead of
  the progressbar.

- On slide page in front-end(normal view or fullscreen) when a course is
  completed, display the tag completed instead of the progressbar.

- Removed completed state on course "Taking care of Trees" for portal user
  because it was not the case.

task-2049689

closes odoo/odoo#36608

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

6 files changed, 45 insertions, 23 deletions

diff --git a/addons/website_slides/data/slide_user_demo.xml b/addons/website_slides/data/slide_user_demo.xml
index 263d3ea443b..a9fed3c39a1 100644
--- a/addons/website_slides/data/slide_user_demo.xml
+++ b/addons/website_slides/data/slide_user_demo.xml
@@ -143,7 +143,6 @@
     <record id="slide_channel_1_partner_demo_portal" model="slide.channel.partner">
         <field name="channel_id" ref="website_slides.slide_channel_demo_1_gard1"/>
         <field name="partner_id" ref="base.partner_demo_portal"/>
-        <field name="completed" eval="True"/>
     </record>
     <record id="slide_slide_1_0_partner_demo" model="slide.slide.partner">
         <field name="slide_id" ref="website_slides.slide_slide_demo_1_0"/>
diff --git a/addons/website_slides/models/slide_channel.py b/addons/website_slides/models/slide_channel.py
index 9c225632a40..070524db415 100644
--- a/addons/website_slides/models/slide_channel.py
+++ b/addons/website_slides/models/slide_channel.py
@@ -38,7 +38,7 @@ class ChannelUsersRelation(models.Model):
         partner_karma = dict.fromkeys(self.mapped('partner_id').ids, 0)
         for record in self:
             record.completed_slides_count = mapped_data.get(record.channel_id.id, dict()).get(record.partner_id.id, 0)
-            record.completion = round(100.0 * record.completed_slides_count / (record.channel_id.total_slides or 1))
+            record.completion = 100.0 if record.completed else round(100.0 * record.completed_slides_count / (record.channel_id.total_slides or 1))
             if not record.completed and record.completed_slides_count >= record.channel_id.total_slides:
                 record.completed = True
                 partner_karma[record.partner_id.id] += record.channel_id.karma_gen_channel_finish
@@ -265,7 +265,7 @@ class Channel(models.Model):
         for record in self:
             completed, completed_slides_count = mapped_data.get(record.id, (False, 0))
             record.completed = completed
-            record.completion = round(100.0 * completed_slides_count / (record.total_slides or 1))
+            record.completion = 100.0 if completed else round(100.0 * completed_slides_count / (record.total_slides or 1))
 
     @api.depends('upload_group_ids', 'user_id')
     @api.depends_context('uid')
diff --git a/addons/website_slides/views/slide_channel_partner_views.xml b/addons/website_slides/views/slide_channel_partner_views.xml
index 05720fcfb03..fb4133e5b85 100644
--- a/addons/website_slides/views/slide_channel_partner_views.xml
+++ b/addons/website_slides/views/slide_channel_partner_views.xml
@@ -29,7 +29,8 @@
                     <field name="partner_id" string="Contact"/>
                     <field name="partner_email"/>
                     <field name="channel_id" string="Channel" invisible="context.get('default_channel_id',False)" />
-                    <button name="unlink" class="text-danger" string="Remove" 
+                    <field name="completion" string="Progress" widget="progressbar" />
+                    <button name="unlink" class="text-danger ml-5" string="Remove"
                             icon="fa-times-circle" type="object"/>
                 </tree>
             </field>
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 72fdae25d42..bc40fd88779 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -282,18 +282,32 @@
                     <div t-if="channel.enroll_msg" t-field="channel.enroll_msg"/>
                     <small t-if="not channel.enroll_msg">Contact website administrator.</small>
                 </div>
-                <button t-if="channel.is_member"
-                        class="d-flex align-items-center alert my-0 px-2 px-xl-3 bg-100 w-100 o_wslides_js_channel_unsubscribe"
-                        t-att-data-channel-id="channel.id"
-                        t-att-data-is-follower="channel.message_is_follower"
-                        t-att-data-enroll="channel.enroll">
-                    <t t-call="website_slides.slides_misc_user_image">
-                        <t t-set="img_class" t-value="'rounded-circle mr-1'"/>
-                        <t t-set="img_style" t-value="'width: 1.4em; height: 1.4em; object-fit: cover;'"/>
-                    </t>
-                    <h6 class="d-flex flex-grow-1 my-0">You're enrolled</h6>
-                    <i class="fa fa-check"/>
-                </button>
+                <t t-if="channel.is_member">
+                    <button class="d-flex align-items-center alert my-0 px-2 px-xl-3 bg-100 w-100 o_wslides_js_channel_unsubscribe"
+                            t-att-data-channel-id="channel.id"
+                            t-att-data-is-follower="channel.message_is_follower"
+                            t-att-data-enroll="channel.enroll">
+                        <t t-call="website_slides.slides_misc_user_image">
+                            <t t-set="img_class" t-value="'rounded-circle mr-1'"/>
+                            <t t-set="img_style" t-value="'width: 1.4em; height: 1.4em; object-fit: cover;'"/>
+                        </t>
+                        <h6 class="d-flex flex-grow-1 my-0">You're enrolled</h6>
+                        <i class="fa fa-check"/>
+                    </button>
+                    <div class="d-flex align-items-center pt-3">
+                        <t t-if="channel.completed">
+                            <span class="badge badge-pill badge-success py-1 px-2 mx-auto" style="font-size: 1em"><i class="fa fa-check"/> Completed</span>
+                        </t>
+                        <t t-else="">
+                            <div class="progress flex-grow-1 bg-black-50" style="height: 6px;">
+                                <div class="progress-bar" role="progressbar" t-attf-style="width: #{channel.completion}%" t-att-aria-valuenow="channel.completion" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+                            <div class="ml-3 small">
+                                <span class="o_wslides_progress_percentage" t-esc="channel.completion"/> %
+                            </div>
+                        </t>
+                    </div>
+                </t>
             </div>
             <button class="btn btn-sm d-md-none bg-white ml-1 border" type="button" data-toggle="collapse" data-target="#o_wslides_sidebar_collapse" aria-expanded="false" aria-controls="o_wslides_sidebar_collapse">More info</button>
         </div>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index bfe35524f19..47ebb5c8cfc 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -15,6 +15,9 @@
                         <div t-attf-class="col-12 col-lg-9 d-flex flex-column #{'offset-lg-3' if slide.channel_id.channel_type == 'training' else ''}">
                             <h2 class="font-weight-medium w-100">
                                 <a t-att-href="'/slides/%s' % (slug(slide.channel_id))" class="text-white text-decoration-none" t-field="slide.channel_id.name"/>
+                                <t t-if="slide.channel_id.completed">
+                                    <small><span class="badge badge-pill badge-success pull-right my-1 py-1 px-2 font-weight-normal"><i class="fa fa-check"/> Completed</span></small>
+                                </t>
                             </h2>
 
                             <div t-if="slide.channel_id.channel_type == 'documentation'" class="mb-3 small">
@@ -22,7 +25,7 @@
                                 <t t-esc="slide.date_published" t-options="{'widget': 'date'}"/>
                             </div>
 
-                            <div t-else="" class="d-flex align-items-center pb-3">
+                            <div t-else="" t-if="not slide.channel_id.completed" class="d-flex align-items-center pb-3">
                                 <div class="progress w-50 bg-black-25" style="height: 10px;">
                                     <div class="progress-bar rounded-left" role="progressbar"
                                         t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"
diff --git a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
index 1601fe14f9e..17a835c1c58 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -44,12 +44,17 @@
                                 <span t-field="slide.channel_id.name"/>
                             </a>
                             <div t-if="not is_public_user" class="d-flex align-items-center">
-                                <div class="progress flex-grow-1 bg-black-50" style="height: 6px;">
-                                    <div class="progress-bar" role="progressbar" t-attf-style="width: #{slide.channel_id.completion}%" t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"></div>
-                                </div>
-                                <div class="ml-3 small">
-                                    <span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/> %
-                                </div>
+                                <t t-if="slide.channel_id.completed">
+                                    <span class="badge badge-pill badge-success py-1 px-2" style="font-size: 1em"><i class="fa fa-check"/> Completed</span>
+                                </t>
+                                <t t-else="">
+                                    <div class="progress flex-grow-1 bg-black-50" style="height: 6px;">
+                                        <div class="progress-bar" role="progressbar" t-attf-style="width: #{slide.channel_id.completion}%" t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <div class="ml-3 small">
+                                        <span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/> %
+                                    </div>
+                                </t>
                             </div>
                         </div>
                         <ul class="mx-n3 list-unstyled my-0 pb-2 overflow-auto">