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 2017/08/22 14:05:36 UTC
[couchdb-fauxton] branch master updated: add Mango index examples
dropdown (#962)
This is an automated email from the ASF dual-hosted git repository.
garren pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/couchdb-fauxton.git
The following commit(s) were added to refs/heads/master by this push:
new ad8759b add Mango index examples dropdown (#962)
ad8759b is described below
commit ad8759b22d06dfd8881b7567b099095dfd76f8ef
Author: Will Holley <wi...@gmail.com>
AuthorDate: Tue Aug 22 15:05:34 2017 +0100
add Mango index examples dropdown (#962)
Adds a dropdown to the index editor which includes example
indexes (single field JSON, multi-field JSON). This can
be extended to include other index types, primarily text
indexes.
---
app/addons/components/components/codeeditor.js | 2 +-
app/addons/documents/assets/less/view-editor.less | 4 +-
.../documents/mango/__tests__/mango.store.test.js | 5 +++
app/addons/documents/mango/mango.actions.js | 4 +-
app/addons/documents/mango/mango.actiontypes.js | 2 +-
app/addons/documents/mango/mango.components.js | 27 +++++++++++-
app/addons/documents/mango/mango.constants.js | 21 ++++++++++
app/addons/documents/mango/mango.stores.js | 49 ++++++++++++----------
.../documents/mango/tests/mango.componentsSpec.js | 28 -------------
9 files changed, 85 insertions(+), 57 deletions(-)
diff --git a/app/addons/components/components/codeeditor.js b/app/addons/components/components/codeeditor.js
index cc605cf..010ab42 100644
--- a/app/addons/components/components/codeeditor.js
+++ b/app/addons/components/components/codeeditor.js
@@ -41,7 +41,7 @@ export const CodeEditor = React.createClass({
// these two options create auto-resizeable code editors, with a maximum number of lines
setHeightToLineCount: false,
maxLines: 10,
- minLines: 10,
+ minLines: 11, // show double digits in sidebar
// optional editor key commands (e.g. specific save action)
editorCommands: [],
diff --git a/app/addons/documents/assets/less/view-editor.less b/app/addons/documents/assets/less/view-editor.less
index 52a712c..cec910e 100644
--- a/app/addons/documents/assets/less/view-editor.less
+++ b/app/addons/documents/assets/less/view-editor.less
@@ -64,7 +64,7 @@
}
}
-.mango-history {
+.mango-select {
width: inherit;
overflow: visible;
@@ -72,7 +72,7 @@
z-index: 100;
}
- .mango-history-entry {
+ .mango-select-entry {
background-color: @queryHistoryBGColor;
color: @queryHistoryColor;
diff --git a/app/addons/documents/mango/__tests__/mango.store.test.js b/app/addons/documents/mango/__tests__/mango.store.test.js
index e3d8c00..3b9e69b 100644
--- a/app/addons/documents/mango/__tests__/mango.store.test.js
+++ b/app/addons/documents/mango/__tests__/mango.store.test.js
@@ -119,5 +119,10 @@ describe('Mango Store', () => {
const code = store.getQueryFindCode();
assert.equal(history[0].value, code);
});
+
+ it('initializes default index code with template', () => {
+ const templates = store.getQueryIndexTemplates();
+ assert.equal(2, templates.length);
+ });
});
});
diff --git a/app/addons/documents/mango/mango.actions.js b/app/addons/documents/mango/mango.actions.js
index f1540e4..e2a8186 100644
--- a/app/addons/documents/mango/mango.actions.js
+++ b/app/addons/documents/mango/mango.actions.js
@@ -31,9 +31,9 @@ export default {
});
},
- newQueryCreateIndexCode: function (options) {
+ newQueryCreateIndexTemplate: function (options) {
FauxtonAPI.dispatch({
- type: ActionTypes.MANGO_NEW_QUERY_CREATE_INDEX_CODE,
+ type: ActionTypes.MANGO_NEW_QUERY_CREATE_INDEX_TEMPLATE,
options: options
});
},
diff --git a/app/addons/documents/mango/mango.actiontypes.js b/app/addons/documents/mango/mango.actiontypes.js
index 86db14a..40c186b 100644
--- a/app/addons/documents/mango/mango.actiontypes.js
+++ b/app/addons/documents/mango/mango.actiontypes.js
@@ -13,7 +13,7 @@
export default {
MANGO_SET_DB: 'MANGO_SET_DB',
MANGO_NEW_QUERY_FIND_CODE: 'MANGO_NEW_QUERY_FIND_CODE',
- MANGO_NEW_QUERY_CREATE_INDEX_CODE: 'MANGO_NEW_QUERY_CREATE_INDEX_CODE',
+ MANGO_NEW_QUERY_CREATE_INDEX_TEMPLATE: 'MANGO_NEW_QUERY_CREATE_INDEX_TEMPLATE',
MANGO_NEW_AVAILABLE_INDEXES: 'MANGO_NEW_AVAILABLE_INDEXES',
MANGO_EXPLAIN_RESULTS: 'MANGO_EXPLAIN_RESULTS'
};
diff --git a/app/addons/documents/mango/mango.components.js b/app/addons/documents/mango/mango.components.js
index 290afb5..c78cf74 100644
--- a/app/addons/documents/mango/mango.components.js
+++ b/app/addons/documents/mango/mango.components.js
@@ -137,7 +137,7 @@ var MangoEditor = React.createClass({
<form className="form-horizontal" onSubmit={this.props.onSubmit}>
<div className="padded-box">
<ReactSelect
- className="mango-history"
+ className="mango-select"
options={this.props.history}
ref="history"
placeholder="Query history"
@@ -168,7 +168,7 @@ var MangoEditor = React.createClass({
},
setEditorValue: function (value) {
- return this.refs.field.getEditor().setValue(value);
+ return this.getEditor().setValue(value);
},
getEditorValue: function () {
@@ -189,6 +189,18 @@ var MangoIndexEditor = React.createClass({
return (
<div className="mango-editor-wrapper">
<form className="form-horizontal" onSubmit={this.props.onSubmit}>
+ <div className="padded-box">
+ <ReactSelect
+ className="mango-select"
+ options={this.props.templates}
+ ref="templates"
+ placeholder="Examples"
+ searchable={false}
+ clearable={false}
+ autosize={false}
+ onChange={this.props.onTemplateSelected}
+ />
+ </div>
<PaddedBorderedBox>
<CodeEditorPanel
id="query-field"
@@ -208,6 +220,10 @@ var MangoIndexEditor = React.createClass({
);
},
+ setEditorValue: function (value) {
+ return this.getEditor().setValue(value);
+ },
+
getEditorValue: function () {
return this.refs.field.getValue();
},
@@ -230,6 +246,7 @@ var MangoIndexEditorController = React.createClass({
return {
queryIndexCode: mangoStore.getQueryIndexCode(),
database: mangoStore.getDatabase(),
+ templates: mangoStore.getQueryIndexTemplates()
};
},
@@ -249,6 +266,10 @@ var MangoIndexEditorController = React.createClass({
return this.refs.mangoIndexEditor;
},
+ templateSelected: function(selectedItem) {
+ this.getMangoEditor().setEditorValue(selectedItem.value);
+ },
+
render: function () {
return (
<MangoIndexEditor
@@ -258,6 +279,8 @@ var MangoIndexEditorController = React.createClass({
onSubmit={this.saveIndex}
title="Index"
docs={getDocUrl('MANGO_INDEX')}
+ templates={this.state.templates}
+ onTemplateSelected={this.templateSelected}
exampleCode={this.state.queryIndexCode} />
);
},
diff --git a/app/addons/documents/mango/mango.constants.js b/app/addons/documents/mango/mango.constants.js
new file mode 100644
index 0000000..aee1c19
--- /dev/null
+++ b/app/addons/documents/mango/mango.constants.js
@@ -0,0 +1,21 @@
+export default {
+ INDEX_TEMPLATES: [{
+ label: 'Single field (json)',
+ code: {
+ "index": {
+ "fields": ["foo"]
+ },
+ "name": "foo-json-index",
+ "type" : "json"
+ }
+ }, {
+ label: 'Multiple fields (json)',
+ code: {
+ "index": {
+ "fields": ["foo", "bar"]
+ },
+ "name": "foo-bar-json-index",
+ "type" : "json"
+ }
+ }]
+};
diff --git a/app/addons/documents/mango/mango.stores.js b/app/addons/documents/mango/mango.stores.js
index 399a6de..c1885ad 100644
--- a/app/addons/documents/mango/mango.stores.js
+++ b/app/addons/documents/mango/mango.stores.js
@@ -14,13 +14,7 @@ import app from "../../../app";
import FauxtonAPI from "../../../core/api";
import ActionTypes from "./mango.actiontypes";
import IndexActionTypes from "../index-results/actiontypes";
-
-var defaultQueryIndexCode = {
- "index": {
- "fields": ["_id"]
- },
- "type" : "json"
-};
+import constants from "./mango.constants";
var defaultQueryFindCode = {
"selector": {
@@ -36,15 +30,11 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
initialize: function () {
this.setHistoryKey('default');
- this._queryIndexCode = defaultQueryIndexCode;
+ this.queryIndexTemplates = [];
},
getQueryIndexCode: function () {
- return this.formatCode(this._queryIndexCode);
- },
-
- setQueryIndexCode: function (options) {
- this._queryIndexCode = options.code;
+ return this.getQueryIndexTemplates()[0].value;
},
getQueryFindCode: function () {
@@ -80,7 +70,7 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
this._historyKey = key + '_queryhistory';
},
- createHistoryEntry: function(queryObject) {
+ createSelectItem: function(queryObject) {
// ensure we're working with a deserialized query object
const object = typeof queryObject === "string" ? JSON.parse(queryObject) : queryObject;
@@ -90,21 +80,21 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
return {
label: singleLineValue,
value: multiLineValue,
- className: 'mango-history-entry'
+ className: 'mango-select-entry'
};
},
addQueryHistory: function (value, label) {
var history = this.getHistory();
- const historyEntry = this.createHistoryEntry(value);
+ const historyEntry = this.createSelectItem(value);
historyEntry.label = label || historyEntry.label;
// remove existing entry if it exists
var indexOfExisting = history.findIndex(i => i.value === historyEntry.value);
if (indexOfExisting > -1) {
history.splice(indexOfExisting, 1);
- }
+ }
// insert item at head of array
history.splice(0, 0, historyEntry);
@@ -118,13 +108,31 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
},
getDefaultHistory: function () {
- return [this.createHistoryEntry(defaultQueryFindCode)];
+ return [this.createSelectItem(defaultQueryFindCode)];
},
getHistory: function () {
return app.utils.localStorageGet(this.getHistoryKey()) || this.getDefaultHistory();
},
+ addQueryIndexTemplate: function (value, label) {
+ const templateItem = this.createSelectItem(value);
+ templateItem.label = label || templateItem.label;
+
+ var existing = this.queryIndexTemplates.find(i => i.value === templateItem.value);
+ if (!existing) {
+ this.queryIndexTemplates.push(templateItem);
+ }
+ },
+
+ getQueryIndexTemplates: function () {
+ if (!this.queryIndexTemplates.length) {
+ constants.INDEX_TEMPLATES.forEach(i => this.addQueryIndexTemplate(i.code, i.label));
+ }
+
+ return this.queryIndexTemplates;
+ },
+
dispatch: function (action) {
switch (action.type) {
@@ -132,8 +140,8 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
this.setDatabase(action.options);
break;
- case ActionTypes.MANGO_NEW_QUERY_CREATE_INDEX_CODE:
- this.setQueryIndexCode(action.options);
+ case ActionTypes.MANGO_NEW_QUERY_CREATE_INDEX_TEMPLATE:
+ this.addQueryIndexTemplate(action.options.code, action.options.label);
break;
case ActionTypes.MANGO_NEW_QUERY_FIND_CODE:
@@ -151,7 +159,6 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
this.triggerChange();
}
-
});
Stores.mangoStore = new Stores.MangoStore();
diff --git a/app/addons/documents/mango/tests/mango.componentsSpec.js b/app/addons/documents/mango/tests/mango.componentsSpec.js
index 4219f6f..599c794 100644
--- a/app/addons/documents/mango/tests/mango.componentsSpec.js
+++ b/app/addons/documents/mango/tests/mango.componentsSpec.js
@@ -19,37 +19,9 @@ 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";
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);
- });
-
- 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');
- });
-});
-
describe('Mango QueryEditor', function () {
var database = new Databases.Model({id: 'testdb'}),
container,
--
To stop receiving notification emails like this one, please contact
['"commits@couchdb.apache.org" <co...@couchdb.apache.org>'].