SAK-50996 announcementswc Add instructor order sort option (sakaiproj…

…ect#13312)

webapi/src/main/java/org/sakaiproject/webapi/beans/AnnouncementRestBean.java

@@ -35,6 +35,7 @@ public class AnnouncementRestBean {
     private String subject;
     private String author;
     private String url;
+    private int order;
     private long date;
     private boolean highlighted;
 
@@ -46,6 +47,7 @@ public AnnouncementRestBean(Site site, AnnouncementMessage am, String url) {
         subject = am.getAnnouncementHeader().getSubject();
         author = am.getAnnouncementHeader().getFrom().getDisplayName();
         date = am.getAnnouncementHeader().getInstant().toEpochMilli();
+        order = am.getAnnouncementHeader().getMessage_order();
 
         ResourceProperties props = am.getProperties();
         highlighted = BooleanUtils.toBoolean(props.getProperty("highlight"));

webapi/src/main/java/org/sakaiproject/webapi/controllers/AnnouncementsController.java

@@ -75,7 +75,6 @@ public List<AnnouncementRestBean> getUserAnnouncements() throws UserNotDefinedEx
                     return announcementService.getMessages(announcementService.channelReference(siteId, SiteService.MAIN_CONTAINER), filter, true, false)
                         .stream()
                         .map(am -> {
-
                             Optional<String> optionalUrl = entityManager.getUrl(am.getReference(), Entity.UrlType.PORTAL);
                             return new AnnouncementRestBean(site, am, optionalUrl.get());
                         });

webcomponents/bundle/src/main/bundle/announcements.properties

@@ -2,6 +2,7 @@ all_pinned_sites=All Pinned Sites
 announcement_sort_label=Sort these announcements
 earliest_first=Earliest first
 latest_first=Latest first
+instructor_order=Instructor order
 search=Search
 site=Site
 site_a_to_z=Site: A-Z

webcomponents/tool/src/main/frontend/packages/sakai-announcements/src/SakaiAnnouncements.js

@@ -10,7 +10,8 @@ import {
   SITE_A_TO_Z,
   SITE_Z_TO_A,
   EARLIEST_FIRST,
-  LATEST_FIRST
+  LATEST_FIRST,
+  INSTRUCTOR_ORDER,
 } from "./sakai-announcements-constants.js";
 
 export class SakaiAnnouncements extends SakaiPageableElement {
@@ -98,6 +99,14 @@ export class SakaiAnnouncements extends SakaiPageableElement {
           return 0;
         });
         break;
+      case INSTRUCTOR_ORDER:
+        this.data.sort((a1, a2) => {
+
+          if (a1.order < a2.order) return 1;
+          if (a1.order > a2.order) return -1;
+          return 0;
+        });
+        break;
       default:
         console.warn(`Invalid sort option: ${e.target.value}`);
     }
@@ -125,9 +134,11 @@ export class SakaiAnnouncements extends SakaiPageableElement {
             <option value="${TITLE_Z_TO_A}">${this._i18n.title_z_to_a}</option>
             <option value="${SITE_A_TO_Z}">${this._i18n.site_a_to_z}</option>
             <option value="${SITE_Z_TO_A}">${this._i18n.site_z_to_a}</option>
+            <option value="${INSTRUCTOR_ORDER}">${this._i18n.instructor_order}</option>
           </select>
         </div>
       </div>
+
       <div id="viewing">${this._i18n.viewing}</div>
       <div class="announcements ${!this.siteId || this.siteId === "home" ? "home" : "course"}">
         <div class="header">

webcomponents/tool/src/main/frontend/packages/sakai-announcements/src/sakai-announcements-constants.js

@@ -4,4 +4,5 @@ export const SITE_A_TO_Z = "site_a_to_z";
 export const SITE_Z_TO_A = "site_z_to_a";
 export const EARLIEST_FIRST = "earliest_first";
 export const LATEST_FIRST = "latest_first";
+export const INSTRUCTOR_ORDER = "instructor_order";
 

webcomponents/tool/src/main/frontend/packages/sakai-announcements/test/data.js

@@ -1,18 +1,4 @@
-export const i18nUrl = /getI18nProperties.*announcements$/;
-
-export const i18n = `
-viewing=(viewing announcements from the last 10 days)
-site=Site
-search=Search
-title=Title
-site=Site
-site_tooltip=Filter by site
-view=View
-sort_by_title_tooltip=Sort by title
-sort_by_site_tooltip=Sort by title
-widget_title=Announcements
-url_tooltip=Click to be taken to the announcement
-`;
+export { i18n, i18nUrl } from "./i18n.js";
 
 export const userId = "adrian";
 export const siteId = "xyz";
@@ -25,9 +11,9 @@ export const announcementsUrl= `/api/users/me/announcements`;
 export const siteAnnouncementsUrl= `/api/sites/${siteId}/announcements`;
 
 export const announcements = [
-  { subject: "Ears", url: "/annc/ears", siteTitle, siteId },
-  { subject: "Chips", url: "/annc/chips", siteTitle, siteId },
-  { subject: vavavoom, url: "/annc/vavavoom", siteTitle: vavavoomSite, siteId: vavavoom },
+  { subject: "Ears", url: "/annc/ears", visible: true, order: 3, siteTitle, siteId },
+  { subject: "Chips", url: "/annc/chips", visible: true, order: 1, siteTitle, siteId },
+  { subject: vavavoom, url: "/annc/vavavoom", visible: true, order: 2, siteTitle: vavavoomSite, siteId: vavavoom },
 ];
 
 export const siteAnnouncements = [

webcomponents/tool/src/main/frontend/packages/sakai-announcements/test/i18n.js

@@ -0,0 +1,23 @@
+export const i18nUrl = /getI18nProperties.*announcements$/;
+
+export const i18n = `
+all_pinned_sites=All Pinned Sites
+announcement_sort_label=Sort these announcements
+earliest_first=Earliest first
+latest_first=Latest first
+instructor_order=Instructor order
+search=Search
+site=Site
+site_a_to_z=Site: A-Z
+site_tooltip=Filter by site
+site_z_to_a=Site: Z-A
+sort_by_site_tooltip=Sort by title
+sort_by_title_tooltip=Sort by title
+title=Title
+title_a_to_z=Title: A-Z
+title_z_to_a=Title: Z-A
+url_tooltip=Click to be taken to the announcement
+view=View
+viewing=(viewing announcements from the last 10 days)
+widget_title=Announcements
+`;

webcomponents/tool/src/main/frontend/packages/sakai-announcements/test/sakai-announcements.test.js

@@ -1,8 +1,17 @@
 import "../sakai-announcements.js";
 import { html } from "lit";
 import * as data from "./data.js";
+import {
+  TITLE_A_TO_Z,
+  TITLE_Z_TO_A,
+  SITE_A_TO_Z,
+  SITE_Z_TO_A,
+  EARLIEST_FIRST,
+  LATEST_FIRST,
+  INSTRUCTOR_ORDER,
+} from "../src/sakai-announcements-constants.js";
 import * as sitePickerData from "../../sakai-site-picker/test/data.js";
-import { expect, fixture, waitUntil, aTimeout } from "@open-wc/testing";
+import { elementUpdated, expect, fixture, waitUntil, aTimeout } from "@open-wc/testing";
 import fetchMock from "fetch-mock/esm/client";
 
 describe("sakai-announcements tests", () => {
@@ -23,36 +32,47 @@ describe("sakai-announcements tests", () => {
       <sakai-announcements user-id="${data.userId}"></sakai-announcements>
     `);
 
-    await aTimeout(200);
+    await waitUntil(() => el.dataPage);
 
-    expect(el.shadowRoot.getElementById("topbar")).to.exist;
-    expect(el.shadowRoot.querySelectorAll("div.title").length).to.equal(3);
+    await elementUpdated(el);
 
-    expect(el.shadowRoot.querySelectorAll("div.announcements > .header").length).to.equal(3);
+    expect(el.shadowRoot.querySelectorAll("div.title").length).to.equal(3);
 
-    // Sort by title
-    const sortByTitle = el.shadowRoot.querySelector("div.announcements > .header:first-child > a");
-    expect(sortByTitle).to.exist;
+    expect(el.shadowRoot.querySelectorAll(".header").length).to.equal(3);
 
-    sortByTitle.click();
-    await el.updateComplete;
-    expect(el.shadowRoot.querySelector("div.announcements > .title").innerHTML).to.contain("Vavavoom");
+    expect(el.shadowRoot.querySelector(".title").innerHTML).to.contain(data.announcements[0].subject);
 
-    sortByTitle.click();
-    await el.updateComplete;
-    expect(el.shadowRoot.querySelector("div.announcements > .title").innerHTML).to.contain("Chips");
+    const sortingSelect = el.shadowRoot.querySelector("#sorting > select");
+    expect(sortingSelect).to.exist;
 
-    // Sort by site
-    const sortBySite = el.shadowRoot.querySelector("div.announcements > .header:nth-child(1) > a");
-    expect(sortBySite).to.exist;
+    // Sort by title
+    sortingSelect.value = TITLE_A_TO_Z;
+    sortingSelect.dispatchEvent(new Event("change"));
+    await elementUpdated(el);
+    expect(el.shadowRoot.querySelector(".title").innerHTML).to.contain("Chips");
 
-    sortBySite.click();
-    await el.updateComplete;
-    expect(el.shadowRoot.querySelector("div.announcements > .site").innerHTML).to.contain(data.vavavoomSite);
+    sortingSelect.value = TITLE_Z_TO_A;
+    sortingSelect.dispatchEvent(new Event("change"));
+    await elementUpdated(el);
+    expect(el.shadowRoot.querySelector(".title").innerHTML).to.contain(data.vavavoom);
 
-    sortBySite.click();
-    await el.updateComplete;
-    expect(el.shadowRoot.querySelector("div.announcements > .site").innerHTML).to.contain(data.siteTitle);
+    // Sort by site
+    sortingSelect.value = SITE_A_TO_Z;
+    sortingSelect.dispatchEvent(new Event("change"));
+    await elementUpdated(el);
+    expect(el.shadowRoot.querySelector(".site").innerHTML).to.contain(data.vavavoomSite);
+
+    sortingSelect.value = SITE_Z_TO_A;
+    sortingSelect.dispatchEvent(new Event("change"));
+    await elementUpdated(el);
+    expect(el.shadowRoot.querySelector(".site").innerHTML).to.contain(data.siteTitle);
+
+    // Instructor ordering
+    sortingSelect.value = INSTRUCTOR_ORDER;
+    sortingSelect.dispatchEvent(new Event("change"));
+    await elementUpdated(el);
+    // This makes no sense really. The order seems to be flipped in Sakai, so that's what we need to test.
+    expect(el.shadowRoot.querySelector(".title").innerHTML).to.contain(data.announcements.filter(a => a.order === 3)[0].subject);
 
     // Select a site
     const siteSelect = el.shadowRoot.querySelector("#site-filter > sakai-site-picker");
@@ -61,35 +81,32 @@ describe("sakai-announcements tests", () => {
     // We don't need to test the site picker here, it should have its own tests. So let's just fire
     // the event that would come from that component
     siteSelect.dispatchEvent(new CustomEvent("sites-selected", { detail: { value: data.vavavoom }, bubbles: true }));
-
-    await el.updateComplete;
-
+    await elementUpdated(el);
     expect(el.shadowRoot.querySelectorAll("div.title").length).to.equal(1);
   });
 
-  /*
   it ("renders in site mode correctly", async () => {
 
     let el = await fixture(html`
       <sakai-announcements site-id="${data.siteId}"></sakai-announcements>
     `);
 
-    await aTimeout(200);
+    await waitUntil(() => el.dataPage);
+    await elementUpdated(el);
 
-    expect(el.shadowRoot.getElementById("topbar")).to.exist;
-    expect(el.shadowRoot.querySelectorAll("div.title").length).to.equal(2);
+    expect(el.shadowRoot.querySelectorAll(".title").length).to.equal(2);
 
-    expect(el.shadowRoot.querySelectorAll("div.announcements > .header").length).to.equal(2);
+    expect(el.shadowRoot.querySelectorAll(".header").length).to.equal(2);
   });
-  */
 
   it ("is accessible", async () => {
 
     let el = await fixture(html`
       <sakai-announcements user-id="${data.userId}"></sakai-announcements>
     `);
 
-    await aTimeout(200);
+    await waitUntil(() => el.dataPage);
+    await elementUpdated(el);
 
     expect(el.shadowRoot).to.be.accessible();
   });

webcomponents/tool/src/main/frontend/packages/sakai-pageable-element/src/SakaiPageableElement.js

@@ -78,7 +78,6 @@ export class SakaiPageableElement extends SakaiShadowElement {
     const filteredData = this.getFilteredDataBeforeRepaging();
     this.dataPage = filteredData.slice(start, end);
     this.count = Math.ceil(filteredData.length / this.pageSize);
-    this.requestUpdate();
   }
 
   content() {}