work in progress: set start date

cms/static/js/base.js

@@ -77,6 +77,10 @@ $(document).ready(function() {
 
     $('.new-course-button').bind('click', addNewCourse);
 
+    // section name editing
+    $('.section-name').bind('click', editSectionName);
+    $('.edit-section-name-cancel').bind('click', cancelEditSectionName);
+    $('.edit-section-name-save').bind('click', saveEditSectionName);
 });
 
 function showImportSubmit(e) {
@@ -576,3 +580,40 @@ function cancelNewSubsection(e) {
     e.preventDefault();
     $(this).parents('li.branch').remove();
 }
+
+function editSectionName(e) {
+    e.preventDefault();
+    $(this).children('div.section-name-edit').show();
+    $(this).children('span.section-name-span').hide();   
+}
+
+function cancelEditSectionName(e) {
+    e.preventDefault();
+    $(this).parent().hide();
+    $(this).parent().siblings('span.section-name-span').show();
+    e.stopPropagation();
+}
+
+function saveEditSectionName(e) {
+    e.preventDefault();
+
+    id = $(this).closest("section.courseware-section").data("id");
+    display_name = $(this).prev('.edit-section-name').val();
+
+    var $_this = $(this);
+        // call into server to commit the new order
+    $.ajax({
+        url: "/save_item",
+        type: "POST",
+        dataType: "json",
+        contentType: "application/json",
+        data:JSON.stringify({ 'id' : id, 'metadata' : {'display_name' : display_name}, 'data': null, 'children' : null})
+    }).success(function()
+    {
+        alert('Your changes have been saved.');
+        $_this.parent().siblings('span.section-name-span').html(display_name);
+        $_this.parent().siblings('span.section-name-span').show();
+        $_this.parent().hide();
+        e.stopPropagation();        
+    });
+}

cms/templates/overview.html

@@ -52,9 +52,18 @@
         <section class="courseware-section branch" data-id="${section.location}">
           <header>
             <a href="#" class="expand-collapse-icon collapse"></a>
-            <div class="item-details">
-              <h3>${section.display_name}</h3>
-              <h4><strong>Unscheduled:</strong> <a href="#">click here to set</a></h4>
+            <div class="item-details" data-id="${section.location}">
+              <h3 class="section-name">
+                <span class="section-name-span">${section.display_name}</span>
+                <div class="section-name-edit" style="display:none">
+                  <input type="text" value="${section.display_name}" class="edit-section-name" autocomplete="off"/>
+                  <a href="#" class="edit-section-name-save">Save</a><a href="#" class="edit-section-name-cancel">Cancel</a>
+                </div>
+              </h3>
+              <h4>
+                <strong>Unscheduled:</strong> 
+                <a href="#" class="set-publish-date">click here to set</a>
+              </h4>
             </div>
             <div class="item-actions">
               <a href="#" class="delete-button delete-section-button"><span class="delete-icon"></span></a>