Futon: Allow control over the group and group_level options on reduce views.

git-svn-id: https://svn.apache.org/repos/asf/couchdb/trunk@889795 13f79535-47bb-0310-9956-ffa450edef68

3 files changed, 60 insertions, 24 deletions

diff --git a/share/www/database.html b/share/www/database.html
index a4dedfcf..64785e14 100644
--- a/share/www/database.html
+++ b/share/www/database.html
@@ -71,6 +71,7 @@ specific language governing permissions and limitations under the License.
 
         // Restore preferences/state
         $("#documents thead th.key").toggleClass("desc", $.futon.storage.get("desc"));
+        $("#grouplevel select").val($.futon.storage.get("group_level"));
         $("#reduce :checkbox")[0].checked = $.futon.storage.get("reduce");
         $("#perpage").val($.futon.storage.get("per_page"));
 
@@ -87,12 +88,20 @@ specific language governing permissions and limitations under the License.
           location.href = "?" + encodeURIComponent(page.db.name) +
             (viewName ? "/" + viewName  : "");
         });
-        $("#documents thead th.key").click(function() {
-          $(this).toggleClass("desc");
+        $("#documents thead th.key span").click(function() {
+          $(this).closest("th").toggleClass("desc");
           page.updateDocumentListing();
         });
+        $("#grouplevel select").change(function() {
+          page.updateDocumentListing();
+          $.futon.storage.set("group_level", this.value);
+        });
         $("#reduce :checkbox").click(function() {
           page.updateDocumentListing();
+          var cb = this;
+          $("#grouplevel").toggleClass("disabled", !cb.checked).find("select").each(function() {
+            this.disabled = !cb.checked;
+          });
           $.futon.storage.set("reduce", this.checked);
         });
         $("#perpage").change(function() {
@@ -188,7 +197,24 @@ specific language governing permissions and limitations under the License.
         <caption>Documents</caption>
         <thead>
           <tr>
-            <th class="key"><div>Key</div></th>
+            <th class="key">
+              <label id="grouplevel">
+                Grouping: <select>
+                  <option value="0">none</option>
+                  <option value="1">level 1</option>
+                  <option value="2">level 2</option>
+                  <option value="3">level 3</option>
+                  <option value="4">level 4</option>
+                  <option value="5">level 5</option>
+                  <option value="6">level 6</option>
+                  <option value="7">level 7</option>
+                  <option value="8">level 8</option>
+                  <option value="9">level 9</option>
+                  <option value="100" selected>exact</option>
+                </select>
+              </label>
+              <span>Key</span>
+            </th>
             <th class="value">
               <label id="reduce"><input type="checkbox" autocomplete="off" checked> Reduce</label>
               Value
@@ -215,12 +241,6 @@ specific language governing permissions and limitations under the License.
           </tr>
         </tbody>
       </table>
-      <p id="grouptruenotice">
-        <strong>Note</strong>: Views with a reduce function will return a single row of reduced values.
-        If you are looking for the same results that you can see here in Futon,
-        add a <code>?group=true</code> parameter to your view query. Futon does
-        this automatically.
-      </p>
     </div>
   </div></body>
 </html>
diff --git a/share/www/script/futon.browse.js b/share/www/script/futon.browse.js
index 37f4ef08..9faf7669 100644
--- a/share/www/script/futon.browse.js
+++ b/share/www/script/futon.browse.js
@@ -104,6 +104,7 @@
         map_fun: {},
         reduce_fun: {},
         reduce: {},
+        group_level: {defaultValue: 100},
         per_page: {defaultValue: 10},
         view: {defaultValue: ""}
       });
@@ -192,14 +193,19 @@
               clearTimeout(dirtyTimeout);
               dirtyTimeout = setTimeout(function() {
                 var buttons = $("#viewcode button.save, #viewcode button.revert");
-                page.isDirty = ($("#viewcode_map").val() != page.storedViewCode.map)
-                  || ($("#viewcode_reduce").val() != (page.storedViewCode.reduce || ""))
+                var viewCode = {
+                  map: $("#viewcode_map").val(),
+                  reduce: $("#viewcode_reduce").val()
+                };
+                page.isDirty = (viewCode.map != page.storedViewCode.map)
+                  || (viewCode.reduce != (page.storedViewCode.reduce || ""))
                   || page.viewLanguage != page.storedViewLanguage;
                 if (page.isDirty) {
                   buttons.removeAttr("disabled");
                 } else {
                   buttons.attr("disabled", "disabled");
                 }
+                $("#reduce, #grouplevel").toggle(!!viewCode.reduce);
               }, 100);
             }
             $("#viewcode textarea").enableTabInsertion()
@@ -215,16 +221,14 @@
             $("#language").change(updateDirtyState);
             page.updateDocumentListing();
           });
