From 8532de99d9b6d1a1ec53e9fb2f6ef7374fab4674 Mon Sep 17 00:00:00 2001
From: Max Kanat-Alexander <mkanat@bugzilla.org>
Date: Tue, 31 May 2011 09:24:17 -0700
Subject: Bug 647649: Change the old "Boolean Charts" UI into the new AND/OR
 "Custom Search" UI. r=timello, a=mkanat

---
 .../en/default/search/boolean-charts.html.tmpl     | 186 ++++++++++++---------
 1 file changed, 107 insertions(+), 79 deletions(-)

(limited to 'template/en/default/search/boolean-charts.html.tmpl')

diff --git a/template/en/default/search/boolean-charts.html.tmpl b/template/en/default/search/boolean-charts.html.tmpl
index 90b5c790d..82c779612 100644
--- a/template/en/default/search/boolean-charts.html.tmpl
+++ b/template/en/default/search/boolean-charts.html.tmpl
@@ -48,96 +48,124 @@
   "matches",
   "notmatches",
 ] %]
-<script type="text/javascript">
-  TUI_alternates['custom_search_query'] = '&#9658;';
-  TUI_hide_default('custom_search_query');
-</script>
+
 <div class="bz_section_title" id="custom_search_filter">
   <div id="custom_search_query_controller" class="arrow">&#9660;</div>
   <a id="chart" href="javascript:TUI_toggle_class('custom_search_query')" >
     Custom Search</a> <span class="section_help">Didn't find what 
       you're looking for above? This area allows for ANDs, ORs, 
       and other more complex searches.</span>
