[oe-commits] [bitbake] 19/40: toaster: reset table to default orderby when orderby column is hidden

[git at git.openembedded.org]

rpurdie pushed a commit to branch master
in repository bitbake.

commit a28377067b6f381bbc98db82f5c45fca6620f7ad
Author: Elliot Smith <elliot.smith at intel.com>
AuthorDate: Mon Jul 18 16:02:14 2016 +0100

    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]
    
    Signed-off-by: Elliot Smith <elliot.smith at intel.com>
---
 lib/toaster/toastergui/static/js/table.js | 78 ++++++++++++++++++++++++-------
 1 file changed, 60 insertions(+), 18 deletions(-)

diff --git a/lib/toaster/toastergui/static/js/table.js b/lib/toaster/toastergui/static/js/table.js
index 7b55102..176ce57 100644
--- a/lib/toaster/toastergui/static/js/table.js
+++ b/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);
       }
     }
 

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.