Bug 1204238: Migrate tabular report sorting from YUI to jQuery

skins/standard/buglist.css

@@ -383,44 +383,18 @@ div.bz_section_title span {
 
 /* Series & reports (start) */
 
-.t1 {
-    background-color: #ffffff; /* white */
-}
-
-.t2 {
-    background-color: #dfefff;  /* light blue */
-}
-
-.t3 {
-    background-color: #dddddd;  /* grey */
-}
-
-.t4 {
-    background-color: #c3d3ed; /* darker blue */
-}
-
 .ttotal, .ttotal td {
-    background-color: #cfffdf; /* light green */
+    /* !important overrides jQuery DataTables default color */
+    background-color: #cfffdf !important; /* light green */
 }
 
-.tabular_report_container {
+.tabular_report {
   /* Force tables to be horizontally centered */
     margin-left: auto;
     margin-right: auto;
     text-align: center;
 }
 
-.tabular_report {
-    border: 1px dotted black;
-    border-collapse: collapse;
-    text-align: center;
-}
-
-.tabular_report th, .tabular_report td {
-    border: 1px dotted;
-    padding: 0.2em;
-}
-
 #graphical_report {
     max-width: 100%;
     height: auto;

template/en/default/filterexceptions.pl

@@ -75,7 +75,6 @@
 'reports/report-table.html.tmpl' => [
   '"&$col_vals" IF col_vals', 
   '"&$row_vals" IF row_vals', 
-  'classes.$row_idx.$col_idx', 
   'urlbase', 
   'data.$tbl.$col.$row', 
 ],

template/en/default/global/header.html.tmpl

@@ -83,7 +83,11 @@
   "js/jquery/ui/jquery-ui-structure-min.css",
   "js/jquery/ui/jquery-ui-theme-min.css",
 ] %]
