Enable creation of new components

cms/djangoapps/contentstore/views.py

@@ -145,15 +145,7 @@ def edit_unit(request, location):
     else:
         lms_link = None
 
-<<<<<<< HEAD
-    
-    return render_to_response('unit.html', {
-        'module': item,
-        'editable_preview': get_module_previews(request, item)[0],
-    })
-=======
     component_templates = defaultdict(list)
->>>>>>> Separate unit page from vertical implementation for editing
 
     templates = modulestore().get_items(Location('i4x', 'edx', 'templates'))
     for template in templates:
@@ -170,7 +162,7 @@ def edit_unit(request, location):
     ]
 
     return render_to_response('unit.html', {
-        'unit_name': item.display_name,
+        'unit': item,
         'components': components,
         'component_templates': component_templates,
     })
@@ -432,7 +424,7 @@ def clone_item(request):
     modulestore().update_metadata(new_item.location.url(), new_item.own_metadata)
     modulestore().update_children(parent_location, parent.definition.get('children', []) + [new_item.location.url()])
 
-    return HttpResponse()
+    return preview_component(request, new_item.location)
 
 '''
 cdodge: this method allows for POST uploading of files into the course asset library, which will
@@ -523,4 +515,3 @@ def upload_asset(request, org, course, coursename):
             logging.error('Failed to generate thumbnail for {0}. Continuing...'.format(name))
 
     return HttpResponse('Upload completed')
-

cms/static/coffee/src/views/module_edit.coffee

@@ -32,12 +32,23 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
     return _metadata
 
-  render: ->
-    @$el.load("/preview_component/#{@model.id}", =>
+  cloneTemplate: (template, name) ->
+    @$el.load("/clone_item", {
+      parent_location: @$el.parent().data('id')
+      template: template
+      name: name
+    }, =>
       @loadModules()
       @delegateEvents()
     )
 
+  render: ->
+    if @model.id
+      @$el.load("/preview_component/#{@model.id}", =>
+        @loadModules()
+        @delegateEvents()
+      )
+
   clickSaveButton: (event) =>
     event.preventDefault()
     data = @module.save()

cms/static/js/base.js

@@ -10,7 +10,8 @@ $(document).ready(function() {
     $modal = $('.history-modal');
     $modalCover = $('.modal-cover');
     $newComponentItem = $('.new-component-item');
-    $newComponentChooser = $('.new-component');
+    $newComponentTypePicker = $('.new-component');
+    $newComponentTemplatePickers = $('.new-component-templates');
     $newComponentButton = $('.new-component-button');
 
     $('li.component').each(function(idx, element) {
@@ -26,7 +27,10 @@ $(document).ready(function() {
     $('.visibility-options').bind('change', setVisibility);
 
     $newComponentButton.bind('click', showNewComponentForm);
-    $newComponentChooser.find('.new-component-type a').bind('click', showComponentTemplates);
+    $newComponentTypePicker.find('.new-component-type a').bind('click', showComponentTemplates);
+    $newComponentTypePicker.find('.cancel-button').bind('click', closeNewComponent);
+    $newComponentTemplatePickers.find('.new-component-template a').bind('click', saveNewComponent);
+    $newComponentTemplatePickers.find('.cancel-button').bind('click', closeNewComponent);
 
     $('.unit-history ol a').bind('click', showHistoryModal);
     $modal.bind('click', hideHistoryModal);
@@ -58,21 +62,22 @@ function showNewComponentForm(e) {
     e.preventDefault();
     $newComponentItem.addClass('adding');
     $(this).slideUp(150);
-    $newComponentChooser.slideDown(150);
+    $newComponentTypePicker.slideDown(250);
 }
 
 function showComponentTemplates(e) {
     e.preventDefault();
 
     var type = $(this).data('type');
-    $newComponentChooser.slideUp(250);
+    $newComponentTypePicker.slideUp(250);
     $('.new-component-'+type).slideDown(250);
 }
 
-function cancelNewComponent(e) {
+function closeNewComponent(e) {
     e.preventDefault();
 
-    $newComponentStep2.slideUp(250);
+    $newComponentTypePicker.slideUp(250);
+    $newComponentTemplatePickers.slideUp(250);
     $newComponentButton.slideDown(250);
     $newComponentItem.removeClass('adding');
     $newComponentItem.find('.rendered-component').remove();
@@ -81,22 +86,15 @@ function cancelNewComponent(e) {
 function saveNewComponent(e) {
     e.preventDefault();
 
-    var $newComponent = $newComponentItem.clone();
-    $newComponent.removeClass('adding').removeClass('new-component-item');
-    $newComponent.find('.new-component-step-2').removeClass('new-component-step-2').addClass('component-editor');
-    setTimeout(function() {
-        $newComponent.find('.component-editor').slideUp(250);
-    }, 10);  
-    $newComponent.append('<div class="component-actions"><a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a><a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>  </div><a href="#" class="drag-handle"></a>');
-    $newComponent.find('.new-component-step-1').remove();
-    $newComponent.find('.new-component-button').remove();
-
-    $newComponentStep2.slideUp(250);
-    $newComponentButton.slideDown(250);
-    $newComponentItem.removeClass('adding');
-    $newComponentItem.find('.rendered-component').remove();
+    editor = new CMS.Views.ModuleEdit({
+        model: new CMS.Models.Module()
+    })
+
+    $('.components').append(editor.$el)
+
+    editor.cloneTemplate($(this).data('location'))
 
-    $newComponentItem.before($newComponent);
+    closeNewComponent(e);
 }
 
 function showHistoryModal(e) {

cms/templates/unit.html

@@ -9,10 +9,10 @@
           <ul>
             <li><a href="#">Week 2</a></li>
             <li><a href="#">Linearity and Superposition</a></li>
-            <li><span class="current-page">${unit_name}</span></li>
+            <li><span class="current-page">${unit.display_name}</span></li>
           </ul>
         </nav>
-        <ol class="components">
+        <ol class="components" data-id="${unit.location.url()}">
           % for id in components:
           <li class="component" data-id="${id}"/>
           % endfor
@@ -56,7 +56,7 @@
         <div class="unit-properties window">
           <h4>Properties</h4>
           <div class="window-contents">
-            <div class="row"><label>Display Name:</label><input type="text" value="${unit_name}" /></div>
+            <div class="row"><label>Display Name:</label><input type="text" value="${unit.display_name}" /></div>
             <div class="row">
               <label>State:</label>
               <div class="visibility-options">