From 23bef6112f3470d3e7b2825ab8d69f408f4cd71d Mon Sep 17 00:00:00 2001
From: Adrian Fish <adrian.r.fish@gmail.com>
Date: Thu, 23 Dec 2021 17:51:32 +0000
Subject: [PATCH] SAK-45987 Fix cancel behaviour with rubric evaluations
 (#10111)

https://sakaiproject.atlassian.net/browse/SAK-45987
---
 .../tool/panels/RubricGradePanel.html         |  3 +-
 .../tool/panels/RubricGradePanel.java         |  1 +
 .../webapp/scripts/gradebook-cancelrubric.js  |  5 +
 .../scripts/gradebook-savecancelrubric.js     | 11 +++
 .../webapp/scripts/gradebook-saverubric.js    |  5 -
 .../samigo-app/src/webapp/js/samigo-global.js | 21 ++++-
 .../jsf/evaluation/gradeStudentResult.jsp     |  2 +-
 .../webapp/jsf/evaluation/questionScore.jsp   |  4 +-
 .../main/frontend/js/grader/sakai-grader.js   |  9 ++
 .../frontend/js/rubrics/rubrics-element.js    |  3 +-
 .../js/rubrics/sakai-rubric-grading.js        | 92 +++++++++++++++++--
 .../main/frontend/js/sakai-portal-utils.js    |  3 +
 .../frontend/test/sakai-portal-utils.test.js  | 19 ++++
 13 files changed, 155 insertions(+), 23 deletions(-)
 create mode 100644 gradebookng/tool/src/webapp/scripts/gradebook-cancelrubric.js
 create mode 100644 gradebookng/tool/src/webapp/scripts/gradebook-savecancelrubric.js
 delete mode 100644 gradebookng/tool/src/webapp/scripts/gradebook-saverubric.js
 create mode 100644 webcomponents/tool/src/main/frontend/js/sakai-portal-utils.js
 create mode 100644 webcomponents/tool/src/main/frontend/test/sakai-portal-utils.test.js

diff --git a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/RubricGradePanel.html b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/RubricGradePanel.html
index fd8261bb8718..029f5cef33ca 100644
--- a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/RubricGradePanel.html
+++ b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/RubricGradePanel.html
@@ -7,13 +7,12 @@
 
         <form wicket:id="sakaiRubricGradingForm">
             <sakai-rubric-grading wicket:id="sakai-rubric-grading"></sakai-rubric-grading>
-
             <div>
                 <input type="submit" wicket:id="submit" wicket:message="value:button.saverubricgrading" />
                 <input type="submit" wicket:id="cancel" wicket:message="value:button.cancel" />
             </div>
         </form>
-        <script src="/gradebookng-tool/scripts/gradebook-saverubric.js"></script>
+        <script src="/gradebookng-tool/scripts/gradebook-savecancelrubric.js"></script>
 
     </wicket:panel>
 </body>
diff --git a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/RubricGradePanel.java b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/RubricGradePanel.java
index 3ec3f82a3d74..529dc8fe22bc 100644
--- a/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/RubricGradePanel.java
+++ b/gradebookng/tool/src/java/org/sakaiproject/gradebookng/tool/panels/RubricGradePanel.java
@@ -94,6 +94,7 @@ public void onSubmit(final AjaxRequestTarget target, final Form<?> form) {
                 RubricGradePanel.this.window.close(target);
             }
         };
+        cancel.setOutputMarkupId(true).setMarkupId("cancelrubric");
         cancel.setDefaultFormProcessing(false);
         form.add(cancel);
 
