Merge pull request #932 from MITx/feature/cdodge/edit-section-info

Feature/cdodge/edit section info

cms/static/js/base.js

@@ -77,6 +77,15 @@ $(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);
+
+    // section date setting
+    $('.set-publish-date').bind('click', setSectionScheduleDate);
+    $('.edit-section-start-cancel').bind('click', cancelSetSectionScheduleDate);
+    $('.edit-section-start-save').bind('click', saveSetSectionScheduleDate);
 });
 
 function showImportSubmit(e) {
@@ -180,10 +189,7 @@ function onSectionReordered() {
     });
 }
 
-function getEdxTimeFromDateTimeInputs(date_id, time_id, format) {
-    var input_date = $('#'+date_id).val();
-    var input_time = $('#'+time_id).val();
-
+function getEdxTimeFromDateTimeVals(date_val, time_val, format) {
     var edxTimeStr = null;
 
     if (input_date != '') {
@@ -201,6 +207,13 @@ function getEdxTimeFromDateTimeInputs(date_id, time_id, format) {
     return edxTimeStr;
 }
 
+function getEdxTimeFromDateTimeInputs(date_id, time_id, format) {
+    var input_date = $('#'+date_id).val();
+    var input_time = $('#'+time_id).val();
+
+    return getEdxTimeFromDateTimeVals(input_date, input_time, format);
+}
+
 function saveSubsection(e) {
     e.preventDefault();
     
@@ -586,3 +599,77 @@ 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();        
+    });
+}
+
+function setSectionScheduleDate(e) {
+    e.preventDefault();
+    $(this).closest("h4").hide();
+    $(this).parent().siblings(".datepair").show();
+}
+
+function cancelSetSectionScheduleDate(e) {
+    e.preventDefault();
+    $(this).closest(".datepair").hide();
+    $(this).parent().siblings("h4").show();
+}
+
+function saveSetSectionScheduleDate(e) {
+    e.preventDefault();
+
+    input_date = $(this).siblings('input.date').val();
+    input_time = $(this).siblings('input.time').val();
+
+    start = getEdxTimeFromDateTimeVals(input_date, input_time);
+
+    id = $(this).closest("section.courseware-section").data("id");
+    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' : {'start' : start}, 'data': null, 'children' : null})
+    }).success(function()
+    {
+        alert('Your changes have been saved.');
+        location.reload();     
+    });
+}

cms/static/sass/_courseware.scss

@@ -45,7 +45,7 @@ input.courseware-unit-search-input {
 	}
 
 	header {
-		height: 47px;
+		height: 67px;
 
 		.item-details {
 			float: left;
@@ -80,7 +80,6 @@ input.courseware-unit-search-input {
 	}
 
 	h4 {
-		display: none;
 		font-size: 12px;
 		color: #878e9d;
 

cms/templates/overview.html

@@ -1,9 +1,23 @@
 <%inherit file="base.html" />
+<%!
+   from time import mktime
+   import dateutil.parser
+   import logging
+   from datetime import datetime
+%>
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">CMS Courseware Overview</%block>
 
+<%namespace name='static' file='static_content.html'/>
 <%namespace name="units" file="widgets/units.html" />
 
+<%block name="jsextra">
+<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
+<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
+<script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
+<script src="${static.url('js/vendor/date.js')}"></script>
+</%block>
+
 <%block name="header_extras">
   <script type="text/template" id="new-section-template">
     <section class="courseware-section branch new-section">
@@ -52,9 +66,32 @@
         <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="save-button edit-section-name-save">Save</a><a href="#" class="cancel-button edit-section-name-cancel">Cancel</a>
+                </div>
+              </h3>
+              <h4 class='section-published-date'>
+                <%
+                  start_date = datetime.fromtimestamp(mktime(section.start)) if section.start is not None else None
+                  start_date_str = start_date.strftime('%m/%d/%Y') if start_date is not None else ''
+                  start_time_str = start_date.strftime('%H:%M') if start_date is not None else ''
+                %>
+                %if start_date is None:
+                  <strong>Unscheduled:</strong> 
+                  <a href="#" class="set-publish-date">click here to set</a>
+                %else:
+                  <strong>${start_date_str} at ${start_time_str}</strong> <a href="#" class="set-publish-date">click here to edit</a>
+                %endif
+              </h4>
+              <div class="datepair" data-language="javascript" style="display: none">
+                <input type="text" name="start_date" value="${start_date_str}" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
+                <input type="text" name="start_time" value="${start_time_str}" placeholder="HH:MM" class="time" size='10' autocomplete="off"/> 
+                <a href="#" class="save-button edit-section-start-save">Save</a><a href="#" class="cancel-button edit-section-start-cancel">Cancel</a>
+              </div>
             </div>
             <div class="item-actions">
               <a href="#" class="delete-button delete-section-button"><span class="delete-icon"></span></a>