Ticket Utilities and Practice

Sortable Report Table

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.