Merge pull request #961 from MITx/feature/cale/cas-save-draft-tweaks

Feature/cale/cas save draft tweaks

cms/djangoapps/contentstore/views.py

@@ -574,11 +574,11 @@ def save_item(request):
 
     store = _modulestore(Location(item_location));
 
-    if request.POST['data']:
+    if request.POST['data'] is not None:
         data = request.POST['data']
         store.update_item(item_location, data)
         
-    if request.POST['children']:
+    if request.POST['children'] is not None:
         children = request.POST['children']
         store.update_children(item_location, children)
 
@@ -587,7 +587,7 @@ def save_item(request):
     # NOTE, that the postback is not the complete metadata, as there's system metadata which is
     # not presented to the end-user for editing. So let's fetch the original and
     # 'apply' the submitted metadata, so we don't end up deleting system metadata
-    if request.POST['metadata']:
+    if request.POST['metadata'] is not None:
         posted_metadata = request.POST['metadata']
         # fetch original
         existing_item = modulestore().get_item(item_location)

cms/static/coffee/src/models/module.coffee

@@ -1,6 +1,6 @@
 class CMS.Models.Module extends Backbone.Model
   url: '/save_item'
   defaults:
-    data: ''
-    children: ''
-    metadata: {}
+    data: null
+    children: null
+    metadata: null

cms/static/coffee/src/views/unit.coffee

@@ -5,11 +5,10 @@ class CMS.Views.UnitEdit extends Backbone.View
     'click .new-component-templates .new-component-template a': 'saveNewComponent'
     'click .new-component-templates .cancel-button': 'closeNewComponent'
     'click .new-component-button': 'showNewComponentForm'
-    'click #save-draft': 'saveDraft'
-    'click #delete-draft': 'deleteDraft'
-    'click #create-draft': 'createDraft'
-    'click #publish-draft': 'publishDraft'
-    'change #visibility': 'setVisibility'
+    'click .delete-draft': 'deleteDraft'
+    'click .create-draft': 'createDraft'
+    'click .publish-draft': 'publishDraft'
+    'change .visibility-select': 'setVisibility'
 
   initialize: =>
     @visibilityView = new CMS.Views.UnitEdit.Visibility(
@@ -17,11 +16,6 @@ class CMS.Views.UnitEdit extends Backbone.View
       model: @model
     )
 
-    @saveView = new CMS.Views.UnitEdit.SaveDraftButton(
-      el: @$('#save-draft')
-      model: @model
-    )
-
     @locationView = new CMS.Views.UnitEdit.LocationState(
       el: @$('.section-item.editing a')
       model: @model
@@ -41,7 +35,7 @@ class CMS.Views.UnitEdit extends Backbone.View
 
     @$('.components').sortable(
       handle: '.drag-handle'
-      update: (event, ui) => @model.set('children', @components())
+      update: (event, ui) => @model.save(children: @components())
       helper: 'clone'
       opacity: '0.5'
       placeholder: 'component-placeholder'
@@ -58,7 +52,6 @@ class CMS.Views.UnitEdit extends Backbone.View
                 id: $(element).data('id'),
             )
         )
-        update: (event, ui) => @model.set('children', @components())
     )
 
   # New component creation
@@ -124,7 +117,7 @@ class CMS.Views.UnitEdit extends Backbone.View
       id: $component.data('id')
     }, =>
       $component.remove()
-      @model.set('children', @components())
+      @model.save(children: @components())
     )
 
   deleteDraft: (event) ->
@@ -167,7 +160,7 @@ class CMS.Views.UnitEdit extends Backbone.View
     $.post(target_url, {
       id: @$el.data('id')
     }, =>
-      @model.set('state', @$('#visibility').val())
+      @model.set('state', @$('.visibility-select').val())
     )
 
 class CMS.Views.UnitEdit.NameEdit extends Backbone.View
