Bug 142394: Tabular reports should be sortable

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

@@ -17,6 +17,8 @@
   #
   # Contributor(s): Gervase Markham <gerv@gerv.net>
   #                 <rdean@cambianetworks.com>
+  #                 Frédéric Buclin <LpSolit@gmail.com>
+  #                 Guy Pyrzak <guy.parzak@gmail.com>
   #%]
 
 [%# INTERFACE:
@@ -43,6 +45,90 @@
   [% tbl_field FILTER url_quote %]=[% tbl FILTER url_quote %][% END %]
 [% END %]
 
+<script type="text/javascript">
+YAHOO.util.Event.addListener(window, "load", function() {
+  this.Linkify = function(elLiner, oRecord, oColumn, oData) {
+    if (oData == 0)
+      elLiner.innerHTML = ".";
+    else
+      elLiner.innerHTML = "<a href='[% urlbase %]&amp;[% row_field FILTER js %]="
+                          + oRecord.getData("row_title").replace(/\s+$/,"")
+                          + "&amp;[% col_field FILTER js %]=" + oColumn.field
+                          + "'>" + oData + "</a>";
+  };
+
+  this.LinkifyTotal = function(elLiner, oRecord, oColumn, oData) {
+    if (oData == 0)
+      elLiner.innerHTML = ".";
+    else
+      elLiner.innerHTML = "<a href='[% urlbase %]&amp;[% row_field FILTER js %]="
+                          + oRecord.getData("row_title").replace(/\s+$/,"")
+                          + "[% '&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:"[% col 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"));
+  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", myColumnDefs, this.myDataSource, {formatRow: totalRowFormatter});
+});
+</script>
+
 [% IF tbl_field %]
   <h2>[% tbl_disp FILTER email FILTER html %]</h2>
 [% END %]
@@ -67,27 +153,29 @@
 [% col_idx = 0 %]
 [% row_idx = 0 %]
 [% grand_total = 0 %]
-
-<table border="1">
+<div id="tabular_report_container">
+<table id="tabular_report" border="1">
   [% IF col_field %]
+    <thead>
     <tr>
-      <td class="[% classes.$row_idx.$col_idx %]">
-      </td>
+      <th class="[% classes.$row_idx.$col_idx %]">
+      </th>
       [% FOREACH col = col_names %]
         [% col_totals.$col = 0 %]
         [% NEXT IF col == "" %]
         
         [% col_idx = 1 - col_idx %]
-        <td class="[% classes.$row_idx.$col_idx %]">
+        <th class="[% classes.$row_idx.$col_idx %]">
           [% PROCESS value_display value = col field = col_field %]
-        </td>
+        </th>
       [% END %]
-      <td class="ttotal">
+      <th class="ttotal">
         Total
-      </td>
+      </th>
     </tr>
+    </thead>
   [% END %]
-  
+  <tbody>
   [% FOREACH row = row_names %]
     [% row_total = 0 %]
     
@@ -122,32 +210,32 @@
       </td>
     </tr>
   [% END %]
-  
-  <tr>
-    [% row_idx = 1 - row_idx %]
-    <td class="ttotal">
-      Total
-    </td>
-    [% FOREACH col = col_names %]
-      [% NEXT IF col == "" %]
+    <tr>
+      [% row_idx = 1 - row_idx %]
+      <td class="ttotal">
+        Total
+      </td>
+      [% FOREACH col = col_names %]
+        [% NEXT IF col == "" %]
       
-      <td class="ttotal" align="center">
-        <a href="[% urlbase %]&amp;
-          [% col_field FILTER url_quote %]=[% col FILTER url_quote %]
-          [% "&amp;$row_vals" IF row_vals %]">
-        [% col_totals.$col %]</a>
-      </td> 
-    [% END %]
-    <td class="ttotal" align="right">
-      <strong>
-        <a href="[% urlbase %]
-          [% "&amp;$row_vals" IF row_vals %]
-          [% "&amp;$col_vals" IF col_vals %]">[% grand_total %]</a>
-      </strong>
-    </td>
-  </tr>
+        <td class="ttotal" align="center">
+          <a href="[% urlbase %]&amp;
+            [% col_field FILTER url_quote %]=[% col FILTER url_quote %]
+            [% "&amp;$row_vals" IF row_vals %]">
+          [% col_totals.$col %]</a>
+        </td>
+      [% END %]
+      <td class="ttotal" align="right">
+        <strong>
+          <a href="[% urlbase %]
+            [% "&amp;$row_vals" IF row_vals %]
+            [% "&amp;$col_vals" IF col_vals %]">[% grand_total %]</a>
+        </strong>
+      </td>
+    </tr>
+  </tbody>
 </table>
-
+</div>
       
     </td>
   </tr>

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

@@ -74,9 +74,10 @@
     .t2     { background-color: #dfefff } /* light blue  */
     .t3     { background-color: #dddddd } /* grey        */
     .t4     { background-color: #c3d3ed } /* darker blue */
-    .ttotal { background-color: #cfffdf } /* light green */
+    .ttotal, .ttotal td { background-color: #cfffdf } /* light green */
   "
   header_addl_info = time
+  yui = ['datatable']
 %]
 
 [% IF debug %]