Cleaning up query options UI

null object fix.
Improved key support
initial linking with paginate
Fix linting issue

3 files changed, 160 insertions, 83 deletions

diff --git a/src/fauxton/app/addons/documents/assets/less/documents.less b/src/fauxton/app/addons/documents/assets/less/documents.less
index c30a9afae..61d864b87 100644
--- a/src/fauxton/app/addons/documents/assets/less/documents.less
+++ b/src/fauxton/app/addons/documents/assets/less/documents.less
@@ -23,6 +23,12 @@ button.beautify {
 	margin-top: 20px;
 }
 
+.toggle-btns {
+    label{
+        margin-right: 0;
+    }
+}
+
 #per-page {
   float: right;
 
@@ -32,6 +38,7 @@ button.beautify {
   
 }
 
+
 /** used in all_docs_list.html **/
 .view {
     table td div {
diff --git a/src/fauxton/app/addons/documents/templates/advanced_options.html b/src/fauxton/app/addons/documents/templates/advanced_options.html
index e282c6254..4ca8f12a4 100644
--- a/src/fauxton/app/addons/documents/templates/advanced_options.html
+++ b/src/fauxton/app/addons/documents/templates/advanced_options.html
@@ -13,78 +13,103 @@ the License.
 -->
 <div class="errors-container"></div>
 <form class="js-view-query-update custom-inputs">
-  <div class="controls-group">
-    <div class="row-fluid">
+
+<!-- tabs for choosing Keys or Start & end -->
+
+  <div class="btn-group toggle-btns">
+    <label for="showKeys" class="drop-down btn active">
+     Specific Keys 
+    </label>
+    <label for="showStartEnd" class="drop-down btn">
+      Bounded Queries
+    </label>
+  </div>
+
+  <div class="controls-group well">
+    <div class="row-fluid" id="js-showKeys">
       <div class="controls controls-row">
-        <input name="key" class="span6" type="text" placeholder="Key">
-        <input name="keys" class="span6" type="text" placeholder="Keys">
+        <input name="keys" class="input-xxlarge" type="text" placeholder="Enter a key, an array of keys. This must be valid JSON.">
       </div>
     </div>
-    <div class="row-fluid">
+    <div class="row-fluid hide" id="js-showStartEnd">
       <div class="controls controls-row">
-        <input name="startkey" class="span6" type="text" placeholder="Start Key">
+        <input name="startkey" class="span6" type="text" placeholder="Start Key" disabled>
         <input name="endkey" class="span6" type="text" placeholder="End Key">
       </div>
+      <div class="controls controls-row checkbox inline">  
+        <input id="check5" name="inclusive_end" type="checkbox" value="false" disabled>
+        <label for="check5">Disable Inclusive End</label>
+      </div>
     </div>
   </div>
+
+<!-- Limit and Skip are conditional -->
+
   <div class="controls-group">
-    <div class="row-fluid">
-      <div class="controls controls-row">
-        <div class="checkbox inline">  
-          <input id="check1" type="checkbox" name="include_docs" value="true">  
-          <label name="include_docs" for="check1">Include Docs</label>  
-          <% if (hasReduce) { %>
-          <input id="check2" name="reduce" type="checkbox" value="true">
-          <label for="check2">Reduce</label>  
-        </div> 
-        <label id="select1" class="drop-down inline">
-          Group Level:
-          <select id="select1" disabled name="group_level" class="input-small">
-            <option value="0">None</option>
-            <option value="1">1</option>
-            <option value="2">2</option>
-            <option value="3">3</option>
-            <option value="4">4</option>
-            <option value="5">5</option>
-            <option value="6">6</option>
-            <option value="7">7</option>
-            <option value="8">8</option>
-            <option value="9">9</option>
-            <option value="999" selected="selected">exact</option>
-          </select>
-        </label>
-        <% } else{ %>
-        </div>
-        <% } %>
+      <label class="drop-down inline">
+        Limit:
+        <select name="limit" class="input-small" disabled>
+          <option>5</option>
+          <option>10</option>
+          <option selected="selected">20</option>
+          <option>30</option>
+          <option>50</option>
+          <option>100</option>
+		  <option>500</option>
+        </select>
+      </label>
+      <label for="skipRows" class="inline drop-down">
+        Skip
+        <input name="skip" class="input-large" type="text" id="skipRows" disabled placeholder="Number of rows to skip">
+      </label>
+      <span class="js-disabled-message"> Limit &amp; and Skip are disabled when using Keys.</span>
 
-        <div class="checkbox inline">  
-          <input id="check3" name="stale" type="checkbox" value="ok">
-          <label for="check3">Stale</label>
-          <input id="check4" name="descending" type="checkbox" value="true">  
-          <label for="check4">Descending</label>  
-        </div> 
-        <label class="drop-down inline">
-          Limit:
-          <select name="limit" class="input-small">
-            <option>5</option>
-            <option>10</option>
-            <option >20</option>
-            <option>30</option>
-            <option>50</option>
-            <option >100</option>
-            <option>500</option>
-            <option selected="selected">None</option>
-          </select>
-        </label>
-        <div class="checkbox inline">  
-          <input id="check5" name="inclusive_end" type="checkbox" value="false">
-          <label for="check5">Disable Inclusive End</label>
-          <input id="check6" name="update_seq" type="checkbox" value="true">  
-          <label for="check6">Update Sequence</label>  
-        </div>
+      <div class="checkbox inline"> 
+        <input id="check1" type="checkbox" name="include_docs" value="true">  
+        <label name="include_docs" for="check1">Include Docs (show the entire doc body)</label>  
       </div>
-    </div>
+
+      <% if (hasReduce) { %>
+      <div class="checkbox inline">  
+        <input id="check2" name="reduce" type="checkbox" value="true">
+        <label for="check2">Reduce</label>  
+      </div> 
+      <label id="select1" class="drop-down inline">
+        Group Level:
+        <select id="select1" disabled name="group_level" class="input-small">
+          <option value="0">None</option>
+          <option value="1">1</option>
+          <option value="2">2</option>
+          <option value="3">3</option>
+          <option value="4">4</option>
+          <option value="5">5</option>
+          <option value="6">6</option>
+          <option value="7">7</option>
+          <option value="8">8</option>
+          <option value="9">9</option>
+          <option value="999" selected="selected">exact</option>
+        </select>
+      </label>
+      <% } %>
+
+      <label id="select2" class="drop-down inline">
+        Order: 
+        <select id="select2" name="descending" class="input-large">
+          <option value="false">Accending</option>
+          <option value="true">Descending</option>
+        </select>
+      </label>
+
+      <div class="checkbox inline">  
+        <input id="check6" name="update_seq" type="checkbox" value="true">  
+        <label for="check6">Update Sequence</label>  
+      </div>
+
   </div>
+
+
+
+
   <div class="controls-group">
     <div class="row-fluid">
       <div id="button-options" class="controls controls-row">
diff --git a/src/fauxton/app/addons/documents/views.js b/src/fauxton/app/addons/documents/views.js
index f29ebaafb..1e7addf9d 100644
--- a/src/fauxton/app/addons/documents/views.js
+++ b/src/fauxton/app/addons/documents/views.js
@@ -335,7 +335,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
 
       this.model.destroy().then(function(resp) {
         FauxtonAPI.addNotification({
-          msg: "Succesfully destroyed your doc"
+          msg: "Succesfully destroyed your doc",
+          clear:  true
         });
         that.$el.fadeOut(function () {
           that.remove();
@@ -348,7 +349,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
       }, function(resp) {
         FauxtonAPI.addNotification({
           msg: "Failed to destroy your doc!",
-          type: "error"
+          type: "error",
+          clear:  true
         });
       });
     }
@@ -518,13 +520,15 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
           return FauxtonAPI.addNotification({
             msg: "JSON Parse Error on field: "+param.name,
             type: "error",
-            selector: ".advanced-options .errors-container"
+            selector: ".advanced-options .errors-container",
+            clear:  true
           });
         });
         FauxtonAPI.addNotification({
           msg: "Make sure that strings are properly quoted and any other values are valid JSON structures",
           type: "warning",
-          selector: ".advanced-options .errors-container"
+          selector: ".advanced-options .errors-container",
+          clear:  true
         });
 
         return false;
@@ -580,7 +584,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
         this.ddocID = options.ddocInfo.id;
       }
       this.newView = options.newView || false;
