Merge pull request #536 from edx/sanchez/validation-alerts

Updating the alerts in the rubric authoring.

openassessment/templates/openassessmentblock/edit/oa_edit_rubric.html

@@ -15,6 +15,10 @@
             <h2 class="openassessment_alert_title">{% trans "Rubric Change Impacts Settings Section" %}</h2>
             <p class="openassessment_alert_message">{% trans "A change that you made to this assessment's rubric has an impact on some examples laid out in the settings tab. For more information, go to the Settings section and fix areas highlighted in red." %}</p>
         </div>
+        <a href="" rel="view" class="action openassessment_alert_close">
+            <i class="icon-remove-sign"></i>
+            <span class="label is--hidden">{% trans "close alert" %}</span>
+        </a>
     </div>
 
     <div id="openassessment_rubric_instructions">

openassessment/xblock/static/js/src/studio/oa_container_item.js

@@ -20,7 +20,7 @@ OpenAssessment.ItemUtilities = {
             }
             index++;
         }
-        return null;
+        return index.toString();
     }
 };
 

openassessment/xblock/static/js/src/studio/oa_edit_listeners.js

@@ -96,17 +96,17 @@ OpenAssessment.StudentTrainingListener.prototype = {
      */
     optionRemove: function(data) {
         var handler = this;
-        var changed = false;
+        var invalidated = false;
         $('.openassessment_training_example_criterion_option', this.element).each(function() {
             var criterionOption = this;
             if ($(criterionOption).data('criterion') === data.criterionName) {
-                if ($(criterionOption).val() == data.name) {
+                if ($(criterionOption).val() === data.name.toString()) {
                     $(criterionOption).val("");
                     $(criterionOption).addClass("openassessment_highlighted_field");
                     $(criterionOption).click(function() {
                         $(criterionOption).removeClass("openassessment_highlighted_field");
                     });
-                    changed = true;
+                    invalidated = true;
                 }
 
                 $('option[value="' + data.name + '"]', criterionOption).remove();
@@ -115,12 +115,12 @@ OpenAssessment.StudentTrainingListener.prototype = {
                 // the criterion entirely.
                 if ($("option", criterionOption).length == 1) {
                     handler.removeAllOptions(data);
-                    return;
+                    invalidated = false;
                 }
             }
         });
 
-        if (changed) {
+        if (invalidated) {
             this.displayAlertMsg(
                 gettext("Option Deletion Led to Invalidation"),
                 gettext("Because you deleted an option, some student training examples had to be reset.")

openassessment/xblock/static/js/src/studio/oa_edit_validation_alert.js

@@ -9,9 +9,15 @@ Returns:
     Openassessment.ValidationAlert
  */
 OpenAssessment.ValidationAlert = function (element) {
+    var alert = this;
     this.element = element;
     this.title = $(".openassessment_alert_title", this.element);
     this.message = $(".openassessment_alert_message", this.element);
+    $(".openassessment_alert_close", element).click(function(eventObject) {
+            eventObject.preventDefault();
+            alert.hide();
+        }
+    );
 };
 
 OpenAssessment.ValidationAlert.prototype = {

openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -439,6 +439,7 @@
       padding: 10px;
       position: absolute;
       z-index: 10;
+      width: 100%;
 
       .openassessment_alert_icon:before{
         font-family: FontAwesome;
@@ -463,6 +464,28 @@
           color: darkgray;
         }
       }
+
+      // with cancel
+      .openassessment_alert_close {
+        display: inline-block;
+        position: absolute;
+        top: 0px;
+        right: 10px;
+        color: #e9e9e9;
+        background: #323232;
+        text-align: center;
+        padding: 2px 5px;
+
+        [class^="icon"] {
+          width: auto;
+          margin: 0;
+          padding: 2px;
+        }
+
+        &:hover {
+          color: $blue;
+        }
+      }
     }
 
     .wrapper-comp-settings{