SAK-49368 Assignments > Self-report: Instructor unable to view the graded rubric (new grader)

assignment/api/src/resources/assignment_ca.properties

@@ -1267,7 +1267,7 @@ youmustrubric=Aquesta tasca \u00E9s autoavaluable. Pots autoavaluar la teva tasc
 youhavetorubric=Aquesta tasca \u00fas autoavaluable. Has d'autoavaluar la teva tasca amb la r\u00FAbrica abans d'enviar-la. Has de completar sencera la r\u00FAbrica per fer l'enviament.
 youhavetorubricone=Aquesta tasca \u00fas autoavaluable. Has d'autoavaluar la teva tasca amb la r\u00FAbrica abans d'enviar-la. Has de completar almenys un criteri de la r\u00FAbrica per fer l'enviament.
 studentrubric=Aquesta tasca \u00E9s autoavaluable. Pots revisar l'autoavaluaci\u00F3 de l'estudiant abans de puntuar la tasca.
-autoevaluation=Autoevaluaci\u00f3:
+autoevaluation=Autoavaluaci\u00f3:
 instructor_grading=Correcci\u00f3 del profesor:
 reviewrubric=Aquesta tasca \u00E9s autoavaluable. Pot revisar la autoavaluaci\u00F3 abans d'enviar-la.
 reviewrubricreport=Aquesta \u00E9s la teva autoavaluaci\u00F3.

assignment/tool/src/webapp/vm/assignment/chef_assignments_instructor_grading_submission.vm

@@ -396,7 +396,11 @@
 
             #if($!rubricSelfReport)
             <h1>$tlang.getString("autoevaluation")</h1>
+            <p class="help-block">
+                $tlang.getString("studentrubric")
+            </p>
             <sakai-rubric-student
+                site-id="$!assignment.Context"
                 entity-id="$assignment.Id"
                 tool-id="sakai.assignment.grades"
                 instructor="true"
@@ -409,14 +413,10 @@
                     evaluated-item-owner-id="$submitterId"
                 #end
             ></sakai-rubric-student>
-            <p class="help-block">
-                $tlang.getString("studentrubric")
-            </p>
             <hr class="itemSeparator" />
             #end
 
             <h1>$tlang.getString("instructor_grading")</h1>
-            <hr class="itemSeparator" />
             <sakai-rubric-grading
                 site-id="$!assignment.Context"
                 #if ($associatedToGbItem)

assignment/tool/src/webapp/vm/assignment/chef_assignments_instructor_grading_submission_withgrader.vm

@@ -23,6 +23,9 @@
         entity-id="$assignment.Id"
         evaluated-item-id="$submission.Id"
         #end
+        #if ($!rubricSelfReport)
+        rubric-self-report="$!rubricSelfReport"
+        #end
         #if ($enablePdfExport)
         enable-pdf-export
         #end

webcomponents/bundle/src/main/bundle/grader.properties

@@ -11,6 +11,9 @@ reviewer_comments=Reviewer Comments
 reviewer_attachments=Reviewer Attachments
 grading_rubric_tooltip=Grade this submission using a rubric
 rubric=Rubric
+autoevaluation=Autoevaluation:
+openAutoevaluation=Check Autoevaluation
+studentrubric=This is a self-report assignment. You can check the self-report of submitter before grading.
 add_feedback_tooltip=Write, or record, some feedback for this student
 written_feedback_label=Write some feedback
 recorded_feedback_label=Record some feedback

webcomponents/bundle/src/main/bundle/grader_ca.properties

@@ -3,6 +3,9 @@ no_submission=Sense enviaments
 no_submission_for=Sense lliuraments de
 grading_rubric_tooltip=Qualifica el lliurament usant una r\u00fabrica
 rubric=R\u00fabrica
+autoevaluation=Autoavaluaci\u00f3:
+openAutoevaluation=Revisa l'autoavaluaci\u00f3
+studentrubric=Aquesta tasca \u00E9s autoavaluable. Pots revisar l'autoavaluaci\u00F3 de l'estudiant abans de puntuar la tasca.
 add_feedback_tooltip=Escriu, o enregistra, comentaris per a aquest estudiant
 written_feedback_label=Escriu comentaris
 recorded_feedback_label=Enregistra comentaris

webcomponents/bundle/src/main/bundle/grader_es.properties

@@ -11,6 +11,9 @@ reviewer_comments=Comentarios de quien revisa
 reviewer_attachments=Adjuntos del revisor
 grading_rubric_tooltip=Evaluar este env\u00edo utilizando una r\u00fabrica
 rubric=R\u00fabrica
