bitbake: toaster: reset table to default orderby when orderby column is hidden

When a ToasterTable is sorted by a column, and that column is
hidden from view, the sort doesn't revert to the default for the
table.

Modify the JS responsible for reloading the table data so that
it doesn't rely on clicking a table column heading (as this is
inflexible and error-prone). Instead, use a function to apply
the sort to the table; and call that function when column
headings are clicked.

This means that the ordering can be changed programmatically
to a specified default ordering when a column is hidden, without
having to click on a column heading.

Use this function when the current sort column is hidden, to
apply the default sort for the table.

[YOCTO #9836]

(Bitbake rev: a28377067b6f381bbc98db82f5c45fca6620f7ad)

Signed-off-by: Elliot Smith <elliot.smith@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

1 files changed, 60 insertions, 18 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/js/table.js b/bitbake/lib/toaster/toastergui/static/js/table.js
index 7b55102546..176ce579fb 100644
--- a/bitbake/lib/toaster/toastergui/static/js/table.js
+++ b/bitbake/lib/toaster/toastergui/static/js/table.js
@@ -15,6 +15,7 @@ function tableInit(ctx){
     orderby : null,
     filter : null,
     search : null,
+    default_orderby: null,
   };
 
   var defaultHiddenCols = [];
@@ -192,6 +193,8 @@ function tableInit(ctx){
     tableHeadRow.html("");
     editColMenu.html("");
 
+    tableParams.default_orderby = tableData.default_orderby;
+
     if (!tableParams.orderby && tableData.default_orderby){
       tableParams.orderby = tableData.default_orderby;
     }
@@ -217,6 +220,7 @@ function tableInit(ctx){
         var title = $('<a href=\"#\" ></a>');
 
         title.data('field-name', col.field_name);
+        title.attr('data-sort-field', col.field_name);
         title.text(col.title);
         title.click(sortColumnClicked);
 
@@ -344,31 +348,67 @@ function tableInit(ctx){
     }
   }
 
-  function sortColumnClicked(e){
-    e.preventDefault();
+  /* Apply an ordering to the current table.
+   *
+   * 1. Find the column heading matching the sortSpecifier
+   * 2. Set its up/down arrow and add .sorted
+   *
+   * orderby: e.g. "-started_on", "completed_on"
+   * colHeading: column heading element to activate (by showing the caret
+   * up/down, depending on sort order); if not set, the correct column
+   * heading is selected from the DOM using orderby as a key
+   */
+  function applyOrderby(orderby, colHeading) {
+    if (!orderby) {
+      return;
+    }
 
-    /* We only have one sort at a time so remove any existing sort indicators */
-    $("#"+ctx.tableName+" th .icon-caret-down").hide();
-    $("#"+ctx.tableName+" th .icon-caret-up").hide();
-    $("#"+ctx.tableName+" th a").removeClass("sorted");
+    // We only have one sort at a time so remove existing sort indicators
+    $("#" + ctx.tableName + " th .icon-caret-down").hide();
+    $("#" + ctx.tableName + " th .icon-caret-up").hide();
+    $("#" + ctx.tableName + " th a").removeClass("sorted");
 
-    var fieldName = $(this).data('field-name');
+    // normalise the orderby so we can use it to find the link we want
+    // to style
+    var fieldName = orderby;
+    if (fieldName.indexOf('-') === 0) {
+      fieldName = fieldName.slice(1);
+    }
 
-    /* if we're already sorted sort the other way */
-    if (tableParams.orderby === fieldName &&
-        tableParams.orderby.indexOf('-') === -1) {
-      tableParams.orderby = '-' + $(this).data('field-name');
-      $(this).parent().children('.icon-caret-up').show();
-    } else {
-      tableParams.orderby = $(this).data('field-name');
-      $(this).parent().children('.icon-caret-down').show();
+    // find the table header element which corresponds to the sort field
+    // (if we don't already have it)
+    if (!colHeading) {
+      colHeading = $('[data-sort-field="' + fieldName + '"]');
     }
 
-    $(this).addClass("sorted");
+    colHeading.addClass("sorted");
+
+    var parent = colHeading.parent();
 
+    if (orderby.indexOf('-') === 0) {
+      parent.children('.icon-caret-up').show();
+    }
+    else {
+      parent.children('.icon-caret-down').show();
+    }
+
+    tableParams.orderby = orderby;
     loadData(tableParams);
   }
 
+  function sortColumnClicked(e){
+    e.preventDefault();
+
+    /* if we're already sorted sort the other way */
+    var orderby = $(this).data('field-name');
+    if (tableParams.orderby === orderby &&
+        tableParams.orderby.indexOf('-') === -1) {
+      orderby = '-' + orderby;
+    }
+
+    applyOrderby(orderby, $(this));
+  }
+
   function pageButtonClicked(e) {
     tableParams.page = Number($(this).text());
     loadData(tableParams);
@@ -385,11 +425,13 @@ function tableInit(ctx){
       table.find("."+col).show();
     }  else {
       table.find("."+col).hide();
-      /* If we're ordered by the column we're hiding remove the order by */
+      // If we're ordered by the column we're hiding remove the order by
+      // and apply the default one instead
       if (col === tableParams.orderby ||
           '-' + col === tableParams.orderby){
         tableParams.orderby = null;
-        $("#"+ctx.tableName +" .default-orderby").click();
+
+        applyOrderby(tableParams.default_orderby);
       }
     }