Añadir plantilla

Base para front

13 files changed, 1082 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/Tables/tableParts/DatePickerCell.js b/front/odiparpack/app/components/Tables/tableParts/DatePickerCell.js
new file mode 100644
index 0000000..161d0eb
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/DatePickerCell.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import MomentUtils from '@date-io/moment';
+import css from 'ba-styles/Table.scss';
+import { TableCell } from '@material-ui/core';
+
+class DatePickerCell extends React.Component {
+  state = {
+    event: {
+      target: {
+        name: this.props.cellData.type, // eslint-disable-line
+        value: this.props.cellData.value, // eslint-disable-line
+      }
+    }
+  }
+
+  handleDateChange = date => {
+    const { event } = this.state;
+    const { branch, updateRow } = this.props;
+    event.target.value = date;
+    updateRow(event, branch);
+  }
+
+  render() {
+    const {
+      edited,
+      cellData
+    } = this.props;
+    const { event } = this.state;
+    return (
+      <TableCell padding="none" className="text-center" textalign="center">
+        <MuiPickersUtilsProvider utils={MomentUtils}>
+          <KeyboardDatePicker
+            clearable
+            name={cellData.type}
+            className={css.crudInput}
+            format="DD/MM/YYYY"
+            placeholder="10/10/2018"
+            mask={[/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]}
+            value={event.target.value}
+            disabled={!edited}
+            onChange={this.handleDateChange}
+            animateYearScrolling={false}
+          />
+        </MuiPickersUtilsProvider>
+      </TableCell>
+    );
+  }
+}
+
+DatePickerCell.propTypes = {
+  cellData: PropTypes.object.isRequired,
+  updateRow: PropTypes.func.isRequired,
+  edited: PropTypes.bool.isRequired,
+  branch: PropTypes.string.isRequired,
+};
+
+export default DatePickerCell;
diff --git a/front/odiparpack/app/components/Tables/tableParts/EditableCell.js b/front/odiparpack/app/components/Tables/tableParts/EditableCell.js
new file mode 100644
index 0000000..2c7ba8f
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/EditableCell.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import css from 'ba-styles/Table.scss';
+
+import { TableCell, Input, TextField } from '@material-ui/core';
+
+class EditableCell extends React.Component {
+  handleUpdate(event) {
+    event.persist();
+    this.props.updateRow(event, this.props.branch);
+  }
+
+  render() {
+    const {
+      cellData,
+      edited,
+      inputType
+    } = this.props;
+    switch (inputType) {
+      case 'text':
+        return (
+          <TableCell padding="none">
+            <Input
+              placeholder={cellData.type}
+              name={cellData.type}
+              className={css.crudInput}
+              id={cellData.id.toString()}
+              value={cellData.value}
+              onChange={(event) => this.handleUpdate(event)}
+              disabled={!edited}
+              margin="none"
+              inputProps={{
+                'aria-label': 'Description',
+              }}
+            />
+          </TableCell>
+        );
+      case 'number':
+        return (
+          <TableCell padding="none">
+            <TextField
+              id={cellData.id.toString()}
+              name={cellData.type}
+              className={css.crudInput}
+              value={cellData.value}
+              onChange={(event) => this.handleUpdate(event)}
+              type="number"
+              InputLabelProps={{
+                shrink: true,
+              }}
+              margin="none"
+              disabled={!edited}
+            />
+          </TableCell>
+        );
+      default:
+        return (
+          <TableCell padding="none">
+            <Input
+              placeholder={cellData.type}
+              name={cellData.type}
+              className={css.crudInput}
+              id={cellData.id.toString()}
+              value={cellData.value}
+              onChange={(event) => this.handleUpdate(event)}
+              disabled={!edited}
+              margin="none"
+              inputProps={{
+                'aria-label': 'Description',
+              }}
+            />
+          </TableCell>
+        );
+    }
+  }
+}
+
+EditableCell.propTypes = {
+  inputType: PropTypes.string.isRequired,
+  cellData: PropTypes.object.isRequired,
+  updateRow: PropTypes.func.isRequired,
+  edited: PropTypes.bool.isRequired,
+  branch: PropTypes.string.isRequired,
+};
+
+export default EditableCell;
diff --git a/front/odiparpack/app/components/Tables/tableParts/Form.js b/front/odiparpack/app/components/Tables/tableParts/Form.js
new file mode 100644
index 0000000..da66966
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/Form.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { reduxForm } from 'redux-form/immutable';
+import css from 'ba-styles/Form.scss';
+import { Button } from '@material-ui/core';
+
+class Form extends Component {
+  componentDidMount() {
+    // this.ref // the Field
+    //   .getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField
+    //   .getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField
+    //   .focus() // on TextField
+    // console.log(this.props.initValues);
+  }
+
+  render() {
+    const {
+      handleSubmit,
+      children,
+      reset,
+      pristine,
+      submitting,
+    } = this.props;
+
+    return (
+      <div>
+        <form onSubmit={handleSubmit}>
+          <section className={css.bodyForm}>
+            {children}
+          </section>
+          <div className={css.buttonArea}>
+            <Button variant="contained" color="secondary" type="submit" disabled={submitting}>
+              Submit
+            </Button>
+            <Button
+              type="button"
+              disabled={pristine || submitting}
+              onClick={reset}
+            >
+              Reset
+            </Button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+Form.propTypes = {
+  children: PropTypes.node.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  reset: PropTypes.func.isRequired,
+  pristine: PropTypes.bool.isRequired,
+  submitting: PropTypes.bool.isRequired,
+};
+
+const FormMapped = reduxForm({
+  form: 'immutableExample',
+  enableReinitialize: true,
+})(Form);
+
+
+const FormMappedInit = connect(
+  state => ({
+    initialValues: state.getIn(['crudTableForm', 'formValues'])
+  })
+)(FormMapped);
+
+
+export default FormMappedInit;
diff --git a/front/odiparpack/app/components/Tables/tableParts/MainTable.js b/front/odiparpack/app/components/Tables/tableParts/MainTable.js
new file mode 100644
index 0000000..973bccf
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/MainTable.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import AddIcon from '@material-ui/icons/Add';
+import css from 'ba-styles/Table.scss';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Toolbar,
+  Typography,
+  Tooltip,
+  Button,
+} from '@material-ui/core';
+import Row from './Row';
+import styles from './tableStyle-jss';
+
+
+class MainTable extends React.Component {
+  render() {
+    const {
+      classes,
+      items,
+      addEmptyRow,
+      removeRow,
+      updateRow,
+      editRow,
+      finishEditRow,
+      anchor,
+      branch,
+      title
+    } = this.props;
+
+    const getItems = dataArray => dataArray.map(item => (
+      <Row
+        anchor={anchor}
+        updateRow={(event) => updateRow(event, item, branch)}
+        item={item}
+        removeRow={() => removeRow(item, branch)}
+        key={item.get('id')}
+        editRow={() => editRow(item, branch)}
+        finishEditRow={() => finishEditRow(item, branch)}
+        branch={branch}
+      />
+    ));
+
+    const getHead = dataArray => dataArray.map((item, index) => {
+      if (!item.hidden) {
+        return (
+          <TableCell padding="none" key={index.toString()} width={item.width}>{item.label}</TableCell>
+        );
+      }
+      return false;
+    });
+    return (
+      <div>
+        <Toolbar className={classes.toolbar}>
+          <div className={classes.title}>
+            <Typography variant="h6">{title}</Typography>
+          </div>
+          <div className={classes.spacer} />
+          <div className={classes.actions}>
+            <Tooltip title="Add Item">
+              <Button variant="contained" onClick={() => addEmptyRow(anchor, branch)} color="secondary" className={classes.button}>
+                <AddIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
+                Add New
+              </Button>
+            </Tooltip>
+          </div>
+        </Toolbar>
+        <div className={classes.rootTable}>
+          <Table className={classNames(css.tableCrud, classes.table, css.stripped)}>
+            <TableHead>
+              <TableRow>
+                { getHead(anchor) }
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {getItems(items)}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    );
+  }
+}
+
+MainTable.propTypes = {
+  title: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired,
+  items: PropTypes.object.isRequired,
+  anchor: PropTypes.array.isRequired,
+  addEmptyRow: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  updateRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  finishEditRow: PropTypes.func.isRequired,
+  branch: PropTypes.string.isRequired
+};
+
+export default withStyles(styles)(MainTable);
diff --git a/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js b/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js
new file mode 100644
index 0000000..ccf0e4a
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import AddIcon from '@material-ui/icons/Add';
+import css from 'ba-styles/Table.scss';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Toolbar,
+  Typography,
+  Tooltip,
+  Button,
+} from '@material-ui/core';
+import RowReadOnly from './RowReadOnly';
+import styles from './tableStyle-jss';
+
+
+class MainTableForm extends React.Component {
+  render() {
+    const {
+      title,
+      classes,
+      items,
+      removeRow,
+      editRow,
+      addNew,
+      anchor,
+      branch
+    } = this.props;
+    const getItems = dataArray => dataArray.map(item => (
+      <RowReadOnly
+        item={item}
+        removeRow={() => removeRow(item, branch)}
+        key={item.get('id')}
+        editRow={() => editRow(item, branch)}
+        anchor={anchor}
+        branch={branch}
+      />
+    ));
+
+    const getHead = dataArray => dataArray.map((item, index) => {
+      if (!item.hidden) {
+        return (
+          <TableCell padding="none" key={index.toString()} width={item.width}>{item.label}</TableCell>
+        );
+      }
+      return false;
+    });
+    return (
+      <div>
+        <Toolbar className={classes.toolbar}>
+          <div className={classes.title}>
+            <Typography variant="h6">{title}</Typography>
+          </div>
+          <div className={classes.spacer} />
+          <div className={classes.actions}>
+            <Tooltip title="Add Item">
+              <Button variant="contained" onClick={() => addNew(anchor, branch)} color="secondary" className={classes.button}>
+                <AddIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
+                Add New
+              </Button>
+            </Tooltip>
+          </div>
+        </Toolbar>
+        <div className={classes.rootTable}>
+          <Table className={classNames(css.tableCrud, classes.table, css.stripped)}>
+            <TableHead>
+              <TableRow>
+                { getHead(anchor) }
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {getItems(items)}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    );
+  }
+}
+
+MainTableForm.propTypes = {
+  title: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired,
+  items: PropTypes.object.isRequired,
+  anchor: PropTypes.array.isRequired,
+  addNew: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  branch: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(MainTableForm);
diff --git a/front/odiparpack/app/components/Tables/tableParts/Row.js b/front/odiparpack/app/components/Tables/tableParts/Row.js
new file mode 100644
index 0000000..67e7a4d
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/Row.js
@@ -0,0 +1,167 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/BorderColor';
+import DoneIcon from '@material-ui/icons/Done';
+import css from 'ba-styles/Table.scss';
+import { TableCell, IconButton } from '@material-ui/core';
+import EditableCell from './EditableCell';
+import SelectableCell from './SelectableCell';
+import ToggleCell from './ToggleCell';
+import DatePickerCell from './DatePickerCell';
+import TimePickerCell from './TimePickerCell';
+
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing(1),
+  },
+});
+
+class Row extends React.Component {
+  render() {
+    const {
+      classes,
+      anchor,
+      item,
+      removeRow,
+      updateRow,
+      editRow,
+      finishEditRow,
+      branch
+    } = this.props;
+    const eventDel = () => {
+      removeRow(item, branch);
+    };
+    const eventEdit = () => {
+      editRow(item, branch);
+    };
+    const eventDone = () => {
+      finishEditRow(item, branch);
+    };
+    const renderCell = dataArray => dataArray.map((itemCell, index) => {
+      if (itemCell.name !== 'action' && !itemCell.hidden) {
+        const inputType = anchor[index].type;
+        switch (inputType) {
+          case 'selection':
+            return (
+              <SelectableCell
+                updateRow={(event) => updateRow(event, branch)}
+                cellData={{
+                  type: itemCell.name,
+                  value: item.get(itemCell.name),
+                  id: item.get('id'),
+                }}
+                edited={item.get('edited')}
+                key={index.toString()}
+                options={anchor[index].options}
+                branch={branch}
+              />
+            );
+          case 'toggle':
+            return (
+              <ToggleCell
+                updateRow={(event) => updateRow(event, branch)}
+                cellData={{
+                  type: itemCell.name,
+                  value: item.get(itemCell.name),
+                  id: item.get('id'),
+                }}
+                edited={item.get('edited')}
+                key={index.toString()}
+                branch={branch}
+              />
+            );
+          case 'date':
+            return (
+              <DatePickerCell
+                updateRow={(event) => updateRow(event, branch)}
+                cellData={{
+                  type: itemCell.name,
+                  value: item.get(itemCell.name),
+                  id: item.get('id'),
+                }}
+                edited={item.get('edited')}
+                key={index.toString()}
+                branch={branch}
+              />
+            );
+          case 'time':
+            return (
+              <TimePickerCell
+                updateRow={(event) => updateRow(event, branch)}
+                cellData={{
+                  type: itemCell.name,
+                  value: item.get(itemCell.name),
+                  id: item.get('id'),
+                }}
+                edited={item.get('edited')}
+                key={index.toString()}
+                branch={branch}
+              />
+            );
+          default:
+            return (
+              <EditableCell
+                updateRow={(event) => updateRow(event, branch)}
+                cellData={{
+                  type: itemCell.name,
+                  value: item.get(itemCell.name),
+                  id: item.get('id'),
+                }}
+                edited={item.get('edited')}
+                key={index.toString()}
+                inputType={inputType}
+                branch={branch}
+              />
+            );
+        }
+      }
+      return false;
+    });
+    return (
+      <tr className={item.get('edited') ? css.editing : ''}>
+        {renderCell(anchor)}
+        <TableCell padding="none">
+          <IconButton
+            onClick={() => eventEdit(this)}
+            className={classNames((item.get('edited') ? css.hideAction : ''), classes.button)}
+            aria-label="Edit"
+          >
+            <EditIcon />
+          </IconButton>
+          <IconButton
+            onClick={() => eventDone(this)}
+            color="secondary"
+            className={classNames((!item.get('edited') ? css.hideAction : ''), classes.button)}
+            aria-label="Done"
+          >
+            <DoneIcon />
+          </IconButton>
+          <IconButton
+            onClick={() => eventDel(this)}
+            className={classes.button}
+            aria-label="Delete"
+          >
+            <DeleteIcon />
+          </IconButton>
+        </TableCell>
+      </tr>
+    );
+  }
+}
+
+Row.propTypes = {
+  classes: PropTypes.object.isRequired,
+  anchor: PropTypes.array.isRequired,
+  item: PropTypes.object.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  updateRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  finishEditRow: PropTypes.func.isRequired,
+  branch: PropTypes.string.isRequired
+};
+
+export default withStyles(styles)(Row);
diff --git a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
new file mode 100644
index 0000000..7da655f
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import css from 'ba-styles/Table.scss';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/BorderColor';
+
+import { TableCell, IconButton } from '@material-ui/core';
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing(1),
+  },
+});
+
+class RowReadOnly extends React.Component {
+  render() {
+    const {
+      anchor,
+      classes,
+      item,
+      removeRow,
+      editRow,
+      branch
+    } = this.props;
+    const eventDel = () => {
+      removeRow(item, branch);
+    };
+    const eventEdit = () => {
+      editRow(item, branch);
+    };
+    const renderCell = dataArray => dataArray.map((itemCell, index) => {
+      if (itemCell.name !== 'action' && !itemCell.hidden) {
+        return (
+          <TableCell padding="none" key={index.toString()}>
+            {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''}
+          </TableCell>
+        );
+      }
+      return false;
+    });
+    return (
+      <tr>
+        {renderCell(anchor)}
+        <TableCell padding="none">
+          <IconButton
+            onClick={() => eventEdit(this)}
+            className={classNames((item.get('edited') ? css.hideAction : ''), classes.button)}
+            aria-label="Edit"
+          >
+            <EditIcon />
+          </IconButton>
+          <IconButton
+            onClick={() => eventDel(this)}
+            className={classes.button}
+            aria-label="Delete"
+          >
+            <DeleteIcon />
+          </IconButton>
+        </TableCell>
+      </tr>
+    );
+  }
+}
+
+RowReadOnly.propTypes = {
+  anchor: PropTypes.array.isRequired,
+  classes: PropTypes.object.isRequired,
+  item: PropTypes.object.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  branch: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(RowReadOnly);
diff --git a/front/odiparpack/app/components/Tables/tableParts/SelectableCell.js b/front/odiparpack/app/components/Tables/tableParts/SelectableCell.js
new file mode 100644
index 0000000..66fde97
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/SelectableCell.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import css from 'ba-styles/Table.scss';
+
+import { Select, MenuItem, TableCell } from '@material-ui/core';
+
+class SelectableCell extends React.Component {
+  handleChange = event => {
+    this.props.updateRow(event, this.props.branch);
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  render() {
+    const {
+      cellData,
+      edited,
+      options,
+    } = this.props;
+    return (
+      <TableCell padding="none">
+        <Select
+          name={cellData.type}
+          id={cellData.id.toString()}
+          className={css.crudInput}
+          value={cellData.value}
+          onChange={this.handleChange}
+          displayEmpty
+          disabled={!edited}
+          margin="none"
+        >
+          {options.map((option, index) => <MenuItem value={option} key={index.toString()}>{option}</MenuItem>)}
+        </Select>
+      </TableCell>
+    );
+  }
+}
+
+SelectableCell.propTypes = {
+  options: PropTypes.array.isRequired,
+  cellData: PropTypes.object.isRequired,
+  updateRow: PropTypes.func.isRequired,
+  edited: PropTypes.bool.isRequired,
+  branch: PropTypes.string.isRequired,
+};
+
+export default SelectableCell;
diff --git a/front/odiparpack/app/components/Tables/tableParts/TableHeader.js b/front/odiparpack/app/components/Tables/tableParts/TableHeader.js
new file mode 100644
index 0000000..4ef6b0d
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/TableHeader.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TableCell, TableHead, TableRow, TableSortLabel, Checkbox, Tooltip } from '@material-ui/core';
+
+class TableHeader extends React.Component {
+  createSortHandler = property => event => {
+    this.props.onRequestSort(event, property);
+  };
+
+  render() {
+    const {
+      onSelectAllClick,
+      order,
+      orderBy,
+      numSelected,
+      rowCount,
+      columnData,
+      checkcell
+    } = this.props;
+
+    return (
+      <TableHead>
+        <TableRow>
+          {checkcell
+            && (
+              <TableCell padding="checkbox" width="80">
+                <Checkbox
+                  indeterminate={numSelected > 0 && numSelected < rowCount}
+                  checked={numSelected === rowCount}
+                  onChange={onSelectAllClick}
+                />
+              </TableCell>
+            )
+          }
+          {columnData.map(column => (
+            <TableCell
+              key={column.id}
+              align={column.numeric ? 'right' : 'left'}
+              padding={column.disablePadding ? 'none' : 'default'}
+              sortDirection={orderBy === column.id ? order : false}
+            >
+              <Tooltip
+                title="Sort"
+                placement={column.numeric ? 'bottom-end' : 'bottom-start'}
+                enterDelay={300}
+              >
+                <TableSortLabel
+                  active={orderBy === column.id}
+                  direction={order}
+                  onClick={this.createSortHandler(column.id)}
+                >
+                  {column.label}
+                </TableSortLabel>
+              </Tooltip>
+            </TableCell>
+          ), this)}
+        </TableRow>
+      </TableHead>
+    );
+  }
+}
+
+TableHeader.propTypes = {
+  numSelected: PropTypes.number.isRequired,
+  onRequestSort: PropTypes.func.isRequired,
+  onSelectAllClick: PropTypes.func.isRequired,
+  order: PropTypes.string.isRequired,
+  orderBy: PropTypes.string.isRequired,
+  rowCount: PropTypes.number.isRequired,
+  columnData: PropTypes.array.isRequired,
+  checkcell: PropTypes.bool.isRequired,
+};
+
+export default TableHeader;
diff --git a/front/odiparpack/app/components/Tables/tableParts/TableToolbar.js b/front/odiparpack/app/components/Tables/tableParts/TableToolbar.js
new file mode 100644
index 0000000..940a82c
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/TableToolbar.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import DeleteIcon from '@material-ui/icons/Delete';
+import ArchiveIcon from '@material-ui/icons/Archive';
+import BookmarkIcon from '@material-ui/icons/Bookmark';
+import FilterListIcon from '@material-ui/icons/FilterList';
+import SearchIcon from '@material-ui/icons/Search';
+import {
+  Toolbar,
+  Typography,
+  IconButton,
+  Tooltip,
+  FormControl,
+  Input,
+  InputAdornment,
+} from '@material-ui/core';
+import styles from './tableStyle-jss';
+
+
+class TableToolbar extends React.Component {
+  state = {
+    showSearch: false,
+  }
+
+  toggleSearch() {
+    this.setState({ showSearch: !this.state.showSearch });
+  }
+
+  handleChange(event) {
+    event.persist();
+    this.props.onUserInput(event.target.value);
+  }
+
+  render() {
+    const { numSelected, classes, filterText } = this.props;
+    const { showSearch } = this.state;
+
+    return (
+      <Toolbar
+        className={classNames(classes.root, {
+          [classes.highlight]: numSelected > 0,
+        })}
+      >
+        <div className={classes.titleToolbar}>
+          {numSelected > 0 ? (
+            <Typography color="inherit" variant="subtitle1">
+              {numSelected}
+              {' '}
+selected
+            </Typography>
+          ) : (
+            <Typography variant="h6">Nutrition</Typography>
+          )}
+        </div>
+        <div className={classes.spacer} />
+        <div className={classes.actionsToolbar}>
+          {numSelected > 0 ? (
+            <div>
+              <Tooltip title="Bookmark">
+                <IconButton aria-label="Bookmark">
+                  <BookmarkIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Archive">
+                <IconButton aria-label="Archive">
+                  <ArchiveIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Delete">
+                <IconButton aria-label="Delete">
+                  <DeleteIcon />
+                </IconButton>
+              </Tooltip>
+            </div>
+          ) : (
+            <div className={classes.actions}>
+              {showSearch
+                && (
+                  <FormControl className={classNames(classes.textField)}>
+                    <Input
+                      id="search_filter"
+                      type="text"
+                      placeholder="Search Desert"
+                      value={filterText}
+                      onChange={(event) => this.handleChange(event)}
+                      endAdornment={(
+                        <InputAdornment position="end">
+                          <IconButton aria-label="Search filter">
+                            <SearchIcon />
+                          </IconButton>
+                        </InputAdornment>
+                      )}
+                    />
+                  </FormControl>
+                )
+              }
+              <Tooltip title="Filter list">
+                <IconButton
+                  aria-label="Filter list"
+                  className={classes.filterBtn}
+                  onClick={() => this.toggleSearch()}
+                >
+                  <FilterListIcon />
+                </IconButton>
+              </Tooltip>
+            </div>
+          )}
+        </div>
+      </Toolbar>
+    );
+  }
+}
+
+TableToolbar.propTypes = {
+  classes: PropTypes.object.isRequired,
+  filterText: PropTypes.string.isRequired,
+  onUserInput: PropTypes.func.isRequired,
+  numSelected: PropTypes.number.isRequired,
+};
+
+export default withStyles(styles)(TableToolbar);
diff --git a/front/odiparpack/app/components/Tables/tableParts/TimePickerCell.js b/front/odiparpack/app/components/Tables/tableParts/TimePickerCell.js
new file mode 100644
index 0000000..941df31
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/TimePickerCell.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import MomentUtils from '@date-io/moment';
+import css from 'ba-styles/Table.scss';
+
+import { TableCell, InputAdornment, Icon, IconButton } from '@material-ui/core';
+
+class TimePickerCell extends React.Component {
+  state = {
+    event: {
+      target: {
+        name: this.props.cellData.type, // eslint-disable-line
+        value: this.props.cellData.value, // eslint-disable-line
+      }
+    }
+  }
+
+  handleTimeChange = date => {
+    const { event } = this.state;
+    const { updateRow, branch } = this.props;
+    event.target.value = date;
+    updateRow(event, branch);
+  }
+
+  render() {
+    const {
+      edited,
+      cellData
+    } = this.props;
+    const { event } = this.state;
+    return (
+      <TableCell padding="none">
+        <MuiPickersUtilsProvider utils={MomentUtils}>
+          <TimePicker
+            name={cellData.type}
+            className={css.crudInput}
+            mask={[/\d/, /\d/, ':', /\d/, /\d/, ' ', /a|p/i, 'M']}
+            placeholder="08:00 AM"
+            value={event.target.value}
+            disabled={!edited}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton>
+                    <Icon>access_time</Icon>
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+            onChange={this.handleTimeChange}
+          />
+        </MuiPickersUtilsProvider>
+      </TableCell>
+    );
+  }
+}
+
+TimePickerCell.propTypes = {
+  cellData: PropTypes.object.isRequired,
+  updateRow: PropTypes.func.isRequired,
+  edited: PropTypes.bool.isRequired,
+  branch: PropTypes.string.isRequired,
+};
+
+export default TimePickerCell;
diff --git a/front/odiparpack/app/components/Tables/tableParts/ToggleCell.js b/front/odiparpack/app/components/Tables/tableParts/ToggleCell.js
new file mode 100644
index 0000000..dc0af89
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/ToggleCell.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import css from 'ba-styles/Table.scss';
+
+import { TableCell, FormControlLabel, Switch } from '@material-ui/core';
+
+class ToggleCell extends React.Component {
+  state = {
+    isChecked: this.props.cellData.value
+  };
+
+  handleChange = event => {
+    this.setState({ isChecked: event.target.checked });
+    this.props.updateRow(event, this.props.branch);
+  };
+
+  render() {
+    const {
+      cellData,
+      edited,
+    } = this.props;
+    return (
+      <TableCell className={css.toggleCell} padding="none" textalign="center">
+        <div className={classNames(css.coverReadonly, !edited ? css.show : '')} />
+        <FormControlLabel
+          control={(
+            <Switch
+              name={cellData.type}
+              id={cellData.id.toString()}
+              className={css.crudInput}
+              checked={this.state.isChecked}
+              onChange={this.handleChange}
+              value={cellData.value.toString()}
+            />
+          )}
+        />
+      </TableCell>
+    );
+  }
+}
+
+ToggleCell.propTypes = {
+  cellData: PropTypes.object.isRequired,
+  updateRow: PropTypes.func.isRequired,
+  edited: PropTypes.bool.isRequired,
+  branch: PropTypes.string.isRequired,
+};
+
+export default ToggleCell;
diff --git a/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js b/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js
new file mode 100644
index 0000000..bede0b8
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js
@@ -0,0 +1,63 @@
+import { lighten } from '@material-ui/core/styles/colorManipulator';
+const styles = theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+  },
+  rootTable: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  highlight:
+    theme.palette.type === 'light' ? {
+      color: theme.palette.secondary.main,
+      backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+    } : {
+      color: theme.palette.text.primary,
+      backgroundColor: theme.palette.secondary.dark,
+    },
+  spacer: {
+    flex: '1 1 100%',
+  },
+  actionsToolbar: {
+    color: theme.palette.text.secondary,
+    flex: '1 0 auto',
+  },
+  titleToolbar: {
+    flex: '0 0 auto',
+  },
+  filterBtn: {
+    top: -5,
+  },
+  textField: {
+    flexBasis: 200,
+    width: 300
+  },
+  table: {
+    minWidth: 900,
+  },
+  actions: {
+    color: theme.palette.text.secondary,
+    margin: 10
+  },
+  toolbar: {
+    backgroundColor: theme.palette.grey[800],
+  },
+  title: {
+    flex: '0 0 auto',
+    '& h6': {
+      color: theme.palette.common.white
+    }
+  },
+  button: {
+    margin: theme.spacing(1),
+  },
+  iconSmall: {
+    fontSize: 20,
+  },
+  leftIcon: {
+    marginRight: theme.spacing(1),
+  },
+});
+
+export default styles;