MDL-74610 quiz: multiple grades - update slot grade items

mod/quiz/amd/src/edit_multiple_grades.js

@@ -74,6 +74,22 @@ const deleteGradeItem = (quizId, gradeItemId) => fetchMany([{
     }
 }])[0];
 
+/**
+ * Call the Ajax service to update the quiz grade item used by a slot.
+ *
+ * @param {Number} quizId
+ * @param {Number} slotId
+ * @param {Number|null} gradeItemId
+ * @return {Promise}
+ */
+const updateSlotGradeItem = (quizId, slotId, gradeItemId) => fetchMany([{
+    methodname: 'mod_quiz_update_slots',
+    args: {
+        quizid: quizId,
+        slots: [{id: slotId, quizgradeitemid: gradeItemId}],
+    }
+}])[0];
+
 /**
  * Handle click events on the delete icon.
  *
@@ -210,6 +226,33 @@ const handleGradeItemFocusOut = (e) => {
     stopEditingGadeItem(editableSpan);
 };
 
+/**
+ * Handle when the selected grade item for a slot is changed.
+ *
+ * @param {Event} e event.
+ */
+const handleSlotGradeItemChanged = (e) => {
+    const select = e.target.closest('select[data-slot-id]');
+    if (!select) {
+        return;
+    }
+
+    e.preventDefault();
+    const pending = new Pending('edit-slot-grade-item-updated');
+
+    const slotId = select.dataset.slotId;
+    const newGradeItemId = select.value ? select.value : null;
+    const tableCell = e.target.closest('td');
+    addIconToContainerRemoveOnCompletion(tableCell, pending);
+
+    const quizId = tableCell.closest('table').dataset.quizId;
+
+    updateSlotGradeItem(quizId, slotId, newGradeItemId)
+        .then(() => pending.resolve())
+        .then(() => window.location.reload())
+        .catch(Notification.exception);
+};
+
 /**
  * Handle clicks in the table the shows the grade items.
  *
@@ -263,6 +306,11 @@ const registerEventListeners = () => {
     }
 
     document.getElementById('mod_quiz-add_grade_item').addEventListener('click', handleAddGradeItemClick);
+
+    const slotTable = document.getElementById('mod_quiz-slot-list');
+    if (gradeItemTable) {
+        slotTable.addEventListener('change', handleSlotGradeItemChanged);
+    }
 };
 
 /**

mod/quiz/templates/edit_grading_page.mustache

@@ -105,7 +105,7 @@
 {{/hasslots}}
 
 {{#hasslots}}
-    <table class="table table-striped table-responsive">
+    <table class="generaltable table-responsive" id="mod_quiz-slot-list" data-quiz-id="{{quizid}}">
         <thead>
             <tr>
                 <th scope="col">{{#str}} qnumberbrief, quiz {{/str}}</th>
@@ -126,7 +126,7 @@
                         <td>{{displaynumber}}</td>
                         <th scope="row"><label for="grade-item-choice-{{id}}">{{{displayname}}}</label></th>
                         <td>
-                            <select id="grade-item-choice-{{id}}">
+                            <select id="grade-item-choice-{{id}}" class="form-control" data-slot-id="{{id}}">
                                 {{#choices}}
                                     <option value="{{id}}"{{#isselected}} selected="selected"{{/isselected}}>{{choice}}</option>
                                 {{/choices}}

mod/quiz/tests/behat/editing_multiple_grades.feature

@@ -89,3 +89,20 @@ Feature: Setup multiple grades for a quiz
     And I follow "Delete grade item Unused grade item"
     Then I should not see "Unused grade item"
     And I should see "This quiz does not yet have any grade items defined"
+
+  @javascript
+  Scenario: Grade item for a slot can be changed
+    Given the following "mod_quiz > grade items" exist:
+      | quiz   | name      |
+      | Quiz 1 | Intuition |
+    And quiz "Quiz 1" contains the following questions:
+      | question   | page |
+      | Question A | 1    |
+    When I am on the "Quiz 1" "mod_quiz > multiple grades setup" page logged in as teacher
+    And "Delete" "icon" should exist in the "Intuition" "table_row"
+    And I set the field "Question A" to "Intuition"
+    Then  "Delete" "icon" should not exist in the "Intuition" "table_row"
+    And the field "Question A" matches value "Intuition"
+    And I set the field "Question A" to "[none]"
+    And "Delete" "icon" should exist in the "Intuition" "table_row"
+    And the field "Question A" matches value "[none]"