[gnome-continuous-yocto/gnomeostree-3.28-rocko: 1816/8267] bitbake: toaster: reset table to default orderby when orderby column is hidden

[Emmanuele Bassi <ebassi src gnome org>]

commit dd784598cda4d0ec725816c13c95ba3f591450d2
Author: Elliot Smith <elliot smith intel com>
Date:   Mon Jul 18 16:02:14 2016 +0100

    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>

 bitbake/lib/toaster/toastergui/static/js/table.js |   78 ++++++++++++++++-----
 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 7b55102..176ce57 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);
       }
     }