Working menu change
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/3a398445 Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/3a398445 Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/3a398445 Branch: refs/heads/api-options Commit: 3a398445695589c5706461da50de738a79a4a0fb Parents: 15f4fff Author: Garren Smith <[email protected]> Authored: Tue Dec 17 18:07:41 2013 +0200 Committer: Garren Smith <[email protected]> Committed: Wed Jan 22 16:22:49 2014 +0200 ---------------------------------------------------------------------- .../addons/documents/templates/view_editor.html | 3 +- src/fauxton/app/addons/documents/views.js | 97 +++++++++++++++++++- .../documents/advanced_options_menu.html | 34 +++++++ 3 files changed, 129 insertions(+), 5 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb/blob/3a398445/src/fauxton/app/addons/documents/templates/view_editor.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/templates/view_editor.html b/src/fauxton/app/addons/documents/templates/view_editor.html index ddb5a0c..26b010f 100644 --- a/src/fauxton/app/addons/documents/templates/view_editor.html +++ b/src/fauxton/app/addons/documents/templates/view_editor.html @@ -15,12 +15,13 @@ the License. <ul class="nav nav-tabs" id="db-views-tabs-nav"> <li class="active"> <a data-bypass="true" id="index-nav" class="fonticon-wrench fonticon" data-toggle="tab" href="#index"><% if (newView) { %>Create Index <% } else { %>Edit Index <% } %></a></li> <% if (!newView) { %> - <li><a data-bypass="true" id="query-nav" class="fonticon-plus fonticon" href="#query" data-toggle="tab">Query Options</a></li> + <!--<li><a data-bypass="true" id="query-nav" class="fonticon-plus fonticon" href="#query" data-toggle="tab">Query Options</a></li>--> <li><a data-bypass="true" id="meta-nav" href="#metadata" data-toggle="tab">Design Doc Metadata</a></li> <% } %> </ul> <div class="all-docs-list errors-container"></div> <div class="tab-content"> + <div id="query-options-wrapper"></div> <div class="tab-pane active" id="index"> <div id="define-view" class="ddoc-alert well"> <div class="errors-container"></div> http://git-wip-us.apache.org/repos/asf/couchdb/blob/3a398445/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 d5319f3..288e10c 100644 --- a/src/fauxton/app/addons/documents/views.js +++ b/src/fauxton/app/addons/documents/views.js @@ -1024,6 +1024,68 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum } }); + Views.AdvancedOptionsMenu = FauxtonAPI.View.extend({ + template: 'templates/documents/advanced_options_menu', + events: { + "click input": "updateRows", + 'change #group-level': 'updateRows', + 'click #query-nav': 'toggleMenu' + }, + + initialize: function (options) { + this.hasReduce = options.hasReduce; + this.eventer = options.eventer; + }, + + toggleMenu: function (event) { + this.$('.checkbox').toggle(); + }, + + updateRows: function (event) { + console.log('boom', event); + var $groupLevel = this.$('#group-level-label'), + params = { + include_docs: false, + reduce: false, + group_level: 0 + }; + + if (this.$('#include-docs').prop('checked')) { + params.include_docs = true; + } + + if (this.hasReduce && this.$('#reduce').prop('checked')) { + params.reduce = true; + params.group_level = this.$('#group-level option:selected').val(); + $groupLevel.show(); + } else { + $groupLevel.hide(); + } + + console.log(params); + this.eventer.trigger('options:param_update', params); + }, + + updateFromParams: function (params) { + if (params.reduce) { + var $reduce = this.$('#reduce'); + $reduce.prop("checked", true); + this.$('#group-level').show(); + + } else if (params.include_docs) { + var $include_docs = this.$('#include-docs'); + $include_docs.prop("checked", true); + } + }, + + serialize: function () { + return { + hasReduce: this.hasReduce + }; + } + + }); + Views.AdvancedOptions = FauxtonAPI.View.extend({ template: "addons/documents/templates/advanced_options", className: "advanced-options well", @@ -1034,7 +1096,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum this.viewName = options.viewName; this.updateViewFn = options.updateViewFn; this.previewFn = options.previewFn; - //this.hadReduce = options.hasReduce || true; + this.eventer = options.eventer; if (typeof(options.hasReduce) === 'undefined') { this.hasReduce = true; @@ -1047,6 +1109,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum } else { this.showPreview = options.showPreview; } + + this.listenTo(this.eventer, 'options:param_update', this.optionsParamsUpdate); }, events: { @@ -1066,6 +1130,21 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum } }, + optionsParamsUpdate: function (params) { + var $form = this.$el.find("form.view-query-update"); + + if (params.reduce && params.group_level) { + $form.find("select[name='group_level']").val(params.group_level).removeAttr('disabled'); + delete params.group_level; + } else { + $form.find("select[name='group_level']").attr('disabled'); + } + _.each(params, function(val, key) { + $form.find("input[name='"+key+"']").prop('checked', val); + }); + this.$('form.view-query-update').submit(); + }, + renderOnUpdatehasReduce: function (hasReduce) { this.hasReduce = hasReduce; this.render(); @@ -1137,7 +1216,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum var $ele; switch (key) { case "limit": - case "group_level": + case "group_level": $form.find("select[name='"+key+"']").val(val); break; case "include_docs": @@ -1246,7 +1325,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum "click button.delete": "deleteView", "change select#reduce-function-selector": "updateReduce", "click button.preview": "previewView", - "click #db-views-tabs-nav": 'toggleIndexNav' + "click #db-views-tabs-nav": 'toggleIndexNav', + "click #query-options-wrapper": 'toggleIndexNav' }, langTemplates: { @@ -1615,6 +1695,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum ddocName: this.model.id, database: this.database })); + + this.eventer = _.extend({}, Backbone.Events); this.advancedOptions = this.insertView('#query', new Views.AdvancedOptions({ updateViewFn: this.updateView, @@ -1622,13 +1704,20 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum database: this.database, viewName: this.viewName, ddocName: this.model.id, - hasReduce: this.hasReduce() + hasReduce: this.hasReduce(), + eventer: this.eventer + })); + + this.advancedOptionsMenu = this.insertView('#query-options-wrapper', new Views.AdvancedOptionsMenu({ + hasReduce: this.hasReduce(), + eventer: this.eventer })); }, afterRender: function() { if (this.params) { this.advancedOptions.updateFromParams(this.params); + this.advancedOptionsMenu.updateFromParams(this.params); } this.designDocSelector.updateDesignDoc(); http://git-wip-us.apache.org/repos/asf/couchdb/blob/3a398445/src/fauxton/app/templates/documents/advanced_options_menu.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/templates/documents/advanced_options_menu.html b/src/fauxton/app/templates/documents/advanced_options_menu.html new file mode 100644 index 0000000..0bb501d --- /dev/null +++ b/src/fauxton/app/templates/documents/advanced_options_menu.html @@ -0,0 +1,34 @@ +<div class="controls-group"> + <div class="row-fluid"> + <div class="controls controls-row"> + <div class="checkbox inline"> + <input id="include-docs" type="checkbox" name="include_docs" value="true"> + <label name="include_docs" for="check1">Include Docs</label> + </div> + <% if (hasReduce) { %> + <div class="checkbox inline"> + <input id="reduce" name="reduce" type="checkbox" value="true"> + <label for="check2">Reduce</label> + <label id="group-level-label" style="display:none" class="drop-down inline"> + Group Level: + <select id="group-level" 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> + </div> + <% } %> + <a data-bypass="true" id="query-nav" class="" href="#query" data-toggle="tab">More query options</a></li> + </div> + </div> +</div> +
