Add Table to ListPage

packages/strapi-plugin-content-manager/admin/src/components/TableRow/index.js

@@ -33,6 +33,7 @@ class TableRow extends React.Component {
       case 'string':
       case 'text':
       case 'email':
+      case 'enumeration':
         return (value && !isEmpty(value.toString())) || name === 'id' ? value.toString() : '-';
       case 'float':
       case 'integer':

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js

@@ -9,17 +9,20 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import { capitalize, get, toInteger } from 'lodash';
+import { capitalize, get, map, toInteger } from 'lodash';
 import cn from 'classnames';
 
 // App selectors
-import { makeSelectModels } from 'containers/App/selectors';
+import { makeSelectModels, makeSelectSchema } from 'containers/App/selectors';
 
 // You can find these components in either
 // ./node_modules/strapi-helper-plugin/lib/src
 // or strapi/packages/strapi-helper-plugin/lib/src
 import PluginHeader from 'components/PluginHeader';
 
+// Components from the plugin itself
+import Table from 'components/Table';
+
 // Utils located in `strapi/packages/strapi-helper-plugin/lib/src/utils`;
 import getQueryParameters from 'utils/getQueryParameters';
 import injectReducer from 'utils/injectReducer';
@@ -52,10 +55,50 @@ export class ListPage extends React.Component {
     this.getData(this.props);
   }
 
+  /**
+   * Helper to retrieve the current model data
+   * @return {Object} the current model
+   */
+  getCurrentModel = () => get(this.props.models, ['models', this.getCurrentModelName()]) || get(this.props.models, ['plugins', this.getSource(), 'models', this.getCurrentModelName()]);
+
+
+  /**
+   * Helper to retrieve the current model name
+   * @return {String} the current model's name
+   */
+  getCurrentModelName = () => this.props.match.params.slug;
+
+  /**
+   * Function to fetch data
+   * @param  {Object} props
+   */
   getData = (props) => {
     this.props.getData(props.match.params.slug);
   }
 
+  /**
+   * Helper to retrieve the model's source
+   * @return {String} the model's source
+   */
+  getSource = () => getQueryParameters(this.props.location.search, 'source') || 'content-manager';
+
+  /**
+   *  Function to generate the Table's headers
+   * @return {Array}
+   */
+  generateTableHeaders = () => {
+    const currentSchema = get(this.props.schema, [this.getCurrentModelName()]) || get(this.props.schema, ['plugins', this.getSource(), this.getCurrentModelName()]);
+    const tableHeaders = map(currentSchema.list, (value) => ({
+      name: value,
+      label: currentSchema.fields[value].label,
+      type: currentSchema.fields[value].type,
+    }));
+
+    tableHeaders.splice(0, 0, { name: this.getCurrentModel().primaryKey || 'id', label: 'Id', type: 'string' });
+
+    return tableHeaders;
+  }
+
   /**
    * [findPageSort description]
    * @param  {Object} props [description]
@@ -63,7 +106,7 @@ export class ListPage extends React.Component {
    */
   findPageSort = (props) => {
     const { match: { params: { slug } } } = props;
-    const source = getQueryParameters(props.location.search, 'source');
+    const source = this.getSource();
     const modelPrimaryKey = get(
       this.props.models,
       ['models', slug.toLowerCase(), 'primaryKey'],
@@ -86,14 +129,14 @@ export class ListPage extends React.Component {
       kind: 'primaryAddShape',
       onClick: () => this.props.history.push({
         pathname: `${this.props.location.pathname}/create`,
-        search: `?source=${this.props.listPage.source}`,
+        search: `?source=${this.props.listPage.params.source}`,
       }),
     },
   ];
 
   render() {
-    const { listPage } = this.props;
+    const { listPage, listPage: { params } } = this.props;
-    console.log(this.props);
+
     return (
       <div>
         <div className={cn('container-fluid', styles.containerFluid)}>
@@ -109,6 +152,22 @@ export class ListPage extends React.Component {
               id: listPage.currentModel || 'Content Manager',
             }}
           />
+          <div className={cn('row', styles.row)}>
+            <div className="col-lg-12">
+              <Table
+                records={listPage.records}
+                route={this.props.match}
+                routeParams={this.props.match.params}
+                headers={this.generateTableHeaders()}
+                onChangeSort={() => {}}
+                sort={listPage.params.sort}
+                history={this.props.history}
+                primaryKey={this.getCurrentModel().primaryKey || 'id'}
+                handleDelete={() => {}}
+                redirectUrl={`?redirectUrl=/plugins/content-manager/${this.getCurrentModelName().toLowerCase()}?page=${params.page}&limit=${params.limit}&sort=${params.sort}&source=${this.getSource()}`}
+              />
+            </div>
+          </div>
         </div>
       </div>
     );
@@ -126,6 +185,7 @@ ListPage.propTypes = {
   location: PropTypes.object.isRequired,
   match: PropTypes.object.isRequired,
   models: PropTypes.object.isRequired,
+  schema: PropTypes.object.isRequired,
   setParams: PropTypes.func.isRequired,
 };
 
@@ -143,6 +203,7 @@ function mapDispatchToProps(dispatch) {
 const mapStateToProps = createStructuredSelector({
   listPage: makeSelectListPage(),
   models: makeSelectModels(),
+  schema: makeSelectSchema(),
 });
 
 const withConnect = connect(mapStateToProps, mapDispatchToProps);

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/styles.scss

@@ -6,6 +6,6 @@
   }
 }
 
-// .row{
+.row{
-//   padding-bottom: 36px;
+  padding-bottom: 36px;
-// }
+}