-      this.docParams = options.docParams;
+      this.docParams = options.docParams || {};
       this.params = options.params || {};
       this.expandDocs = true;
       this.perPageDefault = this.docParams.limit || 20;
@@ -597,7 +601,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
           // This should just throw a notification, not break the page
           FauxtonAPI.addNotification({
             msg: "Bad Request",
-            type: "error"
+            type: "error",
+            clear:  true
           });
 
           //now redirect back to alldocs
@@ -668,7 +673,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
         }, function(resp) {
           FauxtonAPI.addNotification({
             msg: "Failed to destroy your doc!",
-            type: "error"
+            type: "error",
+            clear:  true
           });
         });
       }, this);
@@ -771,7 +777,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
       if (this.model.isNewDoc()) {
         FauxtonAPI.addNotification({
           msg: 'This document has not been saved yet.',
-          type: 'warning'
+          type: 'warning',
+          clear:  true
         });
         return;
       }
@@ -784,13 +791,15 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
 
       this.model.destroy().then(function(resp) {
         FauxtonAPI.addNotification({
-          msg: "Succesfully destroyed your doc"
+          msg: "Succesfully destroyed your doc",
+          clear:  true
         });
         FauxtonAPI.navigate(database.url("index"));
       }, function(resp) {
         FauxtonAPI.addNotification({
           msg: "Failed to destroy your doc!",
-          type: "error"
+          type: "error",
+          clear:  true
         });
       });
     },
