Make datatable accept static JSON as data property; add Routes admin dashboard

packages/vulcan-core/lib/modules/components/Datatable.jsx

@@ -48,27 +48,35 @@ class Datatable extends PureComponent {
 
   render() {
 
-    const options = {
-      collection: this.props.collection,
-      ...this.props.options
+    if (this.props.data) { // static JSON datatable
+
+      return <Components.DatatableContents {...this.props} results={this.props.data}/>;
+            
+    } else { // dynamic datatable with data loading
+      
+      const options = {
+        collection: this.props.collection,
+        ...this.props.options
+      }
+
+      const DatatableWithList = withList(options)(Components.DatatableContents);
+
+      const canInsert = this.props.collection.options && this.props.collection.options.mutations && this.props.collection.options.mutations.new && this.props.collection.options.mutations.new.check(this.props.currentUser);
+
+      return (
+        <div className={`datatable datatable-${this.props.collection._name}`}>
+          <Components.DatatableAbove {...this.props} canInsert={canInsert} value={this.state.value} updateQuery={this.updateQuery} />
+          <DatatableWithList {...this.props} terms={{query: this.state.query}} currentUser={this.props.currentUser}/>
+        </div>
+      )
     }
-
-    const DatatableWithList = withList(options)(Components.DatatableContents);
-
-    const canInsert = this.props.collection.options && this.props.collection.options.mutations && this.props.collection.options.mutations.new && this.props.collection.options.mutations.new.check(this.props.currentUser);
-
-    return (
-      <div className={`datatable datatable-${this.props.collection._name}`}>
-        <Components.DatatableAbove {...this.props} canInsert={canInsert} value={this.state.value} updateQuery={this.updateQuery} />
-        <DatatableWithList {...this.props} terms={{query: this.state.query}} currentUser={this.props.currentUser}/>
-      </div>
-    )
   }
 }
 
 Datatable.propTypes = {
   collection: PropTypes.object,
   columns: PropTypes.array,
+  data: PropTypes.array,
   options: PropTypes.object,
   showEdit: PropTypes.bool,
   showNew: PropTypes.bool,
@@ -101,20 +109,30 @@ DatatableHeader Component
 
 */
 const DatatableHeader = ({ collection, column }, { intl }) => {
-  const schema = collection.simpleSchema()._schema;
+
   const columnName = typeof column === 'string' ? column : column.name;
+  
+  if (collection) {
+    const schema = collection.simpleSchema()._schema;
 
-  /*
+    /*
 
-  use either:
+    use either:
 
-  1. the column name translation
-  2. the column name label in the schema (if the column name matches a schema field)
-  3. the raw column name.
+    1. the column name translation
+    2. the column name label in the schema (if the column name matches a schema field)
+    3. the raw column name.
 
-  */
-  const formattedLabel = intl.formatMessage({ id: `${collection._name}.${columnName}`, defaultMessage: schema[columnName] ? schema[columnName].label : columnName });
-  return <th>{formattedLabel}</th>;
+    */
+    const formattedLabel = intl.formatMessage({ id: `${collection._name}.${columnName}`, defaultMessage: schema[columnName] ? schema[columnName].label : columnName });
+    return <th>{formattedLabel}</th>;
+
+  } else {
+
+    const formattedLabel = intl.formatMessage({ id: columnName, defaultMessage: columnName });
+    return <th>{formattedLabel}</th>;
+
+  }
 }
 
 DatatableHeader.contextTypes = {
@@ -174,7 +192,7 @@ DatatableRow Component
 */
 const DatatableRow = ({ collection, columns, document, showEdit, currentUser }, { intl }) => {
 
-  const canEdit = collection.options && collection.options.mutations && collection.options.mutations.edit && collection.options.mutations.edit.check(currentUser, document);
+  const canEdit = collection && collection.options && collection.options.mutations && collection.options.mutations.edit && collection.options.mutations.edit.check(currentUser, document);
 
   return (
   <tr className="datatable-item">

packages/vulcan-debug/lib/components/AdminLayout.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Components, registerComponent } from 'meteor/vulcan:lib';
+
+const adminStyles = {
+  padding: '20px'
+}
+
+const AdminLayout = props => <div className="admin-layout" style={adminStyles}>{props.children}</div>
+
+registerComponent('AdminLayout', AdminLayout);

packages/vulcan-debug/lib/components/Routes.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { registerComponent, Components, Routes } from 'meteor/vulcan:lib';
+import { Link } from 'react-router';
+
+console.log(Object.values(Routes))
+
+const RoutePath = ({ document }) => 
+  <Link to={document.path}>{document.path}</Link>
+
+const RoutesDashboard = props => 
+  <div className="routes">
+    <Components.Datatable
+      showSearch={false}
+      showNew={false}
+      showEdit={false}
+      data={Object.values(Routes)}
+      columns={[
+        'name', 
+        {
+          name: 'path',
+          component: RoutePath
+        }, 
+        'componentName', 
+      ]}
+    />
+  </div>
+
+registerComponent('Routes', RoutesDashboard);

packages/vulcan-debug/lib/modules/components.js

@@ -1,5 +1,7 @@
-// import './components/Cheatsheet.jsx';
+import '../components/AdminLayout.jsx';
+
 import '../components/Emails.jsx';
 import '../components/Groups.jsx';
 import '../components/Settings.jsx';
 import '../components/Callbacks.jsx';
+import '../components/Routes.jsx';

packages/vulcan-debug/lib/modules/routes.js

@@ -2,9 +2,10 @@ import { addRoute, getDynamicComponent } from 'meteor/vulcan:lib';
 
 addRoute([
   // {name: 'cheatsheet', path: '/cheatsheet', component: import('./components/Cheatsheet.jsx')},
-  {name: 'groups', path: '/groups', component: () => getDynamicComponent(import('../components/Groups.jsx'))},
-  {name: 'settings', path: '/settings', componentName: 'Settings'},
-  {name: 'callbacks', path: '/callbacks', componentName: 'Callbacks'},
+  {name: 'groups', path: '/groups', component: () => getDynamicComponent(import('../components/Groups.jsx')), layoutName: 'AdminLayout'},
+  {name: 'settings', path: '/settings', componentName: 'Settings', layoutName: 'AdminLayout'},
+  {name: 'callbacks', path: '/callbacks', componentName: 'Callbacks', layoutName: 'AdminLayout'},
   // {name: 'emails', path: '/emails', component: () => getDynamicComponent(import('./components/Emails.jsx'))},
-  {name: 'emails', path: '/emails', componentName: 'Emails'},
+  {name: 'emails', path: '/emails', componentName: 'Emails', layoutName: 'AdminLayout'},
+  {name: 'routes', path: '/routes', componentName: 'Routes', layoutName: 'AdminLayout'},
 ]);