MDL-68286 table: Support initials bar for dynamic tables

lib/table/amd/src/dynamic.js

@@ -38,7 +38,7 @@ const checkTableIsDynamic = tableRoot => {
         throw new Error("The table specified is not a dynamic table and cannot be updated");
     }
 
-    if (!tableRoot.matches(Selectors.table.region)) {
+    if (!tableRoot.matches(Selectors.main.region)) {
         // The table is not a dynamic table.
         throw new Error("The table specified is not a dynamic table and cannot be updated");
     }
@@ -73,6 +73,8 @@ export const refreshTableContent = tableRoot => {
             sortOrder: tableRoot.dataset.tableSortOrder,
             joinType: filterset.jointype,
             filters: filterset.filters,
+            firstinitial: tableRoot.dataset.tableFirstInitial,
+            lastinitial: tableRoot.dataset.tableLastInitial,
         }
     )
     .then(data => {
@@ -88,6 +90,8 @@ export const updateTable = (tableRoot, {
     sortBy = null,
     sortOrder = null,
     filters = null,
+    firstInitial = null,
+    lastInitial = null,
 } = {}, refreshContent = true) => {
     checkTableIsDynamic(tableRoot);
 
@@ -97,6 +101,15 @@ export const updateTable = (tableRoot, {
         tableRoot.dataset.tableSortOrder = sortOrder;
     }
 
+    // Update initials.
+    if (firstInitial !== null) {
+        tableRoot.dataset.tableFirstInitial = firstInitial;
+    }
+
+    if (lastInitial !== null) {
+        tableRoot.dataset.tableLastInitial = lastInitial;
+    }
+
     // Update filters.
     if (filters) {
         tableRoot.dataset.tableFilters = JSON.stringify(filters);
@@ -133,6 +146,28 @@ export const setFilters = (tableRoot, filters, refreshContent = true) =>
 export const setSortOrder = (tableRoot, sortBy, sortOrder, refreshContent = true) =>
     updateTable(tableRoot, {sortBy, sortOrder}, refreshContent);
 
+/**
+ * Update the first initial to show.
+ *
+ * @param {HTMLElement} tableRoot
+ * @param {String} firstInitial
+ * @param {Bool} refreshContent
+ * @returns {Promise}
+ */
+export const setFirstInitial = (tableRoot, firstInitial, refreshContent = true) =>
+    updateTable(tableRoot, {firstInitial}, refreshContent);
+
+/**
+ * Update the last initial to show.
+ *
+ * @param {HTMLElement} tableRoot
+ * @param {String} lastInitial
+ * @param {Bool} refreshContent
+ * @returns {Promise}
+ */
+export const setLastInitial = (tableRoot, lastInitial, refreshContent = true) =>
+    updateTable(tableRoot, {lastInitial}, refreshContent);
+
 /**
  * Set up listeners to handle table updates.
  */
@@ -144,7 +179,7 @@ export const init = () => {
     watching = true;
 
     document.addEventListener('click', e => {
-        const tableRoot = e.target.closest(Selectors.table.region);
+        const tableRoot = e.target.closest(Selectors.main.region);
 
         if (!tableRoot) {
             return;
@@ -156,5 +191,19 @@ export const init = () => {
 
             setSortOrder(tableRoot, sortableLink.dataset.sortby, sortableLink.dataset.sortorder);
         }
+
+        const firstInitialLink = e.target.closest(Selectors.initialsBar.links.firstInitial);
+        if (firstInitialLink !== null) {
+            e.preventDefault();
+
+            setFirstInitial(tableRoot, firstInitialLink.dataset.initial);
+        }
+
+        const lastInitialLink = e.target.closest(Selectors.initialsBar.links.lastInitial);
+        if (lastInitialLink !== null) {
+            e.preventDefault();
+
+            setLastInitial(tableRoot, lastInitialLink.dataset.initial);
+        }
     });
 };