Ticket Utilities and Practice

Update of "Sortable Report Table"

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.


Artifact ID: 97f87284acafc3bed57cbe02765a392d7119ee17
Page Name:Sortable Report Table
Date: 2010-04-21 23:49:20
Original User: Ross
Parent: 0ae3d9dcdab7d2ca8aed83d50bfceb8ec6b53d37

Here is a recipe for making the ticket report have sort links in its column header. This is based on the MIT-licensed Sortable Table JavaScript from Yoast.com.

  1. Create the folder sortable within the repository, and put the files sortable_us_fossil.js, arrow-up.gif, arrow-down.gif, and arrow-none.gif in it. Add and commit these files so that doc/tip/sortable/... URLs will refer to them.
  1. In the repository, Admin, Header, put the following in the HTML for the HEAD section:
    <script type="text/javascript" src="doc/tip/sortable/sortable_us_fossil.js"></script>
  1. In Admin, CSS, put the following in the style sheet:
    table.report a { color: black; }
    table.report a:link { color: black; }
    table.report a:visited { color: black; }
    table.report a:hover { color: green; }
    table.report a img { border: 0; }
    table.report th {  background-color: #ffe; }
  1. Verify with fossil ui that the ticket reports are now sortable.
  1. Push the header change to the central copy with fossil config push skin.

There are defects with this solution. The primary defect is that fossil writes two tables to the report page. Both tables have the same CSS class ("report") and lack any ID attribute.

The first table contains the color key, which it puts in a header row. This interacts badly with the script which looks for all tables of class "report" to modify their header rows. It is possible that some cleverness could cause it to modify only the second table, which would mitigate this issue.