Skip to content

E
edx-platform
Commit bdf8a55a by Calen Pennington
Options

Merge pull request #852 from MITx/feature/cdodge/cas-crud-section-subsection 

Add basic section/subsection CRUD on the overview page
parents c8d267fb 7d235247
Showing with 154 additions and 16 deletions
cms/djangoapps/contentstore/views.py
......@@ -142,6 +142,9 @@ def course_index(request, org, course, name):
return render_to_response('overview.html', {
'sections': sections,
'parent_location': course.location,
'new_section_template': Location('i4x', 'edx', 'templates', 'sequential', 'Empty'),
'new_subsection_template': Location('i4x', 'edx', 'templates', 'sequential', 'Empty'), # for now they are the same, but the could be different at some point...
'upload_asset_callback_url': upload_asset_callback_url,
'create_new_unit_template': Location('i4x', 'edx', 'templates', 'vertical', 'Empty')
})
......
cms/static/js/base.js
......@@ -35,13 +35,18 @@ $(document).ready(function() {
// expand/collapse methods for optional date setters
$('.set-date').bind('click', showDateSetter);
$('.remove-date').bind('click', removeDateSetter);
// add new/delete section
$('.new-courseware-section-button').bind('click', addNewSection);
$('.delete-section-button').bind('click', deleteSection);
// add new/delete subsection
$('.new-subsection-item').bind('click', addNewSubsection);
$('.delete-subsection-button').bind('click', deleteSubsection);
// add/remove policy metadata button click handlers
$('.add-policy-data').bind('click', addPolicyMetadata);
$('.remove-policy-data').bind('click', removePolicyMetadata);
$('.sync-date').bind('click', syncReleaseDate);
});
function syncReleaseDate(e) {
......@@ -166,6 +171,7 @@ function saveSubsection(e) {
});
}
function createNewUnit(e) {
e.preventDefault();
......@@ -185,18 +191,30 @@ function createNewUnit(e) {
function deleteUnit(e) {
e.preventDefault();
_deleteItem($(this).parents('li.leaf'));
}
function deleteSubsection(e) {
e.preventDefault();
_deleteItem($(this).parents('li.branch'));
}
if(!confirm('Are you sure you wish to delete this item. It cannot be reversed!'))
return;
function deleteSection(e) {
e.preventDefault();
_deleteItem($(this).parents('section.branch'));
}
var _li_el = $(this).parents('li.leaf');
var id = _li_el.data('id');
function _deleteItem($el) {
if(!confirm('Are you sure you wish to delete this item. It cannot be reversed!'))
return;
var id = $el.data('id');
$.post('/delete_item',
{'id': id, 'delete_children' : true},
function(data) {
_li_el.remove();
});
{'id': id, 'delete_children' : true},
function(data) {
$el.remove();
});
}
function showUploadModal(e) {
......@@ -328,3 +346,82 @@ function hideToastMessage(e) {
e.preventDefault();
$(this).closest('.toast-notification').remove();
}
function addNewSection(e) {
e.preventDefault();
var $newSection = $($('#new-section-template').html());
$('.new-courseware-section-button').after($newSection);
$newSection.find('.new-section-name').focus().select();
$newSection.find('.new-section-name-save').bind('click', saveNewSection);
$newSection.find('.new-section-name-cancel').bind('click', cancelNewSection);
}
function saveNewSection(e) {
e.preventDefault();
parent = $(this).data('parent');
template = $(this).data('template');
display_name = $(this).prev('.new-section-name').val();
$.post('/clone_item',
{'parent_location' : parent,
'template' : template,
'display_name': display_name,
},
function(data) {
if (data.id != undefined)
location.reload();
});
}
function cancelNewSection(e) {
e.preventDefault();
$(this).parents('section.new-section').remove();
}
function addNewSubsection(e) {
e.preventDefault();
var $section = $(this).closest('.courseware-section');
var $newSubsection = $($('#new-subsection-template').html());
$section.find('.unit-list > ol').append($newSubsection);
$section.find('.new-subsection-name-input').focus().select();
var $saveButton = $newSubsection.find('.new-subsection-name-save');
$saveButton.bind('click', saveNewSubsection);
parent = $(this).parents("section.branch").data("id");
$saveButton.data('parent', parent)
$saveButton.data('template', $(this).data('template'));
$newSubsection.find('.new-subsection-name-cancel').bind('click', cancelNewSubsection);
}
function saveNewSubsection(e) {
e.preventDefault();
parent = $(this).data('parent');
template = $(this).data('template');
display_name = $(this).prev('.subsection-name').find('.new-subsection-name-input').val()
$.post('/clone_item',
{'parent_location' : parent,
'template' : template,
'display_name': display_name,
},
function(data) {
if (data.id != undefined) {
location.reload();
}
});
}
function cancelNewSubsection(e) {
e.preventDefault();
$(this).parents('li.branch').remove();
}
cms/templates/base.html
......@@ -13,6 +13,8 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="path_prefix" content="${MITX_ROOT_URL}">
<%block name="header_extras"></%block>
</head>
<body class="<%block name='bodyclass'></%block>">
......
cms/templates/overview.html
......@@ -4,6 +4,42 @@
<%namespace name="units" file="widgets/units.html" />
<%block name="header_extras">
<script type="text/template" id="new-section-template">
<section class="courseware-section branch new-section">
<header>
<a href="#" class="expand-collapse-icon collapse"></a>
<div class="item-details">
<h3 class="section-name"><input type="text" value="New Section Name" class="new-section-name" /><a href="#" class="new-section-name-save" data-parent="${parent_location}" data-template="${new_section_template}">Save</a><a href="#" class="new-section-name-cancel">Cancel</a></h3>
</div>
</header>
</section>
</script>
<script type="text/template" id="new-subsection-template">
<li class="branch collapsed">
<div class="section-item editing">
<div>
<span class="folder-icon"></span>
<span class="subsection-name">
<input type="text" value="New Subsection" class="new-subsection-name-input" />
</span>
<a href="#" class="new-subsection-name-save">Save</a>
<a href="#" class="new-subsection-name-cancel">Cancel</a>
</div>
</div>
<ol>
<li>
<a href="unit.html" class="new-unit-item">
<span class="new-unit-icon"></span>New Unit
</a>
</li>
</ol>
</li>
</script>
</%block>
<%block name="content">
<div class="main-wrapper">
......@@ -13,9 +49,9 @@
<input type="text" class="courseware-unit-search-input search wip-box" placeholder="search units" />
</div>
<article class="courseware-overview">
<a href="#" class="new-courseware-section-button wip-box"><span class="plus-icon"></span> New Section</a>
<a href="#" class="new-courseware-section-button"><span class="plus-icon"></span> New Section</a>
% for section in sections:
<section class="courseware-section branch">
<section class="courseware-section branch" data-id="${section.location}">
<header>
<a href="#" class="expand-collapse-icon collapse"></a>
<div class="item-details">
......@@ -23,19 +59,19 @@
<h4><strong>Unscheduled:</strong> <a href="#">click here to set</a></h4>
</div>
<div class="item-actions">
<a href="#" class="edit-button wip"><span class="delete-icon"></span></a>
<a href="#" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<a href="#" class="drag-handle wip"></a>
</div>
</header>
<div class="unit-list">
<div class="list-header">
<a href="#" class="new-subsection-item wip-box">
<a href="#" class="new-subsection-item" data-template="${new_subsection_template}">
<span class="new-folder-icon"></span>New Subsection
</a>
</div>
<ol>
% for subsection in section.get_children():
<li class="branch collapsed">
<li class="branch collapsed" data-id="${subsection.location}">
<div class="section-item">
<div>
<a href="#" class="expand-collapse-icon expand"></a>
......@@ -45,7 +81,7 @@
</a>
</div>
<div class="item-actions">
<a href="#" class="delete-button wip"><span class="delete-icon"></span></a>
<a href="#" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>
<a href="#" class="drag-handle wip"></a>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment