You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2014/03/20 11:21:41 UTC
[17/26] couchdb commit: updated refs/heads/Query-Options-UI to cf93bbf
Cleaning up query options UI
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/b67b65ca
Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/b67b65ca
Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/b67b65ca
Branch: refs/heads/Query-Options-UI
Commit: b67b65caaee9fdfe7519980f06c9cda40e1aef15
Parents: 3508a90
Author: suelockwood <de...@apache.org>
Authored: Fri Feb 21 13:42:45 2014 -0500
Committer: Garren Smith <ga...@gmail.com>
Committed: Thu Mar 20 10:33:46 2014 +0200
----------------------------------------------------------------------
.../addons/documents/assets/less/documents.less | 7 +
.../documents/templates/advanced_options.html | 156 +++++++++++--------
src/fauxton/app/addons/documents/views.js | 87 ++++++++++-
3 files changed, 184 insertions(+), 66 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/couchdb/blob/b67b65ca/src/fauxton/app/addons/documents/assets/less/documents.less
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/documents/assets/less/documents.less b/src/fauxton/app/addons/documents/assets/less/documents.less
index c30a9af..61d864b 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 {
http://git-wip-us.apache.org/repos/asf/couchdb/blob/b67b65ca/src/fauxton/app/addons/documents/templates/advanced_options.html
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/documents/templates/advanced_options.html b/src/fauxton/app/addons/documents/templates/advanced_options.html
index e282c62..274c107 100644
--- a/src/fauxton/app/addons/documents/templates/advanced_options.html
+++ b/src/fauxton/app/addons/documents/templates/advanced_options.html
@@ -12,79 +12,113 @@ License for the specific language governing permissions and limitations under
the License.
-->
<div class="errors-container"></div>
-<form class="js-view-query-update custom-inputs">
- <div class="controls-group">
- <div class="row-fluid">
+<form class="view-query-update custom-inputs">
+
+
+<!-- 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, or list of keys seperated by a comma.">
</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 & 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>
+
+ <input id="check3" name="stale" type="checkbox" value="ok">
+ <label for="check3">Stale</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">
http://git-wip-us.apache.org/repos/asf/couchdb/blob/b67b65ca/src/fauxton/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/src/fauxton/app/addons/documents/views.js b/src/fauxton/app/addons/documents/views.js
index f29ebaa..c595c6c 100644
--- a/src/fauxton/app/addons/documents/views.js
+++ b/src/fauxton/app/addons/documents/views.js
@@ -1073,7 +1073,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,10 +1117,25 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
this.hasReduce = hasReduce;
this.render();
},
+ getKeys: function(val){
+ var keys = val.value.replace(/\s/g,"").split(',');
+ if (keys.length > 1){
+ return {
+ name: "keys",
+ value: JSON.stringify(keys)
+ };
+ } else if (keys.length === 1) {
+ return {
+ name: "key",
+ value: keys[0]
+ };
+ }
+
+ },
queryParams: function () {
- var $form = this.$(".js-view-query-update");
- // Ignore params without a value
+ var $form = this.$(".view-query-update"),
+ getKeys = this.getKeys;
var params = _.reduce($form.serializeArray(), function(params, param) {
if (!param.value) { return params; }
if (param.name === "limit" && param.value === 'None') { return params; }
@@ -1101,9 +1143,25 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
params.push(param);
return params;
}, []);
+ });
+ var filteredParams = _.filter(params, function(param) {
+ return param.value;
+ });
+
+
+
+ var params = _.map(filteredParams, function(param) {
+ if (param.name === "keys"){
+ return getKeys(param);
+ }else{
+ return param;
+ }
+ });
+
+
// 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 {
@@ -1118,6 +1176,24 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
});
return {params: params, errorParams: errorParams};
+
+
+
+
+
+
+ // Ignore params without a value
+ _.map($form.serializeArray(), function(param) {
+ if (param.value){
+ if (param.name === "keys"){
+ var keys = getKeys(param.value);
+ data[keys.name] = keys.value;
+ }else{
+ data[param.name] = param.value;
+ }
+ }
+ });
+
},
updateFilters: function(event) {
@@ -1161,13 +1237,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 +1262,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
},
updateView: function (event) {
+ event.preventDefault();
this.updateViewFn(event, this.queryParams());
},