Merge pull request #311 from mitodl/ahmedbelal/310-convert-sections-g…

…eneric

ahmed-belal/mitxPro 310 - Convert Sections to Generic

cms/migrations/0017_sections_generalize.py

@@ -0,0 +1,21 @@
+# Generated by Django 2.1.7 on 2019-05-20 13:52
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [("cms", "0016_faculty_members_subpage")]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name="forteamspage", options={"verbose_name": "Text-Image Section"}
+        ),
+        migrations.AlterModelOptions(
+            name="learningtechniquespage", options={"verbose_name": "Icon Grid"}
+        ),
+        migrations.AlterModelOptions(
+            name="usertestimonialspage",
+            options={"verbose_name": "Testimonials Section"},
+        ),
+    ]

cms/models.py

@@ -53,7 +53,8 @@ def can_create_at(cls, parent):
 
     def save(self, *args, **kwargs):
         # autogenerate a unique slug so we don't hit a ValidationError
-        self.title = self.__class__._meta.verbose_name.title()
+        if not self.title:
+            self.title = self.__class__._meta.verbose_name.title()
         self.slug = slugify("{}-{}".format(self.get_parent().id, self.title))
         super().save(*args, **kwargs)
 
@@ -82,7 +83,7 @@ class UserTestimonialsPage(CourseProgramChildPage):
     ]
 
     class Meta:
-        verbose_name = "Testimonials Page"
+        verbose_name = "Testimonials Section"
 
 
 class LearningOutcomesPage(CourseProgramChildPage):
@@ -128,7 +129,10 @@ class LearningTechniquesPage(CourseProgramChildPage):
         help_text="Enter detail about how you'll learn.",
     )
 
-    content_panels = [StreamFieldPanel("technique_items")]
+    class Meta:
+        verbose_name = "Icon Grid"
+
+    content_panels = [FieldPanel("title"), StreamFieldPanel("technique_items")]
 
 
 class ForTeamsPage(CourseProgramChildPage):
@@ -153,7 +157,12 @@ class ForTeamsPage(CourseProgramChildPage):
         related_name="+",
         help_text="Image size must be at least 750x505 pixels.",
     )
+
+    class Meta:
+        verbose_name = "Text-Image Section"
+
     content_panels = [
+        FieldPanel("title"),
         FieldPanel("content"),
         FieldPanel("action_title"),
         FieldPanel("switch_layout"),

courses/models.py

@@ -6,6 +6,7 @@
 from django.db import models
 from django.contrib.auth import get_user_model
 from django.contrib.contenttypes.fields import GenericRelation
+from django.urls import reverse
 
 from cms.models import (
     LearningOutcomesPage,
@@ -240,6 +241,20 @@ def course_lineup(self):
         """Gets the CoursesInProgram subpage if associated with this program"""
         return self._get_child_page_of_type(CoursesInProgramPage)
 
+    @property
+    def url(self):
+        """
+        Gets the URL for this resource
+        """
+        return NotImplementedError()
+
+    @property
+    def type_name(self):
+        """
+        Gets the descriptive word for the type of this resource
+        """
+        return "program"
+
     def __str__(self):
         return self.title
 
@@ -314,6 +329,20 @@ def unexpired_runs(self):
             )
         )
 
+    @property
+    def url(self):
+        """
+        Gets the URL for this resource
+        """
+        return reverse("course-detail", kwargs={"pk": self.pk})
+
+    @property
+    def type_name(self):
+        """
+        Gets the descriptive word for the type of this resource
+        """
+        return "course"
+
     class Meta:
         ordering = ("program", "title")
 

courses/templates/course_app_base.html

@@ -1,7 +1 @@
 {% extends "base.html" %}
-{% load render_bundle %}
-
-{% block headercontent %}
-  <div id="header"></div>
-  {% render_bundle 'header' %}
-{% endblock %}

courses/templates/course_detail.html

@@ -31,13 +31,15 @@
     {% include "partials/subnav.html" with product=course %}
     {% if course.outcomes %} {% include "partials/learning-outcomes.html" %} {% endif %}
     {% if course.who_should_enroll %} {% include "partials/target-audience.html" %} {% endif %}
-    {% if course.techniques %} {% include "partials/learning-techniques.html" %} {% endif %}
-    {% if course.testimonials %} {% include "partials/testimonial-carousel.html" with testimonials=course.testimonials %} {% endif %}
+    {% if course.techniques %} {% include "partials/learning-techniques.html" with page=course.techniques %} {% endif %}
+    {% if course.testimonials %} {% include "partials/testimonial-carousel.html" with page=course.testimonials %} {% endif %}
     {% if course.faculty %} {% include "partials/faculty-carousel.html" %} {% endif %}
     {% if course.program and course.program.course_lineup %}
-      {% include "partials/course-carousel.html" with program=course.program %}
+      {% with courseware_objects=course.program.courses.all page=course.program.course_lineup %}
+        {% include "partials/course-carousel.html" with button_title="View Full Program" button_url="#" %}
+      {% endwith %}
     {% endif %}
-    {% if course.for_teams %} {% include "partials/for-teams.html" %} {% endif %}
+    {% if course.for_teams %} {% include "partials/for-teams.html" with page=course.for_teams %} {% endif %}
     {% if course.faqs %} {% include "partials/faqs.html" %} {% endif %}
 </div>
 {% endblock %}

courses/templates/partials/course-carousel.html

@@ -2,26 +2,28 @@
 <div id="courseLineup" class="course-in-program">
   <div class="container">
     <div class="head">
