Merge pull request #12657 from edx/renzo/include-listing-url

Include program listing URL on detail pages

lms/djangoapps/learner_dashboard/tests/test_programs.py

@@ -284,6 +284,7 @@ class TestProgramDetails(ProgramsApiConfigMixin, SharedModuleStoreTestCase):
         """Verify that program data is present."""
         self.assertContains(response, 'programData')
         self.assertContains(response, self.data['name'])
+        self.assertContains(response, reverse('program_listing_view'))
 
     def test_login_required(self):
         """

lms/djangoapps/learner_dashboard/views.py

@@ -3,6 +3,7 @@ from urlparse import urljoin
 
 from django.conf import settings
 from django.contrib.auth.decorators import login_required
+from django.core.urlresolvers import reverse
 from django.http import Http404
 from django.views.decorators.http import require_GET
 
@@ -65,6 +66,7 @@ def program_details(request, program_id):
 
     context = {
         'program_data': program_data,
+        'program_listing_url': reverse('program_listing_view'),
         'nav_hidden': True,
         'disable_courseware_js': True,
         'uses_pattern_library': True

lms/static/js/learner_dashboard/program_details_factory.js

@@ -6,7 +6,7 @@
     ],
     function(ProgramDetailsView) {
         return function (options) {
-            var ProgramDetails = new ProgramDetailsView(options.programData);
+            var ProgramDetails = new ProgramDetailsView(options);
             return ProgramDetails;
         };
     });

lms/static/js/learner_dashboard/views/program_details_view.js

@@ -30,7 +30,8 @@
                 tpl: HtmlUtils.template(pageTpl),
 
                 initialize: function(options) {
-                    this.programModel = new Backbone.Model(options);
+                    this.options = options;
+                    this.programModel = new Backbone.Model(this.options.programData);
                     this.courseCardCollection = new CourseCardCollection(
                         this.programModel.get('course_codes')
                     );
@@ -44,7 +45,7 @@
 
                 postRender: function() {
                     this.headerView = new HeaderView({
-                        model: this.programModel
+                        model: new Backbone.Model(this.options)
                     });
                     new CollectionListView({
                         el: '.js-course-list',

lms/static/js/learner_dashboard/views/program_header_view.js

@@ -30,7 +30,7 @@
                         breakpoints: this.breakpoints
                     });
 
-                    if ( this.model.get('name') ) {
+                    if ( this.model.get('programData') ) {
                         HtmlUtils.setHtml(this.$el, this.tpl(data));
                         this.postRender();
                     }

lms/static/js/spec/learner_dashboard/program_details_header_spec.js

@@ -10,30 +10,32 @@ define([
             var view = null,
                 programModel,
                 context = {
-                    uuid: '12-ab',
-                    name: 'Astrophysics',
-                    subtitle: 'Learn contemporary astrophysics from the leaders in the field.',
-                    category: 'xseries',
-                    organizations: [
-                        {
-                            display_name: 'Australian National University',
-                            img: 'common/test/data/static/picture1.jpg',
-                            key: 'ANUx'
-                        }
-                    ],
-                    banner_image_urls: {
-                        w1440h480: 'common/test/data/static/picture1.jpg',
-                        w726h242: 'common/test/data/static/picture2.jpg',
-                        w348h116: 'common/test/data/static/picture3.jpg'
-                    },
-                    program_details_url: '/dashboard/programs'
+                    programListingUrl: '/dashboard/programs',
+                    programData: {
+                        uuid: '12-ab',
+                        name: 'Astrophysics',
+                        subtitle: 'Learn contemporary astrophysics from the leaders in the field.',
+                        category: 'xseries',
+                        organizations: [
+                            {
+                                display_name: 'Australian National University',
+                                img: 'common/test/data/static/picture1.jpg',
+                                key: 'ANUx'
+                            }
+                        ],
+                        banner_image_urls: {
+                            w1440h480: 'common/test/data/static/picture1.jpg',
+                            w726h242: 'common/test/data/static/picture2.jpg',
+                            w348h116: 'common/test/data/static/picture3.jpg'
+                        },
+                        program_details_url: '/dashboard/programs'
+                    }
                 };
 
             beforeEach(function() {
                 setFixtures('<div class="js-program-header"></div>');
-                programModel = new Backbone.Model(context);
                 view = new ProgramHeaderView({
-                    model: programModel
+                    model: new Backbone.Model(context)
                 });
                 view.render();
             });
@@ -47,11 +49,14 @@ define([
             });
 
             it('should render the header based on the passed in model', function() {
-                expect(view.$('.title').html()).toEqual(context.name);
-                expect(view.$('.subtitle').html()).toEqual(context.subtitle);
-                expect(view.$('.org-logo').length).toEqual(context.organizations.length);
-                expect(view.$('.org-logo').attr('src')).toEqual(context.organizations[0].img);
-                expect(view.$('.org-logo').attr('alt')).toEqual(context.organizations[0].display_name + '\'s logo');
+                expect(view.$('.title').html()).toEqual(context.programData.name);
+                expect(view.$('.subtitle').html()).toEqual(context.programData.subtitle);
+                expect(view.$('.org-logo').length).toEqual(context.programData.organizations.length);
+                expect(view.$('.org-logo').attr('src')).toEqual(context.programData.organizations[0].img);
+                expect(view.$('.org-logo').attr('alt')).toEqual(
+                    context.programData.organizations[0].display_name + '\'s logo'
+                );
+                expect(view.$('.breadcrumb').attr('href')).toEqual(context.programListingUrl);
             });
         });
     }

lms/templates/learner_dashboard/program_details.html

@@ -14,7 +14,8 @@ from openedx.core.djangolib.js_utils import (
 <%block name="js_extra">
 <%static:require_module module_name="js/learner_dashboard/program_details_factory" class_name="ProgramDetailsFactory">
 ProgramDetailsFactory({
-    programData: ${program_data | n, dump_js_escaped_json}
+    programData: ${program_data | n, dump_js_escaped_json},
+    programListingUrl: '${program_listing_url | n, js_escaped_string}',
 });
 </%static:require_module>
 </%block>

lms/templates/learner_dashboard/program_header_view.underscore

@@ -1,24 +1,24 @@
 <picture>
-    <source srcset="<%- banner_image_urls.w1440h480 %>" media="(min-width: <%- breakpoints.min['x-large'] %>)">
-    <source srcset="<%- banner_image_urls.w726h242 %>" media="(min-width: <%- breakpoints.min.medium %>)">
-    <img class="banner-image" srcset="<%- banner_image_urls.w348h116 %>" alt="">
+    <source srcset="<%- programData.banner_image_urls.w1440h480 %>" media="(min-width: <%- breakpoints.min['x-large'] %>)">
+    <source srcset="<%- programData.banner_image_urls.w726h242 %>" media="(min-width: <%- breakpoints.min.medium %>)">
+    <img class="banner-image" srcset="<%- programData.banner_image_urls.w348h116 %>" alt="">
 </picture>
-<h2 class="hd-2 title"><%- name %></h2>
-<p class="subtitle"><%- subtitle %></p>
-<a href="/dashboard/programs" class="breadcrumb"><%- gettext('Programs') %></a>
+<h2 class="hd-2 title"><%- programData.name %></h2>
+<p class="subtitle"><%- programData.subtitle %></p>
+<a href="<%- programListingUrl %>" class="breadcrumb"><%- gettext('Programs') %></a>
 <span><%- StringUtils.interpolate(
-    gettext('{category}\'s program'),
-    {category: category}
+    gettext('{category} program'),
+    {category: programData.category}
 ) %></span>
-<% _.each(organizations, function(org) { %>
+<% _.each(programData.organizations, function(org) { %>
 	<img src="<%- org.img %>" class="org-logo" alt="<%- StringUtils.interpolate(
 	    gettext('{organization}\'s logo'),
 	    {organization: org.display_name}
 	) %>">
 <% }) %>
-<% if (category === 'xseries') { %>
+<% if (programData.category === 'xseries') { %>
 	<p><%- StringUtils.interpolate(
         gettext('To complete the {program} XSeries and earn an XSeries Certificate you must successfully earn a Verified Certificate in all courses shown below.'),
-        {program: name}
+        {program: programData.name}
     ) %></p>
 <% } %>