@mongodb-js/compass-crud
TypeScript icon, indicating that this package has built-in type declarations

13.24.1 • Public • Published

Compass CRUD Plugin

Provide functionality shown in the "Documents" tab in the Collection view in Compass. compass-crud

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 either JSON, List, or Table.
  • '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 and insertOne 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 either JSON, List, or Table.
  • '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 and insertOne 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 to link and unlink 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

Readme

Keywords

none

Package Sidebar

Install

npm i @mongodb-js/compass-crud

Weekly Downloads

36

Version

13.24.1

License

SSPL

Unpacked Size

3.27 MB

Total Files

101

Last publish

Collaborators

  • orechova
  • himanshusinghs
  • c-buckingham
  • mongo-j
  • mabaasit
  • alexander_schroll
  • chuck.kalmanek
  • mongodb-js-user
  • rueckstiess
  • durran
  • lerouxb
  • fredtruman
  • mbroadst
  • hswolff
  • satyasinha
  • matt_d_rat
  • rhysm
  • tomhollander
  • alena.khineika
  • jeff-allen-mongo
  • mmarcon
  • jonathan.balsano
  • mongodb-build
  • jack.weir
  • stennie
  • mcasimir
  • kristina.stefano
  • jarjee
  • shaketbaby
  • devtoolsbot
  • addaleax
  • gribnoysup
  • mutukrish