Add new fields and sections to the Program detail page

CHANGELOG.md

@@ -13,6 +13,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 - Add Additional Information section for a category and
     use them in a course page
 - Added new page extension `MainMenuEntry`
+- Update Programs page with new fields
 
 ### Fixed
 

src/frontend/scss/colors/_theme.scss

@@ -483,6 +483,8 @@ $r-theme: (
   ),
   program-detail: (
     cover-empty-background: r-color('smoke'),
+    checkmark-list-decoration: url('../../richie/images/components/checkmark.svg'),
+    checkmark-list-decoration-color: r-color('indianred3'),
   ),
   registered-credit-card: (
     title-color: r-color('charcoal'),

src/frontend/scss/components/templates/courses/cms/_program_detail.scss

@@ -2,6 +2,7 @@
 //
 
 .program-detail {
+  $detail-selector: &;
   margin: 0 auto;
   padding: 0;
 
@@ -54,6 +55,79 @@
     padding-right: $grid-gutter-width;
   }
 
+  &__objectives {
+    @if r-theme-val(program-detail, checkmark-list-decoration) {
+      ul {
+        padding-left: 0.3rem;
+        list-style-type: none;
+
+        li {
+          position: relative;
+          margin-top: 0.5rem;
+          font-size: 1rem;
+          padding-left: 1.5rem;
+
+          &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0.2rem;
+            left: 0;
+            width: 0.8rem;
+            height: 0.8rem;
+            background-repeat: no-repeat;
+            background-color: r-theme-val(program-detail, checkmark-list-decoration-color);
+            -webkit-mask: r-theme-val(program-detail, checkmark-list-decoration);
+            mask: r-theme-val(program-detail, checkmark-list-decoration);
+            -webkit-mask-size: cover;
+            mask-size: cover;
+          }
+        }
+      }
+    }
+  }
+
+  @if $r-program-aside {
+    &__content {
+      @include media-breakpoint-up(lg) {
+        //@include sv-flex(1, 0, #{100% - $r-program-aside});
+        padding-right: 3rem;
+      }
+    }
+
+    &__aside {
+      padding: 1rem 0;
+
+      @include media-breakpoint-up(lg) {
+        @include sv-flex(1, 0, $r-program-aside);
+        padding: 3rem 1rem;
+      }
+
+      #{$detail-selector}__row {
+        margin-bottom: 1.5rem;
+      }
+
+      #{$detail-selector}__title {
+        @include font-size($h3-font-size);
+        padding-bottom: 1rem;
+        @if r-theme-val(course-detail, aside-title-border) {
+          border-bottom: $onepixel solid r-theme-val(course-detail, aside-title-border);
+        }
+      }
+    }
+
+    &__main {
+      @include media-breakpoint-up(lg) {
+        @include sv-flex(1, 0, calc(100% - #{$r-program-subheader-aside}));
+        display: flex;
+        justify-content: flex-start;
+        align-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+      }
+    }
+  }
+
   &__courses {
     @include make-col-ready();
     @include make-col(12);

src/frontend/scss/settings/_variables.scss

@@ -152,11 +152,13 @@ $r-footer-logo-width-lg: 11.875rem !default;
 // full width like common blocks. Usefull if you plan to remove course run from
 // template
 $r-course-aside: 35% !default;
+$r-program-aside: 25% !default;
 
 // Subheader aside column width in course detail. Unlike, $r-course-aside this
 // variable cannot be null. Otherwise to homegenize layout, it should have the
 // same value than $r-course-aside.
 $r-course-subheader-aside: 35% !default;
+$r-program-subheader-aside: 25% !default;
 
 // Course search page shared variables
 $r-search-filters-gutter: 0.2rem !default;

src/richie/apps/core/templates/richie/icons.html

@@ -192,6 +192,14 @@
     <symbol id="icon-archive" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <path d="M19.2 3H4.8C3.9 3 3 3.81 3 4.8v2.709c0 .648.387 1.206.9 1.521V19.2c0 .99.99 1.8 1.8 1.8h12.6c.81 0 1.8-.81 1.8-1.8V9.03c.513-.315.9-.873.9-1.521V4.8c0-.99-.9-1.8-1.8-1.8Zm-5.4 10.8h-3.6a.903.903 0 0 1-.9-.9c0-.495.405-.9.9-.9h3.6c.495 0 .9.405.9.9s-.405.9-.9.9Zm5.4-6.3H4.8V4.8h14.4v2.7Z" fill="currentColor" fill-rule="nonzero"/>
     </symbol>
+
+    <symbol id="icon-money" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
+    </symbol>
+
+    <symbol id="icon-courses" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+    </symbol>
 
   </defs>
 </svg>

src/richie/apps/courses/admin.py

@@ -351,6 +351,24 @@ def title(self, obj):
         return obj.extended_object.get_title()
 
 
+class ProgramAdmin(PageExtensionAdmin):
+    """Admin class for the Program model"""
+
+    list_display = ["title"]
+    frontend_editable_fields = (
+        "duration",
+        "effort",
+        "price",
+    )
+
+    # pylint: disable=no-self-use
+    def title(self, obj):
+        """
+        Display the course title as a read-only field from the related page
+        """
+        return obj.extended_object.get_title()
+
+
 class LicenceAdmin(TranslatableAdmin):
     """
     Admin class for the Licence model
@@ -368,3 +386,4 @@ class LicenceAdmin(TranslatableAdmin):
 admin.site.register(models.Organization, OrganizationAdmin)
 admin.site.register(models.PageRole, PageRoleAdmin)
 admin.site.register(models.Person, PersonAdmin)
+admin.site.register(models.Program, ProgramAdmin)

src/richie/apps/courses/cms_toolbars.py

@@ -13,7 +13,7 @@
 from cms.utils.urlutils import admin_reverse
 
 from .defaults import PAGE_EXTENSION_TOOLBAR_ITEM_POSITION
-from .models import Category, Course, MainMenuEntry, Organization, Person
+from .models import Category, Course, MainMenuEntry, Organization, Person, Program
 
 
 class BaseExtensionToolbar(ExtensionToolbar):
@@ -181,3 +181,12 @@ def populate(self):
                     disabled=not self.toolbar.edit_mode_active,
                     position=PAGE_EXTENSION_TOOLBAR_ITEM_POSITION,
                 )
+
+
+@toolbar_pool.register
+class ProgramExtensionToolbar(BaseExtensionToolbar):
+    """
+    This extension class customizes the toolbar for the program page extension
+    """
+
+    model = Program

src/richie/apps/courses/factories.py

@@ -26,6 +26,8 @@
 from . import defaults, models
 from .defaults import ROLE_CHOICES
 
+# pylint: disable=too-many-lines
+
 VideoSample = namedtuple("VideoSample", ["label", "image", "url"])
 
 VIDEO_SAMPLE_LINKS = (
@@ -838,6 +840,87 @@ class Meta:
     # fields concerning the related page
     page_template = models.Program.PAGE["template"]
 
+    # pylint: disable=no-self-use
+    @factory.lazy_attribute
+    def duration(self):
+        """Generate a random duration for the course between 1 day and 10 months."""
+        return [
+            random.randint(1, 10),  # nosec
+            random.choice(list(defaults.TIME_UNITS.keys())[2:]),  # nosec
+        ]
+
+    # pylint: disable=no-self-use
+    @factory.lazy_attribute
+    def effort(self):
+        """Generate a random effort for the course between 1 minute and 500 hours."""
+        return [
+            random.randint(1, 500),  # nosec
+            random.choice(list(defaults.EFFORT_UNITS.keys())),  # nosec
+        ]
+
+    # pylint: disable=no-self-use
+    @factory.lazy_attribute
+    def price(self):
+        """Generate a random price for the program between 1 and 100 euros."""
+        return random.randint(1, 500)  # nosec
+
+    @factory.post_generation
+    # pylint: disable=unused-argument
+    def fill_teaser(self, create, extracted, **kwargs):
+        """
+        Add a video plugin for teaser with a random url
+        """
+
+        if create and extracted:
+            for language in self.extended_object.get_languages():
+                placeholder = self.extended_object.placeholders.get(
+                    slot="program_teaser"
+                )
+
+                video_sample = (
+                    extracted
+                    if isinstance(extracted, VideoSample)
+                    else random.choice(VIDEO_SAMPLE_LINKS)  # nosec
+                )
+
+                add_plugin(
+                    language=language,
+                    placeholder=placeholder,
+                    plugin_type="VideoPlayerPlugin",
+                    label=video_sample.label,
+                    embed_link=video_sample.url,
+                )
+
+    @factory.post_generation
+    # pylint: disable=unused-argument
+    def fill_categories(self, create, extracted, **kwargs):
+        """Add categories plugin to organization from a given list of category instances."""
+        if create and extracted:
+            associate_extensions(
+                self, extracted, "program_categories", "CategoryPlugin"
+            )
+
+    @factory.post_generation
+    # pylint: disable=unused-argument
+    def fill_team(self, create, extracted, **kwargs):
+        """
+        Add person plugin for course team from given person instance list
+        """
+        if create and extracted:
+            associate_extensions(self, extracted, "program_team", "PersonPlugin")
+
+    @factory.post_generation
+    # pylint: disable=unused-argument
+    def fill_organizations(self, create, extracted, **kwargs):
+        """
+        Add organizations plugin to course from a given list of organization instances.
+        """
+
+        if create and extracted:
+            associate_extensions(
+                self, extracted, "program_organizations", "OrganizationPlugin"
+            )
+
     @factory.post_generation
     # pylint: disable=unused-argument
     def fill_body(self, create, extracted, **kwargs):
@@ -853,6 +936,21 @@ def fill_body(self, create, extracted, **kwargs):
                 plugin_type="TextPlugin",
             )
 
+    @factory.post_generation
+    # pylint: disable=unused-argument
+    def fill_objectives(self, create, extracted, **kwargs):
+        """
+        Add simple text plugin for objectives with a random number of paragraphs
+        """
+        if create and extracted:
+            create_text_plugin(
+                self.extended_object,
+                "program_objectives",
+                nb_paragraphs=random.randint(2, 4),  # nosec
+                languages=self.extended_object.get_languages(),
+                plugin_type="TextPlugin",
+            )
+
     @factory.post_generation
     # pylint: disable=unused-argument
     def fill_courses(self, create, extracted, **kwargs):