From c626b22f4d0819058220a8725ee237345540035c Mon Sep 17 00:00:00 2001
From: Ross Poulton <ross@rossp.org>
Date: Tue, 15 Jan 2008 05:07:19 +0000
Subject: [PATCH] * Add interface for filtering mechanism - now only shows the
 filtering   options that are being used, allowing users to add or remove more
 options   rather than just display the lot on screen.

* Break out filtering and row hover into separate javascript files (hover
  is used in the ticket list & dashboard - same code was used in both
  places. Anti-DRY)
---
 htdocs/filter.js                    | 21 ++++++++++++++++++
 htdocs/helpdesk.css                 | 32 ++++++---------------------
 htdocs/hover.js                     |  7 ++++++
 templates/helpdesk/dashboard.html   |  8 +++----
 templates/helpdesk/ticket_list.html | 34 ++++++++++++++++++++++++-----
 5 files changed, 67 insertions(+), 35 deletions(-)
 create mode 100644 htdocs/filter.js
 create mode 100644 htdocs/hover.js

diff --git a/htdocs/filter.js b/htdocs/filter.js
new file mode 100644
index 00000000..216e556e
--- /dev/null
+++ b/htdocs/filter.js
@@ -0,0 +1,21 @@
+$(document).ready(function() {
+    $("#filterBuilderButton").click(function() {
+        var boxName = "#filterBox" + $("#filterBuilderSelect").val();
+        $(boxName).slideDown();
+        return false;
+    });
+    $(".filterBuilderRemove").click(function() {
+        var boxName = "#" + $(this).parent().attr('id');
+        $(boxName).slideUp();
+        $(boxName).children("input:text").each(function() {
+            $(this).val("");
+        });
+        $(boxName).children("input:checkbox").each(function() {
+            this.checked = false;
+        });
+        $(boxName).children("select").each(function() {
+            this.selectedIndex = -1;
+        });
+        return false;
+    });
+});
diff --git a/htdocs/helpdesk.css b/htdocs/helpdesk.css
index b07db72b..3e95f772 100644
--- a/htdocs/helpdesk.css
+++ b/htdocs/helpdesk.css
@@ -156,31 +156,6 @@ a.ticket_link_status {
     font: 12pt Garamond;
 }
 