-      <h1 class="text-uppercase">{{ program.course_lineup.heading }}</h1>
-      {{ program.course_lineup.body|safe }}
+      <h1 class="text-uppercase">{{ page.heading }}</h1>
+      {{ page.body|safe }}
     </div>
     <div class="course-slider">
-      {% for child_course in program.courses.all %}
+      {% for courseware_object in courseware_objects %}
         <div class="slide">
           <div class="slide-holder">
-            {% if child_course.thumbnail_image %}
-              {% image child_course.thumbnail_image fill-480x275 as course_image %}
-              <img src="{{ course_image.url }}" alt="{{ child_course.display_title }}">
+            {% if courseware_object.thumbnail_image %}
+              {% image courseware_object.thumbnail_image fill-480x275 as course_image %}
+              <img src="{{ course_image.url }}" alt="{{ courseware_object.display_title }}">
             {% else %}
-              <img src="{% static 'images/mit-dome.png' %}" alt="{{ child_course.display_title }}">
+              <img src="{% static 'images/mit-dome.png' %}" alt="{{ courseware_object.display_title }}">
             {% endif %}
-            <h2>{{ child_course.display_title }}</h2>
-            <p>{{ child_course.subhead }}</p>
-            <a href="{% url "course-detail" pk=child_course.id %}" class="read-more text-uppercase">view course</a>
+            <h2>{{ courseware_object.display_title }}</h2>
+            <p>{{ courseware_object.subhead }}</p>
+            <a href="{{ courseware_object.url }}" class="read-more text-uppercase">view {{ courseware_object.type_name }}</a>
           </div>
         </div>
       {% endfor %}
     </div>
-    <a href="#" class="btn btn-primary">View Full Program</a>
+    {% if button_title and button_url %}
+      <a href="{{ button_url }}" class="btn btn-primary">{{ button_title }}</a>
+    {% endif %}
   </div>
 </div>

courses/templates/partials/for-teams.html

@@ -2,15 +2,15 @@
 <div id="forTeams" class="for-teams-block">
   <div class="container">
     <div class="row">
-      <div class="col-lg-7 {% if course.for_teams.switch_layout %}order-2{% endif %}">
-        <h1>For Teams</h1>
-        {{ course.for_teams.content|safe }}
-        <a href="#" class="btn btn-primary text-uppercase px-5 py-2 action-button">{{ course.for_teams.action_title }}</a>
+      <div class="col-lg-7 {% if page.switch_layout %}order-2{% endif %}">
+        <h1 class="text-uppercase" >{{ page.title }}</h1>
+        {{ page.content|safe }}
+        <a href="#" class="btn btn-primary text-uppercase px-5 py-2 action-button">{{ page.action_title }}</a>
       </div>
       <div class="col-lg-5">
-        <div class="img-holder {% if course.for_teams.switch_layout %}stick-left{% endif %}">
-          {% if course.for_teams.image %}
-            {% image course.for_teams.image fill-750x505 %}
+        <div class="img-holder {% if page.switch_layout %}stick-left{% endif %}">
+          {% if page.image %}
+            {% image page.image fill-750x505 %}
           {% else %}
             <img src="{% static 'images/default-for-teams-image.jpg' %}" alt="For Teams">
           {% endif%}

courses/templates/partials/learning-techniques.html

@@ -1,8 +1,8 @@
 {% load wagtailimages_tags %}
 <div id="learningTechniques" class="container learning-techniques-block section-spacing">
-  <h1>How You’ll Learn</h1>
+  <h1 class="text-uppercase">{{ page.title }}</h1>
   <ul class="learning-techniques-list">
-    {% for technique in course.techniques.technique_items %}
+    {% for technique in page.technique_items %}
       <li>
         <div class="img-holder">
           {% image technique.value.image height-110 format-png %}

courses/templates/partials/testimonial-carousel.html

@@ -2,11 +2,11 @@
 <div id="testimonials" class="learners-block">
   <div class="container">
     <div class="head">
-      <h1>{{ testimonials.heading }}</h1>
-      <h3>{{ testimonials.subhead }}</h3>
+      <h1>{{ page.heading }}</h1>
+      <h3>{{ page.subhead }}</h3>
     </div>
     <div class="learners-slider">
-      {% for testimonial in testimonials.items %}
+      {% for testimonial in page.items %}
       <div class="slide">
         <div class="slide-holder">
           {% if testimonial.value.image %}
@@ -20,7 +20,7 @@ <h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
       {% endfor %}
     </div>
   </div>
-  {% for testimonial in testimonials.items %}
+  {% for testimonial in page.items %}
     <div class="modal fade" id="testimonial-{{ forloop.counter }}" role="dialog">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">

mitxpro/templates/base.html

@@ -26,6 +26,8 @@
     {% include "partials/gtm_body.html" %}
     {% hijack_notification %}
     {% block headercontent %}
+      <div id="header"></div>
+      {% render_bundle 'header' %}
     {% endblock %}
     {% block content %}
         {% block banner %}

mitxpro/templates/resource_template.html

@@ -1,10 +1,5 @@
 {% extends "base.html" %}
-{% load render_bundle wagtailcore_tags %}
-
-{% block headercontent %}
-<div id="header"></div>
-{% render_bundle 'header' %}
-{% endblock %}
+{% load wagtailcore_tags %}
 
 {% block content %}
 

mitxpro/views_test.py

@@ -37,7 +37,7 @@ def test_webpack_url(mocker, settings, client):
     response = client.get(reverse("login"))
 
     bundles = {bundle[0][1] for bundle in get_bundle.call_args_list}
-    assert bundles == {"root", "style"}
+    assert bundles == {"header", "root", "style"}
     js_settings = json.loads(response.context["js_settings_json"])
     assert js_settings == {
         "gaTrackingID": "fake",