@mongodb-js/compass-crud v13.24.1
Compass CRUD Plugin
Provide functionality shown in the "Documents" tab in the Collection view in Compass.
Usage
Definitions
Key | Description |
---|---|
CRUD.Document | Renders a single document. |
CRUD.DocumentList | Renders a list of documents. |
Actions
Key | Description |
---|---|
CRUD.Actions | All the CRUD related actions. |
Stores
Key | Description |
---|---|
CRUD.InsertDocumentStore | Triggers when a document is inserted. |
CRUD.ResetDocumentListStore | Triggers when the query filter is reset. |
CRUD.LoadMoreDocumentsStore | Triggers when more documents are fetched via scrolling. |
Components from this plugin can be interracted with using
hadron-app and hadron-app-registry. Here are
a few examples of working with compass-crud
's Action
and Roles
.
Render an editable document in a React component.
const app = require('hadron-app');
const React = require('react');
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.Document = app.appRegistry.getRole('CRUD.Document')[0].component;
}
render() {
return <this.Document doc={this.props.document} editable />;
}
}
Render a non-editable pre-expanded document in a React component.
const app = require('hadron-app');
const React = require('react');
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.Document = app.appRegistry.getRole('CRUD.Document')[0].component;
}
render() {
return <this.Document doc={this.props.document} expandAll />;
}
}
Listen to the various CRUD actions.
const app = require('hadron-app');
const CrudActions = app.appRegistry.getAction('CRUD.Actions');
CrudActions.documentRemoved.listen((id) => {
console.log(`Document with _id ${id} removed.`);
});
CrudActions.openInsertDocumentDialog((doc, clone) => {
if (clone) {
console.log('Opening insert dialog with cloned document');
}
});
CrudActions.insertDocument((doc) => {
console.log('Inserting document into db');
});
App Registry Events Emmitted
Various actions within this plugin will emit events for other parts of the
application can be listened to via hadron-app-registry.
Local
events are scoped to a Tab
.
Global
events are scoped to the whole Compass application.
Global
- 'document-view-changed', view: indicates document view changed.
view
can be eitherJSON
,List
, orTable
. - 'documents-paginated': indicates when pagination is complete. Called when calling the next or previous pages in pagination.
- 'documents-refreshed': indicates documents were refreshed.
- 'document-inserted': indicates documents were inserted. Called when
insertMany
andinsertOne
complete. - 'document-updated': indicates a document was updated.
- 'document-deleted': indicates a document was deleted.
Local
- 'document-view-changed', view: indicates document view changed.
view
can be eitherJSON
,List
, orTable
. - 'documents-paginated': indicates when pagination is complete. Called when calling the next or previous pages in pagination.
- 'documents-refreshed': indicates documents were refreshed.
- 'document-inserted': indicates documents were inserted. Called when
insertMany
andinsertOne
complete. - 'document-updated': indicates a document was updated.
- 'document-deleted': indicates a document was deleted.
App Registry Events Received
Local
- 'import-finished': received when import in the import-export plugin is finished. Refreshes documents.
- 'query-changed': received when query was changed in the query bar. Handles updates to crud plugin's query state, and refreshes documents.
- 'refresh-data': received when other plugins need documents refreshed. Refreshes documents.
Global
- 'instance-refreshed': received when compass instance was refreshed
- 'refresh-data': received when other plugins need documents refreshed.
Refreshes documents.
(reloaded). Refreshes instance state:
dataLake
variables.
Metrics Events
- document-view-changed
- documents-paginated
- documents-refreshed
- document-inserted
- document-updated
- document-deleted
Development
Code Tour
Compass Crud
uses React, and Reflux for state management. There are two stores
we manage: crud-store
(./src/stores/crud-store.js
) and
grid-store
(./src/stores/grid-store.js
). Overall structure of this repo:
./dist
: webpack-compiled version of this plugin../scripts
: scripts tolink
andunlink
React version to compass when developing this locally in Compass../src/actions
: reflux actions that are available throughout this plugin../src/assets
: css assets, such as variables and styles from compass../src/components
: react components that make up this plugin. Almost all components have a.jsx
,.spec.js
,.less
and.js
files../src/stores
: home to reflux stores../src/utils
: util.js
files to be used throughout the plugin.
Install
npm install -S @mongodb-js/compass-crud
See Also
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
6 months ago
10 months ago
6 months ago
7 months ago
7 months ago
6 months ago
8 months ago
7 months ago
9 months ago
9 months ago
5 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
12 months ago
10 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
10 months ago
11 months ago
10 months ago
10 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago