Keys validation, textarea and cleanup

4 files changed, 90 insertions, 28 deletions

diff --git a/src/fauxton/app/addons/documents/assets/less/documents.less b/src/fauxton/app/addons/documents/assets/less/documents.less
index 61d864b87..36429ff81 100644
--- a/src/fauxton/app/addons/documents/assets/less/documents.less
+++ b/src/fauxton/app/addons/documents/assets/less/documents.less
@@ -39,6 +39,10 @@ button.beautify {
 }
 
 
+#query div.controls-group.well{
+    height: 150px;
+}
+
 /** used in all_docs_list.html **/
 .view {
     table td div {
@@ -97,3 +101,15 @@ button.beautify {
     height: 688px;
     font-size: 16px;
 }
+
+#keys-input {
+  display: inline-block;
+  width: 35%;
+}
+
+#keys-error {
+  display: inline-block;
+}
+
+
+
diff --git a/src/fauxton/app/addons/documents/resources.js b/src/fauxton/app/addons/documents/resources.js
index 6f4323a22..efd7f69f5 100644
--- a/src/fauxton/app/addons/documents/resources.js
+++ b/src/fauxton/app/addons/documents/resources.js
@@ -468,14 +468,21 @@ function(app, FauxtonAPI) {
       if (this.skipFirstItem) {
         rows = rows.splice(1);
       }
-      return _.map(rows, function(row) {
-        return {
-          _id: row.id,
-          _rev: row.value.rev,
-          value: row.value,
-          key: row.key,
-          doc: row.doc || undefined
-        };
+      
+      // remove any query errors that may return without doc info
+      // important for when querying keys on all docs
+      var noQueryErrors = _.filter(rows, function(row){
+        return row.value;
+      });
+
+      return _.map(noQueryErrors, function(row) {
+          return {
+            _id: row.id,
+            _rev: row.value.rev,
+            value: row.value,
+            key: row.key,
+            doc: row.doc || undefined
+          };
       });
     }
   }));
diff --git a/src/fauxton/app/addons/documents/templates/advanced_options.html b/src/fauxton/app/addons/documents/templates/advanced_options.html
index 8acf30a60..d8d57cd7c 100644
--- a/src/fauxton/app/addons/documents/templates/advanced_options.html
+++ b/src/fauxton/app/addons/documents/templates/advanced_options.html
@@ -28,7 +28,8 @@ the License.
   <div class="controls-group well">
     <div class="row-fluid" id="js-showKeys">
       <div class="controls controls-row">
-        <input name="keys" class="input-xxlarge" type="text" placeholder="Enter a key, an array of keys. This must be valid JSON.">
+        <textarea id="keys-input" name="keys" class="input-xxlarge" rows="5" type="text" placeholder="Enter a key, an array of keys. This must be valid JSON."></textarea>
+        <div id="keys-error" class="inline-block js-keys-error"></div>
       </div>
     </div>
     <div class="row-fluid hide" id="js-showStartEnd">
@@ -48,7 +49,7 @@ the License.
   <div class="controls-group">
       <label class="drop-down inline">
         Limit:
-        <select name="limit" class="input-small" disabled>
+        <select name="limit" class="input-small">
           <option>5</option>
           <option>10</option>
           <option selected="selected">20</option>
@@ -59,10 +60,9 @@ the License.
         </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">
+        Skip: 
+        <input name="skip" class="input-large" type="text" id="skipRows" 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="check1" type="checkbox" name="include_docs" value="true">  
diff --git a/src/fauxton/app/addons/documents/views.js b/src/fauxton/app/addons/documents/views.js
index 1e7addf9d..cc23e195e 100644
--- a/src/fauxton/app/addons/documents/views.js
+++ b/src/fauxton/app/addons/documents/views.js
@@ -1107,13 +1107,13 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
 
     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="startkey"],[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.$('[name="startkey"],[name="endkey"],[name="inclusive_end"]').removeAttr("disabled");
       this.$('.js-disabled-message').hide();
       this.$('[name="keys"]').attr("disabled","true");
     },
@@ -1132,33 +1132,62 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
       this.hasReduce = hasReduce;
       this.render();
     },
-    validateKeys:  function(val){
-      return JSON.parse(val);
+
+    parseJSON: function (value) {
+      try {
+        return JSON.parse(value);
+      } catch(e) {
+        return undefined;
+      }
+    },
+
+    validateKeys:  function(param){
+      var errorMsg = false,
+          parsedValue = this.parseJSON(param.value);
+
+      if (_.isUndefined(parsedValue)) {
+        errorMsg = "Keys must be valid json.";
+      } else if (!_.isArray(parsedValue)) {
+        errorMsg =  "Keys values must be in an array. E.g [1,2,3]"; 
+      }
+
+      if (errorMsg) {
+        this.$('.js-keys-error').empty();
+        FauxtonAPI.addNotification({
+          type: "error",
+          msg: errorMsg,
+          clear:  false,
+          selector: '.js-keys-error'
+        });
+        return false;
+      }
+
+      return true; 
     },
     queryParams: function () {
-      var $form = this.$(".js-view-query-update");
+      var $form = this.$(".js-view-query-update"),
+          keysParam = false;
 
       var params = _.reduce($form.serializeArray(), function(params, param) {
         if (!param.value) { return params; }
         if (param.name === "limit" && param.value === 'None') { return params; }
+        if (param.name === "keys") { keysParam = param; }
         params.push(param);
         return params;
       }, []);
 
+
+      if (keysParam && !this.validateKeys(keysParam)) { return false; }
+
       // Validate *key* params to ensure they're valid JSON
       var keyParams = ["keys","startkey","endkey"];
       var errorParams = _.filter(params, function(param) {
-        if (_.contains(keyParams, param.name)) {
-          try {
-            JSON.parse(param.value);
-            return false;
-          } catch(e) {
+        if (_.contains(keyParams, param.name) && _.isUndefined(this.parseJSON(param.value))) {
             return true;
           }
-        } else {
+
           return false;
-        }
-      });
+      }, this);
 
       return {params: params, errorParams: errorParams};
     },
@@ -1222,6 +1251,10 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
           }
           this.updateFiltersFor(key, $ele);
           break;
+          case "key": 
+          case "keys": 
+            $form.find("textarea[name='"+key+"']").val(val);
+          break;
           default:
             $form.find("input[name='"+key+"']").val(val);
           break;
@@ -1231,11 +1264,15 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
 
     updateView: function (event) {
       event.preventDefault();
-      this.updateViewFn(event, this.queryParams());
+      var params = this.queryParams();
+      if (!params) { return;}
+      this.updateViewFn(event, params);
     },
 
     previewView: function (event) {
-      this.previewFn(event, this.queryParams());
+      var params = this.queryParams();
+      if (!params) { return;}
+      this.previewFn(event, params);
     },
 
     serialize: function () {
@@ -1615,6 +1652,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
     },
 
     toggleIndexNav: function (event) {
+      $('#dashboard-content').scrollTop(0); //scroll up
+      
       var $targetId = this.$(event.target).attr('id'),
           $previousTab = this.$(this.$('li.active a').attr('href')),
           $targetTab = this.$(this.$(event.target).attr('href'));