Merge pull request #130 from ZmagoD/zd_SCI_348

project overview - updating (or creating new) experiment details

app/assets/javascripts/experiments/dropdown_actions.js

@@ -1,9 +1,10 @@
-
 (function(){
 
   // Create ajax hook on given 'element', which should return modal with 'id' =>
   // show that modal
   function initializeModal(element, id){
+
+    // Initializev new experiment modal listner
     $(element)
     .on("ajax:beforeSend", function(){
       animateSpinner();
@@ -15,6 +16,7 @@
         keyboard: false,
       });
       validateMoveModal(id);
+      validateExperimentForm($(id));
     })
     .on("ajax:error", function() {
       animateSpinner(null, false);
@@ -59,11 +61,42 @@
         var msg = JSON.parse(error.responseText);
         renderFormError(e,
                         form.find("#experiment_project_id"),
-                        msg.message.toString());
+                        msg.message.toString(),
+                        true);
       })
-      .clearFormErrors();
     }
   }
+  // Setup front-end validations for experiment form
+  function validateExperimentForm(element){
+    if ( element ) {
+      var form = element.find("form");
+      form
+      .on('ajax:success' , function(){
+        animateSpinner(form, true);
+        location.reload();
+      })
+      .on('ajax:error', function(e, error){
+        var msg = JSON.parse(error.responseText);
+        if ( 'name' in msg ) {
+          renderFormError(e,
+                          element.find("#experiment-name"),
+                          msg.name.toString(),
+                          true);
+        } else if ( 'description' in msg ) {
+          renderFormError(e,
+                          element.find("#experiment-description"),
+                          msg.description.toString(),
+                          true);
+        } else {
+          renderFormError(e,
+                          element.find("#experiment-name"),
+                          error.statusText,
+                          true);
+        }
+      })
+    }
+  }
+
   // Initialize no description edit link
   function initEditNoDescription(){
     var modal = "#edit-experiment-modal-";

app/assets/javascripts/sitewide/form_errors.js

@@ -33,9 +33,21 @@ $.fn.renderFormErrors = function (modelName, errors, clear, ev) {
  * and, if present, mark and show the tab where the error occured and
  * focus/scroll to the error input, if it is the first one to be
  * specified or if errMsgs is undefined.
+ *
+ * @param {string} errAttributes Span element (error) attributes
+ * @param {boolean} clearErr Set clearErr to true if this is the only
+ * error that can happen/show.
  */
-var renderFormError = function (ev, input, errMsgs, errAttributes) {
+var renderFormError = function (ev, input, errMsgs, clearErr, errAttributes) {
+  clearErr = _.isUndefined(clearErr) ? false : clearErr;
+  errAttributes = _.isUndefined(errAttributes) ? "" : " " + errAttributes;
+  $form = $(input).closest("form");
+
   if (!_.isUndefined(errMsgs)) {
+    if (clearErr) {
+      $form.clearFormErrors();
+    }
+
     // Mark error form group
     $formGroup = $(input).closest(".form-group");
     if (!$formGroup.hasClass("has-error")) {
@@ -43,7 +55,6 @@ var renderFormError = function (ev, input, errMsgs, errAttributes) {
     }
 
     // Add error message/s
-    errAttributes = _.isUndefined(errAttributes) ? "" : " " + errAttributes;
     error_text = ($.makeArray(errMsgs).map(function (m) {
       return m.strToErrorFormat();
     })).join("<br />");
@@ -51,7 +62,6 @@ var renderFormError = function (ev, input, errMsgs, errAttributes) {
     $formGroup.append($errSpan);
   }
 
-  $form = $(input).closest("form");
   $tab = $(input).closest(".tab-pane");
   if ($tab.length) {
     // Mark error tab

app/assets/javascripts/sitewide/form_validators.js.erb

@@ -102,7 +102,7 @@ function filesPresentValidator(ev, fileInputs) {
   _.each(fileInputs, function(fileInput) {
     if (!fileInput.files[0]) {
       assetError = I18n.t("general.file.blank");
-      renderFormError(ev, fileInput, assetError, "data-error='file-missing'");
+      renderFormError(ev, fileInput, assetError, false, "data-error='file-missing'");
       filesPresentValid = false;
     }
   });
@@ -132,7 +132,7 @@ function filesSizeValidator(ev, fileInputs, fileTypeEnum) {
     var file = fileInput.files[0];
     var assetError = getFileTooBigError(file);
     if (assetError) {
-      renderFormError(ev, fileInput, assetError, "data-error='file-size'");
+      renderFormError(ev, fileInput, assetError, false, "data-error='file-size'");
       filesSizeValid = false;
     }
   });

app/controllers/experiments_controller.rb

@@ -39,10 +39,17 @@ class ExperimentsController < ApplicationController
     if @experiment.save
       flash[:success] = t('experiments.create.success_flash',
                           experiment: @experiment.name)
-      redirect_to canvas_experiment_path(@experiment)
+      respond_to do |format|
+        format.json do
+          render json: {}, status: :ok
+        end
+      end
     else
-      flash[:alert] = t('experiments.create.error_flash')
-      redirect_to :back
+      respond_to do |format|
+        format.json do
+          render json: @experiment.errors, status: :unprocessable_entity
+        end
+      end
     end
   end
 
@@ -69,10 +76,17 @@ class ExperimentsController < ApplicationController
       @experiment.touch(:workflowimg_updated_at)
       flash[:success] = t('experiments.update.success_flash',
                           experiment: @experiment.name)
-      redirect_to canvas_experiment_path(@experiment)
+      respond_to do |format|
+        format.json do
+          render json: {}, status: :ok
+        end
+      end
     else
-      flash[:alert] = t('experiments.update.error_flash')
-      redirect_to :back
+      respond_to do |format|
+        format.json do
+          render json: @experiment.errors, status: :unprocessable_entity
+        end
+      end
     end
   end
 

app/models/experiment.rb

@@ -21,7 +21,7 @@ class Experiment < ActiveRecord::Base
             presence: true,
             length: { minimum: 4, maximum: 50 },
             uniqueness: { scope: :project, case_sensitive: false }
-  validates :description, length: { maximum: 255 }
+  validates :description, length: { maximum: 50 }
   validates :project, presence: true
   validates :created_by, presence: true
   validates :last_modified_by, presence: true

app/views/experiments/_edit_modal.html.erb

@@ -4,7 +4,7 @@
      tabindex="-1"
      role="dialog"
      aria-labelledby="edit-experiment-modal-label">
-  <%= bootstrap_form_for [@project, @experiment] do |f| %>
+  <%= bootstrap_form_for [@project, @experiment], remote: true do |f| %>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">

app/views/experiments/_form.html.erb

@@ -1,7 +1,11 @@
 <div class="row">
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
     <div  class="form-group">
-      <%= form.text_field :name, label: t("experiments.new.name"), autofocus: true, placeholder: t("experiments.new.name_placeholder") %>
+      <%= form.text_field :name,
+                          label: t("experiments.new.name"),
+                          autofocus: true,
+                          placeholder: t("experiments.new.name_placeholder"),
+                          id: 'experiment-name'%>
     </div>
   </div>
 </div>
@@ -9,7 +13,9 @@
 <div class="row">
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
     <div class="form-group">
-      <%= form.text_area :description, label: t('experiments.new.description') %>
+      <%= form.text_area :description,
+                         label: t('experiments.new.description'),
+                         id: 'experiment-description' %>
     </div>
   </div>
 </div>

app/views/experiments/_new_modal.html.erb

@@ -1,6 +1,6 @@
 <!-- New experiment modal -->
 <div class="modal" id="new-experiment-modal" tabindex="-1" role="dialog" aria-labelledby="new-experiment-modal-label">
-  <%= bootstrap_form_for [@project, @experiment] do |f| %>
+  <%= bootstrap_form_for [@project, @experiment], remote: true do |f| %>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">