Make all edits on unit page happen immediately, and restore the delete draft button

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/sass/_unit.scss

@@ -269,7 +269,7 @@
       font-weight: 700;
     }
 
-    .save-button {
+    .ave-button {
       margin-top: 10px;
       margin: 15px 8px 0 0;
     }
@@ -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/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>