ECOM-4218 Draft 2 to add course card styles (#12593)

ECOM-4218 Draft 2 to add course card styles

lms/static/js/learner_dashboard/views/course_card_view.js

@@ -6,6 +6,7 @@
             'underscore',
             'gettext',
             'edx-ui-toolkit/js/utils/html-utils',
+            'js/learner_dashboard/views/course_enroll_view',
             'text!../../../templates/learner_dashboard/course_card.underscore'
            ],
          function(
@@ -14,6 +15,7 @@
              _,
              gettext,
              HtmlUtils,
+             CourseEnrollView,
              pageTpl
          ) {
             return Backbone.View.extend({
@@ -28,6 +30,15 @@
                 render: function() {
                     var filledTemplate = this.tpl(this.model.toJSON());
                     HtmlUtils.setHtml(this.$el, filledTemplate);
+                    this.postRender();
+                },
+
+                postRender: function(){
+                    this.enrollView = new CourseEnrollView({
+                        $el: this.$('.course-actions'),
+                        model: this.model,
+                        context: this.context
+                    });
                 }
             });
         }

lms/static/js/learner_dashboard/views/course_enroll_view.js

@@ -0,0 +1,44 @@
+;(function (define) {
+    'use strict';
+
+    define(['backbone',
+            'jquery',
+            'underscore',
+            'gettext',
+            'edx-ui-toolkit/js/utils/html-utils',
+            'text!../../../templates/learner_dashboard/course_enroll.underscore'
+           ],
+         function(
+             Backbone,
+             $,
+             _,
+             gettext,
+             HtmlUtils,
+             pageTpl
+         ) {
+            return Backbone.View.extend({
+                tpl: HtmlUtils.template(pageTpl),
+
+                events: {
+                    'click .enroll-button': 'handleEnroll'
+                },
+
+                initialize: function(options) {
+                    if (options.$el){
+                        this.$el = options.$el;
+                        this.render();
+                    }
+                },
+
+                render: function() {
+                    var filledTemplate = this.tpl(this.model.toJSON());
+                    HtmlUtils.setHtml(this.$el, filledTemplate);
+                },
+
+                handleEnroll: function(){
+                    //Enrollment click event handled here
+                }
+            });
+        }
+    );
+}).call(this, define || RequireJS.define);

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

@@ -6,6 +6,7 @@
             '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',
@@ -17,6 +18,7 @@
              _,
              gettext,
              HtmlUtils,
+             CourseCardCollection,
              HeaderView,
              CollectionListView,
              CourseCardView,
@@ -29,7 +31,7 @@
 
                 initialize: function(options) {
                     this.programModel = new Backbone.Model(options);
-                    this.courseCardsCollection = new Backbone.Collection(
+                    this.courseCardCollection = new CourseCardCollection(
                         this.programModel.get('course_codes')
                     );
                     this.render();
@@ -47,7 +49,7 @@
                     new CollectionListView({
                         el: '.js-course-list',
                         childView: CourseCardView,
-                        collection: this.courseCardsCollection,
+                        collection: this.courseCardCollection,
                         context: this.programModel.toJSON(),
                         titleContext: {
                             el: 'h2',