-[% style_urls.import(jquery_css, jq_css_urls) FILTER null %]
+
+[% FOREACH jq_name = jquery_css %]
+  [% style_urls.push("js/jquery/plugins/$jq_name/${jq_name}-min.css") %]
+[% END %]
+[% style_urls.import(jq_css_urls) FILTER null %]
 
 [%# Add our required jQuery plugins %]
 [% jquery.push("cookie", "devbridgeAutocomplete") %]

template/en/default/reports/report-table.html.tmpl

@@ -15,6 +15,7 @@
   # row_names: array. List of values for the field being plotted as rows.
   # data: <depends on format>. Data to plot. Only data.$tbl is accessed. 
   # tbl: Name of a hash in data which is the table to be plotted.
+  # table_id: the incremented number of the table being displayed.
   #%]
 
 [% col_field_disp = field_descs.$col_field || col_field %]
@@ -29,174 +30,41 @@
   [% urlbase = BLOCK %][% urlbase %]&amp;[% tbl_field FILTER uri %]=[% tbl FILTER uri %][% END %]
 [% END %]
 
-<script type="text/javascript">
-function bz_encode (str, decode) {
-  // First decode HTML entities, if requested.
-  if (decode)
-    str = str.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"')
-             .replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/\s+$/,"");
-
-  // encodeURIComponent() doesn't escape single quotes.
-  return encodeURIComponent(str).replace(/'/g, escape);
-};
-
-YAHOO.util.Event.addListener(window, "load", function() {
-  this.Linkify = function(elLiner, oRecord, oColumn, oData) {
-    if (oData == 0)
-      elLiner.innerHTML = ".";
-    else if (oRecord.getData("row_title") == "Total")
-      elLiner.innerHTML = '<a href="[% urlbase FILTER js %]&amp;[% col_field FILTER uri FILTER js %]='
-                          + bz_encode(oColumn.field)
-                          + '[% "&amp;" _ row_vals IF row_vals %]">' + oData + '</a>';
-    else
-      elLiner.innerHTML = '<a href="[% urlbase FILTER js %]&amp;[% row_field FILTER uri FILTER js %]='
-                          + bz_encode(oRecord.getData("row_title"), 1)
-                          + '&amp;[% col_field FILTER uri FILTER js %]='
-                          + bz_encode(oColumn.field) + '">' + oData + '</a>';
-  };
-
-  this.LinkifyTotal = function(elLiner, oRecord, oColumn, oData) {
-    if (oData == 0)
-      elLiner.innerHTML = ".";
-    else if (oRecord.getData("row_title") == "Total")
-      elLiner.innerHTML = '<a href="[% urlbase FILTER js %][% "&amp;" _ row_vals IF row_vals %]
-                          [%~ "&amp;" _ col_vals IF col_vals %]">'
-                          + oData + '</a>';
-    else
-      elLiner.innerHTML = '<a href="[% urlbase FILTER js %]&amp;[% row_field FILTER uri FILTER js %]='
-                          + bz_encode(oRecord.getData("row_title"), 1)
-                          + '[% "&amp;" _ col_vals IF col_vals %]">' + oData + '</a>';
-
-    YAHOO.util.Dom.addClass(elLiner.parentNode, "ttotal");
-  };
-
-  var totalRowFormatter = function( elTr, oRecord ) {
-      if ( oRecord.getData('row_title') == "Total" ) {
-          YAHOO.util.Dom.addClass( elTr, 'ttotal' );
-      }
-      return true;
-  };
-
-  var totalNumberSorter = function( a, b, desc, field ){
-    var a_value = a.getData(field);
-    var b_value = b.getData(field);
-    var a_total_test = a.getData("row_title");
-    var b_total_test = b.getData("row_title");
-    var comp_result = YAHOO.util.Sort.compare(a_value, b_value, desc);
-    if( a_total_test == "Total" ){
-      comp_result = 1;
-    }else if( b_total_test == "Total" ){
-      comp_result = -1;
-    }
-    return comp_result;
-  };
-
-
-  var myColumnDefs = [
-        {key:"row_title", label:"", sortable:true, sortOptions: { sortFunction:totalNumberSorter }},
-        [% FOREACH col = col_names %]
-          {key:"[% col FILTER js %]", label:"[% display_value(col_field, col) FILTER html FILTER js %]", sortable:true,
-           formatter:this.Linkify, sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC, sortFunction:totalNumberSorter }},
-        [% END %]
-        {key:"total", label:"Total", sortable:true, formatter:this.LinkifyTotal,
-         sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC, sortFunction:totalNumberSorter }}
-      ];
-  this.parseString = function(str) {
-    return YAHOO.lang.trim(str);
-  };
-
-  this.parseNumber = function(str) {
-    if (str.match(/^\s*\.\s*$/m))
-      return 0;
-
-    // Do not use <\/a>$. For some reason, IE6 doesn't understand it.
-    // We use [^\d]+$ instead.
-    var res = str.match(/>(\d+)[^\d]+$/m);
-    if (res && res[1])
-      return parseFloat(res[1]);
-  };
-
-  this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("tabular_report_[% tbl FILTER html FILTER js %]"));
-  this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
-  this.myDataSource.responseSchema = {
-    fields: [
-      {key:"row_title", parser:this.parseString},
-      [% FOREACH col = col_names %]
-        {key:"[% col FILTER js %]", parser:this.parseNumber},
-      [% END %]
-      {key:"total", parser:this.parseNumber}
-    ]
-  };
-  this.myDataTable = new YAHOO.widget.DataTable("tabular_report_container_
-                         [% tbl FILTER js %]", myColumnDefs, this.myDataSource, 
-                         {formatRow: totalRowFormatter});
-});
-</script>
-
 [% IF tbl_field %]
   <h2>[% tbl_disp FILTER email FILTER html %]</h2>
 [% END %]
 
-<table class="tabular_report_container">
-  <tr>
-    <td>
-    </td>
-    <td class="center">
-      <strong>[% col_field_disp FILTER html %]</strong>
-    </td>
-  </tr>
-
-  <tr>
-    <td class="middle">
-      <strong>[% row_field_disp FILTER html %]</strong>
-    </td>
-    <td>
-
-
-[% classes = [ [ "t1", "t2" ] , [ "t3", "t4" ] ] %]
-[% col_idx = 0 %]
-[% row_idx = 0 %]
 [% total_key = '-total-' %]