@@ -187,7 +180,6 @@ class CMS.Views.UnitEdit.NameEdit extends Backbone.View
     metadata = $.extend({}, @model.get('metadata'))
     metadata.display_name = @$('.unit-display-name-input').val()
     $('.unit-location .editing .unit-name').html(metadata.display_name)
-    @model.set 'metadata', metadata
 
     inputField = this.$el.find('input')
 
@@ -204,7 +196,7 @@ class CMS.Views.UnitEdit.NameEdit extends Backbone.View
     if @timer
       clearTimeout @timer
     @timer = setTimeout( =>
-      @model.save()
+      @model.save(metadata: metadata)
       @timer = null
       @$spinner.delay(500).fadeOut(150)
     , 500)
@@ -223,18 +215,3 @@ class CMS.Views.UnitEdit.Visibility extends Backbone.View
 
   render: =>
     @$el.val(@model.get('state'))
-
-class CMS.Views.UnitEdit.SaveDraftButton extends Backbone.View
-  initialize: =>
-    @model.on('change:children', @enable)
-    @model.on('change:metadata', @enable)
-    @model.on('sync', @disable)
-
-    @disable()
-  
-  disable: =>
-    @$el.addClass('disabled')
-
-  enable: =>
-    @$el.removeClass('disabled')
-    @model.save()

cms/static/js/base.js

