Merge pull request silverstripe#277 from creative-commoners/pulls/4.0…

…/attach-graphql

NEW Query for reading blocks is now bound to ElementEditor component

client/src/boot/registerComponents.js

@@ -1,8 +1,14 @@
 import Injector from 'lib/Injector';
-import ElementEditor from 'components/ElementEditor/containers/ElementEditor';
+import Element from 'components/ElementEditor/Element';
+import ElementEditor from 'components/ElementEditor/ElementEditor';
+import ElementList from 'components/ElementEditor/ElementList';
+import Toolbar from 'components/ElementEditor/Toolbar';
 
 export default () => {
   Injector.component.registerMany({
-    ElementEditor
+    ElementEditor,
+    ElementToolbar: Toolbar,
+    ElementList,
+    Element,
   });
 };

client/src/boot/registerTransforms.js

@@ -1,7 +1,8 @@
 import Injector from 'lib/Injector';
-import readOneBlockQuery from '../state/history/readOneBlockQuery';
-import HistoricElementViewFactory from '../components/HistoricElementView/HistoricElementView';
-import revertToBlockVersionMutation from '../state/history/revertToBlockVersionMutation';
+import readOneBlockQuery from 'state/history/readOneBlockQuery';
+import HistoricElementViewFactory from 'components/HistoricElementView/HistoricElementView';
+import revertToBlockVersionMutation from 'state/history/revertToBlockVersionMutation';
+import readBlocksForPageQuery from 'state/editor/readBlocksForPageQuery';
 
 export default () => {
   Injector.transform(
@@ -41,4 +42,16 @@ export default () => {
       );
     }
   );
+
+  Injector.transform(
+    'cms-element-editor',
+    (updater) => {
+      // Add GraphQL query for reading elements on a page for the ElementEditor
+      updater.component(
+        'ElementList',
+        readBlocksForPageQuery,
+        'PageElements'
+      );
+    }
+  );
 };

client/src/components/ElementEditor/Element.js

@@ -1,14 +1,33 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PureComponent } from 'react';
+import { elementType } from 'types/elementType';
 
-class Element extends Component {
+/**
+ * The Element component used in the context of an ElementEditor shows the summary
+ * of an element's details when used in the CMS, including ID, Title and Summary.
+ */
+class Element extends PureComponent {
   render() {
+    const { element: { ID, Title, Summary } } = this.props;
+
+    if (!ID) {
+      return null;
+    }
+
     return (
-      <div />
+      <div className="element-editor__element">
+        <p>#{ID}: {Title}</p>
+        <p>{Summary}</p>
+      </div>
     );
   }
 }
 
-Element.defaultProps = {};
-Element.propTypes = {};
+Element.propTypes = {
+  element: elementType,
+};
+
+Element.defaultProps = {
+  element: null,
+};
 
 export default Element;

client/src/components/ElementEditor/ElementEditor.js

@@ -1,14 +1,34 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PureComponent, PropTypes } from 'react';
+import { inject } from 'lib/Injector';
 