-.priority1 {
-    background-color: #fcc;
-}
-
-.priority2 {
-    background-color: #FFE5CE;
-}
-
-.priority3 {
-    background-color: #CEE0FF;
-}
-
-.priority4 {
-    background-color: #CEF5FF;
-}
-
-.prority5 {
-    background-color: #CEE0FF;
-}
-
-.priority1, .priority2, .priority3, .priority4, .priority5 {
-    color: #6C79A0;
-    border-bottom: solid #d5e7fd 1px;
-}
-
 a img {
     border: none;
     padding: 2px;
@@ -189,3 +164,10 @@ a img {
 textarea#commentBox {
     width: 100%;
 }
+
+.filterBox {
+    display: none;
+}
+.filterBoxShow {
+    display: block;
+}
diff --git a/htdocs/hover.js b/htdocs/hover.js
new file mode 100644
index 00000000..7b5b412a
--- /dev/null
+++ b/htdocs/hover.js
@@ -0,0 +1,7 @@
+$(document).ready(function() {
+    $("tr.row_hover").mouseover(function() {
+        $(this).addClass("hover");
+    }).mouseout(function() {
+        $(this).removeClass("hover");
+    });
+});
diff --git a/templates/helpdesk/dashboard.html b/templates/helpdesk/dashboard.html
index 036b8a21..948640b8 100644
--- a/templates/helpdesk/dashboard.html
+++ b/templates/helpdesk/dashboard.html
@@ -1,10 +1,8 @@
 {% extends "helpdesk/base.html" %}
 {% block helpdesk_title %}Helpdesk Dashboard{% endblock %}
-{% block helpdesk_head %}<script type='text/javascript' language='javascript'>
-$(document).ready(function() {
-    $("tr.row_hover").mouseover(function() {$(this).addClass("hover");}).mouseout(function() {$(this).removeClass("hover");});
-});
-</script>{% endblock %}
+{% block helpdesk_head %}
+<script type='text/javascript' language='javascript' src='{{ MEDIA_URL }}/helpdesk/hover.js'></script>
+{% endblock %}
 {% block helpdesk_body %}
 <table width='30%'>
 <tr class='row_tablehead'><td colspan='4'>Helpdesk Summary</td></tr>
diff --git a/templates/helpdesk/ticket_list.html b/templates/helpdesk/ticket_list.html
index 42774913..9a227036 100644
--- a/templates/helpdesk/ticket_list.html
+++ b/templates/helpdesk/ticket_list.html
@@ -1,15 +1,24 @@
 {% extends "helpdesk/base.html" %}
 {% block helpdesk_title %}Ticket Listing{% endblock %}
-{% block helpdesk_head %}<script type='text/javascript' language='javascript'>
-$(document).ready(function() {
-    $("tr.row_hover").mouseover(function() {$(this).addClass("hover");}).mouseout(function() {$(this).removeClass("hover");});
-});
-</script>{% endblock %}
+{% block helpdesk_head %}
+<script type='text/javascript' language='javascript' src='{{ MEDIA_URL }}/helpdesk/filter.js'></script>
+<script type='text/javascript' language='javascript' src='{{ MEDIA_URL }}/helpdesk/hover.js'></script>
+{% endblock %}
 {% block helpdesk_body %}
 
 {% load in_list %}
 
+<form><select name='select' id='filterBuilderSelect'>
+    <option value='Sort'>Sorting</option>
+    <option value='Owner'>Owner</option>
+    <option value='Queue'>Queue</option>
+    <option value='Status'>Status</option>
+    <option value='Keywords'>Keywords</option>
+</select>
+<input type='button' id='filterBuilderButton' value='+' /></form>
+
 <form method='get' action='./'>
+<div class='filterBox{% if sort %} filterBoxShow{% endif %}' id='filterBoxSort'>
 <label for='id_sort'>Sorting</label> <select id='id_sort' name='sort'>
     <option value='created'{% ifequal sort "created"%} selected='selected'{% endifequal %}>Created</option>
     <option value='title'{% ifequal sort "title"%} selected='selected'{% endifequal %}>Title</option>
@@ -18,14 +27,29 @@ $(document).ready(function() {
     <option value='priority'{% ifequal sort "priority"%} selected='selected'{% endifequal %}>Priority</option>
     <option value='assigned_to'{% ifequal sort "assigned_to"%} selected='selected'{% endifequal %}>Owner</option>
 </select>
+<input type='button' class='filterBuilderRemove' value='-' />
+</div>
 
+<div class='filterBox{% if owners %} filterBoxShow{% endif %}' id='filterBoxOwner'>
 <label for='id_owners'>Owner(s)</label> <select id='id_owners' name='assigned_to' multiple='selected' size='5'>{% for u in user_choices %}<option value='{{ u.id }}'{% if u.id|in_list:owners %} selected='selected'{% endif %}>{{ u.username }}</option>{% endfor %}</select>
+<input type='button' class='filterBuilderRemove' value='-' />
+</div>
 
+<div class='filterBox{% if queues %} filterBoxShow{% endif %}' id='filterBoxQueue'>
 <label for='id_queues'>Queue(s)</label> <select id='id_queues' name='queue' multiple='selected' size='5'>{% for q in queue_choices %}<option value='{{ q.id }}'{% if q.id|in_list:queues %} selected='selected'{% endif %}>{{ q.title }}</option>{% endfor %}</select>
+<input type='button' class='filterBuilderRemove' value='-' />
+</div>
 
+<div class='filterBox{% if statuses %} filterBoxShow{% endif %}' id='filterBoxStatus'>
 <label for='id_statuses'>Status(es)</label> {% for s in status_choices %}<input type='checkbox' name='status' value='{{ s.0 }}'{% if s.0|in_list:statuses %} checked='checked'{% endif %}> {{ s.1 }}{% endfor %}
+<input type='button' class='filterBuilderRemove' value='-' />
+</div>
 
+
+<div class='filterBox{% if query %} filterBoxShow{% endif %}' id='filterBoxKeywords'>
 <label for='id_query'>Keywords</label> <input type='text' name='q' value='{{ query }}' id='id_query' />
+<input type='button' class='filterBuilderRemove' value='-' />
+</div>
 
 <input type='submit' value='Go!' />
 </form>