diff --git a/gradebookng/tool/src/webapp/scripts/gradebook-cancelrubric.js b/gradebookng/tool/src/webapp/scripts/gradebook-cancelrubric.js
new file mode 100644
index 000000000000..41c518030631
--- /dev/null
+++ b/gradebookng/tool/src/webapp/scripts/gradebook-cancelrubric.js
@@ -0,0 +1,5 @@
+document.getElementById("cancelrubric").addEventListener("click", e => {
+
+  const rubricGrading = document.getElementsByTagName("sakai-rubric-grading").item(0);
+  rubricGrading && rubricGrading.cancel();
+});
diff --git a/gradebookng/tool/src/webapp/scripts/gradebook-savecancelrubric.js b/gradebookng/tool/src/webapp/scripts/gradebook-savecancelrubric.js
new file mode 100644
index 000000000000..019ac9c14173
--- /dev/null
+++ b/gradebookng/tool/src/webapp/scripts/gradebook-savecancelrubric.js
@@ -0,0 +1,11 @@
+document.getElementById("saverubric").addEventListener("click", e => {
+
+  const rubricGrading = document.getElementsByTagName("sakai-rubric-grading").item(0);
+  rubricGrading && rubricGrading.release();
+});
+
+document.getElementById("cancelrubric").addEventListener("click", e => {
+
+  const rubricGrading = document.getElementsByTagName("sakai-rubric-grading").item(0);
+  rubricGrading && rubricGrading.cancel();
+});
diff --git a/gradebookng/tool/src/webapp/scripts/gradebook-saverubric.js b/gradebookng/tool/src/webapp/scripts/gradebook-saverubric.js
deleted file mode 100644
index c795af15e665..000000000000
--- a/gradebookng/tool/src/webapp/scripts/gradebook-saverubric.js
+++ /dev/null
@@ -1,5 +0,0 @@
-document.getElementById("saverubric").addEventListener("click", e => {
-
-  const rubricGrading = document.getElementsByTagName("sakai-rubric-grading").item(0);
-  rubricGrading && rubricGrading.release();
-});
diff --git a/samigo/samigo-app/src/webapp/js/samigo-global.js b/samigo/samigo-app/src/webapp/js/samigo-global.js
index ef03eaadb9e7..d478354d89c7 100644
--- a/samigo/samigo-app/src/webapp/js/samigo-global.js
+++ b/samigo/samigo-app/src/webapp/js/samigo-global.js
@@ -103,7 +103,7 @@ function returnToHostUrl(url) {
   }
 }
 
