handle ePortfolio name when too long

fixes CNVS-3277

testing steps:
- either create a new ePortfolio or edit
  the settings for one (i.e. left side nav
  when in a portfolio "ePortfolio Settings")
- in popup, enter text longer than 255 characters
  and try to submit
- should display that "Name is too long"
- when creating a new ePortfolio and when editing,
  verify that it requires a "Name" and gives
  a descriptive error message

Change-Id: Id7b6b495a3e47290ea5c37054865812ddc7f1dec
Reviewed-on: https://gerrit.instructure.com/23829
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Landon Wilkins <lwilkins@instructure.com>
Product-Review: Marc LeGendre <marc@instructure.com>
QA-Review: Marc LeGendre <marc@instructure.com>

Author: Mark Ericksen

app/models/eportfolio.rb

@@ -25,6 +25,7 @@ class Eportfolio < ActiveRecord::Base
   has_many :attachments, :as => :context
   belongs_to :user
   validates_presence_of :user_id
+  validates_length_of :name, :maximum => maximum_string_length, :allow_blank => true
 
   workflow do
     state :active

app/views/eportfolios/user_index.html.erb

@@ -1,3 +1,6 @@
+<%
+   js_bundle :eportfolio
+%>
 <% content_for :page_title do %>
   <%= t(:page_title, "My ePortfolios") %>
 <% end %>
@@ -41,28 +44,6 @@ DETAILS
     <%= render :partial => "eportfolio", :collection => @portfolios %>
   </ul>
 <% end %>
-<% js_block do %>
-<script>
-require([
-  'jquery' /* $ */
-], function($) {
-
-$(document).ready(function() {
-  $(".add_eportfolio_link").click(function(event) {
-    event.preventDefault();
-    $("#whats_an_eportfolio").slideToggle();
-    $("#add_eportfolio_form").slideToggle(function() {
-      $(this).find(":text:first").focus().select();
-    });
-  });
-  $("#add_eportfolio_form .cancel_button").click(function() {
-    $("#add_eportfolio_form").slideToggle();
-    $("#whats_an_eportfolio").slideToggle();
-  });
-});
-});
-</script>
-<% end %>
 <% form_for Eportfolio.new, :url => eportfolios_path, :html => {:style => "display: none;", :id => "add_eportfolio_form"} do |f| %>
 <h2><%= t('headers.add_eportfolio', "Make an ePortfolio") %></h2>
 <table class="formtable">

public/javascripts/eportfolio.js

@@ -44,6 +44,16 @@ define([
   'jqueryui/sortable' /* /\.sortable/ */
 ], function(I18n, $) {
 
+  var ePortfolioValidations = {
+    object_name: 'eportfolio',
+    property_validations: {
+      'name': function(value){
+        if (!value || value.trim() == '') { return I18n.t("errors.name_required", "Name is required")}
+        if (value && value.length > 255) { return I18n.t("errors.name_too_long", "Name is too long")}
+      }
+    }
+  };
+
   function ePortfolioFormData() {
     var data = $("#edit_page_form").getFormData({
       object_name: "eportfolio_entry", 
@@ -81,19 +91,38 @@ define([
         title: I18n.t('eportfolio_settings', "ePortfolio Settings")
       }).fixDialogButtons();
     });
+    // Add ePortfolio related
+    $(".add_eportfolio_link").click(function(event) {
+      event.preventDefault();
+      $("#whats_an_eportfolio").slideToggle();
+      $("#add_eportfolio_form").slideToggle(function() {
+        $(this).find(":text:first").focus().select();
+      });
+    });
+    $("#add_eportfolio_form .cancel_button").click(function() {
+      $("#add_eportfolio_form").slideToggle();
+      $("#whats_an_eportfolio").slideToggle();
+    });
+    $('#add_eportfolio_form').submit(function(){
+      var $this = $(this);
+      var result = $this.validateForm(ePortfolioValidations);
+      if(!result) {
+        return false;
+      }
+    });
+    // Edit ePortfolio related
     $("#edit_eportfolio_form .cancel_button").click(function(event) {
       $("#edit_eportfolio_form").dialog('close');
     });
-    $("#edit_eportfolio_form").formSubmit({
-      object_name: 'eportfolio', 
+    $("#edit_eportfolio_form").formSubmit($.extend(ePortfolioValidations, {
       beforeSubmit: function(data) {
         $(this).loadingImage();
       },
       success: function(data) {
         $(this).loadingImage('remove');
         $(this).dialog('close');
       }
-    });
+    }));
     $(".edit_content_link").click(function(event) {
       event.preventDefault();
       $(".edit_content_link_holder").hide();