Skip to content

bugzilla
bugzilla
Commit b3abb29f authored by Frédéric Buclin's avatar Frédéric Buclin
Browse files
Options

Bug 1204238: Migrate tabular report sorting from YUI to jQuery

r=gerv
parent ad1dd066
Expand all Show whitespace changes
Inline Side-by-side
Showing with 34 additions and 184 deletions
skins/standard/buglist.css
View file @ b3abb29f
......@@ -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
View file @ b3abb29f
......@@ -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
View file @ b3abb29f
......@@ -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
View file @ b3abb29f
......@@ -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
View file @ b3abb29f
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment