[IMP] table rendering

package.json

@@ -7,6 +7,7 @@
     "history": "^4.7.2",
     "lodash": "^4.17.5",
     "material-ui": "^1.0.0-beta.36",
+    "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",

src/components/common/DataTable.js

@@ -0,0 +1,145 @@
+import React, { Component } from 'react'
+import Paper from 'material-ui/Paper'
+import Table, { TableHead, TableBody, TableRow, TableCell } from 'material-ui/Table'
+import Checkbox from 'material-ui/Checkbox'
+import { isEqual, size, indexOf, map, get, pick, concat, difference, slice } from 'lodash' 
+import PropTypes from 'prop-types'
+import { withStyles } from 'material-ui/styles'
+
+const styles = theme => ({
+    root: {
+        width: '100%'
+    },
+    checkColumn: {
+        width: 50
+    },
+    tableRow: {
+        '&:hover': {
+            backgroundColor: theme.palette.grey[200],
+            cursor: 'pointer'
+        }
+    }
+})
+
+class DataTable extends Component {
+
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            selectedRows: [],
+            isSelectable: props.isSelectable
+        }
+    }
+
+    /**
+     * 
+     * @param {*} e 
+     */
+    selectAll(e) {
+        const { selectedRows } = this.state
+        const { rows } = this.props
+    
+        this.setState({
+            ...this.state,
+            selectedRows: isEqual(size(selectedRows), size(rows)) ? [] : map(rows, r => {
+                return get(pick(r, 'id'), 'id')
+            })
+        })
+    }
+
+    /**
+     * 
+     * @param {*} e 
+     * @param {*} id 
+     */
+    select(e, id) {
+        const { selectedRows } = this.state
+        let index = indexOf(selectedRows, id)
+
+        this.setState({
+            ...this.state,
+            selectedRows: isEqual(index, -1) ? concat(selectedRows, id) : difference(selectedRows, slice(selectedRows, index, index + 1))
+        })
+    }
+
+    /**
+     * 
+     */
+    clearSelection() {
+        this.setState({
+            ...this.state,
+            selectedRows: []
+        })
+    }
+
+    /**
+     * 
+     */
+    render() {
+        const { isSelectable, selectedRows } = this.state
+        const { classes, gutterTop, columns, rows } = this.props
+
+        return (
+            <Paper className={classes.root} style={ gutterTop ? {marginTop: 20} : {}}>
+                <Table>
+                    <TableHead>
+                        <TableRow>
+                            {isSelectable && (    
+                                <TableCell
+                                    padding='checkbox'
+                                    children={
+                                        <Checkbox 
+                                            color='primary'
+                                            checked={isEqual(size(selectedRows), size(rows))}
+                                            onClick={e => this.selectAll(e)}
+                                        />
+                                    }
+                                />
+                            )}
+                            {columns.map(c => <TableCell key={c.key} children={c.title} />)}
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {rows.map(r => 
+                            <TableRow key={r.id} className={classes.tableRow}>
+                                {isSelectable && (
+                                    <TableCell 
+                                        padding='checkbox'
+                                        children={
+                                            <Checkbox
+                                                color='primary'
+                                                checked={!isEqual(indexOf(selectedRows, r.id), -1)}
+                                                onClick={e => this.select(e, r.id)}
+                                            />
+                                        }
+                                    />
+                                )}
+                                {columns.map(c =>
+                                    <TableCell key={c.key} children={!c.options ? r[c.key] : c.options[c.key].text} />
+                                )}
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </Paper>
+        )
+    }
+}
+
+DataTable.propTypes = {
+    columns: PropTypes.array.isRequired,
+    rows: PropTypes.array.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    isSelectable: PropTypes.bool,
+    gutterTop: PropTypes.bool
+}
+
+DataTable.defaultProps = {
+    isSelectable: false,
+    gutterTop: true
+}
+
+DataTable = withStyles(styles)(DataTable)
+
+export default DataTable

src/components/common/Sidebar.js

@@ -37,18 +37,18 @@ class Sidebar extends Component {
                         </ListItemIcon>
                         <ListItemText primary="Contenedores" />
                     </ListItem>
-                    <ListItem button component={Link} to='/mytasks'>
-                        <ListItemIcon>
-                            <TaskIcon />
-                        </ListItemIcon>
-                        <ListItemText primary="Mis tareas" />
-                    </ListItem>
                     <ListItem button component={Link} to='/tasks'>
                         <ListItemIcon>
                             <FactoryIcon />
                         </ListItemIcon>
                         <ListItemText primary="Tareas automatizadas" />
                     </ListItem>
+                    <ListItem button component={Link} to='/mytasks'>
+                        <ListItemIcon>
+                            <TaskIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Mis tareas" />
+                    </ListItem>
                     <ListSubheader>Administración</ListSubheader>
                     <ListItem button component={Link} to='/users'>
                         <ListItemIcon>

src/components/pages/TasksList.js

@@ -1,12 +1,89 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { withStyles } from 'material-ui/styles'
+import Button from 'material-ui/Button'
 import Base from '../common/Base'
+import DataTable from '../common/DataTable'
+
+const styles = theme => ({
+    gap: {
+        marginTop: 25
+    }
+})
 
 class TasksList extends Component {
+    /**
+     * 
+     * @param {*} e 
+     */
+    onAction(e) {
+        console.log(e)
+    }
+
+    /**
+     * 
+     * @param {*} e 
+     * @param {*} ids 
+     */
+    onSelect(e, ids) {
+
+    }
+
+    /**
+     * 
+     */
     render() {
+        const columns = [
+            {
+                title: 'Nombre',
+                key: 'title'
+            },
+            {
+                title: 'Última Ejecución',
+                key: 'last_execution'
+            }
+        ]
+
+        const { tasks } = this.props
+
         return (
-            <Base title={this.props.title}></Base>
+            <Base title={this.props.title}>
+                <Button variant='raised' color='primary' onClick={e => this.onAction(e)}>Ejecutar</Button>
+                <DataTable
+                    columns={columns}
+                    rows={tasks}
+                    onSelect={(e, ids) => this.onSelect(e, ids)}
+                />
+            </Base>
         )
     }
 }
 
-export default TasksList
+/**
+ * 
+ * @param {*} state 
+ * @param {*} props 
+ */
+const mapStateToProps = (state, props) => {
+    return {
+        tasks: []
+    }
+}
+
+/**
+ * 
+ * @param {*} dispatch 
+ * @param {*} props 
+ */
+const mapDispatchToProps = (dispatch, props) => ({
+    /**
+     * 
+     */
+    loadData() {
+
+    }
+})
+
+TasksList = withStyles(styles)(TasksList)
+
+export default connect(mapStateToProps, mapDispatchToProps)(TasksList)

src/constants/ResourceNames.js

@@ -1,7 +1,7 @@
 /** 
  * 
  */
-export const API_URL = 'http://localhost:8000/api/v1/'
+export const API_URL = 'http://192.168.88.100:8000/api/v1/'
 
 /** 
  * 

yarn.lock

@@ -5626,7 +5626,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies: