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 2016/05/31 07:58:41 UTC
[13/27] fauxton commit: updated refs/heads/master to 0ca35da
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/mango/tests/mango.componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/mango/tests/mango.componentsSpec.react.jsx b/app/addons/documents/mango/tests/mango.componentsSpec.react.jsx
index 566ea9c..bf2baad 100644
--- a/app/addons/documents/mango/tests/mango.componentsSpec.react.jsx
+++ b/app/addons/documents/mango/tests/mango.componentsSpec.react.jsx
@@ -10,201 +10,198 @@
// License for the specific language governing permissions and limitations under
// the License.
-define([
- '../../../../core/api',
- '../mango.components.react',
- '../mango.stores',
- '../mango.actions',
- '../mango.actiontypes',
- '../../resources',
- '../../../databases/resources',
- '../../../../../test/mocha/testUtils',
- 'react',
- 'react-dom',
- 'react-addons-test-utils',
- 'sinon'
-], function (FauxtonAPI, Views, Stores, MangoActions, ActionTypes, Resources, Databases, utils, React, ReactDOM, TestUtils, sinon) {
-
- var assert = utils.assert;
-
- describe('Mango IndexEditor', function () {
- var database = new Databases.Model({id: 'testdb'}),
- container,
- editor;
-
- beforeEach(function () {
- container = document.createElement('div');
- MangoActions.setDatabase({
- database: database
- });
+import FauxtonAPI from "../../../../core/api";
+import Views from "../mango.components.react";
+import Stores from "../mango.stores";
+import MangoActions from "../mango.actions";
+import ActionTypes from "../mango.actiontypes";
+import Resources from "../../resources";
+import Databases from "../../../databases/resources";
+import utils from "../../../../../test/mocha/testUtils";
+import React from "react";
+import ReactDOM from "react-dom";
+import TestUtils from "react-addons-test-utils";
+import sinon from "sinon";
+
+var assert = utils.assert;
+
+describe('Mango IndexEditor', function () {
+ var database = new Databases.Model({id: 'testdb'}),
+ container,
+ editor;
+
+ beforeEach(function () {
+ container = document.createElement('div');
+ MangoActions.setDatabase({
+ database: database
});
+ });
- afterEach(function () {
- ReactDOM.unmountComponentAtNode(container);
- });
+ afterEach(function () {
+ ReactDOM.unmountComponentAtNode(container);
+ });
- it('renders a default index definition', function () {
- editor = TestUtils.renderIntoDocument(
- <Views.MangoIndexEditorController description="foo" />,
- container
- );
+ it('renders a default index definition', function () {
+ editor = TestUtils.renderIntoDocument(
+ <Views.MangoIndexEditorController description="foo" />,
+ container
+ );
- var payload = JSON.parse(editor.getMangoEditor().getEditorValue());
- assert.equal(payload.index.fields[0], '_id');
- });
+ var payload = JSON.parse(editor.getMangoEditor().getEditorValue());
+ assert.equal(payload.index.fields[0], '_id');
+ });
- it('renders the current database', function () {
- editor = TestUtils.renderIntoDocument(
- <Views.MangoIndexEditorController description="foo" />,
- container
- );
- var $el = $(ReactDOM.findDOMNode(editor));
+ it('renders the current database', function () {
+ editor = TestUtils.renderIntoDocument(
+ <Views.MangoIndexEditorController description="foo" />,
+ container
+ );
+ var $el = $(ReactDOM.findDOMNode(editor));
- assert.equal($el.find('.db-title').text(), 'testdb');
- });
+ assert.equal($el.find('.db-title').text(), 'testdb');
+ });
- it('renders a description', function () {
- editor = TestUtils.renderIntoDocument(
- <Views.MangoIndexEditorController description="CouchDB Query is great!" />,
- container
- );
- var $el = $(ReactDOM.findDOMNode(editor));
+ it('renders a description', function () {
+ editor = TestUtils.renderIntoDocument(
+ <Views.MangoIndexEditorController description="CouchDB Query is great!" />,
+ container
+ );
+ var $el = $(ReactDOM.findDOMNode(editor));
- assert.equal($el.find('.editor-description').text(), 'CouchDB Query is great!');
- });
+ assert.equal($el.find('.editor-description').text(), 'CouchDB Query is great!');
});
+});
- describe('Mango QueryEditor', function () {
- var database = new Databases.Model({id: 'testdb'}),
- container,
- editor,
- mangoCollection;
-
- beforeEach(function () {
- container = document.createElement('div');
- MangoActions.setDatabase({
- database: database
- });
-
- MangoActions.mangoResetIndexList({isLoading: false});
-
- mangoCollection = new Resources.MangoIndexCollection([{
- ddoc: '_design/e4d338e5d6f047749f5399ab998b4fa04ba0c816',
- def: {
- fields: [
- {'_id': 'asc'},
- {'foo': 'bar'},
- {'ente': 'gans'}
- ]
- },
- name: 'e4d338e5d6f047749f5399ab998b4fa04ba0c816',
- type: 'json'
- }, {
- ddoc: null,
- def: {
- fields: [{
- '_id': 'asc'
- }]
- },
- name: '_all_docs',
- type: 'special'
- }], {
- params: {},
- database: {
- safeID: function () { return '1'; }
- }
- });
-
- FauxtonAPI.dispatch({
- type: ActionTypes.MANGO_NEW_AVAILABLE_INDEXES,
- options: {indexList: mangoCollection}
- });
+describe('Mango QueryEditor', function () {
+ var database = new Databases.Model({id: 'testdb'}),
+ container,
+ editor,
+ mangoCollection;
+ beforeEach(function () {
+ container = document.createElement('div');
+ MangoActions.setDatabase({
+ database: database
});
- afterEach(function () {
- ReactDOM.unmountComponentAtNode(container);
+ MangoActions.mangoResetIndexList({isLoading: false});
+
+ mangoCollection = new Resources.MangoIndexCollection([{
+ ddoc: '_design/e4d338e5d6f047749f5399ab998b4fa04ba0c816',
+ def: {
+ fields: [
+ {'_id': 'asc'},
+ {'foo': 'bar'},
+ {'ente': 'gans'}
+ ]
+ },
+ name: 'e4d338e5d6f047749f5399ab998b4fa04ba0c816',
+ type: 'json'
+ }, {
+ ddoc: null,
+ def: {
+ fields: [{
+ '_id': 'asc'
+ }]
+ },
+ name: '_all_docs',
+ type: 'special'
+ }], {
+ params: {},
+ database: {
+ safeID: function () { return '1'; }
+ }
});
- it('lists our available indexes', function () {
- editor = TestUtils.renderIntoDocument(
- <Views.MangoQueryEditorController description="foo" />,
- container
- );
- var $el = $(ReactDOM.findDOMNode(editor));
- assert.equal($el.find('.mango-available-indexes').length, 1);
-
- assert.include(
- $el.find('.mango-available-indexes').text(),
- 'json: _id, foo, ente'
- );
- assert.include(
- $el.find('.mango-available-indexes').text(),
- 'json: _id'
- );
+ FauxtonAPI.dispatch({
+ type: ActionTypes.MANGO_NEW_AVAILABLE_INDEXES,
+ options: {indexList: mangoCollection}
});
- it('has a default query', function () {
- editor = ReactDOM.render(
- <Views.MangoQueryEditorController description="foo" />,
- container
- );
- var json = JSON.parse(editor.getMangoEditor().getEditorValue());
- assert.equal(Object.keys(json.selector)[0], '_id');
- });
+ });
- it('can render a query based on the last defined index', function () {
- FauxtonAPI.dispatch({
- type: ActionTypes.MANGO_NEW_QUERY_FIND_CODE_FROM_FIELDS,
- options: {
- fields: ['zetti', 'mussmaennchen']
- }
- });
-
- editor = TestUtils.renderIntoDocument(
- <Views.MangoQueryEditorController description="foo" />,
- container
- );
-
- var json = JSON.parse(editor.getMangoEditor().getEditorValue());
- assert.equal(Object.keys(json.selector)[0], 'zetti');
- assert.equal(Object.keys(json.selector)[1], 'mussmaennchen');
- });
+ afterEach(function () {
+ ReactDOM.unmountComponentAtNode(container);
+ });
- it('informs the user that it uses a query based on the last defined index', function () {
- FauxtonAPI.dispatch({
- type: ActionTypes.MANGO_NEW_QUERY_FIND_CODE_FROM_FIELDS,
- options: {
- fields: ['zetti', 'mussmaennchen']
- }
- });
-
- editor = TestUtils.renderIntoDocument(
- <Views.MangoQueryEditorController description="foo" />,
- container
- );
- var $el = $(ReactDOM.findDOMNode(editor));
- assert.equal($el.find('.info-changed-query').length, 1);
- });
+ it('lists our available indexes', function () {
+ editor = TestUtils.renderIntoDocument(
+ <Views.MangoQueryEditorController description="foo" />,
+ container
+ );
+ var $el = $(ReactDOM.findDOMNode(editor));
+ assert.equal($el.find('.mango-available-indexes').length, 1);
+
+ assert.include(
+ $el.find('.mango-available-indexes').text(),
+ 'json: _id, foo, ente'
+ );
+ assert.include(
+ $el.find('.mango-available-indexes').text(),
+ 'json: _id'
+ );
+ });
- it('renders the current database', function () {
- editor = TestUtils.renderIntoDocument(
- <Views.MangoQueryEditorController description="foo" />,
- container
- );
- var $el = $(ReactDOM.findDOMNode(editor));
+ it('has a default query', function () {
+ editor = ReactDOM.render(
+ <Views.MangoQueryEditorController description="foo" />,
+ container
+ );
+ var json = JSON.parse(editor.getMangoEditor().getEditorValue());
+ assert.equal(Object.keys(json.selector)[0], '_id');
+ });
- assert.equal($el.find('.db-title').text(), 'testdb');
+ it('can render a query based on the last defined index', function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.MANGO_NEW_QUERY_FIND_CODE_FROM_FIELDS,
+ options: {
+ fields: ['zetti', 'mussmaennchen']
+ }
});
- it('renders a description', function () {
- editor = TestUtils.renderIntoDocument(
- <Views.MangoQueryEditorController description="CouchDB Query is great!" />,
- container
- );
- var $el = $(ReactDOM.findDOMNode(editor));
+ editor = TestUtils.renderIntoDocument(
+ <Views.MangoQueryEditorController description="foo" />,
+ container
+ );
- assert.equal($el.find('.editor-description').text(), 'CouchDB Query is great!');
+ var json = JSON.parse(editor.getMangoEditor().getEditorValue());
+ assert.equal(Object.keys(json.selector)[0], 'zetti');
+ assert.equal(Object.keys(json.selector)[1], 'mussmaennchen');
+ });
+
+ it('informs the user that it uses a query based on the last defined index', function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.MANGO_NEW_QUERY_FIND_CODE_FROM_FIELDS,
+ options: {
+ fields: ['zetti', 'mussmaennchen']
+ }
});
+
+ editor = TestUtils.renderIntoDocument(
+ <Views.MangoQueryEditorController description="foo" />,
+ container
+ );
+ var $el = $(ReactDOM.findDOMNode(editor));
+ assert.equal($el.find('.info-changed-query').length, 1);
+ });
+
+ it('renders the current database', function () {
+ editor = TestUtils.renderIntoDocument(
+ <Views.MangoQueryEditorController description="foo" />,
+ container
+ );
+ var $el = $(ReactDOM.findDOMNode(editor));
+
+ assert.equal($el.find('.db-title').text(), 'testdb');
+ });
+
+ it('renders a description', function () {
+ editor = TestUtils.renderIntoDocument(
+ <Views.MangoQueryEditorController description="CouchDB Query is great!" />,
+ container
+ );
+ var $el = $(ReactDOM.findDOMNode(editor));
+
+ assert.equal($el.find('.editor-description').text(), 'CouchDB Query is great!');
});
});
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/mango/tests/mango.storesSpec.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/mango/tests/mango.storesSpec.js b/app/addons/documents/mango/tests/mango.storesSpec.js
index 5a2e599..34a843c 100644
--- a/app/addons/documents/mango/tests/mango.storesSpec.js
+++ b/app/addons/documents/mango/tests/mango.storesSpec.js
@@ -10,92 +10,88 @@
// License for the specific language governing permissions and limitations under
// the License.
-define([
- '../../../../core/api',
- '../mango.stores',
- '../mango.actiontypes',
- '../../resources',
- '../../../../../test/mocha/testUtils',
+import FauxtonAPI from "../../../../core/api";
+import Stores from "../mango.stores";
+import ActionTypes from "../mango.actiontypes";
+import Resources from "../../resources";
+import testUtils from "../../../../../test/mocha/testUtils";
+var assert = testUtils.assert;
+var dispatchToken;
+var store;
-], function (FauxtonAPI, Stores, ActionTypes, Resources, testUtils) {
- var assert = testUtils.assert;
- var dispatchToken;
- var store;
+describe('Mango Store', function () {
- describe('Mango Store', function () {
+ describe('getQueryCode', function () {
- describe('getQueryCode', function () {
-
- beforeEach(function () {
- store = new Stores.MangoStore();
- dispatchToken = FauxtonAPI.dispatcher.register(store.dispatch);
- });
+ beforeEach(function () {
+ store = new Stores.MangoStore();
+ dispatchToken = FauxtonAPI.dispatcher.register(store.dispatch);
+ });
- afterEach(function () {
- FauxtonAPI.dispatcher.unregister(dispatchToken);
- });
+ afterEach(function () {
+ FauxtonAPI.dispatcher.unregister(dispatchToken);
+ });
- it('returns a default query', function () {
- assert.ok(store.getQueryFindCode());
- });
+ it('returns a default query', function () {
+ assert.ok(store.getQueryFindCode());
+ });
- it('can set new selectors', function () {
- store.newQueryFindCodeFromFields({fields: ['foo', 'bar']});
- var res = store.getQueryFindCode();
- assert.equal(res, JSON.stringify({
- "selector": {
- "foo": {"$gt": null},
- "bar": {"$gt": null}
- }
- }, null, ' '));
- });
+ it('can set new selectors', function () {
+ store.newQueryFindCodeFromFields({fields: ['foo', 'bar']});
+ var res = store.getQueryFindCode();
+ assert.equal(res, JSON.stringify({
+ "selector": {
+ "foo": {"$gt": null},
+ "bar": {"$gt": null}
+ }
+ }, null, ' '));
+ });
- it('indicates that we set another query for the user', function () {
- assert.notOk(store.getQueryFindCodeChanged());
- store.newQueryFindCodeFromFields({fields: ['mussman', 'zetti']});
- assert.ok(store.getQueryFindCodeChanged());
- });
+ it('indicates that we set another query for the user', function () {
+ assert.notOk(store.getQueryFindCodeChanged());
+ store.newQueryFindCodeFromFields({fields: ['mussman', 'zetti']});
+ assert.ok(store.getQueryFindCodeChanged());
+ });
- it('alters the default query', function () {
- assert.notOk(store.getQueryFindCodeChanged());
- store.newQueryFindCodeFromFields({fields: ['mussman', 'zetti']});
- assert.deepEqual(store.getQueryFindCode(), JSON.stringify({
- "selector": {
- "mussman": {"$gt": null},
- "zetti": {"$gt": null}
- }
- }, null, ' '));
- });
+ it('alters the default query', function () {
+ assert.notOk(store.getQueryFindCodeChanged());
+ store.newQueryFindCodeFromFields({fields: ['mussman', 'zetti']});
+ assert.deepEqual(store.getQueryFindCode(), JSON.stringify({
+ "selector": {
+ "mussman": {"$gt": null},
+ "zetti": {"$gt": null}
+ }
+ }, null, ' '));
+ });
- it('filters querytypes that are not needed', function () {
+ it('filters querytypes that are not needed', function () {
- var collection = new Resources.MangoIndexCollection([
- new Resources.MangoIndex({
- ddoc: null,
- name: 'emma',
- type: 'special',
- def: {fields: [{_id: 'asc'}]}
- }, {}),
- new Resources.MangoIndex({
- ddoc: null,
- name: 'biene',
- type: 'json',
- def: {fields: [{_id: 'desc'}]}
- }, {}),
- new Resources.MangoIndex({
- ddoc: null,
- name: 'alf',
- type: 'nickname',
- def: {fields: [{_id: 'asc'}]}
- }, {})
- ], {
- database: {id: 'databaseId', safeID: function () { return this.id; }},
- params: {limit: 20}
- });
- store._availableIndexes = collection;
- assert.equal(store.getAvailableQueryIndexes().length, 2);
+ var collection = new Resources.MangoIndexCollection([
+ new Resources.MangoIndex({
+ ddoc: null,
+ name: 'emma',
+ type: 'special',
+ def: {fields: [{_id: 'asc'}]}
+ }, {}),
+ new Resources.MangoIndex({
+ ddoc: null,
+ name: 'biene',
+ type: 'json',
+ def: {fields: [{_id: 'desc'}]}
+ }, {}),
+ new Resources.MangoIndex({
+ ddoc: null,
+ name: 'alf',
+ type: 'nickname',
+ def: {fields: [{_id: 'asc'}]}
+ }, {})
+ ], {
+ database: {id: 'databaseId', safeID: function () { return this.id; }},
+ params: {limit: 20}
});
-
+ store._availableIndexes = collection;
+ assert.equal(store.getAvailableQueryIndexes().length, 2);
});
+
});
});
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/pagination/actions.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/pagination/actions.js b/app/addons/documents/pagination/actions.js
index 03c3fa6..02735de 100644
--- a/app/addons/documents/pagination/actions.js
+++ b/app/addons/documents/pagination/actions.js
@@ -10,77 +10,71 @@
// License for the specific language governing permissions and limitations under
// the License.
-define([
- '../../../app',
- "../../../core/api",
- './actiontypes',
- '../index-results/actions',
-
-
-],
-function (app, FauxtonAPI, ActionTypes, IndexResultsActions) {
-
- return {
-
- updatePerPage: function (perPage, collection, bulkCollection) {
-
- FauxtonAPI.dispatch({
- type: ActionTypes.PER_PAGE_CHANGE,
- perPage: perPage
- });
-
- IndexResultsActions.clearResults();
- collection.fetch().then(function () {
- IndexResultsActions.resultsListReset();
- IndexResultsActions.sendMessageNewResultList({
- collection: collection,
- bulkCollection: bulkCollection
- });
+import app from "../../../app";
+import FauxtonAPI from "../../../core/api";
+import ActionTypes from "./actiontypes";
+import IndexResultsActions from "../index-results/actions";
+
+export default {
+
+ updatePerPage: function (perPage, collection, bulkCollection) {
+
+ FauxtonAPI.dispatch({
+ type: ActionTypes.PER_PAGE_CHANGE,
+ perPage: perPage
+ });
+
+ IndexResultsActions.clearResults();
+ collection.fetch().then(function () {
+ IndexResultsActions.resultsListReset();
+ IndexResultsActions.sendMessageNewResultList({
+ collection: collection,
+ bulkCollection: bulkCollection
});
- },
-
- setDocumentLimit: function (docLimit) {
- FauxtonAPI.dispatch({
- type: ActionTypes.SET_PAGINATION_DOCUMENT_LIMIT,
- docLimit: docLimit
- });
- },
-
- paginateNext: function (collection, bulkCollection) {
- FauxtonAPI.dispatch({
- type: ActionTypes.PAGINATE_NEXT,
+ });
+ },
+
+ setDocumentLimit: function (docLimit) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.SET_PAGINATION_DOCUMENT_LIMIT,
+ docLimit: docLimit
+ });
+ },
+
+ paginateNext: function (collection, bulkCollection) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.PAGINATE_NEXT,
+ });
+
+ IndexResultsActions.clearResults();
+ collection.next().then(function () {
+ IndexResultsActions.resultsListReset();
+
+ IndexResultsActions.sendMessageNewResultList({
+ collection: collection,
+ bulkCollection: bulkCollection
});
+ });
+ },
- IndexResultsActions.clearResults();
- collection.next().then(function () {
- IndexResultsActions.resultsListReset();
-
- IndexResultsActions.sendMessageNewResultList({
- collection: collection,
- bulkCollection: bulkCollection
- });
- });
- },
-
- paginatePrevious: function (collection, bulkCollection) {
- FauxtonAPI.dispatch({
- type: ActionTypes.PAGINATE_PREVIOUS,
- });
+ paginatePrevious: function (collection, bulkCollection) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.PAGINATE_PREVIOUS,
+ });
- IndexResultsActions.clearResults();
- collection.previous().then(function () {
- IndexResultsActions.resultsListReset();
+ IndexResultsActions.clearResults();
+ collection.previous().then(function () {
+ IndexResultsActions.resultsListReset();
- IndexResultsActions.sendMessageNewResultList({
- collection: collection,
- bulkCollection: bulkCollection
- });
+ IndexResultsActions.sendMessageNewResultList({
+ collection: collection,
+ bulkCollection: bulkCollection
});
- },
+ });
+ },
- toggleTableViewType: function () {
- IndexResultsActions.togglePrioritizedTableView();
- }
+ toggleTableViewType: function () {
+ IndexResultsActions.togglePrioritizedTableView();
+ }
- };
-});
+};
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/pagination/actiontypes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/pagination/actiontypes.js b/app/addons/documents/pagination/actiontypes.js
index 199131e..7e47937 100644
--- a/app/addons/documents/pagination/actiontypes.js
+++ b/app/addons/documents/pagination/actiontypes.js
@@ -10,12 +10,10 @@
// License for the specific language governing permissions and limitations under
// the License.
-define([], function () {
- return {
- COLLECTION_CHANGED: 'COLLECTION_CHANGED',
- PER_PAGE_CHANGE: 'PER_PAGE_CHANGE',
- PAGINATE_NEXT: 'PAGINATE_NEXT',
- PAGINATE_PREVIOUS: 'PAGINATE_PREVIOUS',
- SET_PAGINATION_DOCUMENT_LIMIT: 'SET_PAGINATION_DOCUMENT_LIMIT'
- };
-});
+export default {
+ COLLECTION_CHANGED: 'COLLECTION_CHANGED',
+ PER_PAGE_CHANGE: 'PER_PAGE_CHANGE',
+ PAGINATE_NEXT: 'PAGINATE_NEXT',
+ PAGINATE_PREVIOUS: 'PAGINATE_PREVIOUS',
+ SET_PAGINATION_DOCUMENT_LIMIT: 'SET_PAGINATION_DOCUMENT_LIMIT'
+};
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/pagination/pagination.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/pagination/pagination.react.jsx b/app/addons/documents/pagination/pagination.react.jsx
index 04ace67..2b8e5de 100644
--- a/app/addons/documents/pagination/pagination.react.jsx
+++ b/app/addons/documents/pagination/pagination.react.jsx
@@ -10,263 +10,259 @@
// License for the specific language governing permissions and limitations under
// the License.
-define([
- "../../../core/api",
- "react",
- './actions',
- '../index-results/stores',
- ], function (FauxtonAPI, React, Actions, IndexResultsStore) {
- var indexResultsStore = IndexResultsStore.indexResultsStore;
-
- var IndexPaginationController = React.createClass({
-
- getStoreState: function () {
- return {
- canShowPrevious: indexResultsStore.canShowPrevious(),
- canShowNext: indexResultsStore.canShowNext(),
- collection: indexResultsStore.getCollection(),
- bulkCollection: indexResultsStore.getBulkDocCollection(),
- };
- },
-
- getInitialState: function () {
- return this.getStoreState();
- },
-
- componentDidMount: function () {
- indexResultsStore.on('change', this.onChange, this);
- },
-
- componentWillUnmount: function () {
- indexResultsStore.off('change', this.onChange);
- },
-
- onChange: function () {
- this.setState(this.getStoreState());
- },
-
- nextClicked: function (event) {
- event.preventDefault();
- if (!this.state.canShowNext) { return; }
-
- var collection = this.state.collection;
- var bulkCollection = this.state.bulkCollection;
- Actions.paginateNext(collection, bulkCollection);
- },
-
- previousClicked: function (event) {
- event.preventDefault();
- if (!this.state.canShowPrevious) { return; }
-
- var collection = this.state.collection;
- var bulkCollection = this.state.bulkCollection;
- Actions.paginatePrevious(collection, bulkCollection);
- },
-
- render: function () {
- var canShowPreviousClassName = '';
- var canShowNextClassName = '';
-
- if (!this.state.canShowPrevious) {
- canShowPreviousClassName = 'disabled';
- }
-
- if (!this.state.canShowNext) {
- canShowNextClassName = 'disabled';
- }
-
- return (
- <div className="documents-pagination">
- <ul className="pagination">
- <li className={canShowPreviousClassName} >
- <a id="previous" onClick={this.previousClicked} className="icon fonticon-left-open" href="#" data-bypass="true"></a>
- </li>
- <li className={canShowNextClassName} >
- <a id="next" onClick={this.nextClicked} className="icon fonticon-right-open" href="#" data-bypass="true"></a>
- </li>
- </ul>
- </div>
- );
- }
+import FauxtonAPI from "../../../core/api";
+import React from "react";
+import Actions from "./actions";
+import IndexResultsStore from "../index-results/stores";
+var indexResultsStore = IndexResultsStore.indexResultsStore;
- });
-
- var PerPageSelector = React.createClass({
-
- propTypes: {
- perPage: React.PropTypes.number.isRequired,
- perPageChange: React.PropTypes.func.isRequired,
- label: React.PropTypes.string,
- options: React.PropTypes.array
- },
-
- getDefaultProps: function () {
- return {
- label: 'Documents per page: ',
- options: [5, 10, 20, 30, 50, 100]
- };
- },
-
- perPageChange: function (e) {
- var perPage = parseInt(e.target.value, 10);
- this.props.perPageChange(perPage);
- },
-
- getOptions: function () {
- return _.map(this.props.options, function (i) {
- return (<option value={i} key={i}>{i}</option>);
- });
- },
-
- render: function () {
- return (
- <div id="per-page">
- <label htmlFor="select-per-page" className="drop-down inline">
- {this.props.label}
- <select id="select-per-page" onChange={this.perPageChange} value={this.props.perPage.toString()} className="input-small">
- {this.getOptions()}
- </select>
- </label>
- </div>
- );
- }
-
- });
+var IndexPaginationController = React.createClass({
- var AllDocsNumberController = React.createClass({
-
- getStoreState: function () {
- return {
- totalRows: indexResultsStore.getTotalRows(),
- pageStart: indexResultsStore.getPageStart(),
- pageEnd: indexResultsStore.getPageEnd(),
- perPage: indexResultsStore.getPerPage(),
- prioritizedEnabled: indexResultsStore.getIsPrioritizedEnabled(),
- showPrioritizedFieldToggler: indexResultsStore.getShowPrioritizedFieldToggler(),
- displayedFields: indexResultsStore.getResults().displayedFields,
- collection: indexResultsStore.getCollection(),
- bulkCollection: indexResultsStore.getBulkDocCollection(),
- };
- },
-
- getInitialState: function () {
- return this.getStoreState();
- },
-
- componentDidMount: function () {
- indexResultsStore.on('change', this.onChange, this);
- },
-
- componentWillUnmount: function () {
- indexResultsStore.off('change', this.onChange);
- },
-
- onChange: function () {
- this.setState(this.getStoreState());
- },
-
- getPageNumberText: function () {
- if (this.state.totalRows === 0) {
- return <span>Showing 0 documents.</span>;
- }
-
- return <span>Showing document {this.state.pageStart} - {this.state.pageEnd}.</span>;
- },
-
- perPageChange: function (perPage) {
- var collection = this.state.collection;
- var bulkCollection = this.state.bulkCollection;
- Actions.updatePerPage(perPage, collection, bulkCollection);
- },
-
- render: function () {
- var showTableControls = this.state.showPrioritizedFieldToggler;
-
- return (
- <div className="footer-controls">
-
- <div className="page-controls">
- {showTableControls ?
- <TableControls
- prioritizedEnabled={this.state.prioritizedEnabled}
- displayedFields={this.state.displayedFields} /> : null}
- </div>
-
- <PerPageSelector perPageChange={this.perPageChange} perPage={this.state.perPage} />
- <div className="current-docs">
- {this.getPageNumberText()}
- </div>
- </div>
- );
- }
-
- });
+ getStoreState: function () {
+ return {
+ canShowPrevious: indexResultsStore.canShowPrevious(),
+ canShowNext: indexResultsStore.canShowNext(),
+ collection: indexResultsStore.getCollection(),
+ bulkCollection: indexResultsStore.getBulkDocCollection(),
+ };
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ componentDidMount: function () {
+ indexResultsStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function () {
+ indexResultsStore.off('change', this.onChange);
+ },
+
+ onChange: function () {
+ this.setState(this.getStoreState());
+ },
+
+ nextClicked: function (event) {
+ event.preventDefault();
+ if (!this.state.canShowNext) { return; }
+
+ var collection = this.state.collection;
+ var bulkCollection = this.state.bulkCollection;
+ Actions.paginateNext(collection, bulkCollection);
+ },
+
+ previousClicked: function (event) {
+ event.preventDefault();
+ if (!this.state.canShowPrevious) { return; }
+
+ var collection = this.state.collection;
+ var bulkCollection = this.state.bulkCollection;
+ Actions.paginatePrevious(collection, bulkCollection);
+ },
+
+ render: function () {
+ var canShowPreviousClassName = '';
+ var canShowNextClassName = '';
+
+ if (!this.state.canShowPrevious) {
+ canShowPreviousClassName = 'disabled';
+ }
+
+ if (!this.state.canShowNext) {
+ canShowNextClassName = 'disabled';
+ }
+
+ return (
+ <div className="documents-pagination">
+ <ul className="pagination">
+ <li className={canShowPreviousClassName} >
+ <a id="previous" onClick={this.previousClicked} className="icon fonticon-left-open" href="#" data-bypass="true"></a>
+ </li>
+ <li className={canShowNextClassName} >
+ <a id="next" onClick={this.nextClicked} className="icon fonticon-right-open" href="#" data-bypass="true"></a>
+ </li>
+ </ul>
+ </div>
+ );
+ }
+
+});
+
+var PerPageSelector = React.createClass({
+
+ propTypes: {
+ perPage: React.PropTypes.number.isRequired,
+ perPageChange: React.PropTypes.func.isRequired,
+ label: React.PropTypes.string,
+ options: React.PropTypes.array
+ },
+
+ getDefaultProps: function () {
+ return {
+ label: 'Documents per page: ',
+ options: [5, 10, 20, 30, 50, 100]
+ };
+ },
- var TableControls = React.createClass({
-
- propTypes: {
- prioritizedEnabled: React.PropTypes.bool.isRequired,
- displayedFields: React.PropTypes.object.isRequired,
- },
-
- getAmountShownFields: function () {
- var fields = this.props.displayedFields;
-
- if (fields.shown === fields.allFieldCount) {
- return (
- <div className="pull-left shown-fields">
- Showing {fields.shown} columns.
- </div>
- );
- }
-
- return (
- <div className="pull-left shown-fields">
- Showing {fields.shown} of {fields.allFieldCount} columns.
- </div>
- );
- },
-
- toggleTableViewType: function () {
- Actions.toggleTableViewType();
- },
-
- render: function () {
- return (
- <div className="footer-table-control">
- {this.getAmountShownFields()}
- <div className="footer-doc-control-prioritized-wrapper pull-left">
- <label htmlFor="footer-doc-control-prioritized">
- <input
- id="footer-doc-control-prioritized"
- checked={this.props.prioritizedEnabled}
- onChange={this.toggleTableViewType}
- type="checkbox">
- </input>
- Show all columns.
- </label>
- </div>
- </div>
- );
- }
- });
+ perPageChange: function (e) {
+ var perPage = parseInt(e.target.value, 10);
+ this.props.perPageChange(perPage);
+ },
- var Footer = React.createClass({
- render: function () {
- return (
- <footer className="index-pagination pagination-footer">
- <IndexPaginationController />
- <AllDocsNumberController />
- </footer>
- );
- }
+ getOptions: function () {
+ return _.map(this.props.options, function (i) {
+ return (<option value={i} key={i}>{i}</option>);
});
-
+ },
+
+ render: function () {
+ return (
+ <div id="per-page">
+ <label htmlFor="select-per-page" className="drop-down inline">
+ {this.props.label}
+ <select id="select-per-page" onChange={this.perPageChange} value={this.props.perPage.toString()} className="input-small">
+ {this.getOptions()}
+ </select>
+ </label>
+ </div>
+ );
+ }
+
+});
+
+var AllDocsNumberController = React.createClass({
+
+ getStoreState: function () {
return {
- AllDocsNumber: AllDocsNumberController,
- PerPageSelector: PerPageSelector,
- Footer: Footer,
- TableControls: TableControls,
+ totalRows: indexResultsStore.getTotalRows(),
+ pageStart: indexResultsStore.getPageStart(),
+ pageEnd: indexResultsStore.getPageEnd(),
+ perPage: indexResultsStore.getPerPage(),
+ prioritizedEnabled: indexResultsStore.getIsPrioritizedEnabled(),
+ showPrioritizedFieldToggler: indexResultsStore.getShowPrioritizedFieldToggler(),
+ displayedFields: indexResultsStore.getResults().displayedFields,
+ collection: indexResultsStore.getCollection(),
+ bulkCollection: indexResultsStore.getBulkDocCollection(),
};
-
- });
+ },
+
+ getInitialState: function () {
+ return this.getStoreState();
+ },
+
+ componentDidMount: function () {
+ indexResultsStore.on('change', this.onChange, this);
+ },
+
+ componentWillUnmount: function () {
+ indexResultsStore.off('change', this.onChange);
+ },
+
+ onChange: function () {
+ this.setState(this.getStoreState());
+ },
+
+ getPageNumberText: function () {
+ if (this.state.totalRows === 0) {
+ return <span>Showing 0 documents.</span>;
+ }
+
+ return <span>Showing document {this.state.pageStart} - {this.state.pageEnd}.</span>;
+ },
+
+ perPageChange: function (perPage) {
+ var collection = this.state.collection;
+ var bulkCollection = this.state.bulkCollection;
+ Actions.updatePerPage(perPage, collection, bulkCollection);
+ },
+
+ render: function () {
+ var showTableControls = this.state.showPrioritizedFieldToggler;
+
+ return (
+ <div className="footer-controls">
+
+ <div className="page-controls">
+ {showTableControls ?
+ <TableControls
+ prioritizedEnabled={this.state.prioritizedEnabled}
+ displayedFields={this.state.displayedFields} /> : null}
+ </div>
+
+ <PerPageSelector perPageChange={this.perPageChange} perPage={this.state.perPage} />
+ <div className="current-docs">
+ {this.getPageNumberText()}
+ </div>
+ </div>
+ );
+ }
+
+});
+
+var TableControls = React.createClass({
+
+ propTypes: {
+ prioritizedEnabled: React.PropTypes.bool.isRequired,
+ displayedFields: React.PropTypes.object.isRequired,
+ },
+
+ getAmountShownFields: function () {
+ var fields = this.props.displayedFields;
+
+ if (fields.shown === fields.allFieldCount) {
+ return (
+ <div className="pull-left shown-fields">
+ Showing {fields.shown} columns.
+ </div>
+ );
+ }
+
+ return (
+ <div className="pull-left shown-fields">
+ Showing {fields.shown} of {fields.allFieldCount} columns.
+ </div>
+ );
+ },
+
+ toggleTableViewType: function () {
+ Actions.toggleTableViewType();
+ },
+
+ render: function () {
+ return (
+ <div className="footer-table-control">
+ {this.getAmountShownFields()}
+ <div className="footer-doc-control-prioritized-wrapper pull-left">
+ <label htmlFor="footer-doc-control-prioritized">
+ <input
+ id="footer-doc-control-prioritized"
+ checked={this.props.prioritizedEnabled}
+ onChange={this.toggleTableViewType}
+ type="checkbox">
+ </input>
+ Show all columns.
+ </label>
+ </div>
+ </div>
+ );
+ }
+});
+
+var Footer = React.createClass({
+ render: function () {
+ return (
+ <footer className="index-pagination pagination-footer">
+ <IndexPaginationController />
+ <AllDocsNumberController />
+ </footer>
+ );
+ }
+});
+
+export default {
+ AllDocsNumber: AllDocsNumberController,
+ PerPageSelector: PerPageSelector,
+ Footer: Footer,
+ TableControls: TableControls,
+};
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx b/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
index 4b2358b..6ae6511 100644
--- a/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
+++ b/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx
@@ -9,116 +9,113 @@
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.
-define([
- '../../../../core/api',
- '../pagination.react',
- '../../../../../test/mocha/testUtils',
- 'react',
- 'react-dom',
- 'react-addons-test-utils',
- 'sinon'
-], function (FauxtonAPI, Views, utils, React, ReactDOM, TestUtils, sinon) {
+import FauxtonAPI from "../../../../core/api";
+import Views from "../pagination.react";
+import utils from "../../../../../test/mocha/testUtils";
+import React from "react";
+import ReactDOM from "react-dom";
+import TestUtils from "react-addons-test-utils";
+import sinon from "sinon";
- FauxtonAPI.router = new FauxtonAPI.Router([]);
+FauxtonAPI.router = new FauxtonAPI.Router([]);
- var assert = utils.assert;
+var assert = utils.assert;
- describe('All Docs Number', function () {
+describe('All Docs Number', function () {
- describe('PerPageSelector', function () {
- var container, selectorEl, perPageChange;
+ describe('PerPageSelector', function () {
+ var container, selectorEl, perPageChange;
- beforeEach(function () {
- perPageChange = sinon.spy();
- container = document.createElement('div');
- });
+ beforeEach(function () {
+ perPageChange = sinon.spy();
+ container = document.createElement('div');
+ });
- afterEach(function () {
- ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(selectorEl).parentNode);
- });
+ afterEach(function () {
+ ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(selectorEl).parentNode);
+ });
- it('on new select calls callback with new page size', function () {
- selectorEl = TestUtils.renderIntoDocument(
- <Views.PerPageSelector
- perPageChange={perPageChange}
- perPage={10} />,
- container
- );
- var selectEl = $(ReactDOM.findDOMNode(selectorEl)).find('#select-per-page')[0];
- var perPage = 5;
- TestUtils.Simulate.change(selectEl, {
- target: {
- value: perPage
- }
- });
-
- assert.ok(perPageChange.calledWith(perPage));
+ it('on new select calls callback with new page size', function () {
+ selectorEl = TestUtils.renderIntoDocument(
+ <Views.PerPageSelector
+ perPageChange={perPageChange}
+ perPage={10} />,
+ container
+ );
+ var selectEl = $(ReactDOM.findDOMNode(selectorEl)).find('#select-per-page')[0];
+ var perPage = 5;
+ TestUtils.Simulate.change(selectEl, {
+ target: {
+ value: perPage
+ }
});
- it('applies custom label', function () {
- var customLabel = 'alphabet soup';
- selectorEl = TestUtils.renderIntoDocument(
- <Views.PerPageSelector
- label={customLabel}
- perPageChange={perPageChange}
- perPage={10} />,
- container
- );
- var regexp = new RegExp(customLabel);
- assert.ok(regexp.test(ReactDOM.findDOMNode(selectorEl).outerHTML));
- });
+ assert.ok(perPageChange.calledWith(perPage));
+ });
- it('applies custom options', function () {
- selectorEl = TestUtils.renderIntoDocument(
- <Views.PerPageSelector
- options={[1, 2, 3]}
- perPageChange={perPageChange}
- perPage={10} />,
- container
- );
- var options = $(ReactDOM.findDOMNode(selectorEl)).find('option');
- assert.equal(options.length, 3);
- assert.equal(options[0].innerHTML, "1");
- assert.equal(options[1].innerHTML, "2");
- assert.equal(options[2].innerHTML, "3");
- });
+ it('applies custom label', function () {
+ var customLabel = 'alphabet soup';
+ selectorEl = TestUtils.renderIntoDocument(
+ <Views.PerPageSelector
+ label={customLabel}
+ perPageChange={perPageChange}
+ perPage={10} />,
+ container
+ );
+ var regexp = new RegExp(customLabel);
+ assert.ok(regexp.test(ReactDOM.findDOMNode(selectorEl).outerHTML));
+ });
+ it('applies custom options', function () {
+ selectorEl = TestUtils.renderIntoDocument(
+ <Views.PerPageSelector
+ options={[1, 2, 3]}
+ perPageChange={perPageChange}
+ perPage={10} />,
+ container
+ );
+ var options = $(ReactDOM.findDOMNode(selectorEl)).find('option');
+ assert.equal(options.length, 3);
+ assert.equal(options[0].innerHTML, "1");
+ assert.equal(options[1].innerHTML, "2");
+ assert.equal(options[2].innerHTML, "3");
});
- describe('TableControls', function () {
- var container, selectorEl;
+ });
- beforeEach(function () {
- container = document.createElement('div');
- });
+ describe('TableControls', function () {
+ var container, selectorEl;
- afterEach(function () {
- ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(selectorEl).parentNode);
- });
+ beforeEach(function () {
+ container = document.createElement('div');
+ });
+
+ afterEach(function () {
+ ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(selectorEl).parentNode);
+ });
- it('shows the amount of fields, none hidden', function () {
+ it('shows the amount of fields, none hidden', function () {
- selectorEl = TestUtils.renderIntoDocument(
- <Views.TableControls prioritizedEnabled={true} displayedFields={{shown: 7, allFieldCount: 7}} />,
- container
- );
+ selectorEl = TestUtils.renderIntoDocument(
+ <Views.TableControls prioritizedEnabled={true} displayedFields={{shown: 7, allFieldCount: 7}} />,
+ container
+ );
- var text = $(ReactDOM.findDOMNode(selectorEl)).find('.shown-fields').text();
+ var text = $(ReactDOM.findDOMNode(selectorEl)).find('.shown-fields').text();
- assert.equal('Showing 7 columns.', text);
- });
+ assert.equal('Showing 7 columns.', text);
+ });
- it('shows the amount of fields, some hidden', function () {
+ it('shows the amount of fields, some hidden', function () {
- selectorEl = TestUtils.renderIntoDocument(
- <Views.TableControls prioritizedEnabled={true} displayedFields={{shown: 5, allFieldCount: 7}} />,
- container
- );
+ selectorEl = TestUtils.renderIntoDocument(
+ <Views.TableControls prioritizedEnabled={true} displayedFields={{shown: 5, allFieldCount: 7}} />,
+ container
+ );
- var text = $(ReactDOM.findDOMNode(selectorEl)).find('.shown-fields').text();
+ var text = $(ReactDOM.findDOMNode(selectorEl)).find('.shown-fields').text();
- assert.equal('Showing 5 of 7 columns.', text);
- });
+ assert.equal('Showing 5 of 7 columns.', text);
});
});
});
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/queryoptions/actions.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/queryoptions/actions.js b/app/addons/documents/queryoptions/actions.js
index 0eef485..89e84cc 100644
--- a/app/addons/documents/queryoptions/actions.js
+++ b/app/addons/documents/queryoptions/actions.js
@@ -10,105 +10,102 @@
// License for the specific language governing permissions and limitations under
// the License.
-define([
- '../../../app',
- '../../../core/api',
- './actiontypes',
- './stores'
-],
-function (app, FauxtonAPI, ActionTypes, Stores) {
- var store = Stores.queryOptionsStore;
- return {
-
- toggleIncludeDocs: function () {
+import app from "../../../app";
+import FauxtonAPI from "../../../core/api";
+import ActionTypes from "./actiontypes";
+import Stores from "./stores";
+var store = Stores.queryOptionsStore;
+
+export default {
+
+ toggleIncludeDocs: function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_TOGGLE_INCLUDE_DOCS
+ });
+ },
+
+ toggleByKeys: function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_TOGGLE_BY_KEYS
+ });
+ },
+
+ toggleBetweenKeys: function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_TOGGLE_BETWEEN_KEYS
+ });
+ },
+
+ toggleDescending: function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_TOGGLE_DESCENDING
+ });
+ },
+
+ toggleReduce: function () {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_TOGGLE_REDUCE
+ });
+ },
+
+ updateBetweenKeys: function (betweenKeys) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_UPDATE_BETWEEN_KEYS,
+ betweenKeys: betweenKeys
+ });
+ },
+
+ updateByKeys: function (byKeys) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_UPDATE_BY_KEYS,
+ byKeys: byKeys
+ });
+ },
+
+ updateSkip: function (skip) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_UPDATE_SKIP,
+ skip: skip
+ });
+ },
+
+ updateLimit: function (limit) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_UPDATE_LIMIT,
+ limit: limit
+ });
+ },
+
+ runQuery: function (params) {
+ var url = app.utils.replaceQueryParams(params);
+ FauxtonAPI.navigate(url);
+ },
+
+ toggleQueryBarVisibility: function (options) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_UPDATE_VISIBILITY,
+ options: options
+ });
+ },
+
+ updateGroupLevel: function (groupLevel) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_UPDATE_GROUP_LEVEL,
+ groupLevel: groupLevel
+ });
+ },
+
+ reset: function (options) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.QUERY_RESET,
+ params: options.queryParams
+ });
+
+ if (options.showReduce) {
FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_TOGGLE_INCLUDE_DOCS
+ type: ActionTypes.QUERY_SHOW_REDUCE
});
- },
-
- toggleByKeys: function () {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_TOGGLE_BY_KEYS
- });
- },
-
- toggleBetweenKeys: function () {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_TOGGLE_BETWEEN_KEYS
- });
- },
-
- toggleDescending: function () {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_TOGGLE_DESCENDING
- });
- },
-
- toggleReduce: function () {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_TOGGLE_REDUCE
- });
- },
-
- updateBetweenKeys: function (betweenKeys) {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_UPDATE_BETWEEN_KEYS,
- betweenKeys: betweenKeys
- });
- },
-
- updateByKeys: function (byKeys) {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_UPDATE_BY_KEYS,
- byKeys: byKeys
- });
- },
-
- updateSkip: function (skip) {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_UPDATE_SKIP,
- skip: skip
- });
- },
-
- updateLimit: function (limit) {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_UPDATE_LIMIT,
- limit: limit
- });
- },
-
- runQuery: function (params) {
- var url = app.utils.replaceQueryParams(params);
- FauxtonAPI.navigate(url);
- },
-
- toggleQueryBarVisibility: function (options) {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_UPDATE_VISIBILITY,
- options: options
- });
- },
-
- updateGroupLevel: function (groupLevel) {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_UPDATE_GROUP_LEVEL,
- groupLevel: groupLevel
- });
- },
-
- reset: function (options) {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_RESET,
- params: options.queryParams
- });
-
- if (options.showReduce) {
- FauxtonAPI.dispatch({
- type: ActionTypes.QUERY_SHOW_REDUCE
- });
- }
}
+ }
- };
-});
+};
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/queryoptions/actiontypes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/queryoptions/actiontypes.js b/app/addons/documents/queryoptions/actiontypes.js
index b91e92a..225f38b 100644
--- a/app/addons/documents/queryoptions/actiontypes.js
+++ b/app/addons/documents/queryoptions/actiontypes.js
@@ -10,20 +10,18 @@
// License for the specific language governing permissions and limitations under
// the License.
-define([], function () {
- return {
- QUERY_TOGGLE_INCLUDE_DOCS: 'QUERY_TOGGLE_INCLUDE_DOCS',
- QUERY_TOGGLE_BY_KEYS: 'QUERY_TOGGLE_BY_KEYS',
- QUERY_TOGGLE_BETWEEN_KEYS: 'QUERY_TOGGLE_BETWEEN_KEYS',
- QUERY_UPDATE_BETWEEN_KEYS: 'QUERY_UPDATE_BETWEEN_KEYS',
- QUERY_UPDATE_BY_KEYS: 'QUERY_UPDATE_BY_KEYS',
- QUERY_TOGGLE_DESCENDING: 'QUERY_TOGGLE_DESCENDING',
- QUERY_TOGGLE_REDUCE: 'QUERY_TOGGLE_REDUCE',
- QUERY_UPDATE_SKIP: 'QUERY_UPDATE_SKIP',
- QUERY_UPDATE_LIMIT: 'QUERY_UPDATE_LIMIT',
- QUERY_RESET: 'QUERY_RESET',
- QUERY_SHOW_REDUCE: 'QUERY_SHOW_REDUCE',
- QUERY_UPDATE_GROUP_LEVEL: 'QUERY_UPDATE_GROUP_LEVEL',
- QUERY_UPDATE_VISIBILITY: 'QUERY_UPDATE_VISIBILITY'
- };
-});
+export default {
+ QUERY_TOGGLE_INCLUDE_DOCS: 'QUERY_TOGGLE_INCLUDE_DOCS',
+ QUERY_TOGGLE_BY_KEYS: 'QUERY_TOGGLE_BY_KEYS',
+ QUERY_TOGGLE_BETWEEN_KEYS: 'QUERY_TOGGLE_BETWEEN_KEYS',
+ QUERY_UPDATE_BETWEEN_KEYS: 'QUERY_UPDATE_BETWEEN_KEYS',
+ QUERY_UPDATE_BY_KEYS: 'QUERY_UPDATE_BY_KEYS',
+ QUERY_TOGGLE_DESCENDING: 'QUERY_TOGGLE_DESCENDING',
+ QUERY_TOGGLE_REDUCE: 'QUERY_TOGGLE_REDUCE',
+ QUERY_UPDATE_SKIP: 'QUERY_UPDATE_SKIP',
+ QUERY_UPDATE_LIMIT: 'QUERY_UPDATE_LIMIT',
+ QUERY_RESET: 'QUERY_RESET',
+ QUERY_SHOW_REDUCE: 'QUERY_SHOW_REDUCE',
+ QUERY_UPDATE_GROUP_LEVEL: 'QUERY_UPDATE_GROUP_LEVEL',
+ QUERY_UPDATE_VISIBILITY: 'QUERY_UPDATE_VISIBILITY'
+};
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/0ca35da7/app/addons/documents/queryoptions/queryoptions.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/queryoptions/queryoptions.react.jsx b/app/addons/documents/queryoptions/queryoptions.react.jsx
index 97876bd..a24b8cf 100644
--- a/app/addons/documents/queryoptions/queryoptions.react.jsx
+++ b/app/addons/documents/queryoptions/queryoptions.react.jsx
@@ -10,431 +10,426 @@
// License for the specific language governing permissions and limitations under
// the License.
-define([
- '../../../app',
- '../../../core/api',
- 'react',
- 'react-dom',
- './stores',
- './actions',
- '../../components/react-components.react'
-],
-
-function (app, FauxtonAPI, React, ReactDOM, Stores, Actions, Components) {
- var store = Stores.queryOptionsStore;
- var TrayContents = Components.TrayContents;
- var ToggleHeaderButton = Components.ToggleHeaderButton;
-
- var TrayWrapper = Components.TrayWrapper;
- var connectToStores = Components.connectToStores;
-
- var MainFieldsView = React.createClass({
- propTypes: {
- toggleIncludeDocs: React.PropTypes.func.isRequired,
- includeDocs: React.PropTypes.bool.isRequired,
- reduce: React.PropTypes.bool.isRequired,
- toggleReduce: React.PropTypes.func,
- updateGroupLevel: React.PropTypes.func,
- docURL: React.PropTypes.string
- },
-
- getDefaultProps: function () {
- return {
- docURL: FauxtonAPI.constants.DOC_URLS.GENERAL
- };
- },
-
- toggleIncludeDocs: function (e) {
- this.props.toggleIncludeDocs(e);
- },
-
- groupLevelChange: function (e) {
- this.props.updateGroupLevel(e.target.value);
- },
-
- groupLevel: function () {
- if (!this.props.reduce) {
- return null;
- }
+import app from "../../../app";
+import FauxtonAPI from "../../../core/api";
+import React from "react";
+import ReactDOM from "react-dom";
+import Stores from "./stores";
+import Actions from "./actions";
+import Components from "../../components/react-components.react";
+var store = Stores.queryOptionsStore;
+var TrayContents = Components.TrayContents;
+var ToggleHeaderButton = Components.ToggleHeaderButton;
+
+var TrayWrapper = Components.TrayWrapper;
+var connectToStores = Components.connectToStores;
+
+var MainFieldsView = React.createClass({
+ propTypes: {
+ toggleIncludeDocs: React.PropTypes.func.isRequired,
+ includeDocs: React.PropTypes.bool.isRequired,
+ reduce: React.PropTypes.bool.isRequired,
+ toggleReduce: React.PropTypes.func,
+ updateGroupLevel: React.PropTypes.func,
+ docURL: React.PropTypes.string
+ },
+
+ getDefaultProps: function () {
+ return {
+ docURL: FauxtonAPI.constants.DOC_URLS.GENERAL
+ };
+ },
+
+ toggleIncludeDocs: function (e) {
+ this.props.toggleIncludeDocs(e);
+ },
+
+ groupLevelChange: function (e) {
+ this.props.updateGroupLevel(e.target.value);
+ },
+
+ groupLevel: function () {
+ if (!this.props.reduce) {
+ return null;
+ }
- return (
- <label className="drop-down inline" id="qoGroupLevelGroup">
- Group Level
- <select onChange={this.groupLevelChange} id="qoGroupLevel" value={this.props.groupLevel} name="group_level" className="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="exact">Exact</option>
- </select>
- </label>
- );
- },
-
- reduce: function () {
- if (!this.props.showReduce) {
- return null;
- }
+ return (
+ <label className="drop-down inline" id="qoGroupLevelGroup">
+ Group Level
+ <select onChange={this.groupLevelChange} id="qoGroupLevel" value={this.props.groupLevel} name="group_level" className="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="exact">Exact</option>
+ </select>
+ </label>
+ );
+ },
+
+ reduce: function () {
+ if (!this.props.showReduce) {
+ return null;
+ }
- return (
- <span>
- <div className="checkbox inline">
- <input id="qoReduce" name="reduce" onChange={this.props.toggleReduce} type="checkbox" checked={this.props.reduce} />
- <label htmlFor="qoReduce">Reduce</label>
- </div>
- {this.groupLevel()}
+ return (
+ <span>
+ <div className="checkbox inline">
+ <input id="qoReduce" name="reduce" onChange={this.props.toggleReduce} type="checkbox" checked={this.props.reduce} />
+ <label htmlFor="qoReduce">Reduce</label>
+ </div>
+ {this.groupLevel()}
+ </span>
+ );
+ },
+
+ render: function () {
+ var includeDocs = this.props.includeDocs;
+ return (
+ <div className="query-group" id="query-options-main-fields">
+ <span className="add-on">
+ Query Options
+ <a className="help-link" href={this.props.docURL} target="_blank" data-bypass="true">
+ <i className="icon-question-sign" />
+ </a>
</span>
- );
- },
-
- render: function () {
- var includeDocs = this.props.includeDocs;
- return (
- <div className="query-group" id="query-options-main-fields">
- <span className="add-on">
- Query Options
- <a className="help-link" href={this.props.docURL} target="_blank" data-bypass="true">
- <i className="icon-question-sign" />
- </a>
- </span>
- <div className="controls-group qo-main-fields-row">
- <div className="row-fluid fieldsets">
- <div className="checkbox inline">
- <input disabled={this.props.reduce} onChange={this.toggleIncludeDocs} id="qoIncludeDocs"
- name="include_docs" type="checkbox" checked={includeDocs} />
- <label className={this.props.reduce ? 'disabled' : ''} htmlFor="qoIncludeDocs" id="qoIncludeDocsLabel">Include Docs</label>
- </div>
- {this.reduce()}
+ <div className="controls-group qo-main-fields-row">
+ <div className="row-fluid fieldsets">
+ <div className="checkbox inline">
+ <input disabled={this.props.reduce} onChange={this.toggleIncludeDocs} id="qoIncludeDocs"
+ name="include_docs" type="checkbox" checked={includeDocs} />
+ <label className={this.props.reduce ? 'disabled' : ''} htmlFor="qoIncludeDocs" id="qoIncludeDocsLabel">Include Docs</label>
</div>
+ {this.reduce()}
</div>
</div>
- );
- }
-
- });
-
- var KeySearchFields = React.createClass({
- toggleByKeys: function () {
- this.props.toggleByKeys();
- },
-
- toggleBetweenKeys: function () {
- this.props.toggleBetweenKeys();
- },
+ </div>
+ );
+ }
- updateBetweenKeys: function () {
- this.props.updateBetweenKeys({
- startkey: ReactDOM.findDOMNode(this.refs.startkey).value,
- endkey: ReactDOM.findDOMNode(this.refs.endkey).value,
- include: this.props.betweenKeys.include
- });
- },
-
- updateInclusiveEnd: function () {
- this.props.updateBetweenKeys({
- include: !this.props.betweenKeys.include,
- startkey: this.props.betweenKeys.startkey,
- endkey: this.props.betweenKeys.endkey
- });
- },
-
- updateByKeys: function (e) {
- this.props.updateByKeys(e.target.value);
- },
-
- render: function () {
- var keysGroupClass = 'controls-group well js-query-keys-wrapper ';
- var byKeysClass = 'row-fluid js-keys-section ';
- var betweenKeysClass = byKeysClass;
- var byKeysButtonClass = 'drop-down btn ';
- var betweenKeysButtonClass = byKeysButtonClass;
+});
- if (!this.props.showByKeys && !this.props.showBetweenKeys) {
- keysGroupClass += 'hide';
- }
+var KeySearchFields = React.createClass({
+ toggleByKeys: function () {
+ this.props.toggleByKeys();
+ },
+
+ toggleBetweenKeys: function () {
+ this.props.toggleBetweenKeys();
+ },
+
+ updateBetweenKeys: function () {
+ this.props.updateBetweenKeys({
+ startkey: ReactDOM.findDOMNode(this.refs.startkey).value,
+ endkey: ReactDOM.findDOMNode(this.refs.endkey).value,
+ include: this.props.betweenKeys.include
+ });
+ },
+
+ updateInclusiveEnd: function () {
+ this.props.updateBetweenKeys({
+ include: !this.props.betweenKeys.include,
+ startkey: this.props.betweenKeys.startkey,
+ endkey: this.props.betweenKeys.endkey
+ });
+ },
+
+ updateByKeys: function (e) {
+ this.props.updateByKeys(e.target.value);
+ },
+
+ render: function () {
+ var keysGroupClass = 'controls-group well js-query-keys-wrapper ';
+ var byKeysClass = 'row-fluid js-keys-section ';
+ var betweenKeysClass = byKeysClass;
+ var byKeysButtonClass = 'drop-down btn ';
+ var betweenKeysButtonClass = byKeysButtonClass;
+
+ if (!this.props.showByKeys && !this.props.showBetweenKeys) {
+ keysGroupClass += 'hide';
+ }
- if (!this.props.showByKeys) {
- byKeysClass += 'hide';
- } else {
- byKeysButtonClass += 'active';
- }
+ if (!this.props.showByKeys) {
+ byKeysClass += 'hide';
+ } else {
+ byKeysButtonClass += 'active';
+ }
- if (!this.props.showBetweenKeys) {
- betweenKeysClass += 'hide';
- } else {
- betweenKeysButtonClass += 'active';
- }
+ if (!this.props.showBetweenKeys) {
+ betweenKeysClass += 'hide';
+ } else {
+ betweenKeysButtonClass += 'active';
+ }
- return (
- <div className="query-group" id="query-options-key-search">
- <div className="add-on">Keys</div>
- <div className="btn-group toggle-btns row-fluid">
- <label style={{width: '101px'}} id="byKeys" onClick={this.toggleByKeys} className={byKeysButtonClass}>By Key(s)</label>
- <label style={{width: '101px'}} id="betweenKeys" onClick={this.toggleBetweenKeys} className={betweenKeysButtonClass}>Between Keys</label>
- </div>
+ return (
+ <div className="query-group" id="query-options-key-search">
+ <div className="add-on">Keys</div>
+ <div className="btn-group toggle-btns row-fluid">
+ <label style={{width: '101px'}} id="byKeys" onClick={this.toggleByKeys} className={byKeysButtonClass}>By Key(s)</label>
+ <label style={{width: '101px'}} id="betweenKeys" onClick={this.toggleBetweenKeys} className={betweenKeysButtonClass}>Between Keys</label>
+ </div>
- <div className={keysGroupClass}>
- <div className={byKeysClass} id="js-showKeys">
- <div className="controls controls-row">
- <label htmlFor="keys-input" className="drop-down">A key, or an array of keys.</label>
- <textarea value={this.props.byKeys} onChange={this.updateByKeys} id="keys-input" className="input-xxlarge" rows="5" type="text"
- placeholder='Enter either a single key ["123"] or an array of keys ["123", "456"].
+ <div className={keysGroupClass}>
+ <div className={byKeysClass} id="js-showKeys">
+ <div className="controls controls-row">
+ <label htmlFor="keys-input" className="drop-down">A key, or an array of keys.</label>
+ <textarea value={this.props.byKeys} onChange={this.updateByKeys} id="keys-input" className="input-xxlarge" rows="5" type="text"
+ placeholder='Enter either a single key ["123"] or an array of keys ["123", "456"].
A key value is the first parameter emitted in a map function. For example emit("123", 1) the key is "123".'></textarea>
- <div id="keys-error" className="inline-block js-keys-error"></div>
- </div>
+ <div id="keys-error" className="inline-block js-keys-error"></div>
</div>
+ </div>
- <div className={betweenKeysClass} id="js-showStartEnd">
- <div className="controls controls-row">
- <div>
- <label htmlFor="startkey" className="drop-down">Start key</label>
- <input id="startkey" ref="startkey" type="text" onChange={this.updateBetweenKeys} value={this.props.betweenKeys.startkey} placeholder='e.g., "1234"' />
- </div>
- <div>
- <label htmlFor="endkey" className="drop-down">End key</label>
- <input id="endkey" ref="endkey" onChange={this.updateBetweenKeys} value={this.props.betweenKeys.endkey} type="text" placeholder='e.g., "1234"'/>
- <div className="controls include-end-key-row checkbox controls-row inline">
- <input id="qoIncludeEndKeyInResults" ref="inclusive_end" type="checkbox" onChange={this.updateInclusiveEnd} checked={this.props.betweenKeys.include}/>
- <label htmlFor="qoIncludeEndKeyInResults">Include End Key in results</label>
- </div>
+ <div className={betweenKeysClass} id="js-showStartEnd">
+ <div className="controls controls-row">
+ <div>
+ <label htmlFor="startkey" className="drop-down">Start key</label>
+ <input id="startkey" ref="startkey" type="text" onChange={this.updateBetweenKeys} value={this.props.betweenKeys.startkey} placeholder='e.g., "1234"' />
+ </div>
+ <div>
+ <label htmlFor="endkey" className="drop-down">End key</label>
+ <input id="endkey" ref="endkey" onChange={this.updateBetweenKeys} value={this.props.betweenKeys.endkey} type="text" placeholder='e.g., "1234"'/>
+ <div className="controls include-end-key-row checkbox controls-row inline">
+ <input id="qoIncludeEndKeyInResults" ref="inclusive_end" type="checkbox" onChange={this.updateInclusiveEnd} checked={this.props.betweenKeys.include}/>
+ <label htmlFor="qoIncludeEndKeyInResults">Include End Key in results</label>
</div>
</div>
</div>
</div>
-
</div>
- );
- }
- });
-
- var AdditionalParams = React.createClass({
- updateSkip: function (e) {
- e.preventDefault();
- var val = e.target.value;
-
- //check skip is only numbers
- if (!/^\d*$/.test(val)) {
- FauxtonAPI.addNotification({
- msg: 'Skip can only be a number',
- type: 'error'
- });
- val = this.props.skip;
- }
- this.props.updateSkip(val);
- },
+ </div>
+ );
+ }
+});
- updateLimit: function (e) {
- e.preventDefault();
- this.props.updateLimit(e.target.value);
- },
+var AdditionalParams = React.createClass({
+ updateSkip: function (e) {
+ e.preventDefault();
+ var val = e.target.value;
- render: function () {
- return (
- <div className="query-group" id="query-options-additional-params">
- <div className="add-on additionalParams">Additional Parameters</div>
- <div className="row-fluid fieldsets">
- <div className="dropdown inline">
- <label className="drop-down">
- Limit
- <select id="qoLimit" onChange={this.updateLimit} name="limit" value={this.props.limit} className="input-small">
- <option value="none">None</option>
- <option value={5}>5</option>
- <option value={10}>10</option>
- <option value={20}>20</option>
- <option value={30}>30</option>
- <option value={50}>50</option>
- <option value={100}>100</option>
- <option value={500}>500</option>
- </select>
- </label>
- </div>
- </div>
- <div className="row-fluid fieldsets">
- <div className="checkbox inline">
- <input id="qoDescending" type="checkbox" onChange={this.props.toggleDescending} checked={this.props.descending} />
- <label htmlFor="qoDescending">Descending</label>
- </div>
- <div className="dropdown inline">
- <label htmlFor="qoSkip" className="drop-down">
- Skip
- <input value={this.props.skip} onChange={this.updateSkip} className="input-small" type="text" id="qoSkip" placeholder="# of rows" />
- </label>
- </div>
+ //check skip is only numbers
+ if (!/^\d*$/.test(val)) {
+ FauxtonAPI.addNotification({
+ msg: 'Skip can only be a number',
+ type: 'error'
+ });
+ val = this.props.skip;
+ }
+
+ this.props.updateSkip(val);
+ },
+
+ updateLimit: function (e) {
+ e.preventDefault();
+ this.props.updateLimit(e.target.value);
+ },
+
+ render: function () {
+ return (
+ <div className="query-group" id="query-options-additional-params">
+ <div className="add-on additionalParams">Additional Parameters</div>
+ <div className="row-fluid fieldsets">
+ <div className="dropdown inline">
+ <label className="drop-down">
+ Limit
+ <select id="qoLimit" onChange={this.updateLimit} name="limit" value={this.props.limit} className="input-small">
+ <option value="none">None</option>
+ <option value={5}>5</option>
+ <option value={10}>10</option>
+ <option value={20}>20</option>
+ <option value={30}>30</option>
+ <option value={50}>50</option>
+ <option value={100}>100</option>
+ <option value={500}>500</option>
+ </select>
+ </label>
</div>
</div>
- );
- }
- });
-
- var QueryButtons = React.createClass({
- propTypes: {
- onCancel: React.PropTypes.func.isRequired
- },
-
- hideTray: function (e) {
- this.props.onCancel();
- },
-
- render: function () {
- return (
- <div className="controls-group query-group">
- <div id="button-options" className="controls controls-row">
- <button type="submit" className="btn btn-success">
- <i className="fonticon-play icon" />
- Run Query
- </button>
- <a onClick={this.hideTray} className="btn btn-cancel">Cancel</a>
+ <div className="row-fluid fieldsets">
+ <div className="checkbox inline">
+ <input id="qoDescending" type="checkbox" onChange={this.props.toggleDescending} checked={this.props.descending} />
+ <label htmlFor="qoDescending">Descending</label>
+ </div>
+ <div className="dropdown inline">
+ <label htmlFor="qoSkip" className="drop-down">
+ Skip
+ <input value={this.props.skip} onChange={this.updateSkip} className="input-small" type="text" id="qoSkip" placeholder="# of rows" />
+ </label>
</div>
</div>
- );
- }
- });
-
- var QueryOptionsController = React.createClass({
-
- getWrap: function () {
- return connectToStores(TrayWrapper, [store], function () {
-
- return {
- includeDocs: store.includeDocs(),
- showBetweenKeys: store.showBetweenKeys(),
- showByKeys: store.showByKeys(),
- betweenKeys: store.betweenKeys(),
- byKeys: store.byKeys(),
- descending: store.descending(),
- skip: store.skip(),
- limit: store.limit(),
- showReduce: store.showReduce(),
- reduce: store.reduce(),
- groupLevel: store.groupLevel(),
- contentVisible: store.getTrayVisible(),
- queryParams: store.getQueryParams()
- };
- });
- },
-
- render: function () {
- var TrayWrapper = this.getWrap();
- return (
- <TrayWrapper>
- <QueryTray contentVisible={false} />
- </TrayWrapper>
- );
- }
- });
+ </div>
+ );
+ }
+});
- var QueryTray = React.createClass({
+var QueryButtons = React.createClass({
+ propTypes: {
+ onCancel: React.PropTypes.func.isRequired
+ },
+
+ hideTray: function (e) {
+ this.props.onCancel();
+ },
+
+ render: function () {
+ return (
+ <div className="controls-group query-group">
+ <div id="button-options" className="controls controls-row">
+ <button type="submit" className="btn btn-success">
+ <i className="fonticon-play icon" />
+ Run Query
+ </button>
+ <a onClick={this.hideTray} className="btn btn-cancel">Cancel</a>
+ </div>
+ </div>
+ );
+ }
+});
- propTypes: {
- contentVisible: React.PropTypes.bool.isRequired
- },
+var QueryOptionsController = React.createClass({
- runQuery: function (e) {
- e.preventDefault();
+ getWrap: function () {
+ return connectToStores(TrayWrapper, [store], function () {
- Actions.runQuery(this.props.queryParams);
- this.toggleTrayVisibility();
- },
+ return {
+ includeDocs: store.includeDocs(),
+ showBetweenKeys: store.showBetweenKeys(),
+ showByKeys: store.showByKeys(),
+ betweenKeys: store.betweenKeys(),
+ byKeys: store.byKeys(),
+ descending: store.descending(),
+ skip: store.skip(),
+ limit: store.limit(),
+ showReduce: store.showReduce(),
+ reduce: store.reduce(),
+ groupLevel: store.groupLevel(),
+ contentVisible: store.getTrayVisible(),
+ queryParams: store.getQueryParams()
+ };
+ });
+ },
+
+ render: function () {
+ var TrayWrapper = this.getWrap();
+ return (
+ <TrayWrapper>
+ <QueryTray contentVisible={false} />
+ </TrayWrapper>
+ );
+ }
+});
- toggleTrayVisibility: function () {
- Actions.toggleQueryBarVisibility(!this.props.contentVisible);
- },
+var QueryTray = React.createClass({
- closeTray: function () {
- Actions.toggleQueryBarVisibility(false);
- },
-
- componentDidMount: function () {
- $('body').on('click.QueryTray', function (e) {
- if ($(e.target).closest('#query-options').length) {
- return;
- }
- Actions.toggleQueryBarVisibility(false);
- }.bind(this));
- },
-
- componentWillUnmount: function () {
- $('body').off('click.QueryTray');
- },
-
- toggleIncludeDocs: function (e) {
- Actions.toggleIncludeDocs();
- },
-
- getTray: function () {
- if (!this.props.contentVisible) {
- return null;
+ propTypes: {
+ contentVisible: React.PropTypes.bool.isRequired
+ },
+
+ runQuery: function (e) {
+ e.preventDefault();
+
+ Actions.runQuery(this.props.queryParams);
+ this.toggleTrayVisibility();
+ },
+
+ toggleTrayVisibility: function () {
+ Actions.toggleQueryBarVisibility(!this.props.contentVisible);
+ },
+
+ closeTray: function () {
+ Actions.toggleQueryBarVisibility(false);
+ },
+
+ componentDidMount: function () {
+ $('body').on('click.QueryTray', function (e) {
+ if ($(e.target).closest('#query-options').length) {
+ return;
}
+ Actions.toggleQueryBarVisibility(false);
+ }.bind(this));
+ },
- return (
- <TrayContents
- className="query-options"
- id="query-options-tray">
-
- <form onSubmit={this.runQuery} className="js-view-query-update custom-inputs">
- <MainFieldsView
- includeDocs={this.props.includeDocs}
- toggleIncludeDocs={this.toggleIncludeDocs}
- showReduce={this.props.showReduce}
- reduce={this.props.reduce}
- toggleReduce={Actions.toggleReduce}
- groupLevel={this.props.groupLevel}
- updateGroupLevel={Actions.updateGroupLevel} />
- <KeySearchFields
- key={1}
- showByKeys={this.props.showByKeys}
- showBetweenKeys={this.props.showBetweenKeys}
- toggleByKeys={Actions.toggleByKeys}
- toggleBetweenKeys={Actions.toggleBetweenKeys}
- betweenKeys={this.props.betweenKeys}
- updateBetweenKeys={Actions.updateBetweenKeys}
- byKeys={this.props.byKeys}
- updateByKeys={Actions.updateByKeys} />
- <AdditionalParams
- descending={this.props.descending}
- toggleDescending={Actions.toggleDescending}
- skip={this.props.skip}
- updateSkip={Actions.updateSkip}
- updateLimit={Actions.updateLimit}
- limit={this.props.limit} />
- <QueryButtons onCancel={this.closeTray} />
- </form>
- </TrayContents>
- );
-
- },
-
- render: function () {
- return (
- <div>
- <ToggleHeaderButton
- toggleCallback={this.toggleTrayVisibility}
- containerClasses="header-control-box control-toggle-queryoptions"
- title="Query Options"
- fonticon="fonticon-gears"
- text="Options" />
- {this.getTray()}
- </div>
- );
- }
+ componentWillUnmount: function () {
+ $('body').off('click.QueryTray');
+ },
- });
+ toggleIncludeDocs: function (e) {
+ Actions.toggleIncludeDocs();
+ },
- return {
- QueryOptionsController: QueryOptionsController,
- QueryButtons: QueryButtons,
- MainFieldsView: MainFieldsView,
- KeySearchFields: KeySearchFields,
- AdditionalParams: AdditionalParams,
- render: function (el) {
- ReactDOM.render(<QueryOptionsController />, $(el)[0]);
+ getTray: function () {
+ if (!this.props.contentVisible) {
+ return null;
}
- };
+
+ return (
+ <TrayContents
+ className="query-options"
+ id="query-options-tray">
+
+ <form onSubmit={this.runQuery} className="js-view-query-update custom-inputs">
+ <MainFieldsView
+ includeDocs={this.props.includeDocs}
+ toggleIncludeDocs={this.toggleIncludeDocs}
+ showReduce={this.props.showReduce}
+ reduce={this.props.reduce}
+ toggleReduce={Actions.toggleReduce}
+ groupLevel={this.props.groupLevel}
+ updateGroupLevel={Actions.updateGroupLevel} />
+ <KeySearchFields
+ key={1}
+ showByKeys={this.props.showByKeys}
+ showBetweenKeys={this.props.showBetweenKeys}
+ toggleByKeys={Actions.toggleByKeys}
+ toggleBetweenKeys={Actions.toggleBetweenKeys}
+ betweenKeys={this.props.betweenKeys}
+ updateBetweenKeys={Actions.updateBetweenKeys}
+ byKeys={this.props.byKeys}
+ updateByKeys={Actions.updateByKeys} />
+ <AdditionalParams
+ descending={this.props.descending}
+ toggleDescending={Actions.toggleDescending}
+ skip={this.props.skip}
+ updateSkip={Actions.updateSkip}
+ updateLimit={Actions.updateLimit}
+ limit={this.props.limit} />
+ <QueryButtons onCancel={this.closeTray} />
+ </form>
+ </TrayContents>
+ );
+
+ },
+
+ render: function () {
+ return (
+ <div>
+ <ToggleHeaderButton
+ toggleCallback={this.toggleTrayVisibility}
+ containerClasses="header-control-box control-toggle-queryoptions"
+ title="Query Options"
+ fonticon="fonticon-gears"
+ text="Options" />
+ {this.getTray()}
+ </div>
+ );
+ }
+
});
+
+export default {
+ QueryOptionsController: QueryOptionsController,
+ QueryButtons: QueryButtons,
+ MainFieldsView: MainFieldsView,
+ KeySearchFields: KeySearchFields,
+ AdditionalParams: AdditionalParams,
+ render: function (el) {
+ ReactDOM.render(<QueryOptionsController />, $(el)[0]);
+ }
+};