SAK-49636 announcementswc Add sorting options

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

@@ -1,11 +1,18 @@
 all_pinned_sites=All Pinned Sites
-viewing=(viewing announcements from the last 10 days)
+announcement_sort_label=Sort these announcements
+earliest_first=Earliest first
+latest_first=Latest first
 search=Search
-title=Title
 site=Site
+site_a_to_z=Site: A-Z
 site_tooltip=Filter by site
-view=View
-sort_by_title_tooltip=Sort by title
+site_z_to_a=Site: Z-A
 sort_by_site_tooltip=Sort by title
-widget_title=Announcements
+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/src/SakaiAnnouncements.js

@@ -4,6 +4,14 @@ import "@sakai-ui/sakai-icon";
 import { SakaiPageableElement } from "@sakai-ui/sakai-pageable-element";
 import { SakaiSitePicker } from "@sakai-ui/sakai-site-picker";
 import "@sakai-ui/sakai-site-picker/sakai-site-picker.js";
+import {
+  TITLE_A_TO_Z,
+  TITLE_Z_TO_A,
+  SITE_A_TO_Z,
+  SITE_Z_TO_A,
+  EARLIEST_FIRST,
+  LATEST_FIRST
+} from "./sakai-announcements-constants.js";
 
 export class SakaiAnnouncements extends SakaiPageableElement {
 
@@ -19,6 +27,8 @@ export class SakaiAnnouncements extends SakaiPageableElement {
 
     this._data = value;
 
+    this._data.forEach(a => a.visible = true);
+
     if (!this.siteId) {
 
       this._sites = [];
@@ -64,41 +74,67 @@ export class SakaiAnnouncements extends SakaiPageableElement {
     this.requestUpdate();
   }
 
-  sortByTitle() {
+  _sortChanged(e) {
 
-    if (this.sortTitle === "AZ") {
-      this.data.sort((a1, a2) => a1.subject.localeCompare(a2.subject));
-      this.sortTitle = "ZA";
-    } else {
-      this.data.sort((a1, a2) => a2.subject.localeCompare(a1.subject));
-      this.sortTitle = "AZ";
-    }
-    this.repage();
-  }
+    switch (e.target.value) {
+      case TITLE_A_TO_Z:
+        this.data.sort((a1, a2) => a1.subject.localeCompare(a2.subject));
+        break;
+      case TITLE_Z_TO_A:
+        this.data.sort((a1, a2) => a2.subject.localeCompare(a1.subject));
+        break;
+      case SITE_A_TO_Z:
+        this.data.sort((a1, a2) => a1.siteTitle.localeCompare(a2.siteTitle));
+        break;
+      case SITE_Z_TO_A:
+        this.data.sort((a1, a2) => a2.siteTitle.localeCompare(a1.siteTitle));
+        break;
+      case EARLIEST_FIRST:
+        this.data.sort((a1, a2) => {
 
-  sortBySite() {
+          if (a1.date < a2.date) return -1;
+          if (a1.date < a2.date) return 1;
+          return 0;
+        });
+        break;
+      case LATEST_FIRST:
+        this.data.sort((a1, a2) => {
 
-    if (this.sortSite === "AZ") {
-      this.data.sort((a1, a2) => a1.siteTitle.localeCompare(a2.siteTitle));
-      this.sortSite = "ZA";
-    } else {
-      this.data.sort((a1, a2) => a2.siteTitle.localeCompare(a1.siteTitle));
-      this.sortSite = "AZ";
+          if (a1.date < a2.date) return 1;
+          if (a1.date > a2.date) return -1;
+          return 0;
+        });
+        break;
+      default:
+        console.warn(`Invalid sort option: ${e.target.value}`);
     }
+
     this.repage();
   }
 
   content() {
 
     return html`
-      ${!this.siteId ? html`
-      <div id="site-filter">
-        <sakai-site-picker
-            .sites=${this._sites}
-            @sites-selected=${this._sitesSelected}>
-        </sakai-site-picker>
+      <div id="filter-and-sort-block">
+        ${!this.siteId ? html`
+        <div id="site-filter">
+          <sakai-site-picker
+              .sites=${this._sites}
+              @sites-selected=${this._sitesSelected}>
+          </sakai-site-picker>
+        </div>
+        ` : nothing }
+        <div id="sorting">
+          <select aria-label="${this.i18n.announcement_sort_label}" @change=${this._sortChanged}>
+            <option value="${EARLIEST_FIRST}">${this.i18n.earliest_first}</option>
+            <option value="${LATEST_FIRST}">${this.i18n.latest_first}</option>
+            <option value="${TITLE_A_TO_Z}">${this.i18n.title_a_to_z}</option>
+            <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>
+          </select>
+        </div>
       </div>
-      ` : nothing}
       <div id="viewing">${this.i18n.viewing}</div>
       <div class="announcements ${!this.siteId || this.siteId === "home" ? "home" : "course"}">
         <div class="header">
@@ -164,6 +200,14 @@ export class SakaiAnnouncements extends SakaiPageableElement {
       #filter {
         flex: 1;
       }
+      #filter-and-sort-block {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 6px;
+      }
+      #sorting {
+        margin-left: auto;
+      }
       #viewing {
         margin-bottom: 20px;
         font-size: var(--sakai-grades-title-font-size, 14px);

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

@@ -0,0 +1,7 @@
+export const TITLE_A_TO_Z = "title_a_to_z";
+export const TITLE_Z_TO_A = "title_z_to_a";
+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";
+