-class ElementEditor extends Component {
+/**
+ * The ElementEditor is used in the CMS to manage a list or nested lists of
+ * elements for a page or other DataObject.
+ */
+class ElementEditor extends PureComponent {
   render() {
+    const { ToolbarComponent, ListComponent, pageId } = this.props;
+
     return (
-      <div />
+      <div className="element-editor">
+        <ToolbarComponent />
+        <ListComponent pageId={pageId} />
+      </div>
     );
   }
 }
 
+ElementEditor.propTypes = {
+  pageId: PropTypes.number.isRequired,
+};
+
 ElementEditor.defaultProps = {};
-ElementEditor.propTypes = {};
 
-export default ElementEditor;
+export default inject(
+  ['ElementToolbar', 'ElementList'],
+  (ToolbarComponent, ListComponent) => ({
+    ToolbarComponent,
+    ListComponent,
+  }),
+  () => 'ElementEditor'
+)(ElementEditor);

client/src/components/ElementEditor/ElementList.js

@@ -1,14 +1,50 @@
 import React, { Component, PropTypes } from 'react';
+import { elementType } from 'types/elementType';
+import { inject } from 'lib/Injector';
 
 class ElementList extends Component {
+  /**
+   * Renders a list of Element components, each with an elementType object
+   * of data mapped into it. The data is provided by a GraphQL HOC registered
+   * in registerTransforms.js.
+   */
+  renderBlocks() {
+    const { ElementComponent, blocks } = this.props;
+
+    if (!blocks) {
+      return null;
+    }
+
+    return blocks.map((element) => (
+      <ElementComponent
+        key={element.ID}
+        element={element}
+      />
+    ));
+  }
+
   render() {
     return (
-      <div />
+      <div className="elemental-editor__list">
+        {this.renderBlocks()}
+      </div>
     );
   }
 }
 
-ElementList.defaultProps = {};
-ElementList.propTypes = {};
+ElementList.propTypes = {
+  // @todo support either ElementList or Element children in an array (or both)
+  blocks: PropTypes.arrayOf(elementType),
+};
+
+ElementList.defaultProps = {
+  blocks: [],
+};
 
-export default ElementList;
+export default inject(
+  ['Element'],
+  (ElementComponent) => ({
+    ElementComponent,
+  }),
+  () => 'ElementEditor.ElementList'
+)(ElementList);

client/src/components/ElementEditor/Toolbar.js

@@ -1,6 +1,7 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PureComponent } from 'react';
 
-class Toolbar extends Component {
+// eslint-disable-next-line react/prefer-stateless-function
+class Toolbar extends PureComponent {
   render() {
     return (
       <div />

client/src/legacy/ElementEditor/entwine.js

@@ -12,9 +12,14 @@ jQuery.entwine('ss', ($) => {
     onmatch() {
       const context = {};
       const ElementEditorComponent = loadComponent('ElementEditor', context);
+      const schemaData = this.data('schema');
+
+      const props = {
+        pageId: schemaData['page-id'],
+      };
 
       ReactDOM.render(
-        <ElementEditorComponent />,
+        <ElementEditorComponent {...props} />,
         this[0]
       );
     },

client/src/state/editor/readBlocksForPageQuery.js

@@ -5,7 +5,7 @@ import gql from 'graphql-tag';
 // ElementalArea. The results of the query must be set to the "blocks" prop on
 // the component that this HOC is applied to for binding implementation.
 const query = gql`
-query readBlocksForPage($id:ID!) {
+query ReadBlocksForPage($id:ID!) {
   readOnePage(ID: $id, Versioning: {
     Mode: LATEST
   }){
@@ -40,12 +40,16 @@ const config = {
     {
       data: {
         error,
-        readBlocksForPage,
+        readOnePage,
         loading: networkLoading,
       },
     }
   ) {
-    const blocks = readBlocksForPage || null;
+    let blocks = null;
+    if (readOnePage) {
+      // Remove the GraphQL pagination keys
+      blocks = readOnePage.ElementalArea.Elements.edges.map((element) => element.node);
+    }
 
     const errors = error && error.graphQLErrors &&
       error.graphQLErrors.map((graphQLError) => graphQLError.message);

client/src/types/elementType.js

@@ -0,0 +1,10 @@
+import { PropTypes } from 'react';
+
+// Describes the structure of an element coming in via GraphQL
+const elementType = {
+  ID: PropTypes.number.isRequired,
+  Title: PropTypes.string,
+  Summary: PropTypes.string,
+};
+
+export { elementType };

src/ElementalEditor.php

@@ -61,4 +61,11 @@ public function getArea()
     {
         return $this->area;
     }
+
+    public function getSchemaDataDefaults()
+    {
+        $schemaData = parent::getSchemaDataDefaults();
+        $schemaData['page-id'] = $this->getArea()->getOwnerPage()->ID;
+        return $schemaData;
+    }
 }

templates/DNADesign/Elemental/ElementalEditor_holder.ss

@@ -0,0 +1,3 @@
+<div $AttributesHTML data-schema="$SchemaData.JSON">
+    <%-- Field is rendered by React components --%>
+</div>