gb2 - grade in comments box

fixes CNVS-4734

test plan:
* in gradebook 2
* change a grade in the gradebook cell
* click the submission comments dialog box for a submission
* for a graded submission: verify that it is displayed in the grading box
* for an ungraded submission: verify that the grading box is empty
* change the grade (for all grading types) and hit 'Update Grade'
* verify that the grade is updated in the cell
* verify that the assignment group grades are recalculated
* verify that all members of a group have their grades updated for group assignments
* verify that the set default grades dialog works correctly for all grading types

Change-Id: Id6d117c9f126136a358f975604e973fe1ad36bb1
Reviewed-on: https://gerrit.instructure.com/32960
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Anna Koalenz <akoalenz@instructure.com>
Reviewed-by: Mike Nomitch <mnomitch@instructure.com>
Product-Review: Liz Abinante <labinante@instructure.com>

app/coffeescripts/SubmissionDetailsDialog.coffee

@@ -11,6 +11,7 @@ define [
   'jqueryui/dialog'
   'jquery.instructure_misc_plugins'
   'vendor/jquery.scrollTo'
+  'vendor/jquery.ba-tinypubsub'
 ], (I18n, $, submissionDetailsDialog, {extractDataFor}) ->
 
   class SubmissionDetailsDialog
@@ -22,9 +23,12 @@ define [
 
       @url = @options.change_grade_url.replace(":assignment", @assignment.id).replace(":submission", @student.id)
       @submission = $.extend {}, @student["assignment_#{@assignment.id}"],
+        inputName: 'submission[posted_grade]'
         assignment: @assignment
         speedGraderUrl: speedGraderUrl
         loading: true
+        showPointsPossible: (@assignment.points_possible || @assignment.points_possible == '0') && @assignment.grading_type != "gpa_scale"
+      @submission["assignment_grading_type_is_#{@assignment.grading_type}"] = true
       @dialog = $('<div class="use-css-transitions-for-show-hide" style="padding:0;"/>')
       @dialog.html(submissionDetailsDialog(@submission))
         .dialog
@@ -32,9 +36,18 @@ define [
           width: 600
           resizable: false
           open: @scrollCommentsToBottom
+
         .delegate 'select', 'change', (event) =>
           @dialog.find('.submission_detail').each (index) ->
             $(this).showIf(index == event.currentTarget.selectedIndex)
+        .delegate '.submission_details_grade_form', 'submit', (event) =>
+          event.preventDefault()
+          $(event.currentTarget.form).disableWhileLoading $.ajaxJSON @url, 'PUT', $(event.currentTarget).getFormData(), (data) =>
+            @update(data)
+            $.publish 'submissions_updated', [@submission.all_submissions]
+            setTimeout =>
+              @dialog.dialog('close')
+            , 500
         .delegate '.submission_details_add_comment_form', 'submit', (event) =>
           event.preventDefault()
           $(event.currentTarget).disableWhileLoading $.ajaxJSON @url, 'PUT', $(event.currentTarget).getFormData(), (data) =>
@@ -48,6 +61,7 @@ define [
 
     open: =>
       @dialog.dialog('open')
+      $('.submission_details_dialog .assignment-name').focus()
 
     scrollCommentsToBottom: =>
       @dialog.find('.submission_details_comments').scrollTop(999999)

app/coffeescripts/gradebook2/Gradebook.coffee

@@ -715,6 +715,7 @@ define [
         .delegate '.gradebook-cell-comment', 'click.gradebook', (event) =>
           event.preventDefault()
           data = $(event.currentTarget).data()
+          $(@grid.getActiveCellNode()).removeClass('editable')
           SubmissionDetailsDialog.open @assignments[data.assignmentId], @student(data.userId.toString()), @options
         .delegate '.minimized',
           'mouseenter' : @hoverMinimizedCell,

app/coffeescripts/gradebook2/SetDefaultGradeDialog.coffee

@@ -25,6 +25,7 @@ define [
         assignment: @assignment
         showPointsPossible: (@assignment.points_possible || @assignment.points_possible == '0') && @assignment.grading_type != "gpa_scale"
         url: "/courses/#{@context_id}/gradebook/update_submission"
+        inputName: 'default_grade'
       templateLocals["assignment_grading_type_is_#{@assignment.grading_type}"] = true
       @$dialog = $(setDefaultGradeDialogTemplate(templateLocals))
       @$dialog.dialog(

app/stylesheets/jst/SubmissionDetailsDialog.sass

@@ -1,16 +1,15 @@
 .submission_details_dialog
   .more-details-link
-    float: right
     font-size: 1.2em
     line-height: 42px
   h1, .h1
-    margin: 20px 0 0 
+    margin: 20px 0 0
     padding: 0 12px
     font-size: 23px
   .submission-details
     padding: 10px
     h1, .h1
-      margin: 0 -10px 15px 
+      margin: 0 -10px 15px
       border-bottom: 1px solid #bbb
     h2, h2 select, .h2, .h2 select
       font-size: 15px
@@ -32,7 +31,7 @@
     padding: 0 12px
     position: relative
     background: #A3A3A3 url(/images/messages/messages-background.png) 0 0 repeat
-    
+
   .comment
     background: #fff
     clear: both
@@ -74,5 +73,4 @@
       display: inline
       font-weight: normal
   .btn
-    float: right
-    
+    float: right

app/views/jst/SubmissionDetailsDialog.handlebars

@@ -1,6 +1,11 @@
 <div class="submission_details_dialog">
   <h1 class="assignment-name">{{assignment.name}}</h1>
   <section class="submission-details">
+    <form class="submission_details_grade_form form-inline">
+      <strong><label for="{{inputName}}">{{#t 'grade_form_label'}}Grade:{{/t}}</label></strong>
+      {{> grading_box}}
+      <button style="float: right;" class="btn" type="submit">{{#t "update_grade"}}Update Grade{{/t}}</button>
+    </form>
     {{#if speedGraderUrl }}
       <a class="more-details-link" target="_blank" href="{{speedGraderUrl}}">{{#t "more_details_in_the_speedgrader"}}More details in the SpeedGrader{{/t}}</a>
     {{/if}}

app/views/jst/_grading_box.handlebars

@@ -1,23 +1,22 @@
 {{#if assignment_grading_type_is_points}}
-  <input name="default_grade" type="number" step="any" value="{{ submission.grade }}" class="grading_value grading_box" id="student_grading_{{assignment.id}} %>" style="text-align: center; width: 50px;"/>
+  <input name="{{inputName}}" type="number" step="any" value="{{ grade }}" class="grading_value grading_box" id="student_grading_{{assignment.id}}" style="text-align: center; width: 50px;"/>
 {{/if}}
 {{#if assignment_grading_type_is_percent}}
-  <span name="default_grade" class="grading_box" id="student_grading_{{assignment.id}}">
-    <input type="number" value="{{ submission.grade }}" class="grading_value" style="text-align: center; width: 50px;"/>
-    <span style="display: none;">%</span>
+  <span name="{{inputName}}" class="grading_box" id="student_grading_{{assignment.id}}">
+    <input name="{{inputName}}" type="text" name="grade" value="{{ grade }}" class="grading_value" style="text-align: center; width: 50px;"/>
   </span>
 {{/if}}
 {{#if assignment_grading_type_is_letter_grade}}
-  <input name="default_grade" type="text" value="{{ submission.score }}" class="grading_value grading_box score_value" id="student_grading_{{assignment.id}}" style="text-align: center; width: 50px;"/>
+  <input name="{{inputName}}" type="text" value="{{ grade }}" class="grading_value grading_box score_value" id="student_grading_{{assignment.id}}" style="text-align: center; width: 50px;"/>
 {{/if}}
 {{#if assignment_grading_type_is_gpa_scale}}
-  <input name="default_grade" type="text" value="{{ submission.score }}" class="grading_value grading_box score_value" id="student_grading_{{assignment.id}}" style="text-align: center; width: 50px;"/>
+  <input name="{{inputName}}" type="text" value="{{ grade }}" class="grading_value grading_box score_value" id="student_grading_{{assignment.id}}" style="text-align: center; width: 50px;"/>
 {{/if}}
 {{#if assignment_grading_type_is_pass_fail}}
-  <select name="default_grade" class="grading_value grading_box pass_fail" id="student_grading_<%= assignment.id %>">
+  <select name="{{inputName}}" class="grading_value grading_box pass_fail" id="student_grading_<%= assignment.id %>">
     <option value="">---</option>
-    <option value="complete">{{#t "#gradebooks.grades.complete"}}Complete{{/t}}</option>
-    <option value="incomplete">{{#t "#gradebooks.grades.incomplete"}}Incomplete{{/t}}</option>
+    <option value="complete" {{selectedIf grade "complete"}}>{{#t "#gradebooks.grades.complete"}}Complete{{/t}}</option>
+    <option value="incomplete" {{selectedIf grade "incomplete"}}>{{#t "#gradebooks.grades.incomplete"}}Incomplete{{/t}}</option>
   </select>
 {{/if}}
 {{#if showPointsPossible}}

spec/selenium/gradebook2_grade_edit_spec.rb

@@ -1,5 +1,5 @@
 require File.expand_path(File.dirname(__FILE__) + '/helpers/gradebook2_common')
-describe "edititing grades" do
+describe "editing grades" do
   include_examples "in-process server selenium tests"
 
   ASSIGNMENT_1_POINTS = "10"
@@ -25,6 +25,21 @@ describe "edititing grades" do
     data_setup
   end
 
+  context 'submission details dialog' do
+    it 'successfully grades a submission' do
+      get "/courses/#{@course.id}/gradebook2"
+      wait_for_ajaximations
+      open_comment_dialog(0, 0)
+      grade_box = f("form.submission_details_grade_form input.grading_value")
+      grade_box.attribute('value').should == ASSIGNMENT_1_POINTS
+      set_value(grade_box, 7)
+      f("form.submission_details_grade_form button").click
+      wait_for_ajax_requests
+      validate_cell_text(f('#gradebook_grid .container_1 .slick-row:nth-child(1) .slick-cell:nth-child(1)'), '7')
+      final_score_for_row(0).should == "80%"
+    end
+  end
+
   it "should update a graded quiz and have the points carry over to the quiz attempts page" do
     points = 50
     q = factory_with_protected_attributes(@course.quizzes, :title => "new quiz", :points_possible => points, :quiz_type => 'assignment', :workflow_state => 'available')