+autoevaluation=Autoevaluaci\u00f3n
+openAutoevaluation=Revisa la autoevaluaci\u00f3n
+studentrubric=Esta tarea es autoevaluable. Puedes revisar la autoevaluaci\u00f3n del estudiante antes de puntuar la tarea.
 add_feedback_tooltip=Escribir o grabar alg\u00fan tipo de comentario o feedback para este/esta estudiante
 written_feedback_label=Escribir comentarios/feedback
 recorded_feedback_label=Grabar comentarios/feedback

webcomponents/tool/src/main/frontend/packages/sakai-grader/src/SakaiGrader.js

@@ -14,6 +14,7 @@ export class SakaiGrader extends graderRenderingMixin(gradableDataMixin(SakaiEle
     gradableTitle: { attribute: "gradable-title", type: String },
     selectedGroup: { attribute: "selected-group", type: String },
     hasAssociatedRubric: { attribute: "has-associated-rubric", type: String },
+    rubricSelfReport: { attribute: "rubric-self-report", type: String },
     entityId: { attribute: "entity-id", type: String },
     toolId: { attribute: "tool-id", type: String },
     userListUrl: { attribute: "user-list-url", type: String },
@@ -39,6 +40,7 @@ export class SakaiGrader extends graderRenderingMixin(gradableDataMixin(SakaiEle
     _showingHistory: { state: true },
     _showOverrides: { state: true },
     _rubricShowing: { state: true },
+    _rubricStudentShowing: { state: true },
     _privateNotesEditorShowing: { state: true },
     _feedbackCommentEditorShowing: { state: true },
     _showingFullFeedbackComment: { state: true },
@@ -226,6 +228,7 @@ export class SakaiGrader extends graderRenderingMixin(gradableDataMixin(SakaiEle
       this._feedbackCommentRemoved = false;
       this._privateNotesRemoved = false;
       this._closeRubric();
+      this._closeStudentRubric();
 
       bootstrap.Collapse.getInstance(document.getElementById("feedback-block"))?.hide();
     });
@@ -277,6 +280,12 @@ export class SakaiGrader extends graderRenderingMixin(gradableDataMixin(SakaiEle
     });
   }
 
+  _closeStudentRubric() {
+
+    this._rubricStudentShowing = false;
+    this.querySelector("student-rubric-grading")?.displayGradingTab();
+  }
+
   _replaceWithEditor(id, changedCallback) {
 
     const editor = sakai.editor.launch(id, {
@@ -324,6 +333,10 @@ export class SakaiGrader extends graderRenderingMixin(gradableDataMixin(SakaiEle
     this._rubricShowing = !this._rubricShowing;
   }
 
+  _toggleStudentRubric() {
+    this._rubricStudentShowing = !this._rubricStudentShowing;
+  }
+
   _togglePrivateNotesEditor() {
 
     this._privateNotesEditorShowing = !this._privateNotesEditorShowing;
@@ -570,6 +583,7 @@ export class SakaiGrader extends graderRenderingMixin(gradableDataMixin(SakaiEle
     this._submission = this._nonEditedSubmission;
     this.querySelector("sakai-grader-file-picker").reset();
     this.querySelector("sakai-rubric-grading")?.cancel();
+    this.querySelector("sakai-rubric-student")?.cancel();
     return true;
   }
 

webcomponents/tool/src/main/frontend/packages/sakai-grader/src/sakai-grader-rendering-mixin.js

@@ -12,6 +12,7 @@ import "@sakai-ui/sakai-icon";
 import "@sakai-ui/sakai-rubrics/sakai-rubric-grading-button.js";
 import "@sakai-ui/sakai-rubrics/sakai-rubric-grading.js";
 import "@sakai-ui/sakai-rubrics/sakai-rubric-evaluation-remover.js";
+import "@sakai-ui/sakai-rubrics/sakai-rubric-student.js";
 import { GRADE_CHECKED, LETTER_GRADE_TYPE, SCORE_GRADE_TYPE, PASS_FAIL_GRADE_TYPE, CHECK_GRADE_TYPE } from "./sakai-grader-constants.js";
 
 export const graderRenderingMixin = Base => class extends Base {
@@ -409,7 +410,7 @@ export const graderRenderingMixin = Base => class extends Base {
             ${this._renderGradeInputs(this.i18n["gen.assign.gra"])}
             <!-- start hasAssociatedRubric -->
             ${this.hasAssociatedRubric === "true" ? html`
-              ${!this._rubricShowing ? html`
+              ${!this._rubricShowing && !this._rubricStudentShowing ? html`
                 <div class="d-flex align-items-center mt-3">
                   <div>
                     <button id="grader-rubric-button"
@@ -470,6 +471,41 @@ export const graderRenderingMixin = Base => class extends Base {
                 </button>
               </div>
             ` : nothing }
+            ${this.rubricSelfReport ? html`
+              ${!this._rubricShowing && !this._rubricStudentShowing ? html`
+                <div class="d-flex align-items-center mt-3">
+                  <div>
+                  <button id="student-rubric-button"
+                      class="btn btn-link"
+                      @click=${this._toggleStudentRubric}
+                      aria-label="${this.i18n.studentrubric}"
+                      title="${this.i18n.studentrubric}"
+                      aria-controls="student-rubric-block grader-controls-block">
+                    ${this.i18n.openAutoevaluation}
+                  </button>
+                  </div>
+                </div>
+              ` : nothing}
+              <div id="student-rubric-block" class="ms-2 ${this._rubricStudentShowing ? "d-block" : "d-none"}">
+                <h1>${this.i18n.autoevaluation}</h1>
+                <p>${this.i18n.studentrubric}</p>
+                <sakai-rubric-student
+                  site-id="${portal.siteId}"
+                  tool-id="${this.toolId}"
+                  entity-id="${this.entityId}"
+                  instructor="true"
+                  is-peer-or-self="true"
+                  evaluated-item-id="${this._submission.groupId || this._submission.firstSubmitterId}"
+                  evaluated-item-owner-id="${this._submission.groupId || this._submission.firstSubmitterId}">
+                </sakai-rubric-student>
+                <button class="btn btn-primary"
+                    title="${this.i18n.rubric_done_tooltip}"
+                    aria-label="${this.i18n.rubric_done_tooltip}"
+                    @click=${this._closeStudentRubric}>
+                  ${this.i18n["gen.don"]}
+                </button>
+              </div>
+            ` : nothing }
             <!-- end hasAssociatedRubric -->
 
             ${this._submission.groupId ? html`
@@ -490,7 +526,7 @@ export const graderRenderingMixin = Base => class extends Base {
             ` : nothing }
           </div>
 
-          <div id="grader-controls-block" class="${this._rubricShowing ? "d-none" : "d-block"}">
+          <div id="grader-controls-block" class="${this._rubricShowing || this._rubricStudentShowing ? "d-none" : "d-block"}">
             <div class="grader-block">
               ${this._feedbackCommentEditorShowing ? nothing : html`
                 <div class="feedback-label grader-label content-button-block">

webcomponents/tool/src/main/frontend/packages/sakai-rubrics/src/SakaiRubricCriterionStudent.js

@@ -117,9 +117,11 @@ export class SakaiRubricCriterionStudent extends RubricsElement {
                 ${!this.dynamic ? html`
                   <sakai-rubric-student-comment .criterion=${c}></sakai-rubric-student-comment>
                 ` : nothing }
-                <strong class="points-display ${this.getOverriddenClass(c.pointoverride, c.selectedvalue)}">
-                  ${c.selectedRatingId ? c.selectedvalue.toLocaleString(this.locale) : "0"}
-                </strong>
+                <div class="rubric-grading-points-value">
+                  <strong class="points-display ${this.getOverriddenClass(c.pointoverride, c.selectedvalue)}">
+                    ${c.selectedRatingId ? c.selectedvalue.toLocaleString(this.locale) : "0"}
+                  </strong>
+                </div>
                 ${this.isOverridden(c.pointoverride, c.selectedvalue) ?
                   html`<strong class="points-display">${c.pointoverride.toLocaleString(this.locale)}</strong>`
                   : nothing }

webcomponents/tool/src/main/frontend/packages/sakai-rubrics/src/SakaiRubricStudent.js

@@ -4,6 +4,7 @@ import { rubricsApiMixin } from "./SakaiRubricsApiMixin.js";
 import "../sakai-rubric-criterion-preview.js";
 import "../sakai-rubric-criterion-student.js";
 import "../sakai-rubric-pdf.js";
+import { GRADING_RUBRIC, CRITERIA_SUMMARY, STUDENT_SUMMARY } from "./sakai-rubrics-constants.js";
 
 export class SakaiRubricStudent extends rubricsApiMixin(RubricsElement) {
 
@@ -22,6 +23,7 @@ export class SakaiRubricStudent extends rubricsApiMixin(RubricsElement) {
     isPeerOrSelf: { attribute: "is-peer-or-self", type: Boolean },
 
     _rubric: { state: true },
+    _currentView: { state: true },
   };
 
   constructor() {
@@ -30,6 +32,8 @@ export class SakaiRubricStudent extends rubricsApiMixin(RubricsElement) {
 
     this.setRubricRequirements = [ "site-id", "rubric-id", "preview" ];
 
+    this._currentView = GRADING_RUBRIC;
+
     this.options = {};
     this.instanceSalt = Math.floor(Math.random() * Date.now());
   }
@@ -40,7 +44,7 @@ export class SakaiRubricStudent extends rubricsApiMixin(RubricsElement) {
 
     super.attributeChangedCallback(name, oldValue, newValue);
 
-    if ((name === "entity-id" && this.toolId) || (name === "tool-id" && this.entityId)) {
+    if ((name === "entity-id" && this.toolId) || (name === "tool-id" && this.entityId) || (name === "evaluated-item-id" && this.evaluatedItemId)) {
       this._init();
     }
 
@@ -54,6 +58,23 @@ export class SakaiRubricStudent extends rubricsApiMixin(RubricsElement) {
     }
   }
 
+  _viewSelected(e) {
+    this._currentView = e.target.value;
+
+    switch (e.target.value) {
+      case GRADING_RUBRIC:
+        this.openGradePreviewTab();
+        break;
+      case STUDENT_SUMMARY:
+        this.makeStudentSummary();
+        break;
+      case CRITERIA_SUMMARY:
+        this.makeCriteriaSummary();
+        break;
+      default:
+    }
+  }
+
   handleClose() {
 
     const el = this.querySelector("sakai-rubric-criterion-student");
@@ -70,7 +91,7 @@ export class SakaiRubricStudent extends rubricsApiMixin(RubricsElement) {
     const isInstructor = this.instructor && this.instructor === "true";
 
     return html`
-      <div class="rubric-details student-view">
+      <div class="rubric-details grading student-view">
         ${!this.dynamic ? html`
           <h3>
             <span>${this._rubric.title}</span>
@@ -88,29 +109,13 @@ export class SakaiRubricStudent extends rubricsApiMixin(RubricsElement) {
         ` : nothing }
 
         ${isInstructor ? html`
-        <div class="rubrics-tab-row">
-          <a href="javascript:void(0);"
-              id="rubric-grading-or-preview-${this.instanceSalt}-button"
-              class="rubrics-tab-button rubrics-tab-selected"
-              @keypress=${this.openGradePreviewTab}
-              @click=${this.openGradePreviewTab}>
-            ${this._i18n.grading_rubric}
-          </a>
-          <a href="javascript:void(0);"
-              id="rubric-student-summary-${this.instanceSalt}-button"
-              class="rubrics-tab-button"
-              @keypress=${this.makeStudentSummary}
-              @click=${this.makeStudentSummary}>
-            ${this._i18n.student_summary}
-          </a>
-          <a href="javascript:void(0);"
-              id="rubric-criteria-summary-${this.instanceSalt}-button"
-              class="rubrics-tab-button"
-              @keypress=${this.makeCriteriaSummary}
-              @click=${this.makeCriteriaSummary}>
-            ${this._i18n.criteria_summary}
-          </a>
-        </div>
+          <select @change=${this._viewSelected} class="mb-3"
+              aria-label="${this._i18n.rubric_view_selection_title}"
+              title="${this._i18n.rubric_view_selection_title}" .value=${this._currentView}>
+            <option value="grading-rubric">${this._i18n.grading_rubric}</option>
+            <option value="${STUDENT_SUMMARY}">${this._i18n.student_summary}</option>
+            <option value="${CRITERIA_SUMMARY}">${this._i18n.criteria_summary}</option>
+          </select>
         ` : nothing }
 
         <div id="rubric-grading-or-preview-${this.instanceSalt}" class="rubric-tab-content rubrics-visible">
@@ -233,21 +238,21 @@ export class SakaiRubricStudent extends rubricsApiMixin(RubricsElement) {
       .catch (error => console.error(error));
   }
 
-  openGradePreviewTab(e) {
+  displayGradingTab() {
 
-    e.stopPropagation();
-    this.openRubricsTab(`rubric-grading-or-preview-${this.instanceSalt}`);
+    this.openGradePreviewTab();
+    this._currentView = GRADING_RUBRIC;
   }
 
-  makeStudentSummary(e) {
+  openGradePreviewTab() {
+    this.openRubricsTab(`rubric-grading-or-preview-${this.instanceSalt}`);
+  }
 
-    e.stopPropagation();
+  makeStudentSummary() {
     this.makeASummary("student", this.siteId);
   }
 
-  makeCriteriaSummary(e) {
-
-    e.stopPropagation();
+  makeCriteriaSummary() {
     this.makeASummary("criteria", this.siteId);
   }
 }

webcomponents/tool/src/main/frontend/packages/sakai-rubrics/src/SakaiRubricStudentComment.js

@@ -38,7 +38,7 @@ export class SakaiRubricStudentComment extends RubricsElement {
 
     return html`
       <div class="dropdown" id="${ifDefined(this.triggerId)}">
-        <button class="btn btn-transparent ${this.criterion.comments ? "" : "disabled"}"
+        <button class="btn btn-icon"
             type="button"
             data-bs-toggle="dropdown"
             data-bs-auto-close="false"