v0.9 Release – Implementing changes to the Changset Query UI

In my goals blog post I outlined my revised plans for the changeset query UI. I wanted to make the use of jquery now that the library has been added to the repo. Also, the textbox value that the user enters for a query shouldn’t be removed or changed. Furthermore, I wanted to add the 3rd query supported by the pushlog, which takes in two pushids. Lastly, I also wanted the UI to remember the previously executed query (I forgot to specify this in my goals post). So, for example if I make a changeset query and the results are displayed, the selected item on the drop down should still be a changeset. I believe this is what ted wanted, if I understood him correctly.

Previous Implementation

Let me show you the old code to put things into perspective so that it’s easier to visualize what changes I have made:

function changeQueryType() 
{
  var queryType = document.getElementById("querytype");
  var fromBox = document.getElementById("from");
  var toBox = document.getElementById("to");
  if(queryType.value == "changeset") {
    fromBox.name = "fromchange";
    fromBox.value="#fromchange|escape#";
    toBox.name = "tochange";
    toBox.value="#tochange|escape#";
  } else {
    fromBox.name = "startdate";
    fromBox.value="#startdate|escape#";
    toBox.name = "enddate";
    toBox.value="#enddate|escape#";
}

<form action="{url}pushloghtml">
<div class="search">
<select id="querytype" onchange="changeQueryType()">
<option value="date">Date</option>
<option value="changeset">Changeset</option>
</select>&nbsp;&nbsp;&nbsp;
From:
<input id="from" type="text" name="startdate"  value="#startdate|escape#"/>
To:
<input id="to" type="text"name="enddate"  value="#enddate|escape#"/>
<input type="submit" value="Search"/>
</div>
</form>

Moving to jquery

As I mentioned before we are now using jquery in hg_templates. This is a great move as I love using this library. I’m still learning new things about it every time I try something. Here is what my code looks like with the jquery changes:

35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

// remember the previously selected query
var queryString = window.top.location.search.substring(1);
if(queryString != "") {
  if(queryString.indexOf("startdate") != -1)
    $(".querytype option[value='date']").attr('selected', 'selected');
  else if(queryString.indexOf("fromchange") != -1)
    $(".querytype option[value='changeset']").attr('selected', 'selected');
  else if(queryString.indexOf("startID") != -1)
    $(".querytype option[value='pushid']").attr('selected', 'selected');
}
//decide what query to execute
$('.querytype').change(function () {
  if($('.querytype option:selected').attr('value') == 'date') {
    $('.from').attr('name', 'startdate');
    $('.to').attr('name', 'enddate');
  }
  else if($('.querytype option:selected').attr('value') == 'changeset') {
    $('.from').attr('name', 'fromchange');
    $('.to').attr('name', 'tochange');
  }
  else {
    $('.from').attr('name', 'startID');
    $('.to').attr('name', 'endID');
  }
});

70
71
72
73
74
75
76
77
78
79
80
81
82
83

<form action="{url}pushloghtml">
<div class="search">
<select class="querytype">
<option value="date">Date</option>
<option value="changeset">Changeset</option>
<option value="pushid">pushID</option>
</select>&nbsp;&nbsp;&nbsp;
From:
<input class="from" type="text" name="startdate"/>
To:
<input class="to" type="text" name="enddate"/>
<input class="submitquery" type="submit" value="Search"/>
</div>
</form>

Remembering the previously executed query

Now, this was a bit tricky. I experimented with 2 or 3 methods. There is the obvious method where I just read in whatever is entered and match it against a regex to see what type of query was executed. I decided not to take that approach. Then, I looked at using jquery to read the selected item in the drop down list when the search button gets clicked. That didn’t work for me. I ended up looking at the query string to find out what query got executed.

So in the above code (line 38) I just retrieve the query string and do an indexOf to find the query type. It ended up being pretty simple.

Don’t remove the values entered by the user

To improve usability, ted recommended that I shouldn’t reset the text box value when the drop down selection changes. First of all I decided to remove the default date that you currently find in the text boxes. This is because if I make a changeset query via the new UI, after the page loads the default date values re-appear in the text boxes since they are hard coded.

Now when the change event occurs I don’t set the value and so if the user decides to change the query type the values he entered will not change.

The 3rd pushlog query

There is another pushlog query that takes in a startID and an endID. I’ve added this new query option to the drop down menu as well.

Unfortunately for this patch showing screenshots won’t help at all since you have to try it out for yourself to see whether the implementation works correctly or not. I’ll be putting up the patch soon so whoever is interested can get it from the bug page and try it out for themselves.