114 lines
3.8 KiB
JavaScript
114 lines
3.8 KiB
JavaScript
define([
|
|
'backbone',
|
|
'jquery',
|
|
'underscore',
|
|
'text!templates/programs/course_run.underscore',
|
|
'edx-ui-toolkit/js/utils/html-utils'
|
|
],
|
|
function ( Backbone, $, _, CourseRunTpl, HtmlUtils ) {
|
|
'use strict';
|
|
|
|
return Backbone.View.extend({
|
|
events: {
|
|
'change .js-course-run-select': 'selectRun',
|
|
'click .js-remove-run': 'removeRun'
|
|
},
|
|
|
|
tpl: HtmlUtils.template( CourseRunTpl ),
|
|
|
|
initialize: function( options ) {
|
|
/**
|
|
* Need the run model for the template, and the courseModel
|
|
* to keep parent view up to date with run changes
|
|
*/
|
|
this.courseModel = options.courseModel;
|
|
this.courseRuns = options.courseRuns;
|
|
this.programStatus = options.programStatus;
|
|
|
|
this.model.on('change', this.render, this);
|
|
this.courseRuns.on('update', this.updateDropdown, this);
|
|
|
|
this.$parentEl = options.$parentEl;
|
|
this.render();
|
|
},
|
|
|
|
render: function() {
|
|
var data = this.model.attributes;
|
|
|
|
data.programStatus = this.programStatus;
|
|
|
|
if ( !!this.courseRuns ) {
|
|
data.courseRuns = this.courseRuns.toJSON();
|
|
}
|
|
|
|
HtmlUtils.setHtml(this.$el, this.tpl( data ) );
|
|
this.$parentEl.append( this.$el );
|
|
},
|
|
|
|
// Delete this view
|
|
destroy: function() {
|
|
this.undelegateEvents();
|
|
this.remove();
|
|
},
|
|
|
|
// Data returned from courseList API is not the correct format
|
|
formatData: function( data ) {
|
|
return {
|
|
course_key: data.id,
|
|
mode_slug: 'verified',
|
|
start_date: data.start,
|
|
sku: ''
|
|
};
|
|
},
|
|
|
|
removeRun: function() {
|
|
// Update run_modes array on programModel
|
|
var startDate = this.model.get('start_date'),
|
|
courseKey = this.model.get('course_key'),
|
|
/**
|
|
* NB: cloning the array so the model will fire a change event when
|
|
* the updated version is saved back to the model
|
|
*/
|
|
runs = _.clone(this.courseModel.get('run_modes')),
|
|
updatedRuns = [];
|
|
|
|
updatedRuns = _.reject( runs, function( obj ) {
|
|
return obj.start_date === startDate &&
|
|
obj.course_key === courseKey;
|
|
});
|
|
|
|
this.courseModel.set({
|
|
run_modes: updatedRuns
|
|
});
|
|
|
|
this.courseRuns.addRun(courseKey);
|
|
|
|
this.destroy();
|
|
},
|
|
|
|
selectRun: function(event) {
|
|
var id = $(event.currentTarget).val(),
|
|
runObj = _.findWhere(this.courseRuns.allRuns, {id: id}),
|
|
/**
|
|
* NB: cloning the array so the model will fire a change event when
|
|
* the updated version is saved back to the model
|
|
*/
|
|
runs = _.clone(this.courseModel.get('run_modes')),
|
|
data = this.formatData(runObj);
|
|
|
|
this.model.set( data );
|
|
runs.push(data);
|
|
this.courseModel.set({run_modes: runs});
|
|
this.courseRuns.removeRun(id);
|
|
},
|
|
|
|
// If a run has not been selected update the dropdown options
|
|
updateDropdown: function() {
|
|
if ( !this.model.get('course_key') ) {
|
|
this.render();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
);
|