@@ -808,7 +817,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
       if (this.model.isNewDoc()) {
         FauxtonAPI.addNotification({
           msg: 'Please save the document before uploading an attachment.',
-          type: 'warning'
+          type: 'warning',
+          clear:  true
         });
         return;
       }
@@ -819,7 +829,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
       if (this.model.isNewDoc()) {
         FauxtonAPI.addNotification({
           msg: 'Please save the document before duplicating it.',
-          type: 'warning'
+          type: 'warning',
+          clear:  true
         });
         return;
       }
@@ -891,14 +902,16 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
           notification = FauxtonAPI.addNotification({
             msg: "Cannot save: " + 'Cannot change a documents _id, try Duplicate doc instead!',
             type: "error",
-            selector: "#doc .errors-container"
+            selector: "#doc .errors-container",
+            clear:  true
           });
         delete this.model.validationError;
       } else {
         notification = FauxtonAPI.addNotification({
           msg: "Please fix the JSON errors and try again.",
           type: "error",
-          selector: "#doc .errors-container"
+          selector: "#doc .errors-container",
+          clear:  true
         });
       }
     },
@@ -988,7 +1001,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
         editor.setValue(JSON.stringify(changedDoc, null, "  "));
         FauxtonAPI.addNotification({
           type: "error",
-          msg: "Cannot remove a documents Id or Revision."
+          msg: "Cannot remove a documents Id or Revision.",
+          clear:  true
         });
       });
     },
@@ -1008,7 +1022,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
     saveDoc: function(event) {
       FauxtonAPI.addNotification({
         type: "warning",
-        msg: "Save functionality coming soon."
+        msg: "Save functionality coming soon.",
+        clear:  true
       });
     },
 
@@ -1073,7 +1088,34 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
       "change form.js-view-query-update input": "updateFilters",
       "change form.js-view-query-update select": "updateFilters",
       "submit form.js-view-query-update": "updateView",
-      "click button.preview": "previewView"
+      "click button.preview": "previewView",
+      "click .toggle-btns > label":  "toggleQuery"
+    },
+
+    toggleQuery: function(e){
+      e.preventDefault();
+      var showFunctionName =this.$(e.currentTarget).attr("for");
+      //highlight current
+      this.$(".toggle-btns > label").removeClass('active');
+      this.$(e.currentTarget).addClass("active");
+      
+      this.$("[id^='js-show']").hide();
+
+      //show section & disable what needs to be disabled
+      this[showFunctionName]();
+    },
+
+    showKeys: function(){
+      this.$("#js-showKeys, .js-disabled-message").show();
+      this.$('[name="skip"],[name="startkey"],[name="limit"],[name="endkey"],[name="inclusive_end"]').attr("disabled","true");
+      this.$('[name="keys"]').removeAttr("disabled");
+    },
+
+    showStartEnd: function(){
+      this.$("#js-showStartEnd").show();
+      this.$('[name="skip"],[name="startkey"],[name="limit"],[name="endkey"],[name="inclusive_end"]').removeAttr("disabled");
+      this.$('.js-disabled-message').hide();
+      this.$('[name="keys"]').attr("disabled","true");
     },
 
     beforeRender: function () {
@@ -1090,20 +1132,21 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
       this.hasReduce = hasReduce;
       this.render();
     },
-
+    validateKeys:  function(val){
+      return JSON.parse(val);
+    },
     queryParams: function () {
       var $form = this.$(".js-view-query-update");
-      // Ignore params without a value
+
       var params = _.reduce($form.serializeArray(), function(params, param) {
         if (!param.value) { return params; }
         if (param.name === "limit" && param.value === 'None') { return params; }
-
         params.push(param);
         return params;
       }, []);
 
       // Validate *key* params to ensure they're valid JSON
-      var keyParams = ["key","keys","startkey","endkey"];
+      var keyParams = ["keys","startkey","endkey"];
       var errorParams = _.filter(params, function(param) {
         if (_.contains(keyParams, param.name)) {
           try {
@@ -1140,7 +1183,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
             var notification = FauxtonAPI.addNotification({
               msg: "include_docs has been disabled as you cannot include docs on a reduced view",
               type: "warn",
-              selector: ".view.show .all-docs-list.errors-container"
+              selector: ".view.show .all-docs-list.errors-container",
+              clear:  true
             });
           }
           $form.find("input[name=include_docs]").prop("disabled", true);
@@ -1161,13 +1205,13 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
         var $ele;
         switch (key) {
           case "limit":
+          case "descending":
           case "group_level":
             if (!val) { return; }
             $form.find("select[name='"+key+"']").val(val);
           break;
           case "include_docs":
             case "stale":
-            case "descending":
             case "inclusive_end":
             $form.find("input[name='"+key+"']").prop('checked', true);
           break;
@@ -1186,6 +1230,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
     },
 
     updateView: function (event) {
+      event.preventDefault();
       this.updateViewFn(event, this.queryParams());
     },