display working as list

src/display.js

@@ -1,44 +1,53 @@
 import React, {PropTypes} from 'react'
-import {Button} from 'react-toolbox'
-import {Card, CardTitle, CardText, CardActions} from 'react-toolbox/lib/card'
+import {List, ListItem, ListSubHeader, Button} from 'react-toolbox'
 
 export default function (compDef) {
-  const {componentName} = compDef
+  const {componentName,
+	 fields
+	} = compDef
 
-  const ComponentDisplay = (props) => {
-    const {goBack, pushRoute, routing} = props
-    const url = routing.locationBeforeTransitions.pathname
+  const componentProperName = componentName[0].toUpperCase() + componentName.substring(1)
+  const fieldNames = Object.keys(fields)
+  const ComponentEdit = (props) =>{
+    let next = Object.assign({}, props[componentName])
+    const url = props.routing.locationBeforeTransitions.pathname
     const editURL = `${url.slice(0, url.lastIndexOf('/')+1)}edit`
-    const component = props[`${componentName}`]
-    let content = []
-    let cardActions = <div>
-		       <Button icon='add'
-		       floating accent mini onClick={()=>{
-			 pushRoute(editURL)}}/>
-		       <Button icon='undo'
-		       floating accent mini onClick={()=>{
-			 goBack()}}/>
-		       </div>
-    if (component.index !== undefined) {
-      for (let field of component) {
-	if (component[field] && compDef[field]) {
-	  content.push(<p>{compDef[field].label} : {component[field]}</p>)
-	}
-      }
+    const {goBack} = props
+    const listCaption = `Datos de ${componentProperName}`
+    const listFields = []
+
+    for (let fieldName of fieldNames) {
+      const componentField = compDef.fields[fieldName]
+      const field = <div key={fieldName}>
+	    <ListItem caption={next[fieldName] ||''}
+      legend={componentField.label} righticon={componentField.icon}/>
+	</div>
+	listFields.push(field)
     }
 
-    return <Card>
-      <CardTitle title={compDef.title}/>
-      <CardText>{content}</CardText>
-      <CardActions>{cardActions}</CardActions>
-      </Card>
+    return (
+	<div>
+	<List>
+	<ListSubHeader caption={listCaption}/>
+	{listFields}
+      </List>
+	<Button icon='edit' floating disabled={!next.isValid} accent mini onClick={(e)=>{
+	  props.pushRoute(editURL)
+	}}/>
+	<Button icon='undo' floating accent mini onClick={()=>{goBack()}}/>
+	</div>
+    )
   }
 
-  ComponentDisplay.propTypes = {}
-  ComponentDisplay.propTypes[`${componentName}`] = PropTypes.object
-  ComponentDisplay.propTypes.goBack = PropTypes.func
-  ComponentDisplay.propTypes.pushRoute = PropTypes.func
-  ComponentDisplay.propTypes.routing = PropTypes.object
-
-  return ComponentDisplay
+  ComponentEdit.propTypes = {
+    pushRoute: PropTypes.func,
+    goBack: PropTypes.func,
+    routing: PropTypes.object
+  }
+  ComponentEdit.propTypes[`${componentName}`] = PropTypes.object
+  ComponentEdit.propTypes[`save${componentProperName}`] = PropTypes.func
+  ComponentEdit.propTypes[`store${componentProperName}`] = PropTypes.func
+  return ComponentEdit
 }
+
+

src/edit.js

@@ -17,6 +17,10 @@ export default function (compDef) {
     const listFields = []
 
     for (let fieldName of fieldNames) {
+	let label = fields[fieldName].label
+	if (!label || label === '') {
+	  label = fieldName
+	}
       const componentField = compDef.fields[fieldName]
       const fieldError = `${fieldName}Error`
       let error = ''
@@ -25,7 +29,7 @@ export default function (compDef) {
       }
       const field = <div key={fieldName}>
 	    <Input  value={next[fieldName] ||''}
-      type={componentField.uiType} label={componentField.label} name='name' icon={componentField.icon}
+      type={componentField.uiType} label={label} name='name' icon={componentField.icon}
       hint={componentField.hint}
       onChange={(e) => {
 	next[fieldName] = e

src/list.js

@@ -15,16 +15,22 @@ export default function (compDef) {
     const Items = list.map((item, index) =>{
       let itemLegend = ''
       for (let field in fields) {
+	let label = fields[field].label
+	if (!label || label === '') {
+	  label = field
+	}
 	if (item[field] && item[field] !== '') {
-	  itemLegend = itemLegend + ` ${fields[field].label}: ${item[field]}`
+	  itemLegend = itemLegend + ` ${label}: ${item[field]}`
 	}
       }
-      return <ListItem key={index} legend={itemLegend} leftIcon='receipt'
+      return <ListItem key={index} legend={itemLegend} leftIcon={compDef.icon}
       onClick={() =>{
 	props[`select${componentProperName}`](props[listName][index])
-	props.pushRoute(editURL)
+	props.pushRoute(displayURL)
       }
-	      }/>
+	      }>
+	this is a child
+	</ListItem>
     })
 
     return <div>