Bug 216557: Be able to specify the order of the columns in a bug list - Patch by…

colchange.cgi

@@ -21,6 +21,7 @@
 # Contributor(s): Terry Weissman <terry@mozilla.org>
 #                 Gervase Markham <gerv@gerv.net>
 #                 Max Kanat-Alexander <mkanat@bugzilla.org>
+#                 Pascal Held <paheld@gmail.com>
 
 use strict;
 
@@ -94,10 +95,9 @@ if (defined $cgi->param('rememberedquery')) {
     if (defined $cgi->param('resetit')) {
         @collist = DEFAULT_COLUMN_LIST;
     } else {
-        foreach my $i (@masterlist) {
-            if (defined $cgi->param("column_$i")) {
-                push @collist, $i;
-            }
+        if (defined $cgi->param("selected_columns")) {
+            my %legal_list = map { $_ => 1 } @masterlist;
+            @collist = grep { exists $legal_list{$_} } $cgi->param("selected_columns");
         }
         if (defined $cgi->param('splitheader')) {
             $splitheader = $cgi->param('splitheader')? 1: 0;

js/change-columns.js

+/*# The contents of this file are subject to the Mozilla Public
+  # License Version 1.1 (the "License"); you may not use this file
+  # except in compliance with the License. You may obtain a copy of
+  # the License at http://www.mozilla.org/MPL/
+  #
+  # Software distributed under the License is distributed on an "AS
+  # IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
+  # implied. See the License for the specific language governing
+  # rights and limitations under the License.
+  #
+  # The Original Code is the Bugzilla Bug Tracking System.
+  #
+  # The Initial Developer of the Original Code is Pascal Held.
+  #
+  # Contributor(s): Pascal Held <paheld@gmail.com>
+  #
+*/
+
+function initChangeColumns() {
+    window.onunload = unload;
+    var av_select = document.getElementById("available_columns");
+    var sel_select = document.getElementById("selected_columns");
+    document.getElementById("avail_header").style.display = "inline";
+    document.getElementById("available_columns").style.display = "inline";
+    document.getElementById("select_button").style.display = "inline";
+    document.getElementById("deselect_button").style.display = "inline";
+    document.getElementById("up_button").style.display = "inline";
+    document.getElementById("down_button").style.display = "inline";
+    switch_options(sel_select, av_select, false);
+    sel_select.selectedIndex = -1;
+    updateView();
+}
+
+function switch_options(from_box, to_box, selected) {
+    for (var i = 0; i<from_box.options.length; i++) {
+        var opt = from_box.options[i];
+        if (opt.selected == selected) {
+            var newopt = new Option(opt.text, opt.value, opt.defaultselected, opt.selected);
+            to_box.options[to_box.options.length] = newopt;
+            from_box.options[i] = null;
+            i = i - 1;
+        }
+        
+    }
+}
+
+function move_select() {
+    var av_select = document.getElementById("available_columns");
+    var sel_select = document.getElementById("selected_columns");
+    switch_options(av_select, sel_select, true);
+    updateView();
+}
+
+function move_deselect() {
+    var av_select = document.getElementById("available_columns");
+    var sel_select = document.getElementById("selected_columns");
+    switch_options(sel_select, av_select, true);
+    updateView();
+}
+
+function move_up() {
+    var sel_select = document.getElementById("selected_columns");
+    var last = sel_select.options[0];
+    var dummy = new Option("", "", false, false);
+    for (var i = 1; i<sel_select.options.length; i++) {
+        var opt = sel_select.options[i];
+        if (opt.selected) {
+            sel_select.options[i] = dummy;
+            sel_select.options[i-1] = opt;
+            sel_select.options[i] = last;
+        }
+        else{
+            last = opt;
+        }        
+    }
+    updateView();
+}
+
+function move_down() {
+    var sel_select = document.getElementById("selected_columns");
+    var last = sel_select.options[sel_select.options.length-1];
+    var dummy = new Option("", "", false, false);
+    for (var i = sel_select.options.length-2; i >= 0; i--) {
+        var opt = sel_select.options[i];
+        if (opt.selected) {
+            sel_select.options[i] = dummy;
+            sel_select.options[i + 1] = opt;
+            sel_select.options[i] = last;
+        }
+        else{
+            last = opt;
+        }        
+    }
+    updateView();
+}
+
+function updateView() {
+    var select_button = document.getElementById("select_button");
+    var deselect_button = document.getElementById("deselect_button");
+    var up_button = document.getElementById("up_button");
+    var down_button = document.getElementById("down_button");
+    select_button.disabled = true;
+    deselect_button.disabled = true;
+    up_button.disabled = true;
+    down_button.disabled = true;
+    var av_select = document.getElementById("available_columns");
+    var sel_select = document.getElementById("selected_columns");
+    for (var i = 0; i < av_select.options.length;  i++) {
+        if (av_select.options[i].selected) {
+            select_button.disabled = false;
+            break;
+        }
+    }
+    for (var i = 0; i < sel_select.options.length; i++) {
+        if (sel_select.options[i].selected) {
+            deselect_button.disabled = false;
+            up_button.disabled = false;
+            down_button.disabled = false;
+            break;
+        }
+    }
+    if (sel_select.options.length > 0) {
+        if (sel_select.options[0].selected) {
+            up_button.disabled = true;
+        }
+        if (sel_select.options[sel_select.options.length - 1].selected) {
+            down_button.disabled = true;
+        }
+    }
+}
+
+function change_submit() {
+    var sel_select = document.getElementById("selected_columns");
+    for (var i = 0; i < sel_select.options.length; i++) {
+        sel_select.options[i].selected = true;
+    }
+    return false;
+}
+
+function unload() {
+	var sel_select = document.getElementById("selected_columns");
+    for (var i = 0; i < sel_select.options.length; i++) {
+        sel_select.options[i].selected = true;
+    }
+}

skins/standard/global.css

@@ -20,6 +20,7 @@
   *                 Vitaly Harisov <vitaly@rathedg.com>
   *                 Svetlana Harisova <light@rathedg.com>
   *                 Marc Schumann <wurblzap@gmail.com>
+  *                 Pascal Held <paheld@gmail.com>
   */
 
 /* global (begin) */
@@ -271,6 +272,10 @@ div#docslinks {
     padding: 1em 0;
 }
 
+.bz_default_hidden {
+    display: none;
+}
+
 span.quote {
     color: #65379c;
     /* Make quoted text not wrap. */
@@ -439,4 +444,25 @@ form#Create .comment {
     background: white;
 }
 
+.image_button {
+    background-repeat: no-repeat;
+    background-position: center center;
+    width: 30px;
+    display: none;
+}
+
+#select_button {
+    background-image: url(global/right.png);
+}
+
+#deselect_button {
+    background-image: url(global/left.png);
+}
+
+#up_button {
+    background-image: url(global/up.png);
+}
 
