ECOM-3201

Updated dashboard UI for empty list of courses and programs

lms/static/js/learner_dashboard/program_list_factory.js

@@ -12,6 +12,7 @@
             new CollectionListView({
                 el: '.program-cards-container',
                 childView: ProgramCardView,
+                context: options,
                 collection: new ProgramCollection(options.programsData)
             }).render();
 

lms/static/js/learner_dashboard/views/collection_list_view.js

@@ -1,22 +1,40 @@
 ;(function (define) {
     'use strict';
 
-    define(['backbone'],
-         function(
-             Backbone
-         ) {
+    define(['backbone',
+            'jquery',
+            'underscore',
+            'gettext',
+            'text!../../../templates/learner_dashboard/empty_programs_list.underscore'
+        ],
+        function (Backbone,
+                  $,
+                  _,
+                  gettext,
+                  emptyProgramsListTpl) {
             return Backbone.View.extend({
                 initialize: function(data) {
                     this.childView = data.childView;
+                    this.context = data.context;
                 },
 
                 render: function() {
-                    var childList = [];
-                    this.collection.each(function(program){
-                        var child = new this.childView({model:program});
-                        childList.push(child.el);
-                    }, this);
-                    this.$el.html(childList);
+                    var childList, tpl;
+
+                    if (!this.collection.length) {
+                        if (this.context.xseriesUrl) {
+                            //Only show the xseries advertising panel if the link is passed in
+                            tpl = _.template(emptyProgramsListTpl);
+                            this.$el.html(tpl(this.context));
+                        }
+                    } else {
+                        childList = [];
+                        this.collection.each(function (program) {
+                            var child = new this.childView({model: program});
+                            childList.push(child.el);
+                        }, this);
+                        this.$el.html(childList);
+                    }
                 }
             });
         }