-<div id="tabular_report_container_[% tbl FILTER html %]">
-<table id="tabular_report_[% tbl FILTER html %]" class="tabular_report">
+[%# Most of these classes are defined in the DataTables plugin itself. %]
+<table id="tabular_report_[% table_id FILTER html %]" class="tabular_report display cell-border compact">
   [% IF col_field %]
     <thead>
     <tr>
-      <th class="[% classes.$row_idx.$col_idx %]">
-      </th>
+      <th>&darr;&nbsp;[% row_field_disp FILTER html %] \ [% col_field_disp FILTER html %]&nbsp;&rarr;</th>
       [% FOREACH col = col_names %]
         [% NEXT IF col == "" %]
-        
-        [% col_idx = 1 - col_idx %]
-        <th class="[% classes.$row_idx.$col_idx %]">
-          [% PROCESS value_display value = col field = col_field %]
-        </th>
+        <th>[% PROCESS value_display value = col field = col_field %]</th>
       [% END %]
-      <th class="ttotal">
-        Total
-      </th>
+      <th class="ttotal">Total</th>
     </tr>
     </thead>
   [% END %]
   <tbody>
   [% FOREACH row = row_names %]
-    [% row_idx = 1 - row_idx %]
     <tr>
-      <td class="[% classes.$row_idx.$col_idx %] right">
+      <td class="right">
         [% PROCESS value_display value = row field = row_field %]
       </td>
       [% FOREACH col = col_names %]
         [% NEXT IF col == "" %]
-        
-        [% col_idx = 1 - col_idx %]
-        <td class="[% classes.$row_idx.$col_idx %]">
+        <td>
           [% IF data.$tbl.$col.$row AND data.$tbl.$col.$row > 0 %]
             <a href="[% urlbase %]&amp;
               [% row_field FILTER uri %]=[% row FILTER uri %]&amp;
               [% col_field FILTER uri %]=[% col FILTER uri %]">
               [% data.$tbl.$col.$row %]</a>
           [% ELSE %]
-            .
+            <span class="bz_default_hidden">0</span>
           [% END %]
         </td>
       [% END %]
@@ -208,14 +76,12 @@ YAHOO.util.Event.addListener(window, "load", function() {
       </td>
     </tr>
   [% END %]
+  </tbody>
+  <tfoot>
     <tr>
-      [% row_idx = 1 - row_idx %]
-      <td class="ttotal">
-        Total
-      </td>
+      <td class="ttotal">Total</td>
       [% FOREACH col = col_names %]
         [% NEXT IF col == "" %]
-
         <td class="ttotal">
           <a href="[% urlbase %]&amp;
             [% col_field FILTER uri %]=[% col FILTER uri %]
@@ -231,13 +97,19 @@ YAHOO.util.Event.addListener(window, "load", function() {
         </strong>
       </td>
     </tr>
-  </tbody>
+  </tfoot>
 </table>
-</div>
 
-    </td>
-  </tr>
-</table>
+<script type="text/javascript">
+  $(document).ready(function() {
+    $("#tabular_report_[% table_id FILTER html %]").DataTable({
+      order: [],
+      paging: false,
+      scrollY: 600,
+      scrollCollapse: true
+    });
+  });
+</script>
 
 [% IF note_multi_select %]
   <p class="extra_info">

template/en/default/reports/report.html.tmpl

@@ -57,7 +57,8 @@
 [% PROCESS global/header.html.tmpl 
   header_addl_info = time
   style_urls = ['skins/standard/buglist.css']
-  yui = ['datatable']
+  jquery = ['datatables']
+  jquery_css = ['datatables']
 %]
 
 [% IF debug %]
@@ -75,7 +76,7 @@
     [% END %]
 
     [% IF format == "table" %]
-      [% PROCESS "reports/report-table.html.tmpl" %]
+      [% PROCESS "reports/report-table.html.tmpl" table_id = loop.count %]
     [% ELSE %]
       [% IF tbl %]
         <h2>[% tbl_disp FILTER email FILTER html %]</h2>