Course Form Bug Fixes

- Changing the course type now only renders the course seats once
- Changing the course type from honor to verified now renders the verified course seat
- Audit seats can no longer be created
- Removed unused element from template

XCOM-520

ecommerce/static/js/models/course_model.js

@@ -92,6 +92,13 @@ define([
                 credit: ['audit', 'honor', 'verified', 'credit']
             },
 
+            /**
+             * Seat types that can be created by the user.
+             *
+             * Note that audit seats cannot be created, only edited.
+             */
+            creatableSeatTypes: ['honor', 'verified', 'professional'],
+
             initialize: function () {
                 this.get('products').on('change:id_verification_required', this.triggerIdVerified, this);
                 this.on('sync', this.removeParentProducts, this);
@@ -157,38 +164,22 @@ define([
              */
             getOrCreateSeat: function (seatType) {
                 var seatClass,
-                    products = this.get('products'),
-                    seat = products.find(function (product) {
-                        // Filter out parent products since there is no need to display or modify.
-                        return (product instanceof CourseSeat) && (product.getSeatType() === seatType);
+                    seat = _.find(this.seats(), function (product) {
+                        // Find the seat with the specific seat type
+                        return product.getSeatType() === seatType;
                     });
 
-                if (!seat) {
+                if (!seat && _.contains(this.creatableSeatTypes, seatType)) {
                     seatClass = CourseUtils.getCourseSeatModel(seatType);
                     /*jshint newcap: false */
                     seat = new seatClass();
                     /*jshint newcap: true */
-                    products.add(seat);
+                    this.get('products').add(seat);
                 }
 
                 return seat;
             },
 
-            // TODO Rename to seatMap
-            /**
-             * Returns a mapping of certificate types/modes to CourseSeats.
-             *
-             * @returns {Object}
-             */
-            getSeats: function () {
-                var seats = this.seats(),
-                    seatTypes = _.map(seats, function (seat) {
-                        return seat.getSeatType();
-                    });
-
-                return _.object(seatTypes, seats);
-            },
-
             /**
              * Returns boolean indicating if this Course is verified.
              *
@@ -225,16 +216,6 @@ define([
                 }, this);
             },
 
-            courseSeatTypes: function () {
-                var seatTypes = this.seats().map(function (seat) {
-                    return seat.getSeatType();
-                });
-
-                // Note (CCB): Audit is intentionally left out of this list, to avoid
-                // creating new audit seats (which we do not yet support).
-                return seatTypes.length > 0 ? seatTypes : ['honor', 'verified', 'professional'];
-            },
-
             /**
              * Save the Course using the publication endpoint.
              *

ecommerce/static/js/views/course_form_view.js

@@ -98,7 +98,6 @@ define([
             },
 
             events: {
-                'change input[name=type]': 'changedCourseType',
                 'submit': 'submit'
             },
 
@@ -252,33 +251,32 @@ define([
              */
             renderCourseSeats: function () {
                 var $courseSeats,
-                    seatTypes,
                     $courseSeatsContainer = this.$el.find('.course-seats'),
                     activeSeats = this.model.validSeatTypes();
 
                 // Display a helpful message if the user has not yet selected a course type.
                 if (activeSeats.length < 1) {
                     activeSeats = ['empty'];
-                }
+                } else {
 
-                if (_.isEmpty(this.courseSeatViews)) {
-                    seatTypes = CourseUtils.orderSeatTypesForDisplay(this.model.courseSeatTypes());
+                    _.each(CourseUtils.orderSeatTypesForDisplay(activeSeats), function (seatType) {
+                        var model,
+                            viewClass,
+                            view = this.courseSeatViews[seatType];
 
-                    _.each(seatTypes, function (seatType) {
-                        var view,
-                            model = this.model.getOrCreateSeat(seatType),
+                        if (!view) {
+                            model = this.model.getOrCreateSeat(seatType);
                             viewClass = this.courseSeatViewMappings[seatType];
 
-                        if (viewClass) {
-                            /*jshint newcap: false */
-                            view = new viewClass({model: model});
-                            /*jshint newcap: true */
-                            view.render();
+                            if (viewClass && model) {
+                                /*jshint newcap: false */
+                                view = new viewClass({model: model});
+                                /*jshint newcap: true */
+                                view.render();
 
-                            this.courseSeatViews[seatType] = view;
-                            $courseSeatsContainer.append(view.el);
-                        } else {
-                            console.warn('No view class found for seat type: ' + seatType);
+                                this.courseSeatViews[seatType] = view;
+                                $courseSeatsContainer.append(view.el);
+                            }
                         }
                     }, this);
                 }
@@ -325,20 +323,6 @@ define([
             },
 
             /**
-             * Event handler for course type selection.
-             *
-             * The course model's type field is updated from the selection,
-             * and the course seats are re-rendered.
-             *
-             * @param {Event} e - Event that triggered this callback.
-             */
-            changedCourseType: function (e) {
-                this.model.set('type', e.target.value);
-                this.renderCourseSeats();
-                return this;
-            },
-
-            /**
              * Returns the value of an input field.
              *
              * @param {String} name - Name of the field whose value should be returned

ecommerce/static/templates/course_form.html

@@ -35,7 +35,6 @@
     <label class="hd-4"><%= gettext('Course Seats') %></label>
 
     <div class="course-seat empty"><em><%= gettext('Select a course type.') %></em></div>
-    <div class="editable-seats"></div>
 </div>
 
 <div class="fields">