@@ -33,7 +33,6 @@ $(document).ready(function() {
 
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
-    $('.save-subsection').bind('click', saveSubsection);
 
     // autosave when a field is updated on the subsection page
     $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
@@ -169,7 +168,7 @@ function savePolicyMetadata(e) {
     e.preventDefault();
 
     var $policyElement = $(this).parents('.policy-list-element');
-    $('.save-subsection').click();
+    saveSubsection()
     $policyElement.removeClass('new-policy-list-element');
     $policyElement.find('.policy-list-name').attr('disabled', 'disabled');
     $policyElement.removeClass('editing');
@@ -202,7 +201,7 @@ function removePolicyMetadata(e) {
     } else {
         _parent_el.appendTo("#policy-to-delete");
     }
-    $('.save-subsection').click();
+    saveSubsection()
 }
 
 
@@ -299,7 +298,7 @@ function checkForNewValue(e) {
 
         this.saveTimer = setTimeout(function() {
             $changedInput = $(e.target);
-            $('.save-subsection').click();
+            saveSubsection()
             this.saveTimer = null;
         }, 500);
     }
@@ -312,14 +311,12 @@ function autosaveInput(e) {
 
     this.saveTimer = setTimeout(function() {        
         $changedInput = $(e.target);
-        $('.save-subsection').click();
+        saveSubsection()
         this.saveTimer = null;
     }, 500);
 }
 
-function saveSubsection(e) {
-    e.preventDefault();
-
+function saveSubsection() {
     if($changedInput && !$changedInput.hasClass('no-spinner')) {
         $spinner.css({
             'position': 'absolute',
@@ -331,7 +328,7 @@ function saveSubsection(e) {
         $spinner.show();
     }
     
-    var id = $(this).data('id');
+    var id = $('.subsection-body').data('id');
 
     // pull all 'normalized' metadata editable fields on page
     var metadata_fields = $('input[data-metadata-name]');

cms/static/sass/_unit.scss

@@ -321,16 +321,15 @@
     @include orange-button;
   }
 
-  .save-button {
+  .delete-button {
     @include blue-button;
-    display: none;
   }
 
-  #delete-draft {
+  .delete-draft {
     display: inline-block;
   }
 
-  .save-button,
+  .delete-button,
   .preview-button,
   .publish-button,
   .view-button {
@@ -447,11 +446,10 @@
 }
 
 .edit-state-public {
-  #save-draft,
-  #delete-draft,
+  .delete-draft,
   .component-actions,
   .new-component-item,
-  #published-alert,
+  .editing-draft-alert,
   .publish-draft-message,
   .preview-button {
     display: none;
@@ -467,10 +465,10 @@
 }
 
 .edit-state-private {
-  #delete-draft,
-  #publish-draft,
-  #published-alert,
-  #create-draft,
+  .delete-draft,
+  .publish-draft,
+  .editing-draft-alert,
+  .create-draft,
   .view-button {
     display: none;
   }

cms/templates/edit_subsection.html

@@ -18,7 +18,7 @@
 <div class="main-wrapper">
   <div class="inner-wrapper">
     <div class="main-column">
-      <article class="subsection-body window">
+      <article class="subsection-body window" data-id="${subsection.location}">
         <div class="subsection-name-input">
           <label>Display Name:</label>
           <input type="text" value="${subsection.metadata['display_name']}" class="subsection-display-name-input" data-metadata-name="display_name"/>
@@ -37,7 +37,6 @@
               % for policy_name in policy_metadata.keys():
               <li class="policy-list-element">
                   <input type="text" class="policy-list-name" name="${policy_name}" value="${policy_name}" disabled size="15"/>:&nbsp;<input type="text" class="policy-list-value" name="${policy_metadata[policy_name]}" value="${policy_metadata[policy_name]}" size="40"/>
-                  <a href="#" class="save-button">Save</a>
                   <a href="#" class="cancel-button">Cancel</a>
                   <a href="#" class="delete-icon remove-policy-data"></a>
               </li>
@@ -101,7 +100,6 @@
       </div>
     </div>
     <div class="row unit-actions">
-      <a href="#" class="save-button save-subsection" data-id="${subsection.location}">Save</a>
       <a href="${preview_link}" target="_blank" class="preview-button">Preview Drafts</a>
       %if can_view_live:
       <a href="${lms_link}" target="_blank" class="preview-button">View Live</a>

cms/templates/unit.html

@@ -17,7 +17,7 @@
 <%block name="content">
   <div class="main-wrapper edit-state-${unit_state}" data-id="${unit_location}">
     <div class="inner-wrapper">
-      <div class="alert" id="published-alert">
+      <div class="alert editing-draft-alert">
         <p class="alert-message"><strong>You are editing a draft.</strong>
         % if published_date:
         This unit was originally published on ${published_date}.
@@ -75,21 +75,20 @@
           <div class="window-contents">
             <div class="row visibility">
               <label class="inline-label">Visibility:</label>
-              <select id='visibility'>
+              <select class='visibility-select'>
                 <option value="public">Public</option>
                 <option value="private">Private</option>
               </select>
             </div>
             <div class="row published-alert">
-              <p class="edit-draft-message">This unit has been published. To make changes, you must <a href="#" id="create-draft">edit a draft</a>.</p>
-              <p class="publish-draft-message">This is a draft of the published unit. To update the live version, you must <a href="#" id="publish-draft">replace it with this draft</a>.</p>
+              <p class="edit-draft-message">This unit has been published. To make changes, you must <a href="#" class="create-draft">edit a draft</a>.</p>
+              <p class="publish-draft-message">This is a draft of the published unit. To update the live version, you must <a href="#" class="publish-draft">replace it with this draft</a>.</p>
             </div>            
             <div class="row status">
               <p>This unit is scheduled to be released to <strong>students</strong> on <strong>${release_date}</strong> with the subsection <a href="${reverse('edit_subsection', kwargs={'location': subsection.location})}">"${subsection.display_name}"</a></p>
             </div>
             <div class="row unit-actions">
-              <a id="save-draft" href="#" class="save-button">Save Draft</a>
-              <a id="delete-draft" href="#" class="save-button">Delete Draft</a>
+              <a href="#" class="delete-draft delete-button">Delete Draft</a>
               <a href="${draft_preview_link}" target="_blank" class="preview-button">Preview</a>
               <a href="${published_preview_link}" target="_blank" class="view-button">View Live</a>
             </div>