-  </div>
-  <div id="custom_search_filter_section" class="bz_search_section custom_search_query" >
-[%# Whoever wrote the original version of boolean charts had a seriously twisted mind %]
+</div>
+<div id="custom_search_filter_section" 
+     class="bz_search_section custom_search_query">
+  [% SET indent_level = 0 %]
+  [% FOREACH condition = default.custom_search %]
+    [% SET cond_num = loop.count - 1 %]
+    [% PROCESS one_condition with_buttons = 0 %]
+  [% END %]
+  [% PROCESS one_condition
+    with_buttons = 1
+    condition = { f => 'noop' }
+    cond_num = cond_num + 1 %]
+  <script type="text/javascript">
+    TUI_alternates['custom_search_query'] = '&#9658;';
+    TUI_hide_default('custom_search_query');
+  </script>
+  <script type="text/javascript" src="js/custom-search.js"></script>
+</div>
 
-[% jsmagic = "onclick=\"this.form.action='query.cgi#chart'; this.form.method='POST'; return 1;\"" %]
 
-[% FOREACH chart = default.charts %]
-  [% chartnum = loop.count - 1 %]
-  <table>
-    <tr>
-      <td>
-        <input type="checkbox" id="negate[% chartnum FILTER html %]"
-             name="negate[% chartnum FILTER html %]" value="1"
-            [%+ "checked" IF chart.negate %]>
-        <label for="negate[% chartnum FILTER html %]">
-          Not (negate this whole chart)
-        </label>
-      </td>
-    </tr>
-  [% FOREACH row = chart.rows %]
-    [% rownum = loop.count - 1 %]
-    <tr>
-    [% FOREACH col = row %]
-      [% colnum = loop.count - 1 %]
-      <td>
-        <select name="[% "field${chartnum}-${rownum}-${colnum}" %]">
-          [% FOREACH field = fields %]
-            <option value="[% field.name %]" [% "selected" IF field.name == col.field %]>
-              [% field_descs.${field.name} || field.description FILTER html %]
-            </option>
-          [% END %]
-        </select>
+[% BLOCK one_condition %]
+  [%# Skip any conditions that don't have a field defined. %]
+  [% RETURN IF !condition.f %]
+  
+  [% IF !top_level_any_shown %]
+    [% INCLUDE any_all_select
+      name = "j_top" id = "j_top" selected = default.j_top.0 %]
+    [% top_level_any_shown = 1 %]
+  [% END %]
 
-        [% INCLUDE "search/type-select.html.tmpl"
-           name = "type${chartnum}-${rownum}-${colnum}",
-           types = types, selected = col.type %]
-        <input name="[% "value${chartnum}-${rownum}-${colnum}" %]" 
-               value="[% col.value FILTER html %]">
-      </td>
-      
-      [% UNLESS loop.last %]
-        <td align="center"> 
-          Or 
-        </td>    
-      </tr>
-      <tr>
-      [% ELSE %]
-        <td>
-          [% newor = colnum + 1 %]
-          <input type="submit" value="Or" [% jsmagic %]
-                 name="cmd-add[% "${chartnum}-${rownum}-${newor}" %]"
-                 id="cmd-add[% "${chartnum}-${rownum}-${newor}" %]">
-        </td>
-      [% END %]
-      
-    [% END %]
-    </tr>
+  [% IF condition.f == "CP" %]
+    [% indent_level = indent_level - 1 %]
+  [% END %]
+
+  <div class="custom_search_condition"
+       [% ' style="margin-left: ' _ (indent_level * 2) _ 'em"' IF indent_level %]
+       [% ' id="custom_search_last_row"' IF with_buttons %]>
     
-    [% UNLESS loop.last %]
-    <tr>
-      <td>And</td>
-    </tr>    
+    [% IF previous_condition.f == "OP" %]
+      [% INCLUDE any_all_select
+        name = "j" _ (cond_num - 1) id = "j" _ (cond_num - 1)
+        selected = previous_condition.j %]
+    [% END %]
+
+    [% IF with_buttons %]
+      <button id="op_button" type="button" 
+              title="Start a new group of criteria, including this row"
+              onclick="custom_search_open_paren()">(</button>
+    [% END %]
+
+    [% UNLESS condition.f == "CP" %]
+      <span class="custom_search_not_container" 
+            title="Search for the opposite of the criteria here">
+        <input type="checkbox" id="n[% cond_num FILTER html %]"
+               class="custom_search_form_field"
+               name="n[% cond_num FILTER html %]" value="1"
+               [% ' checked="checked"' IF condition.n %]>
+        <label for="n[% cond_num FILTER html %]">Not</label>
+      </span>
+    [% END %]
+
+    [% IF condition.f == "OP" %]
+      <input type="hidden" name="f[% cond_num FILTER html %]"
+             id="f[% cond_num FILTER html %]" value="OP">
+      (
+      [% indent_level = indent_level + 1 %]
+    [% ELSIF condition.f == "CP" %]
+      <input type="hidden" name="f[% cond_num FILTER html %]" value="CP">
+      )
     [% ELSE %]
-    <tr>
-      <td>
-        [% newand = rownum + 1; newchart = chartnum + 1 %]
-        <input type="submit" value="And" [% jsmagic %]
-               name="cmd-add[% "${chartnum}-${newand}-0" %]"
-               id="cmd-add[% "${chartnum}-${newand}-0" %]">
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-        <input type="submit" value="Add another boolean chart" [% jsmagic %]
-               name="cmd-add[% newchart %]-0-0"
-               id="cmd-add[% newchart %]-0-0">
-        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-      </td>
-    </tr>   
+      <select name="f[% cond_num FILTER html %]" title="Field"
+              id="f[% cond_num FILTER html %]"
+              class="custom_search_form_field">
+        [% FOREACH field = fields %]
+          <option value="[% field.name FILTER html %]"
+                  [%~ ' selected="selected"' IF field.name == condition.f %]>
+            [% field_descs.${field.name} || field.description FILTER html %]
+          </option>
+        [% END %]
+      </select>
+    
+      [% INCLUDE "search/type-select.html.tmpl"
+         name = "o${cond_num}", class = "custom_search_form_field"
+         types = types, selected = condition.o %]
+    
+      <input name="v[% cond_num FILTER html %]" title="Value"
+             class="custom_search_form_field"
+             value="[% condition.v FILTER html %]">
     [% END %]
     
-  [% END %]
-  </table>
-  [% "<hr>" IF NOT loop.last %]
+    [% IF with_buttons %]
+      <button class="custom_search_add_button" type="button"
+              id="add_button" title="Add a new row"
+              onclick="custom_search_new_row()">+</button>
+      <span id="cp_container" [% ' class="bz_default_hidden"' IF !indent_level %]>
+        <button id="cp_button" type="button"
+                title="End this group of criteria"
+                onclick="custom_search_close_paren()">)</button>
+      </span>
+    [% END %]
+  </div>
+  
+  [% previous_condition = condition %]
+[% END %]
+
+[% BLOCK any_all_select %]
+  <div class="any_all_select">
+    <select name="[% name FILTER html %]" [% "id=\"$id\"" IF id %]>
+      <option value="AND">Match ALL of the following:</option>
+      <option value="OR" [% ' selected="selected"' IF selected == "OR" %]>
+        Match ANY of the following:</option>
+    </select>
+  </div>
 [% END %]
-</div>
\ No newline at end of file
-- 
cgit v1.2.3-24-g4f1b