From 2975a459f1ab323fd579eaf0643f7097f86f4fb4 Mon Sep 17 00:00:00 2001
From: Matthew Piatetsky <mpiatetsky@edx.org>
Date: Mon, 20 Mar 2017 13:17:28 -0400
Subject: [PATCH] Add new views and a sidebar view

---
 .../program_details_factory_2017.js           | 13 ++++
 .../views/program_details_sidebar_view.js     | 47 ++++++++++++
 .../views/program_details_view_2017.js        | 72 +++++++++++++++++++
 .../program_details_2017.html                 |  4 +-
 4 files changed, 134 insertions(+), 2 deletions(-)
 create mode 100644 lms/static/js/learner_dashboard/program_details_factory_2017.js
 create mode 100644 lms/static/js/learner_dashboard/views/program_details_sidebar_view.js
 create mode 100644 lms/static/js/learner_dashboard/views/program_details_view_2017.js

diff --git a/lms/static/js/learner_dashboard/program_details_factory_2017.js b/lms/static/js/learner_dashboard/program_details_factory_2017.js
new file mode 100644
index 0000000000..1478081179
--- /dev/null
+++ b/lms/static/js/learner_dashboard/program_details_factory_2017.js
@@ -0,0 +1,13 @@
+(function(define) {
+    'use strict';
+
+    define([
+        'js/learner_dashboard/views/program_details_view_2017'
+    ],
+    function(ProgramDetailsView) {
+        return function(options) {
+            var ProgramDetails = new ProgramDetailsView(options);
+            return ProgramDetails;
+        };
+    });
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js b/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js
new file mode 100644
index 0000000000..c7bd481dbc
--- /dev/null
+++ b/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js
@@ -0,0 +1,47 @@
+(function(define) {
+    'use strict';
+
+    define(['backbone',
+            'jquery',
+            'underscore',
+            'gettext',
+            'js/learner_dashboard/views/explore_new_programs_view',
+            'js/learner_dashboard/views/certificate_view',
+            'text!../../../templates/learner_dashboard/sidebar.underscore'
+           ],
+         function(
+             Backbone,
+             $,
+             _,
+             gettext,
+             NewProgramsView,
+             CertificateView,
+             sidebarTpl
+         ) {
+             return Backbone.View.extend({
+                 el: '.sidebar',
+
+                 tpl: _.template(sidebarTpl),
+
+                 initialize: function(data) {
+                     this.context = data.context;
+                 },
+
+                 render: function() {
+                     this.$el.html(this.tpl(this.context));
+                     this.postRender();
+                 },
+
+                 postRender: function() {
+                     this.newProgramsView = new NewProgramsView({
+                         context: this.context
+                     });
+
+                     this.newCertificateView = new CertificateView({
+                         context: this.context
+                     });
+                 }
+             });
+         }
+    );
+}).call(this, define || RequireJS.define);
diff --git a/lms/static/js/learner_dashboard/views/program_details_view_2017.js b/lms/static/js/learner_dashboard/views/program_details_view_2017.js
new file mode 100644
index 0000000000..eb853632cd
--- /dev/null
+++ b/lms/static/js/learner_dashboard/views/program_details_view_2017.js
@@ -0,0 +1,72 @@
+(function(define) {
+    'use strict';
+
+    define(['backbone',
+            'jquery',
+            'underscore',
+            'gettext',
+            'edx-ui-toolkit/js/utils/html-utils',
+            'js/learner_dashboard/collections/course_card_collection',
+            'js/learner_dashboard/views/program_header_view',
+            'js/learner_dashboard/views/collection_list_view',
+            'js/learner_dashboard/views/course_card_view',
+            'js/learner_dashboard/views/program_details_sidebar_view',
+            'text!../../../templates/learner_dashboard/program_details_view.underscore'
+           ],
+         function(
+             Backbone,
+             $,
+             _,
+             gettext,
+             HtmlUtils,
+             CourseCardCollection,
+             HeaderView,
+             CollectionListView,
+             CourseCardView,
+             SidebarView,
+             pageTpl
+         ) {
+             return Backbone.View.extend({
+                 el: '.js-program-details-wrapper',
+
+                 tpl: HtmlUtils.template(pageTpl),
+
+                 initialize: function(options) {
+                     this.options = options;
+                     this.programModel = new Backbone.Model(this.options.programData);
+                     this.courseCardCollection = new CourseCardCollection(
+                        this.programModel.get('courses'),
+                        this.options.userPreferences
+                    );
+                     this.render();
+                 },
+
+                 render: function() {
+                     HtmlUtils.setHtml(this.$el, this.tpl());
+                     this.postRender();
+                 },
+
+                 postRender: function() {
+                     this.headerView = new HeaderView({
+                         model: new Backbone.Model(this.options)
+                     });
+                     new CollectionListView({
+                         el: '.js-course-list',
+                         childView: CourseCardView,
+                         collection: this.courseCardCollection,
+                         context: this.options,
+                         titleContext: {
+                             el: 'h2',
+                             title: 'Course List'
+                         }
+                     }).render();
+
+                     new SidebarView({
+                         el: '.sidebar',
+                         context: this.options
+                     }).render();
+                 }
+             });
+         }
+    );
+}).call(this, define || RequireJS.define);
diff --git a/lms/templates/learner_dashboard/program_details_2017.html b/lms/templates/learner_dashboard/program_details_2017.html
index b31f71e37a..0a2dafe1f5 100644
--- a/lms/templates/learner_dashboard/program_details_2017.html
+++ b/lms/templates/learner_dashboard/program_details_2017.html
@@ -12,8 +12,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({
+<%static:require_module module_name="js/learner_dashboard/program_details_factory_2017" class_name="ProgramDetailsFactory2017">
+ProgramDetailsFactory2017({
     programData: ${program_data | n, dump_js_escaped_json},
     urls: ${urls | n, dump_js_escaped_json},
     userPreferences: ${user_preferences | n, dump_js_escaped_json},