(function(define) {
'use strict';
define(['jquery', 'underscore', 'backbone', 'gettext', 'js/groups/models/cohort',
'js/groups/models/verified_track_settings',
'js/groups/views/cohort_editor', 'js/groups/views/cohort_form',
'js/groups/views/course_cohort_settings_notification',
'js/groups/views/verified_track_settings_notification',
'edx-ui-toolkit/js/utils/html-utils',
'js/views/base_dashboard_view',
'js/views/file_uploader', 'js/models/notification', 'js/views/notification',
'string_utils'],
function($, _, Backbone, gettext, CohortModel,
VerifiedTrackSettingsModel,
CohortEditorView, CohortFormView,
CourseCohortSettingsNotificationView,
VerifiedTrackSettingsNotificationView, HtmlUtils, BaseDashboardView) {
var hiddenClass = 'hidden',
disabledClass = 'is-disabled',
enableCohortsSelector = '.cohorts-state';
var CohortsView = BaseDashboardView.extend({
events: {
'change .cohort-select': 'onCohortSelected',
'change .cohorts-state': 'onCohortsEnabledChanged',
'click .action-create': 'showAddCohortForm',
'click .cohort-management-add-form .action-save': 'saveAddCohortForm',
'click .cohort-management-add-form .action-cancel': 'cancelAddCohortForm',
'click .link-cross-reference': 'showSection',
'click .toggle-cohort-management-secondary': 'showCsvUpload',
},
initialize: function(options) {
var model = this.model;
this.template = HtmlUtils.template($('#cohorts-tpl').text());
this.selectorTemplate = HtmlUtils.template($('#cohort-selector-tpl').text());
this.context = options.context;
this.contentGroups = options.contentGroups;
this.cohortSettings = options.cohortSettings;
model.on('sync', this.onSync, this);
// Update cohort counts when the user clicks back on the cohort management tab
// (for example, after uploading a csv file of cohort assignments and then
// checking results on data download tab).
$(this.getSectionCss('cohort_management')).click(function() {
model.fetch();
});
},
render: function() {
HtmlUtils.setHtml(this.$el, this.template({
cohorts: this.model.models,
cohortsEnabled: this.cohortSettings.get('is_cohorted')
}));
this.onSync();
// Don't create this view until the first render is called, as at that point the
// various other models whose state is required to properly view the notification
// will have completed their fetch operations.
if (!this.verifiedTrackSettingsNotificationView) {
var verifiedTrackSettingsModel = new VerifiedTrackSettingsModel();
verifiedTrackSettingsModel.url = this.context.verifiedTrackCohortingUrl;
verifiedTrackSettingsModel.fetch({
success: _.bind(this.renderVerifiedTrackSettingsNotificationView, this)
});
this.verifiedTrackSettingsNotificationView = new VerifiedTrackSettingsNotificationView({
model: verifiedTrackSettingsModel
});
}
return this;
},
renderSelector: function(selectedCohort) {
HtmlUtils.setHtml(this.$('.cohort-select'), this.selectorTemplate({
cohorts: this.model.models,
selectedCohort: selectedCohort
}));
},
renderCourseCohortSettingsNotificationView: function() {
var cohortStateMessageNotificationView = new CourseCohortSettingsNotificationView({
el: $('.cohort-state-message'),
cohortEnabled: this.getCohortsEnabled()
});
cohortStateMessageNotificationView.render();
},
renderVerifiedTrackSettingsNotificationView: function() {
if (this.verifiedTrackSettingsNotificationView) {
this.verifiedTrackSettingsNotificationView.validateSettings(
this.getCohortsEnabled(), this.model.models, this.$(enableCohortsSelector)
);
}
},
onSync: function(model, response, options) {
var selectedCohort = this.lastSelectedCohortId && this.model.get(this.lastSelectedCohortId),
hasCohorts = this.model.length > 0,
cohortNavElement = this.$('.cohort-management-nav'),
additionalCohortControlElement = this.$('.wrapper-cohort-supplemental'),
isModelUpdate;
isModelUpdate = function() {
// Distinguish whether this is a sync event for just one model, or if it is for
// an entire collection.
return options && options.patch && response.hasOwnProperty('user_partition_id');
};
this.hideAddCohortForm();
if (isModelUpdate()) {
// Refresh the selector in case the model's name changed
this.renderSelector(selectedCohort);
} else if (hasCohorts) {
cohortNavElement.removeClass(hiddenClass);
additionalCohortControlElement.removeClass(hiddenClass);
this.renderSelector(selectedCohort);
if (selectedCohort) {
this.showCohortEditor(selectedCohort);
}
} else {
cohortNavElement.addClass(hiddenClass);
additionalCohortControlElement.addClass(hiddenClass);
this.showNotification({
type: 'warning',
title: gettext('You currently have no cohorts configured'),
actionText: gettext('Add Cohort'),
actionClass: 'action-create',
actionIconClass: 'fa-plus'
});
}
this.renderVerifiedTrackSettingsNotificationView();
},
getSelectedCohort: function() {
var id = this.$('.cohort-select').val();
return id && this.model.get(parseInt(id));
},
onCohortSelected: function(event) {
event.preventDefault();
var selectedCohort = this.getSelectedCohort();
this.lastSelectedCohortId = selectedCohort.get('id');
this.showCohortEditor(selectedCohort);
},
onCohortsEnabledChanged: function(event) {
event.preventDefault();
this.saveCohortSettings();
},
saveCohortSettings: function() {
var self = this,
cohortSettings,
fieldData = {is_cohorted: this.getCohortsEnabled()};
cohortSettings = this.cohortSettings;
cohortSettings.save(
fieldData, {patch: true, wait: true}
).done(function() {
self.render();
self.renderCourseCohortSettingsNotificationView();
self.pubSub.trigger('cohorts:state', fieldData);
}).fail(function(result) {
self.showNotification({
type: 'error',
title: gettext("We've encountered an error. Refresh your browser and then try again.")},
self.$('.cohorts-state-section')
);
});
},
getCohortsEnabled: function() {
return this.$(enableCohortsSelector).prop('checked');
},
showCohortEditor: function(cohort) {
this.removeNotification();
if (this.editor) {
this.editor.setCohort(cohort);
$('.cohort-management-group .group-header-title').focus();
} else {
this.editor = new CohortEditorView({
el: this.$('.cohort-management-group'),
model: cohort,
cohorts: this.model,
contentGroups: this.contentGroups,
context: this.context
});
this.editor.render();
$('.cohort-management-group .group-header-title').focus();
}
},
showNotification: function(options, beforeElement) {
var model = new NotificationModel(options);
this.removeNotification();
this.notification = new NotificationView({
model: model
});
if (!beforeElement) {
beforeElement = this.$('.cohort-management-group');
}
beforeElement.before(this.notification.$el);
this.notification.render();
},
removeNotification: function() {
if (this.notification) {
this.notification.remove();
}
if (this.cohortFormView) {
this.cohortFormView.removeNotification();
}
},
showAddCohortForm: function(event) {
var newCohort;
event.preventDefault();
this.removeNotification();
newCohort = new CohortModel();
newCohort.url = this.model.url;
this.cohortFormView = new CohortFormView({
model: newCohort,
contentGroups: this.contentGroups,
context: this.context
});
this.cohortFormView.render();
this.$('.cohort-management-add-form').append(this.cohortFormView.$el);
this.cohortFormView.$('.cohort-name').focus();
this.setCohortEditorVisibility(false);
},
hideAddCohortForm: function() {
this.setCohortEditorVisibility(true);
if (this.cohortFormView) {
this.cohortFormView.remove();
this.cohortFormView = null;
}
},
setCohortEditorVisibility: function(showEditor) {
if (showEditor) {
this.$('.cohorts-state-section').removeClass(disabledClass).attr('aria-disabled', false);
this.$('.cohort-management-group').removeClass(hiddenClass);
this.$('.cohort-management-nav').removeClass(disabledClass).attr('aria-disabled', false);
} else {
this.$('.cohorts-state-section').addClass(disabledClass).attr('aria-disabled', true);
this.$('.cohort-management-group').addClass(hiddenClass);
this.$('.cohort-management-nav').addClass(disabledClass).attr('aria-disabled', true);
}
},
saveAddCohortForm: function(event) {
var self = this,
newCohort = this.cohortFormView.model;
event.preventDefault();
this.removeNotification();
this.cohortFormView.saveForm()
.done(function() {
self.lastSelectedCohortId = newCohort.id;
self.model.fetch().done(function() {
self.showNotification({
type: 'confirmation',
title: interpolate_text(
gettext('The {cohortGroupName} cohort has been created. You can manually add students to this cohort below.'),
{cohortGroupName: newCohort.get('name')}
)
});
});
});
},
cancelAddCohortForm: function(event) {
event.preventDefault();
this.removeNotification();
this.onSync();
},
showSection: function(event) {
event.preventDefault();
var section = $(event.currentTarget).data('section');
$(this.getSectionCss(section)).click();
$(window).scrollTop(0);
},
showCsvUpload: function(event) {
event.preventDefault();
$(event.currentTarget).addClass(hiddenClass);
var uploadElement = this.$('.csv-upload').removeClass(hiddenClass);
if (!this.fileUploaderView) {
this.fileUploaderView = new FileUploaderView({
el: uploadElement,
title: gettext('Assign students to cohorts by uploading a CSV file.'),
inputLabel: gettext('Choose a .csv file'),
inputTip: gettext('Only properly formatted .csv files will be accepted.'),
submitButtonText: gettext('Upload File and Assign Students'),
extensions: '.csv',
url: this.context.uploadCohortsCsvUrl,
successNotification: function(file, event, data) {
var message = interpolate_text(gettext(
"Your file '{file}' has been uploaded. Allow a few minutes for processing."
), {file: file});
return new NotificationModel({
type: 'confirmation',
title: message
});
}
}).render();
}
},
getSectionCss: function(section) {
return ".instructor-nav .nav-item [data-section='" + section + "']";
}
});
return CohortsView;
});
}).call(this, define || RequireJS.define);