improve error handling for ePortfolio section editing

fixes CNVS-5727

testing steps:
- on an ePortfolio page, click "Organize Sections"
  to add a new section.
  - blank out the name and hit enter (nothing happens)
    you should now be able to set some valid text and
    save it. (previously it would not save valid text
    until refreshing the page)
  - set a name that is too long (> 255 chars) and
    verify a popup/alert message reports that the name
    is too long and the invalid entry is removed from
    the page
- editing an existing section
  - clearing the name and trying to save (nothing
    happens) then setting to something should now save
  - set a name that is too long (> 255 chars) and
    verify that an error message is displayed on the
    section name input with a meaningful error message

Change-Id: I04dfab3cd741c4b04c5f8b2990aee8216aa34d7f
Reviewed-on: https://gerrit.instructure.com/24164
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Jon Jensen <jon@instructure.com>
Product-Review: Marc LeGendre <marc@instructure.com>
QA-Review: Marc LeGendre <marc@instructure.com>

Author: Mark Ericksen

app/controllers/eportfolio_categories_controller.rb

@@ -49,6 +49,7 @@ def update
           format.html { redirect_to eportfolio_category_url(@portfolio, @category) }
           format.json { render :json => @category.to_json }
         else
+          format.json { render :json => @category.errors.to_json }
         end
       end
     end

app/models/eportfolio_category.rb

@@ -24,7 +24,8 @@ class EportfolioCategory < ActiveRecord::Base
   belongs_to :eportfolio
   before_save :infer_unique_slug
   validates_presence_of :eportfolio_id
-  
+  validates_length_of :name, :maximum => maximum_string_length, :allow_blank => true
+
   acts_as_list :scope => :eportfolio
 
   def infer_unique_slug

public/javascripts/eportfolio.js

@@ -542,7 +542,6 @@ define([
   function saveObject($obj, type) {
     var isSaving = $obj.data('event_pending');
     if(isSaving || $obj.length === 0) { return; }
-    $obj.data('event_pending', true);
     var method = "PUT";
     var url = $obj.find(".rename_" + type + "_url").attr('href');
     if($obj.attr('id') == type + '_new') {
@@ -567,6 +566,7 @@ define([
     if(method == "POST") {
       $obj.attr('id', type + '_saving');
     }
+    $obj.data('event_pending', true);
     $obj.addClass('event_pending');
     $.ajaxJSON(url, method, data, function(data) {
       $obj.removeClass('event_pending');
@@ -585,7 +585,27 @@ define([
       });
       $obj.data('event_pending', false);
       countObjects(type);
-    });
+    },
+    // error callback
+    function(data, xhr, textStatus, errorThrown){
+      $obj.removeClass('event_pending');
+      $obj.data('event_pending', false);
+      var name_message = I18n.t("errors.section_name_invalid", "Section name is not valid")
+      if (xhr['name'] && xhr['name'].length > 0 && xhr['name'][0]['message'] == 'too_long') {
+        name_message = I18n.t("errors.section_name_too_long", "Section name is too long");
+      }
+      if ($obj.hasClass('unsaved')) {
+        alert(name_message);
+        $obj.remove();
+      }
+      else {
+        // put back in "edit" mode
+        $obj.find('.edit_section_link').click();
+        $obj.find('#section_name').errorBox(name_message).css('z-index', 20)
+      }
+    },
+    // options
+    {skipDefaultError: true});
     return true;
   }
   function editObject($obj, type) {