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/7573dc28 Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/7573dc28 Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/7573dc28 Branch: refs/heads/Query-Options-UI Commit: 7573dc28e93029d00c1180ce792e5d98e970d119 Parents: 4e60f0b Author: suelockwood <[email protected]> Authored: Fri Feb 21 13:42:45 2014 -0500 Committer: Garren Smith <[email protected]> Committed: Thu Mar 6 12:35:38 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/7573dc28/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/7573dc28/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/7573dc28/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 54ec261..e57071a 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()); },
