Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

soft delete video from video uploads page

Browse Source 
TNL-5899
This commit is contained in:
muhammad-ammar
2016-11-10 20:15:50 +05:00
parent 8cee15b6a1
commit dd45991926
13 changed files with 274 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cms/static/js/factories/videos_index.js
View File

@@ -5,19 +5,19 @@ define([
'use strict';
var VideosIndexFactory = function(
$contentWrapper,
postUrl,
videoHandlerUrl,
encodingsDownloadUrl,
concurrentUploadLimit,
uploadButton,
previousUploads
) {
var activeView = new ActiveVideoUploadListView({
postUrl: postUrl,
postUrl: videoHandlerUrl,
concurrentUploadLimit: concurrentUploadLimit,
uploadButton: uploadButton,
onFileUploadDone: function(activeVideos) {
$.ajax({
url: postUrl,
url: videoHandlerUrl,
contentType: 'application/json',
dataType: 'json',
type: 'GET'
@@ -30,6 +30,7 @@ define([
isActive[0].get('status') === ActiveVideoUpload.STATUS_COMPLETE;
}),
updatedView = new PreviousVideoUploadListView({
videoHandlerUrl: videoHandlerUrl,
collection: updatedCollection,
encodingsDownloadUrl: encodingsDownloadUrl
});
@@ -38,6 +39,7 @@ define([
}
}),
previousView = new PreviousVideoUploadListView({
videoHandlerUrl: videoHandlerUrl,
collection: new Backbone.Collection(previousUploads),
encodingsDownloadUrl: encodingsDownloadUrl
});

100
cms/static/js/spec/views/previous_video_upload_list_spec.js
View File

@@ -1,29 +1,81 @@
define(
['jquery', 'underscore', 'backbone', 'js/views/previous_video_upload_list', 'common/js/spec_helpers/template_helpers'],
function($, _, Backbone, PreviousVideoUploadListView, TemplateHelpers) {
['jquery', 'underscore', 'backbone', 'js/views/previous_video_upload_list',
'common/js/spec_helpers/template_helpers', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers'],
function($, _, Backbone, PreviousVideoUploadListView, TemplateHelpers, AjaxHelpers) {
'use strict';
describe('PreviousVideoUploadListView', function() {
var videoHandlerUrl = '/videos/course-v1:org.0+course_0+Run_0',
render = function(numModels) {
var modelData = {
client_video_id: 'foo.mp4',
duration: 42,
created: '2014-11-25T23:13:05',
edx_video_id: 'dummy_id',
status: 'uploading'
};
var collection = new Backbone.Collection(
_.map(
_.range(numModels),
function(num, index) {
return new Backbone.Model(
_.extend({}, modelData, {edx_video_id: 'dummy_id_' + index})
);
}
)
);
var view = new PreviousVideoUploadListView({
collection: collection,
videoHandlerUrl: videoHandlerUrl
});
return view.render().$el;
},
verifyVideosInfo;
beforeEach(function() {
TemplateHelpers.installTemplate('previous-video-upload', true);
setFixtures('<div id="page-prompt"></div>');
TemplateHelpers.installTemplate('previous-video-upload');
TemplateHelpers.installTemplate('previous-video-upload-list');
});
var render = function(numModels) {
var modelData = {
client_video_id: 'foo.mp4',
duration: 42,
created: '2014-11-25T23:13:05',
edx_video_id: 'dummy_id',
status: 'uploading'
};
var collection = new Backbone.Collection(
_.map(
_.range(numModels),
function() { return new Backbone.Model(modelData); }
)
);
var view = new PreviousVideoUploadListView({collection: collection});
return view.render().$el;
verifyVideosInfo = function(test, confirmRemove) {
var firstVideo,
numVideos = 5,
$el = render(numVideos),
firstVideoId = 'dummy_id_0',
requests = AjaxHelpers.requests(test),
firstVideoSelector = '.js-table-body tr:first-child';
// total number of videos should be 5 before remove
expect($el.find('.js-table-body tr').length).toEqual(numVideos);
// get first video element
firstVideo = $el.find(firstVideoSelector);
// verify first video id before removal
expect(firstVideo.find('.video-id-col').text()).toEqual(firstVideoId);
// remove first video in the table
firstVideo.find('.remove-video-button.action-button').click();
if (confirmRemove) {
// click on Remove button on confirmation popup
$('.action-primary').click();
AjaxHelpers.expectJsonRequest(requests, 'DELETE', videoHandlerUrl + '/dummy_id_0');
AjaxHelpers.respondWithNoContent(requests);
numVideos -= 1;
firstVideoId = 'dummy_id_1';
} else {
// click on Cancel button on confirmation popup
$('.action-secondary').click();
expect(requests.length).toEqual(0);
}
// verify total number of videos after Remove/Cancel
expect($el.find('.js-table-body tr').length).toEqual(numVideos);
// verify first video id after Remove/Cancel
firstVideo = $el.find(firstVideoSelector);
expect(firstVideo.find('.video-id-col').text()).toEqual(firstVideoId);
};
it('should render an empty collection', function() {
@@ -37,6 +89,16 @@ define(
expect($el.find('.js-table-body').length).toEqual(1);
expect($el.find('.js-table-body tr').length).toEqual(5);
});
it('removes video upon click on Remove button', function() {
// Remove a video from list and verify that correct video is removed
verifyVideosInfo(this, true);
});
it('does nothing upon click on Cancel button', function() {
// Verify that nothing changes when we click on Cancel button on confirmation popup
verifyVideosInfo(this, false);
});
});
}
);

62
cms/static/js/spec/views/previous_video_upload_spec.js
View File

@@ -1,26 +1,29 @@
define(
['jquery', 'backbone', 'js/views/previous_video_upload', 'common/js/spec_helpers/template_helpers'],
function($, Backbone, PreviousVideoUploadView, TemplateHelpers) {
['jquery', 'underscore', 'backbone', 'js/views/previous_video_upload', 'common/js/spec_helpers/template_helpers',
'common/js/spec_helpers/view_helpers'],
function($, _, Backbone, PreviousVideoUploadView, TemplateHelpers, ViewHelpers) {
'use strict';
describe('PreviousVideoUploadView', function() {
beforeEach(function() {
TemplateHelpers.installTemplate('previous-video-upload', true);
});
var render = function(modelData) {
var defaultData = {
client_video_id: 'foo.mp4',
duration: 42,
created: '2014-11-25T23:13:05',
edx_video_id: 'dummy_id',
status: 'uploading'
};
var view = new PreviousVideoUploadView(
{model: new Backbone.Model($.extend({}, defaultData, modelData))}
);
client_video_id: 'foo.mp4',
duration: 42,
created: '2014-11-25T23:13:05',
edx_video_id: 'dummy_id',
status: 'uploading'
},
view = new PreviousVideoUploadView({
model: new Backbone.Model($.extend({}, defaultData, modelData)),
videoHandlerUrl: '/videos/course-v1:org.0+course_0+Run_0'
});
return view.render().$el;
};
beforeEach(function() {
setFixtures('<div id="page-prompt"></div><div id="page-notification"></div>');
TemplateHelpers.installTemplate('previous-video-upload', false);
});
it('should render video name correctly', function() {
var testName = 'test name';
var $el = render({client_video_id: testName});
@@ -70,6 +73,35 @@ define(
var $el = render({status: testStatus});
expect($el.find('.status-col').text()).toEqual(testStatus);
});
it('should render remove button correctly', function() {
var $el = render(),
removeButton = $el.find('.actions-list .action-remove a.remove-video-button');
expect(removeButton.data('tooltip')).toEqual('Remove this video');
expect(removeButton.find('.sr').text()).toEqual('Remove foo.mp4 video');
});
it('shows a confirmation popup when the remove button is clicked', function() {
var $el = render();
$el.find('a.remove-video-button').click();
expect($('.prompt.warning .title').text()).toEqual('Are you sure you want to remove this video from the list?'); // eslint-disable-line max-len
expect(
$('.prompt.warning .message').text()
).toEqual(
'Removing a video from this list does not affect course content. Any content that uses a previously uploaded video ID continues to display in the course.' // eslint-disable-line max-len
);
expect($('.prompt.warning .action-primary').text()).toEqual('Remove');
expect($('.prompt.warning .action-secondary').text()).toEqual('Cancel');
});
it('shows a notification when the remove button is clicked', function() {
var notificationSpy = ViewHelpers.createNotificationSpy(),
$el = render();
$el.find('a.remove-video-button').click();
$('.action-primary').click();
ViewHelpers.verifyNotificationShowing(notificationSpy, /Removing/);
});
});
}
);

48
cms/static/js/views/previous_video_upload.js
View File

@@ -1,13 +1,21 @@
define(
['gettext', 'js/utils/date_utils', 'js/views/baseview'],
function(gettext, DateUtils, BaseView) {
['underscore', 'gettext', 'js/utils/date_utils', 'js/views/baseview', 'common/js/components/views/feedback_prompt',
'common/js/components/views/feedback_notification', 'common/js/components/utils/view_utils',
'edx-ui-toolkit/js/utils/html-utils', 'text!templates/previous-video-upload.underscore'],
function(_, gettext, DateUtils, BaseView, PromptView, NotificationView, ViewUtils, HtmlUtils,
previousVideoUploadTemplate) {
'use strict';
var PreviousVideoUploadView = BaseView.extend({
tagName: 'tr',
initialize: function() {
this.template = this.loadTemplate('previous-video-upload');
events: {
'click .remove-video-button.action-button': 'removeVideo'
},
initialize: function(options) {
this.template = HtmlUtils.template(previousVideoUploadTemplate);
this.videoHandlerUrl = options.videoHandlerUrl;
},
renderDuration: function(seconds) {
@@ -27,10 +35,38 @@ define(
created: DateUtils.renderDate(this.model.get('created')),
status: this.model.get('status')
};
this.$el.html(
this.template(_.extend({}, this.model.attributes, renderedAttributes))
HtmlUtils.setHtml(
this.$el,
this.template(
_.extend({}, this.model.attributes, renderedAttributes)
)
);
return this;
},
removeVideo: function(event) {
var videoView = this;
event.preventDefault();
ViewUtils.confirmThenRunOperation(
gettext('Are you sure you want to remove this video from the list?'),
gettext('Removing a video from this list does not affect course content. Any content that uses a previously uploaded video ID continues to display in the course.'), // eslint-disable-line max-len
gettext('Remove'),
function() {
ViewUtils.runOperationShowingMessage(
gettext('Removing'),
function() {
return $.ajax({
url: videoView.videoHandlerUrl + '/' + videoView.model.get('edx_video_id'),
type: 'DELETE'
}).done(function() {
videoView.remove();
});
}
);
}
);
}
});

10
cms/static/js/views/previous_video_upload_list.js
View File

@@ -10,14 +10,18 @@ define(
this.template = this.loadTemplate('previous-video-upload-list');
this.encodingsDownloadUrl = options.encodingsDownloadUrl;
this.itemViews = this.collection.map(function(model) {
return new PreviousVideoUploadView({model: model});
return new PreviousVideoUploadView({
videoHandlerUrl: options.videoHandlerUrl,
model: model
});
});
},
render: function() {
var $el = this.$el;
var $el = this.$el,
$tabBody;
$el.html(this.template({encodingsDownloadUrl: this.encodingsDownloadUrl}));
var $tabBody = $el.find('.js-table-body');
$tabBody = $el.find('.js-table-body');
_.each(this.itemViews, function(view) {
$tabBody.append(view.render().$el);
});

4
cms/static/sass/views/_video-upload.scss
View File

@@ -144,5 +144,9 @@
width: flex-grid(4, 9);
text-align: right;
}
.actions-list {
@extend %actions-list;
}
}
}