+#down_button {
+    background-image: url(global/down.png);
+}
\ No newline at end of file

skins/standard/show_bug.css

@@ -11,10 +11,6 @@
     width: 2em;
 }
 
-.bz_default_hidden {
-    display: none;
-}
-
 .related_actions {
     font-size: 0.85em; 
     float: right;

template/en/default/filterexceptions.pl

@@ -177,10 +177,6 @@
   'default.series_id', 
 ],
 
-'list/change-columns.html.tmpl' => [
-  'column', 
-],
-
 'list/edit-multiple.html.tmpl' => [
   'group.id', 
   'menuname',

template/en/default/list/change-columns.html.tmpl

@@ -16,12 +16,15 @@
   # Rights Reserved.
   #
   # Contributor(s): Dave Lawrence <dkl@redhat.com>
+  #                 Pascal Held <paheld@gmail.com>
   #%]
 
 [% PROCESS global/variables.none.tmpl %]
 
 [% PROCESS global/header.html.tmpl
   title = "Change Columns"
+  javascript_urls = "js/change-columns.js"
+  onload = "initChangeColumns()"
 %]
 
 <p>
@@ -36,16 +39,56 @@
 [% field_descs.reporter_realname    = "Reporter Realname" %]
 [% field_descs.qa_contact_realname  = "QA Contact Realname" %]
 
-<form action="colchange.cgi">
+<form name="changecolumns" action="colchange.cgi" onsubmit="change_submit();">
   <input type="hidden" name="rememberedquery" value="[% buffer FILTER html %]">
-  [% FOREACH column = masterlist %]
-    <input type="checkbox" id="[% column %]" name="column_[% column %]"
-      [%+ "checked='checked'" IF lsearch(collist, column) != -1 %]>
-    <label for="[% column %]">
-      [% (field_descs.${column} || column) FILTER html %]
-    </label>
-    <br>
-  [% END %]
+    <table>
+      <tr>
+        <th><div id="avail_header" class="bz_default_hidden">Available Columns</div></th>
+        <th></th>
+        <th>Selected Columns</th>
+        <th></th>
+      </tr>
+      <tr>
+        <td>
+          <select name="available_columns" id="available_columns" 
+                  size="15" multiple="multiple" onchange="updateView();"
+                  class="bz_default_hidden"> 
+          </select>
+        </td>
+        <td>
+          <input class="image_button" type="button" id="select_button" 
+                 name="select" onclick="move_select()">
+          <br><br>
+          <input class="image_button" type="button" id="deselect_button" 
+                 name="deselect" onclick="move_deselect()">
+        </td>
+        <td>
+          <select name="selected_columns" id="selected_columns" 
+                  size="15" multiple="multiple" onchange="updateView();">
+            [% FOREACH column = collist %]
+                <option value="[% column FILTER html %]" selected="selected">
+                [% (field_descs.${column} || column) FILTER html %]
+              </option>
+            [% END %]
+            [% FOREACH column = masterlist %]
+              [% IF lsearch(collist, column) == -1 %]
+                <option value="[% column FILTER html %]">
+                  [% (field_descs.${column} || column) FILTER html %]
+                </option>
+              [% END %]
+            [% END %]
+          </select>
+        </td>
+        <td>
+          <input class="image_button" type="button" id="up_button" 
+                 name="up" onclick="move_up()">
+          <br><br>
+          <input class="image_button" type="button" id="down_button" 
+                 name="down" onclick="move_down()">
+        </td>
+      </tr>
+    </table>
+  </center>
 
   <p>
     <input id="nosplitheader" type="radio" name="splitheader" value="0"