-function initRubricDialog(gradingId, saveText, cancelText, titleText) {
+function initRubricDialog(gradingId, doneText, cancelText, titleText) {
 
   var modalId = "modal" + gradingId;
   var previousScore =  $('.adjustedScore' + gradingId).val();
@@ -111,13 +111,18 @@ function initRubricDialog(gradingId, saveText, cancelText, titleText) {
     modal: true,
     buttons: [
       {
-        text: saveText,
-        click: function () { $(this).dialog("close"); }
+        text: doneText,
+        click: function () { 
+          $(this).dialog("close");
+        }
       },
       {
         text: cancelText,
         click: function () {
 
+          const rubric = this.querySelector(`sakai-rubric-grading`);
+          rubric.cancel();
+
           $(this).dialog("close");
           $('.adjustedScore' + gradingId).val(previousScore);
         }
@@ -162,6 +167,16 @@ $(function () {
   saveButton = document.getElementById("editTotalResults:save");
   saveButton && saveButton.addEventListener("click", save);
 
+  const cancel = e => {
+    [...document.getElementsByTagName("sakai-rubric-grading")].forEach(srb => srb.cancel());
+  };
+
+  let cancelButton = document.getElementById("editStudentResults:cancel");
+  cancelButton && cancelButton.addEventListener("click", cancel);
+
+  cancelButton = document.getElementById("editTotalResults:cancel");
+  cancelButton && cancelButton.addEventListener("click", cancel);
+
   if ( $("#selectIndexForm\\:selectTable").length ) {
     $("#selectIndexForm\\:selectTable").tablesorter({ 
       sortList: [[2,0]],
diff --git a/samigo/samigo-app/src/webapp/jsf/evaluation/gradeStudentResult.jsp b/samigo/samigo-app/src/webapp/jsf/evaluation/gradeStudentResult.jsp
index 76697995201b..40dcc9db936d 100755
--- a/samigo/samigo-app/src/webapp/jsf/evaluation/gradeStudentResult.jsp
+++ b/samigo/samigo-app/src/webapp/jsf/evaluation/gradeStudentResult.jsp
@@ -359,7 +359,7 @@ function toPoint(id)
       <f:actionListener
          type="org.sakaiproject.tool.assessment.ui.listener.evaluation.TotalScoreListener" />
    </h:commandButton>
-   <h:commandButton value="#{commonMessages.cancel_action}" action="totalScores" immediate="true">
+   <h:commandButton id="cancel" value="#{commonMessages.cancel_action}" action="totalScores" immediate="true">
       <f:actionListener type="org.sakaiproject.tool.assessment.ui.listener.evaluation.ResetTotalScoreListener" />
       <f:actionListener type="org.sakaiproject.tool.assessment.ui.listener.evaluation.TotalScoreListener" />
    </h:commandButton>
diff --git a/samigo/samigo-app/src/webapp/jsf/evaluation/questionScore.jsp b/samigo/samigo-app/src/webapp/jsf/evaluation/questionScore.jsp
index da3458a6eb62..d636b74f2be6 100755
--- a/samigo/samigo-app/src/webapp/jsf/evaluation/questionScore.jsp
+++ b/samigo/samigo-app/src/webapp/jsf/evaluation/questionScore.jsp
@@ -64,7 +64,7 @@ $Id$
   function initRubricDialogWrapper(gradingId) {
 
     initRubricDialog(gradingId
-      , <h:outputText value="'#{evaluationMessages.save_cont}'"/>
+      , <h:outputText value="'#{evaluationMessages.done}'"/>
       , <h:outputText value="'#{evaluationMessages.cancel}'"/>
       , <h:outputText value="'#{evaluationMessages.saverubricgrading}'"/>);
   }
@@ -1224,7 +1224,7 @@ $Id$
       <f:actionListener
          type="org.sakaiproject.tool.assessment.ui.listener.evaluation.QuestionScoreListener" />
    </h:commandButton>
-   <h:commandButton value="#{commonMessages.cancel_action}" action="totalScores" immediate="true"/>
+   <h:commandButton id="cancel" value="#{commonMessages.cancel_action}" action="totalScores" immediate="true"/>
 </p>
 </h:form>
 </div>
diff --git a/webcomponents/tool/src/main/frontend/js/grader/sakai-grader.js b/webcomponents/tool/src/main/frontend/js/grader/sakai-grader.js
index ed15d9751b48..c733b23ad2c5 100644
--- a/webcomponents/tool/src/main/frontend/js/grader/sakai-grader.js
+++ b/webcomponents/tool/src/main/frontend/js/grader/sakai-grader.js
@@ -369,6 +369,7 @@ export class SakaiGrader extends gradableDataMixin(SakaiElement) {
             <fa-icon size="1.5em" i-class="fas video" path-prefix="/webcomponents/assets" style="vertical-align: middle;"></fa-icon>
           </div>
           <button @click=${this.doneWithFeedbackDialog}>${this.assignmentsI18n["gen.don"]}</button>
+          <button @click=${this.cancelRubric}>${this.assignmentsI18n["gen.cancel"]}</button>
         </div>
         <div class="feedback-attachments-block grader-label">
           ${this.submission.feedbackAttachments ? html`
@@ -514,6 +515,14 @@ export class SakaiGrader extends gradableDataMixin(SakaiElement) {
     this.querySelector("#grader-rubric-link").focus();
   }
 
+  cancelRubric() {
+
+    const rubricGrading = document.getElementsByTagName("sakai-rubric-grading").item(0);
+    rubricGrading && rubricGrading.cancel();
+
+    this.doneWithRubricDialog();
+  }
+
   replaceWithEditor(id, width = 160, height = 60) {
 
     const editor = CKEDITOR.replace(id, {
diff --git a/webcomponents/tool/src/main/frontend/js/rubrics/rubrics-element.js b/webcomponents/tool/src/main/frontend/js/rubrics/rubrics-element.js
index 08772eeef07e..f61ced0830ec 100644
--- a/webcomponents/tool/src/main/frontend/js/rubrics/rubrics-element.js
+++ b/webcomponents/tool/src/main/frontend/js/rubrics/rubrics-element.js
@@ -1,4 +1,5 @@
 import {SakaiElement} from "../sakai-element.js";
+import { getUserLocale } from "../sakai-portal-utils.js";
 
 class RubricsElement extends SakaiElement {
 
@@ -6,7 +7,7 @@ class RubricsElement extends SakaiElement {
 
     super();
 
-    this.locale = (window.top?.portal?.locale || window.top?.sakai?.locale?.userLocale || "en-US").replace("_", "-");
+    this.locale = getUserLocale();
   }
 
   isUtilsAvailable() {
diff --git a/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-grading.js b/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-grading.js
index beb1c34f0eb7..9e3728e8f097 100644
--- a/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-grading.js
+++ b/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-grading.js
@@ -2,6 +2,7 @@ import { RubricsElement } from "./rubrics-element.js";
 import { html } from "../assets/lit-element/lit-element.js";
 import "./sakai-rubric-grading-comment.js";
 import { SakaiRubricsLanguage, tr } from "./sakai-rubrics-language.js";
+import { getUserId } from "../sakai-portal-utils.js";
 
 export class SakaiRubricGrading extends RubricsElement {
 
@@ -9,8 +10,6 @@ export class SakaiRubricGrading extends RubricsElement {
 
     super();
 
-    this.existingEvaluation = false;
-
     this.rubric = { title: "" };
     this.criteria = [];
     this.totalPoints = 0;
@@ -68,6 +67,18 @@ export class SakaiRubricGrading extends RubricsElement {
 
   get evaluatedItemId() { return this._evaluatedItemId; }
 
+  set evaluation(value) {
+
+    this._evaluation = value;
+    if (value.id && value.status !== "DRAFT") {
+      // Store the evaluation in case the grading gets cancelled.
+      sessionStorage.setItem(this.getStorageKey(), JSON.stringify(value));
+    }
+    this.requestUpdate();
+  }
+
+  get evaluation() { return this._evaluation; }
+
   set toolId(value) {
 
     this._toolId = value;
@@ -80,6 +91,10 @@ export class SakaiRubricGrading extends RubricsElement {
     return this.i18nLoaded;
   }
 
+  getStorageKey() {
+    return `rubric-evaluation-${this.evaluation.id}-${getUserId()}`;
+  }
+
   render() {
 
     return html`
@@ -285,7 +300,7 @@ export class SakaiRubricGrading extends RubricsElement {
     });
 
     const evaluation = {
-      evaluatorId: window.top.portal.user.id,
+      evaluatorId: getUserId(),
       evaluatedItemId: this.evaluatedItemId,
       evaluatedItemOwnerId: this.evaluatedItemOwnerId,
       evaluatedItemOwnerType: this.group ? "GROUP" : "USER",
@@ -299,9 +314,14 @@ export class SakaiRubricGrading extends RubricsElement {
       evaluation.metadata = this.evaluation.metadata;
     }
 
+    this.saveEvaluation(evaluation, status);
+  }
+
+  saveEvaluation(evaluation) {
+
     let url = "/rubrics-service/rest/evaluations";
     if (this.evaluation && this.evaluation.id) url += `/${this.evaluation.id}`;
-    fetch(url, {
+    return fetch(url, {
       body: JSON.stringify(evaluation),
       credentials: "same-origin",
       headers: {
@@ -310,7 +330,39 @@ export class SakaiRubricGrading extends RubricsElement {
         "Content-Type": "application/json"
       },
       method: this.evaluation && this.evaluation.id ? "PATCH" : "POST"
-    }).then(r => r.json()).then(r => this.evaluation = r);
+    })
+    .then(r => {
+
+      if (r.ok) {
+        return r.json();
+      }
+      throw new Error("Server error while saving rubric evaluation");
+    })
+    .then(data => this.evaluation = data)
+    .catch(error => console.error(error));
+  }
+
+  deleteEvaluation() {
+
+    if (!this?.evaluation?.id) return;
+
+    const url = `/rubrics-service/rest/evaluations/${this.evaluation.id}`;
+    fetch(url, {
+      credentials: "same-origin",
+      headers: { "Authorization": this.token, },
+      method: "DELETE"
+    })
+    .then(r => {
+
+      if (r.ok) {
+        this.criteria.forEach(c => c.ratings.forEach(rat => rat.selected = false));
+        this.evaluation = { criterionOutcomes: [] };
+        this.requestUpdate();
+      } else {
+        throw new Error("Server error while deleting evaluation");
+      }
+    })
+    .catch(error => console.error(error));
   }
 
   getOverriddenClass(ovrdvl, selected) {
@@ -385,6 +437,30 @@ export class SakaiRubricGrading extends RubricsElement {
     }
   }
 
+  cancel() {
+
+    if (this.evaluation.status !== "DRAFT") return;
+
+    // Get the evaluation from session storage. This should be the last non draft evaluation that
+    // the server originally sent before the user started setting ratings. Save it baack to the
+    // server.
+    const evaluation = JSON.parse(sessionStorage.getItem(this.getStorageKey()));
+    if (evaluation) {
+      sessionStorage.removeItem(this.getStorageKey());
+
+      // Save cached evaluation and reset the criteria ready for rendering
+      this.saveEvaluation(evaluation).then(() => {
+
+        // Unset any ratings
+        this.criteria.forEach(c => c.ratings.forEach(r => r.selected = false));
+        // And set the original ones
+        this.decorateCriteria();
+      });
+    } else {
+      this.deleteEvaluation();
+    }
+  }
+
   getAssociation() {
 
     if (!this.toolId || !this.entityId || !this.token || !this.evaluatedItemId) {
@@ -419,7 +495,6 @@ export class SakaiRubricGrading extends RubricsElement {
       }).done(data => {
 
         this.evaluation = data._embedded.evaluations[0] || { criterionOutcomes: [] };
-        this.existingEvaluation = true;
 
         this.rubric = rubric;
 
@@ -448,6 +523,5 @@ export class SakaiRubricGrading extends RubricsElement {
   }
 }
 
-if (!customElements.get("sakai-rubric-grading")) {
-  customElements.define("sakai-rubric-grading", SakaiRubricGrading);
-}
+const tagName = "sakai-rubric-grading";
+!customElements.get(tagName) && customElements.define(tagName, SakaiRubricGrading);
diff --git a/webcomponents/tool/src/main/frontend/js/sakai-portal-utils.js b/webcomponents/tool/src/main/frontend/js/sakai-portal-utils.js
new file mode 100644
index 000000000000..2e22cd5e6ae5
--- /dev/null
+++ b/webcomponents/tool/src/main/frontend/js/sakai-portal-utils.js
@@ -0,0 +1,3 @@
+export const getUserId = () => window.top?.portal?.user?.id || "";
+export const getUserLocale = () => (window.top?.portal?.locale
+              || window.top?.sakai?.locale?.userLocale || "en-US").replace("_", "-");
diff --git a/webcomponents/tool/src/main/frontend/test/sakai-portal-utils.test.js b/webcomponents/tool/src/main/frontend/test/sakai-portal-utils.test.js
new file mode 100644
index 000000000000..123cf09a382b
--- /dev/null
+++ b/webcomponents/tool/src/main/frontend/test/sakai-portal-utils.test.js
@@ -0,0 +1,19 @@
+import { assertEquals } from "https://deno.land/std@0.115.1/testing/asserts.ts";
+import { getUserId, getUserLocale } from "../js/sakai-portal-utils.js";
+
+Deno.test("getUserId", () => {
+
+  const userId = "xyz";
+
+  window.top = {
+    portal: {
+      user: { id: userId }
+    },
+  };
+
+  assertEquals(getUserId(), userId);
+
+  window.top = {};
+
+  assertEquals(getUserId(), "");
+});