INT-1160: Add insert new document

Author: durran

src/app/documents/document-list.js

@@ -25,7 +25,8 @@ var DocumentListView = View.extend({
     Action.filterChanged(app.queryOptions.query.serialize());
   },
   render: function() {
-    ReactDOM.render(React.createElement(this.documentList), this.el.parentNode);
+    var container = this.el.parentNode.parentNode.parentNode;
+    ReactDOM.render(React.createElement(this.documentList), container);
     return this;
   },
   reset: function() {

src/internal-packages/crud/lib/component/document-list.jsx

@@ -12,6 +12,8 @@ const LoadMoreDocumentsStore = require('../store/load-more-documents-store');
 const RemoveDocumentStore = require('../store/remove-document-store');
 const InsertDocumentStore = require('../store/insert-document-store');
 const InsertDocumentDialog = require('./insert-document-dialog');
+const SamplingMessage = require('./sampling-message');
+const Actions = require('../actions');
 
 /**
  * The full document list container class.
@@ -23,6 +25,11 @@ const LIST_CLASS = 'document-list';
  */
 const SCROLL_EVENT = 'scroll';
 
+/**
+ * Base empty doc for insert dialog.
+ */
+const EMPTY_DOC = { '': '' };
+
 /**
  * Component for the entire document list.
  */
@@ -32,8 +39,7 @@ class DocumentList extends React.Component {
    * Attach the scroll event to the parent container.
    */
   attachScrollEvent() {
-    this.documentListNode = ReactDOM.findDOMNode(this);
-    this.documentListNode.parentNode.addEventListener(
+    this._node.parentNode.addEventListener(
       SCROLL_EVENT,
       this.handleScroll.bind(this)
     );
@@ -131,13 +137,20 @@ class DocumentList extends React.Component {
    */
   handleScroll(evt) {
     var container = evt.srcElement;
-    if (container.scrollTop > (this.documentListNode.offsetHeight - this._scrollDelta())) {
+    if (container.scrollTop > (this._node.offsetHeight - this._scrollDelta())) {
       // If we are scrolling downwards, and have hit the distance to initiate a scroll
       // from the end of the list, we will fire the event to load more documents.
       this.loadMore();
     }
   }
 
+  /**
+   * Handle opening of the insert dialog.
+   */
+  handleOpenInsert() {
+    Actions.openInsertDocumentDialog(EMPTY_DOC);
+  }
+
   /**
    * Handle insert of a new document.
    *
@@ -168,10 +181,17 @@ class DocumentList extends React.Component {
    */
   render() {
     return (
-      <ol className={LIST_CLASS}>
-        {this.state.docs}
-        <InsertDocumentDialog />
-      </ol>
+      <div>
+        <SamplingMessage insertHandler={this.handleOpenInsert.bind(this)} />
+        <div className='column-container with-refinebar-and-message'>
+          <div className='column main'>
+            <ol className={LIST_CLASS} ref={(c) => this._node = c}>
+              {this.state.docs}
+              <InsertDocumentDialog />
+            </ol>
+          </div>
+        </div>
+      </div>
     );
   }
 
@@ -208,7 +228,7 @@ class DocumentList extends React.Component {
    */
   _scrollDelta() {
     if (!this.scrollDelta) {
-      this.scrollDelta = this.documentListNode.offsetHeight;
+      this.scrollDelta = this._node.offsetHeight;
     }
     return this.scrollDelta;
   }

src/internal-packages/crud/lib/component/document.jsx

@@ -217,8 +217,10 @@ class Document extends React.Component {
     this.setState({ doc: this.doc, editing: false });
   }
 
+  /**
+   * Handle cloning of the document.
+   */
   handleClone() {
-    console.log('Cloning document...');
     Actions.openInsertDocumentDialog(this.doc);
   }
 

src/internal-packages/crud/lib/component/hotspot.jsx

@@ -14,14 +14,19 @@ class Hotspot extends React.Component {
    */
   constructor(props) {
     super(props);
+    this.doc = props.doc;
     this.element = props.element;
   }
 
   /**
    * When clicking on a hotspot we append to the parent.
    */
   handleClick() {
-    this.element.next();
+    if (this.element && this.element.parentElement) {
+      this.element.next();
+    } else {
+      this.doc.add('', '');
+    }
   }
 
   /**

src/internal-packages/crud/lib/component/insert-document.jsx

@@ -73,8 +73,9 @@ class InsertDocument extends React.Component {
         <EditableElement key={element.uuid} element={element} />
       );
     });
-    var lastElement = elements[elements.length - 1].props.element;
-    elements.push(<Hotspot key='hotspot' element={lastElement} />);
+    var lastComponent = elements[elements.length - 1];
+    var lastElement = lastComponent ? lastComponent.props.element : null;
+    elements.push(<Hotspot key='hotspot' doc={this.doc} element={lastElement} />);
     return elements;
   }
 }

src/internal-packages/crud/lib/component/open-insert-dialog-button.jsx

@@ -0,0 +1,38 @@
+'use strict';
+
+const React = require('react');
+
+/**
+ * Component for the open insert dialog button.
+ */
+class OpenInsertDialogButton extends React.Component {
+
+  /**
+   * The component constructor.
+   *
+   * @param {Object} props - The properties.
+   */
+  constructor(props) {
+    super(props);
+  }
+
+  /**
+   * Render the button.
+   *
+   * @returns {Component} The button component.
+   */
+  render() {
+    return (
+      <button
+        className='btn btn-default btn-xs open-insert'
+        type='button'
+        onClick={this.props.handler}>
+        + Insert
+      </button>
+    );
+  }
+}
+
+OpenInsertDialogButton.displayName = 'OpenInsertDialogButton';
+
+module.exports = OpenInsertDialogButton;

src/internal-packages/crud/lib/component/sampling-message.jsx

@@ -0,0 +1,104 @@
+'use strict';
+
+const React = require('react');
+const app = require('ampersand-app');
+const ResetDocumentListStore = require('../store/reset-document-list-store');
+const RemoveDocumentStore = require('../store/remove-document-store');
+const InsertDocumentStore = require('../store/insert-document-store');
+const OpenInsertDialogButton = require('./open-insert-dialog-button');
+
+/**
+ * The feature flag.
+ */
+const FEATURE = 'singleDocumentCrud';
+
+/**
+ * Component for the sampling message.
+ */
+class SamplingMessage extends React.Component {
+
+  /**
+   * Fetch the state when the component mounts.
+   */
+  componentDidMount() {
+    this.unsubscribeReset = ResetDocumentListStore.listen(this.handleReset.bind(this));
+    this.unsubscribeRemove = RemoveDocumentStore.listen(this.handleRemove.bind(this));
+    this.unsibscribeInsert = InsertDocumentStore.listen(this.handleInsert.bind(this));
+  }
+
+  /**
+   * Unsibscribe from the document list store when unmounting.
+   */
+  componentWillUnmount() {
+    this.unsubscribeReset();
+    this.unsubscribeRemove();
+    this.unsubscribeInsert();
+  }
+
+  /**
+   * The component constructor.
+   *
+   * @param {Object} props - The properties.
+   */
+  constructor(props) {
+    super(props);
+    this.state = { count: 0 };
+  }
+
+  /**
+   * Handle the reset of the document list.
+   *
+   * @param {Array} documents - The documents.
+   * @param {Integer} count - The count.
+   */
+  handleReset(documents, count) {
+    this.setState({ count: count });
+  }
+
+  /**
+   * Handles removal of a document from the document list.
+   */
+  handleRemove() {
+    this.setState({ count: this.state.count - 1 });
+  }
+
+  /**
+   * Handle insert of a new document.
+   *
+   * @param {Boolean} success - If the insert was successful.
+   * @param {Object} object - The new document or error.
+   */
+  handleInsert(success, object) {
+    if (success) {
+      this.setState({ count: this.state.count + 1 });
+    }
+  }
+
+  /**
+   * Render the sampling message.
+   *
+   * @returns {React.Component} The document list.
+   */
+  render() {
+    return (
+      <div className='sampling-message'>
+        Query returned&nbsp;<b>{this.state.count}</b>&nbsp;documents.
+        <i data-hook='schema-sampling-results' className='help'></i>
+        {this.renderInsertButton()}
+      </div>
+    );
+  }
+
+  /**
+   * Render the insert button.
+   */
+  renderInsertButton() {
+    if (app.isFeatureEnabled(FEATURE)) {
+      return (<OpenInsertDialogButton handler={this.props.insertHandler} />);
+    }
+  }
+}
+
+SamplingMessage.displayName = 'SamplingMessage';
+
+module.exports = SamplingMessage;

src/internal-packages/crud/lib/store/open-insert-document-dialog-store.js

@@ -25,7 +25,9 @@ const OpenInsertDocumentDialogStore = Reflux.createStore({
     var hadronDoc = new HadronDocument(doc, true);
     // We need to remove the _id or we will get an duplicate key error on
     // insert, and we currently do not allow editing of the _id field.
-    hadronDoc.elements.shift();
+    if (hadronDoc.elements[0].currentKey === '_id') {
+      hadronDoc.elements.shift();
+    }
     this.trigger(hadronDoc);
   }
 });

src/internal-packages/crud/styles/crud.less

@@ -2,6 +2,11 @@ li.document-list-item.editing {
   box-shadow: 2px 5px 8px gainsboro;
 }
 
+.column.main {
+  .sampling-message {
+  }
+}
+
 .document-footer {
   font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
   height: 28px;