summaryrefslogtreecommitdiffstats
path: root/template/en/default
diff options
context:
space:
mode:
authorFrédéric Buclin <LpSolit@gmail.com>2015-09-25 18:28:20 +0200
committerFrédéric Buclin <LpSolit@gmail.com>2015-09-25 18:28:20 +0200
commitb3abb29f2814bafd69095f3ef91bc40cbe5f866c (patch)
tree3e08765d61310455b8b18e5786b01d78f58b8aba /template/en/default
parentad1dd066b5014a0aa7f67edfddc9ab1a24f0423a (diff)
downloadbugzilla-b3abb29f2814bafd69095f3ef91bc40cbe5f866c.tar.gz
bugzilla-b3abb29f2814bafd69095f3ef91bc40cbe5f866c.tar.xz
Bug 1204238: Migrate tabular report sorting from YUI to jQuery
r=gerv
Diffstat (limited to 'template/en/default')
-rw-r--r--template/en/default/filterexceptions.pl1
-rw-r--r--template/en/default/global/header.html.tmpl6
-rw-r--r--template/en/default/reports/report-table.html.tmpl176
-rw-r--r--template/en/default/reports/report.html.tmpl5
4 files changed, 32 insertions, 156 deletions
diff --git a/template/en/default/filterexceptions.pl b/template/en/default/filterexceptions.pl
index f5f1bd783..f83efaa88 100644
--- a/template/en/default/filterexceptions.pl
+++ b/template/en/default/filterexceptions.pl
@@ -75,7 +75,6 @@
'reports/report-table.html.tmpl' => [
'"&amp;$col_vals" IF col_vals',
'"&amp;$row_vals" IF row_vals',
- 'classes.$row_idx.$col_idx',
'urlbase',
'data.$tbl.$col.$row',
],
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index 488828daf..af9c8b686 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/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") %]
diff --git a/template/en/default/reports/report-table.html.tmpl b/template/en/default/reports/report-table.html.tmpl
index 57e998b1d..03f3147df 100644
--- a/template/en/default/reports/report-table.html.tmpl
+++ b/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,177 +30,44 @@
[% 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 %]
+ [% END %]
<td class="ttotal right">
<a href="[% urlbase %]&amp;
[% row_field FILTER uri %]=[% row FILTER uri %]
@@ -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">
diff --git a/template/en/default/reports/report.html.tmpl b/template/en/default/reports/report.html.tmpl
index a9cd96551..9c13351e1 100644
--- a/template/en/default/reports/report.html.tmpl
+++ b/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>