-          $("#grouptruenotice").show();
         } else if (viewName == "_temp_view") {
           page.viewLanguage = $.futon.storage.get("language");
           page.updateViewEditor(
             $.futon.storage.get("map", templates[page.viewLanguage]),
             $.futon.storage.get("reduce")
           );
-          $("#grouptruenotice").show();
         } else {
-          $("#reduce").hide();
+          $("#grouplevel, #reduce").hide();
           page.updateDocumentListing();
         }
         page.populateLanguagesMenu();
@@ -363,7 +367,7 @@
           mapFun.split("\n").length,
           reduceFun.split("\n").length
         );
-        $("#reduce").toggle(!!reduceFun);
+        $("#reduce, #grouplevel").toggle(!!reduceFun);
         $("#viewcode textarea").attr("rows", Math.min(15, Math.max(3, lines)));
       }
 
@@ -532,7 +536,7 @@
         }
         $("#paging a").unbind();
         $("#documents").find("tbody.content").empty().end().show();
-        this.updateDesignDocLink();
+        page.updateDesignDocLink();
 
         options.success = function(resp) {
           if (resp.offset === undefined) {
@@ -659,7 +663,11 @@
             if (reduceFun) {
               $.futon.storage.set("reduce_fun", reduceFun);
               if ($("#reduce :checked").length) {
-                options.group = true;
+                var level = parseInt($("#grouplevel select").val(), 10);
+                options.group = level > 0;
+                if (options.group && level < 100) {
+                  options.group_level = level;
+                }
               } else {
                 options.reduce = false;
               }
@@ -679,7 +687,11 @@
             var currentReduceCode = $.trim($("#viewcode_reduce").val()) || null;
             if (currentReduceCode) {
               if ($("#reduce :checked").length) {
-                options.group = true;
+                var level = parseInt($("#grouplevel select").val(), 10);
+                options.group = level > 0;
+                if (options.group && level < 100) {
+                  options.group_level = level;
+                }
               } else {
                 options.reduce = false;
               }
diff --git a/share/www/style/layout.css b/share/www/style/layout.css
index 222bdc82..8be40b95 100644
--- a/share/www/style/layout.css
+++ b/share/www/style/layout.css
@@ -79,18 +79,18 @@ table.listing th, table.listing td { padding: .2em .5em; }
 table.listing thead th { background: #dadada url(../image/thead.gif) repeat-x;
   border: 1px solid #a7a7a7; border-width: 0 0 1px 1px; color: #333;
   font-size: 95%; font-weight: normal; text-align: left;
-  text-shadow: #999 2px 1px 2px; text-transform: capitalize;
-  white-space: nowrap;
+  text-shadow: #999 2px 1px 2px; white-space: nowrap;
 }
 table.listing thead th:first-child { border-left: none; }
 table.listing thead th.key {
   background: #a7afb6 url(../image/thead-key.gif) 0 0 repeat-x;
   padding-top: 2px;
 }
-table.listing thead th.key div {
+table.listing thead th.key span {
   background: url(../image/order-asc.gif) 100% 3px no-repeat; cursor: pointer;
+  padding-right: 20px;
 }
-table.listing thead th.desc div {
+table.listing thead th.desc span {
   background-image: url(../image/order-desc.gif);
 }
 table.listing tbody tr th, table.listing tbody tr td { background: #feffea; }
@@ -375,10 +375,14 @@ body.fullwidth #wrap { margin-right: 0; }
 
 /* Documents table */
 
-#documents thead th { width: 50%; }
-#documents thead th.value label { float: right; font-size: 90%;
+#documents thead th { line-height: 150%; width: 50%; }
+#documents thead th label { color: #333; float: right; font-size: 90%;
   text-shadow: none;
 }
+#documents thead th label.disabled { color: #777; }
+#documents thead th label input { vertical-align: middle; }
+#documents thead th label input[type=range] { width: 7em; }
+#documents thead th label output { width: 4em; display: inline-block; }
 #documents tbody.content td { color: #999;
   font: normal 11px "DejaVu Sans Mono",Menlo,Courier,monospace;
 }