93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
/**
|
|
* A generic view to represent an editable item in a list. The item
|
|
* has a edit view and a details view.
|
|
*
|
|
* Subclasses must implement:
|
|
* - itemDisplayName (string): Display name for the list item.
|
|
* Must be translated.
|
|
* - baseClassName (string): CSS class name representing the item.
|
|
* - createEditView (function): Render and append the edit view to the
|
|
* DOM.
|
|
* - createDetailsView (function): Render and append the details view
|
|
* to the DOM.
|
|
*/
|
|
define([
|
|
'js/views/baseview', 'jquery', 'gettext',
|
|
'common/js/components/utils/view_utils', 'edx-ui-toolkit/js/utils/html-utils'
|
|
], function(
|
|
BaseView, $, gettext, ViewUtils, HtmlUtils
|
|
) {
|
|
'use strict';
|
|
|
|
var ListItemView = BaseView.extend({
|
|
canDelete: false,
|
|
|
|
initialize: function() {
|
|
this.restrictEditing = this.options.restrictEditing || false;
|
|
this.listenTo(this.model, 'change:editing', this.render);
|
|
this.listenTo(this.model, 'remove', this.remove);
|
|
},
|
|
|
|
className: function() {
|
|
var index = this.model.collection.indexOf(this.model);
|
|
|
|
return [
|
|
'wrapper-collection',
|
|
'wrapper-collection-' + index,
|
|
this.baseClassName,
|
|
this.baseClassName + 's-list-item',
|
|
this.baseClassName + 's-list-item-' + index
|
|
].join(' ');
|
|
},
|
|
|
|
deleteItem: function(event) {
|
|
if (event && event.preventDefault) { event.preventDefault(); }
|
|
if (!this.canDelete) { return; }
|
|
var model = this.model,
|
|
itemDisplayName = this.itemDisplayName;
|
|
ViewUtils.confirmThenRunOperation(
|
|
interpolate(
|
|
// Translators: "item_display_name" is the name of the item to be deleted.
|
|
gettext('Delete this %(item_display_name)s?'),
|
|
{item_display_name: itemDisplayName}, true
|
|
),
|
|
interpolate(
|
|
// Translators: "item_display_name" is the name of the item to be deleted.
|
|
gettext('Deleting this %(item_display_name)s is permanent and cannot be undone.'),
|
|
{item_display_name: itemDisplayName},
|
|
true
|
|
),
|
|
gettext('Delete'),
|
|
function() {
|
|
return ViewUtils.runOperationShowingMessage(
|
|
gettext('Deleting'),
|
|
function() {
|
|
return model.destroy({wait: true});
|
|
}
|
|
);
|
|
}
|
|
);
|
|
},
|
|
|
|
render: function() {
|
|
// Removes a view from the DOM, and calls stopListening to remove
|
|
// any bound events that the view has listened to.
|
|
if (this.view) {
|
|
this.view.remove();
|
|
}
|
|
|
|
if (this.model.get('editing')) {
|
|
this.view = this.createEditView();
|
|
} else {
|
|
this.view = this.createDetailsView();
|
|
}
|
|
|
|
this.$el.html(HtmlUtils.HTML(this.view.render().el).toString());
|
|
|
|
return this;
|
|
}
|
|
});
|
|
|
|
return ListItemView;
|
|
});
|