Add and use ResourceEntityView which displays an entity
authorFrank Bessou <frank.bessou@logilab.fr>
Wed, 10 May 2017 13:20:22 +0200
changeset 191 a532f96e0050
parent 190 bc61eaa9d97a
child 192 74c9a8eed1ef
Add and use ResourceEntityView which displays an entity Remove EntityView as it is replaced by ResourceEntityView. EntityAttributes could be renamed to EntityView as it dumps the content of an entity (equivalent of CollectionView).
src/components/Entity.js
src/components/Resource.js
src/index.js
--- a/src/components/Entity.js	Wed May 10 13:31:56 2017 +0200
+++ b/src/components/Entity.js	Wed May 10 13:20:22 2017 +0200
@@ -9,7 +9,7 @@
 import {mapToSchema, PropTypeJsonaryWrapper} from '../jsonaryutils';
 import {PropTypesEntityModel} from '../model';
 import {buildFormData, appendPath} from '../utils';
-import {ActionsDropDown, CollectionView} from './BaseViews';
+import {CollectionView} from './BaseViews';
 import {AttributeValue} from './Attribute';
 
 export function EntityAttributes(props) {
@@ -241,7 +241,6 @@
                 />
             );
         }
-        return <EntityView entity={this.state.entity}/>;
     }
 
 }
@@ -259,54 +258,6 @@
 Entity.contextTypes = {
     router: PropTypes.object.isRequired,
 };
-export class EntityView extends React.Component {
-
-    renderTitle() {
-        return this.props.entity.data.schemas().title();
-    }
-
-    renderActions() {
-        return <ActionsDropDown target={this.props.entity} ignore={["view"]} />;
-    }
-
-    renderAttributes() {
-        return <EntityAttributes data={this.props.entity.data} />;
-    }
-
-    renderFooter() {
-        return <EntityMeta data={this.props.entity.data} />;
-    }
-
-    renderRelated() {
-        const links = this.props.entity.data.links('related');
-        if (links.length > 0) {
-            return Array.prototype.map.call(links, (link) => {
-                return <RelatedResources key={link.title} link={link} />;
-            });
-        }
-        return null;
-    }
-
-    render() {
-        const {entity} = this.props;
-        if (entity === null) {
-            return <span>loading...</span>;
-        }
-        return (
-            <div>
-                { this.renderActions() }
-                <div className="clearfix" />
-                <h3>{ this.renderTitle() }</h3>
-                { this.renderAttributes() }
-                { this.renderFooter() }
-                { this.renderRelated() }
-            </div>
-        );
-    }
-}
-EntityView.propTypes = {
-    entity: PropTypesEntityModel.isRequired,
-};
 
 const uiSchema = {
     description: {
--- a/src/components/Resource.js	Wed May 10 13:31:56 2017 +0200
+++ b/src/components/Resource.js	Wed May 10 13:20:22 2017 +0200
@@ -3,7 +3,7 @@
 import {PropTypes} from 'prop-types';
 
 import {appendPath} from '../utils';
-import {EntityForm} from './Entity';
+import {EntityAttributes, EntityForm, EntityMeta, RelatedResources} from './Entity';
 import {PropTypesResourceModel} from '../model';
 import {PropTypeJsonaryWrapper} from '../jsonaryutils';
 import {ActionsDropDown, CollectionView} from './BaseViews';
@@ -110,6 +110,28 @@
     collection: PropTypeJsonaryWrapper.isRequired,
 };
 
+export function ResourceEntityView({entity}) {
+    function renderRelated() {
+        const links = entity.links('related');
+        if (links.length > 0) {
+            return Array.prototype.map.call(links, (link) => {
+                return <RelatedResources key={link.title} link={link} />;
+            });
+        }
+        return null;
+    }
+    return (
+        <div>
+            <EntityAttributes data={entity} />
+            <EntityMeta data={entity} />
+            { renderRelated() }
+        </div>
+    );
+}
+ResourceEntityView.propTypes = {
+    entity: PropTypeJsonaryWrapper.isRequired,
+};
+
 export function ResourceView(props) {
     const data = props.resource.data;
     function renderHeader() {
@@ -126,7 +148,7 @@
         if (isCollection) {
             return <ResourceCollectionView collection={data} />;
         } else {
-            throw Error('Not implemented');
+            return <ResourceEntityView entity={data} />;
         }
     }
     return (
--- a/src/index.js	Wed May 10 13:31:56 2017 +0200
+++ b/src/index.js	Wed May 10 13:20:22 2017 +0200
@@ -16,17 +16,15 @@
         <App>
             <Switch>
                 <Route exact path='/' component={Root} />
-                <Route exact path=":apiUrl(.*)@@:action(new)" component={Resource} />
-                {/* Entity (view, edit, delete) route */}
-                <Route exact path="/:etype/:eid@@:view" component={Entity} />
-                <Route exact path="/:etype/:eid/@@:view" component={Entity} />
-                <Route exact path="/:etype/:eid" component={Entity} />
+                <Route path="/:etype/:eid/relationships/:rtype" component={AddRelated} />
 
-                {/* ResourceCollectionView route */}
-                <Route exact path=":apiUrl(.*/)@@:action(view)" component={Resource} />
-                <Route exact path=":apiUrl(.*/)" component={Resource} />
+                {/* Entity edit and delete routes */}
+                <Route exact path="/:etype/:eid@@:view(edit|delete)" component={Entity} />
+                <Route exact path="/:etype/:eid/@@:view(edit|delete)" component={Entity} />
 
-                <Route path="/:etype/:eid/relationships/:rtype" component={AddRelated} />
+                <Route exact path=":apiUrl(.*)@@:action(view|new)" component={Resource} />
+                <Route exact path=":apiUrl(.*)" component={Resource} />
+
                 <Route path="*" component={NotFound} />
             </Switch>
         </App>