SAK-50438 Rubrics trigger event so that criteria get updated on a reo…

…rder (#12927)
sakaiproject · Oct 8, 2024 · b0d7bea · b0d7bea
1 parent 2d01001
commit b0d7bea
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 0 deletions.
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-rubrics/src/SakaiRubricCriteria.js b/webcomponents/tool/src/main/frontend/packages/sakai-rubrics/src/SakaiRubricCriteria.js
@@ -37,6 +37,9 @@ export class SakaiRubricCriteria extends RubricsElement {
       this.querySelector(`[data-criterion-id="${e.detail.data.criterionId}"] .drag-handle`).focus();
     });
 
+    // Reordering doesn't really care about the weight changes, but the event does get the criteria to update in the parent rubric object
+    this.dispatchEvent(new CustomEvent("refresh-total-weight", { detail: { criteria: this.criteria } }));
+
     const url = `/api/sites/${this.siteId}/rubrics/${this.rubricId}/criteria/sort`;
     fetch(url, {
       method: "PUT",

diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-rubrics/test/data.js b/webcomponents/tool/src/main/frontend/packages/sakai-rubrics/test/data.js
@@ -212,6 +212,47 @@ export const criteria2 = [
   },
 ];
 
+export const criteria3 = [
+  {
+    id: 5,
+    title: "C1",
+    description: "First criterion",
+    ratings: [
+      {
+        id: 5,
+        title: "Rating1",
+        description: "First rating",
+        points: 1,
+      },
+      {
+        id: 6,
+        title: "Rating2",
+        description: "Second rating",
+        points: 2,
+      },
+    ]
+  },
+  {
+    id: 6,
+    title: "C2",
+    description: "Second criterion",
+    ratings: [
+      {
+        id: 7,
+        title: "Rating1",
+        description: "First rating",
+        points: 1,
+      },
+      {
+        id: 8,
+        title: "Rating2",
+        description: "Second rating",
+        points: 2,
+      },
+    ],
+  },
+];
+
 export const rubric1 = {
   id: "1",
   title: "Rubric 1",
@@ -243,6 +284,16 @@ export const rubric3 = {
   locked: true
 };
 
+export const rubric4 = {
+  id: "4",
+  title: "Rubric 4",
+  ownerId,
+  siteTitle,
+  creatorDisplayName,
+  formattedModifiedDate,
+  criteria: criteria3
+};
+
 export const evaluatedItemOwnerId = "fisha";
 
 export const rubricsUrl = /api\/sites\/xyz\/rubrics[\?\w=]*$/;
@@ -269,3 +320,8 @@ export const evaluation = {
     { criterionId: 1, selectedRatingId: 2, comments: "Rubbish", points: 2 }
   ],
 };
+
+export const rubric4OwnerUrl = `/api/sites/${ownerId}/rubrics/${rubric4.id}`;
+export const rubric4CriteriaSortUrl = `/api/sites/${ownerId}/rubrics/${rubric4.id}/criteria/sort`;
+export const rubric4Criteria5Url = `/api/sites/${ownerId}/rubrics/${rubric4.id}/criteria/5`;
+export const rubric4Criteria6Url = `/api/sites/${ownerId}/rubrics/${rubric4.id}/criteria/6`;
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-rubrics/test/sakai-rubrics.test.js b/webcomponents/tool/src/main/frontend/packages/sakai-rubrics/test/sakai-rubrics.test.js
@@ -31,6 +31,10 @@ fetchMock
         creatorDisplayName: "Adrian Fish",
       }, JSON.parse(opts.body));
     }, { overwriteRoutes: true })
+  .put(data.rubric4CriteriaSortUrl, 200, { overwriteRoutes: true })
+  .patch(data.rubric4OwnerUrl, 200, { overwriteRoutes: true })
+  .patch(data.rubric4Criteria5Url, 200, { overwriteRoutes: true })
+  .patch(data.rubric4Criteria6Url, 200, { overwriteRoutes: true })
   .get("*", 500, { overwriteRoutes: true });
 
 window.sakai = window.sakai || {
@@ -449,4 +453,45 @@ describe("sakai-rubrics tests", () => {
     expect(el.querySelector(elementSelector).ariaLabel).to.contain(titleToCheck);
   }
 
+  it ("Criterion reorder, then mark as draft", async () => {
+    let el = await fixture(html`
+      <sakai-rubric site-id="${data.siteId}"
+                    .rubric=${data.rubric4}
+                    enable-pdf-export=true>
+      </sakai-rubric>
+    `);
+
+    await waitUntil(() => el._i18n);
+    await el.updateComplete;
+
+    // Check initial ordering (should be id 5 then 6)
+    let reorderableRows = el.querySelectorAll("div.criterion-row");
+    expect(reorderableRows[0].getAttribute('data-criterion-id')).to.equal(String(data.criteria3[0].id));
+    expect(reorderableRows[1].getAttribute('data-criterion-id')).to.equal(String(data.criteria3[1].id));
+
+    // Reorder criteria
+    let eventData = { detail: { reorderedIds: [ data.criteria3[1].id, data.criteria3[0].id],
+                                        data: {'criterionId': data.criteria3[1].id, 'reorderableId': data.criteria3[1].id} }
+    };
+
+    let reorderer = el.querySelector("sakai-reorderer[drop-class='criterion-row']");
+    reorderer.dispatchEvent(new CustomEvent("reordered", eventData));
+
+    await reorderer.updateComplete;
+
+    // Check new ordering (should be 6 then 5)
+    reorderableRows = el.querySelectorAll("div.criterion-row");
+    expect(reorderableRows[0].getAttribute('data-criterion-id')).to.equal(String(data.criteria3[1].id));
+    expect(reorderableRows[1].getAttribute('data-criterion-id')).to.equal(String(data.criteria3[0].id));
+
+    // Mark rubric as draft
+    el.querySelectorAll("button.draft")[0].click();
+    await reorderer.updateComplete;
+
+    // Verify criteria are still in correct (new) order
+    reorderableRows = el.querySelectorAll("div.criterion-row");
+    expect(reorderableRows[0].getAttribute('data-criterion-id')).to.equal(String(data.criteria3[1].id));
+    expect(reorderableRows[1].getAttribute('data-criterion-id')).to.equal(String(data.criteria3[0].id));
+
+  });
 });