Add course grades to programs dashboard.

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

@@ -38,6 +38,9 @@
                          this.enrollModel.urlRoot = this.urlModel.get('commerce_api_url');
                      }
                      this.context = options.context || {};
+                     this.grade = this.context.courseData.grades[this.model.get('course_run_key')];
+                     this.grade = this.grade * 100;
+                     this.collectionCourseStatus = this.context.collectionCourseStatus || '';
                      this.render();
                      this.listenTo(this.model, 'change', this.render);
                  },
@@ -59,6 +62,8 @@
                      this.enrollView = new CourseEnrollView({
                          $parentEl: this.$('.course-actions'),
                          model: this.model,
+                         grade: this.grade,
+                         collectionCourseStatus: this.collectionCourseStatus,
                          urlModel: this.urlModel,
                          enrollModel: this.enrollModel
                      });

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

@@ -29,13 +29,18 @@
                      this.$parentEl = options.$parentEl;
                      this.enrollModel = options.enrollModel;
                      this.urlModel = options.urlModel;
+                     this.grade = options.grade;
+                     this.collectionCourseStatus = options.collectionCourseStatus;
                      this.render();
                  },
 
                  render: function() {
-                     var filledTemplate;
+                     var filledTemplate,
+                         context = this.model.toJSON();
                      if (this.$parentEl && this.enrollModel) {
-                         filledTemplate = this.tpl(this.model.toJSON());
+                         context.grade = this.grade;
+                         context.collectionCourseStatus = this.collectionCourseStatus;
+                         filledTemplate = this.tpl(context);
                          HtmlUtils.setHtml(this.$el, filledTemplate);
                          HtmlUtils.setHtml(this.$parentEl, HtmlUtils.HTML(this.$el));
                      }

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

@@ -91,7 +91,7 @@
                              el: '.js-course-list-remaining',
                              childView: CourseCardView,
                              collection: this.remainingCourseCollection,
-                             context: this.options
+                             context: $.extend(this.options, {collectionCourseStatus: 'remaining'})
                          }).render();
                      }
 
@@ -100,7 +100,7 @@
                              el: '.js-course-list-completed',
                              childView: CourseCardView,
                              collection: this.completedCourseCollection,
-                             context: this.options
+                             context: $.extend(this.options, {collectionCourseStatus: 'completed'})
                          }).render();
                      }
 
@@ -110,7 +110,9 @@
                              el: '.js-course-list-in-progress',
                              childView: CourseCardView,
                              collection: this.inProgressCourseCollection,
-                             context: $.extend(this.options, {enrolled: gettext('Enrolled')})
+                             context: $.extend(this.options,
+                               {enrolled: gettext('Enrolled'), collectionCourseStatus: 'in_progress'}
+                             )
                          }).render();
                      }
 

lms/static/js/spec/learner_dashboard/course_card_view_spec.js

@@ -13,14 +13,27 @@ define([
             startDate = 'Feb 28, 2017',
             endDate = 'May 30, 2017',
 
-            setupView = function(data, isEnrolled) {
-                var programData = $.extend({}, data);
+            setupView = function(data, isEnrolled, collectionCourseStatus) {
+                var programData = $.extend({}, data),
+                    context = {
+                        courseData: {
+                            grades: {
+                                'course-v1:WageningenX+FFESx+1T2017': 0.8
+                            }
+                        },
+                        collectionCourseStatus: collectionCourseStatus
+                    };
+
+                if (typeof collectionCourseStatus === 'undefined') {
+                    context.collectionCourseStatus = 'completed';
+                }
 
                 programData.course_runs[0].is_enrolled = isEnrolled;
                 setFixtures('<div class="program-course-card"></div>');
                 courseCardModel = new CourseCardModel(programData);
                 view = new CourseCardView({
-                    model: courseCardModel
+                    model: courseCardModel,
+                    context: context
                 });
             },
 
@@ -84,6 +97,18 @@ define([
             validateCourseInfoDisplay();
         });
 
+        it('should render final grade if course is completed', function() {
+            view.remove();
+            setupView(course, true);
+            expect(view.$('.grade-display').text()).toEqual('80%');
+        });
+
+        it('should not render final grade if course has not been completed', function() {
+            view.remove();
+            setupView(course, true, 'in_progress');
+            expect(view.$('.final-grade').length).toEqual(0);
+        });
+
         it('should render the course card based on the data not enrolled', function() {
             validateCourseInfoDisplay();
         });

lms/static/js/spec/learner_dashboard/program_details_view_spec.js

@@ -462,7 +462,10 @@ define([
                                 }
                             ]
                         }
-                    ]
+                    ],
+                    grades: {
+                        'course-v1:Testx+DOGx002+1T2016': 0.9
+                    }
                 },
                 urls: {
                     program_listing_url: '/dashboard/programs/',