From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 20 Apr 2022 10:19:29 -0500 Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Base para front --- front/odiparpack/app/components/Tables/AdvTable.js | 206 +++++++++++++++++++++ .../odiparpack/app/components/Tables/CrudTable.js | 52 ++++++ .../app/components/Tables/CrudTableForm.js | 70 +++++++ .../odiparpack/app/components/Tables/EmptyData.js | 14 ++ .../odiparpack/app/components/Tables/TreeTable.js | 190 +++++++++++++++++++ .../components/Tables/tableParts/DatePickerCell.js | 59 ++++++ .../components/Tables/tableParts/EditableCell.js | 86 +++++++++ .../app/components/Tables/tableParts/Form.js | 71 +++++++ .../app/components/Tables/tableParts/MainTable.js | 104 +++++++++++ .../components/Tables/tableParts/MainTableForm.js | 97 ++++++++++ .../app/components/Tables/tableParts/Row.js | 167 +++++++++++++++++ .../components/Tables/tableParts/RowReadOnly.js | 76 ++++++++ .../components/Tables/tableParts/SelectableCell.js | 46 +++++ .../components/Tables/tableParts/TableHeader.js | 74 ++++++++ .../components/Tables/tableParts/TableToolbar.js | 123 ++++++++++++ .../components/Tables/tableParts/TimePickerCell.js | 66 +++++++ .../app/components/Tables/tableParts/ToggleCell.js | 50 +++++ .../components/Tables/tableParts/tableStyle-jss.js | 63 +++++++ 18 files changed, 1614 insertions(+) create mode 100644 front/odiparpack/app/components/Tables/AdvTable.js create mode 100644 front/odiparpack/app/components/Tables/CrudTable.js create mode 100644 front/odiparpack/app/components/Tables/CrudTableForm.js create mode 100644 front/odiparpack/app/components/Tables/EmptyData.js create mode 100644 front/odiparpack/app/components/Tables/TreeTable.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/DatePickerCell.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/EditableCell.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/Form.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/MainTable.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/MainTableForm.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/Row.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/SelectableCell.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/TableHeader.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/TableToolbar.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/TimePickerCell.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/ToggleCell.js create mode 100644 front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js (limited to 'front/odiparpack/app/components/Tables') diff --git a/front/odiparpack/app/components/Tables/AdvTable.js b/front/odiparpack/app/components/Tables/AdvTable.js new file mode 100644 index 0000000..acb2803 --- /dev/null +++ b/front/odiparpack/app/components/Tables/AdvTable.js @@ -0,0 +1,206 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import tableStyles from 'ba-styles/Table.scss'; +import { Table, TableBody, TableCell, TableRow, TablePagination, Paper, Checkbox } from '@material-ui/core'; +import EnhancedTableHead from './tableParts/TableHeader'; +import EnhancedTableToolbar from './tableParts/TableToolbar'; + + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + }, + table: { + minWidth: 1020, + }, + tableWrapper: { + overflowX: 'auto', + }, +}); + +class AdvTable extends React.Component { + constructor(props, context) { + super(props, context); + + this.state = { + order: this.props.order, + orderBy: this.props.orderBy, + selected: this.props.selected, + data: this.props.data.sort((a, b) => (a.calories < b.calories ? -1 : 1)), + page: this.props.page, + rowsPerPage: this.props.rowsPerPage, + defaultPerPage: this.props.defaultPerPage, + filterText: this.props.filterText, + }; + } + + handleRequestSort = (event, property) => { + const orderBy = property; + let order = 'desc'; + + if (this.state.orderBy === property && this.state.order === 'desc') { + order = 'asc'; + } + + const data = order === 'desc' + ? this.state.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1)) + : this.state.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1)); + + this.setState({ data, order, orderBy }); + }; + + handleSelectAllClick = (event, checked) => { + if (checked) { + this.setState({ selected: this.state.data.map(n => n.id) }); + return; + } + this.setState({ selected: [] }); + }; + + handleClick = (event, id) => { + const { selected } = this.state; + const selectedIndex = selected.indexOf(id); + let newSelected = []; + + if (selectedIndex === -1) { + newSelected = newSelected.concat(selected, id); + } else if (selectedIndex === 0) { + newSelected = newSelected.concat(selected.slice(1)); + } else if (selectedIndex === selected.length - 1) { + newSelected = newSelected.concat(selected.slice(0, -1)); + } else if (selectedIndex > 0) { + newSelected = newSelected.concat( + selected.slice(0, selectedIndex), + selected.slice(selectedIndex + 1), + ); + } + + this.setState({ selected: newSelected }); + }; + + handleChangePage = (event, page) => { + this.setState({ page }); + }; + + handleChangeRowsPerPage = event => { + this.setState({ rowsPerPage: event.target.value }); + }; + + isSelected = id => this.state.selected.indexOf(id) !== -1; + + handleUserInput(value) { + // Show all item first + if (value !== '') { + this.setState({ rowsPerPage: this.state.data.length }); + } else { + this.setState({ rowsPerPage: this.state.defaultPerPage }); + } + + // Show result base on keyword + this.setState({ filterText: value.toLowerCase() }); + } + + render() { + const { classes } = this.props; + const { + data, + order, + orderBy, + selected, + rowsPerPage, + page, + filterText + } = this.state; + const { columnData } = this.props; + const checkcell = true; + const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage)); + const renderCell = (dataArray, keyArray) => keyArray.map((itemCell, index) => ( + {dataArray[itemCell.id]} + )); + return ( + + this.handleUserInput(event)} + /> +
+ + + + {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => { + const isSelected = this.isSelected(n.id); + if (n.name.toLowerCase().indexOf(filterText) === -1) { + return false; + } + return ( + this.handleClick(event, n.id)} + role="checkbox" + aria-checked={isSelected} + tabIndex={-1} + key={n.id} + selected={isSelected} + > + + + + {renderCell(n, columnData)} + + ); + })} + {emptyRows > 0 && ( + + + + )} + +
+
+ + + ); + } +} + +AdvTable.propTypes = { + classes: PropTypes.object.isRequired, + data: PropTypes.array.isRequired, + order: PropTypes.string.isRequired, + orderBy: PropTypes.string.isRequired, + selected: PropTypes.array.isRequired, + rowsPerPage: PropTypes.number.isRequired, + page: PropTypes.number.isRequired, + defaultPerPage: PropTypes.number.isRequired, + filterText: PropTypes.string.isRequired, + columnData: PropTypes.array.isRequired, +}; + +export default withStyles(styles)(AdvTable); diff --git a/front/odiparpack/app/components/Tables/CrudTable.js b/front/odiparpack/app/components/Tables/CrudTable.js new file mode 100644 index 0000000..d3dd164 --- /dev/null +++ b/front/odiparpack/app/components/Tables/CrudTable.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import MainTable from './tableParts/MainTable'; + +class CrudTable extends React.Component { + componentDidMount() { + this.props.fetchData(this.props.dataInit, this.props.branch); + } + + render() { + const { + title, + dataTable, + addEmptyRow, + removeRow, + updateRow, + editRow, + finishEditRow, + anchor, + branch + } = this.props; + return ( + + ); + } +} + +CrudTable.propTypes = { + title: PropTypes.string.isRequired, + anchor: PropTypes.array.isRequired, + dataInit: PropTypes.array.isRequired, + dataTable: PropTypes.object.isRequired, + fetchData: PropTypes.func.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 CrudTable; diff --git a/front/odiparpack/app/components/Tables/CrudTableForm.js b/front/odiparpack/app/components/Tables/CrudTableForm.js new file mode 100644 index 0000000..d2d2ea8 --- /dev/null +++ b/front/odiparpack/app/components/Tables/CrudTableForm.js @@ -0,0 +1,70 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Form from './tableParts/Form'; +import MainTableForm from './tableParts/MainTableForm'; +import FloatingPanel from './../Panel/FloatingPanel'; + +class CrudTableForm extends React.Component { + componentDidMount() { + this.props.fetchData(this.props.dataInit, this.props.branch); + } + + sendValues = (values) => { + setTimeout(() => { + this.props.submit(values, this.props.branch); + }, 500); + } + + render() { + const { + title, + dataTable, + openForm, + closeForm, + removeRow, + addNew, + editRow, + anchor, + children, + branch, + initValues + } = this.props; + return ( +
+ +
+ {children} +
+ + +
+ ); + } +} + +CrudTableForm.propTypes = { + title: PropTypes.string.isRequired, + anchor: PropTypes.array.isRequired, + dataInit: PropTypes.array.isRequired, + dataTable: PropTypes.object.isRequired, + fetchData: PropTypes.func.isRequired, + submit: PropTypes.func.isRequired, + addNew: PropTypes.func.isRequired, + openForm: PropTypes.bool.isRequired, + closeForm: PropTypes.func.isRequired, + removeRow: PropTypes.func.isRequired, + editRow: PropTypes.func.isRequired, + children: PropTypes.node.isRequired, + initValues: PropTypes.object.isRequired, + branch: PropTypes.string.isRequired, +}; + +export default CrudTableForm; diff --git a/front/odiparpack/app/components/Tables/EmptyData.js b/front/odiparpack/app/components/Tables/EmptyData.js new file mode 100644 index 0000000..a59c3d6 --- /dev/null +++ b/front/odiparpack/app/components/Tables/EmptyData.js @@ -0,0 +1,14 @@ +import React from 'react'; +import tableStyles from 'ba-styles/Table.scss'; +import TableIcon from '@material-ui/icons/Apps'; + +function EmptyData() { + return ( +
+ + No Data +
+ ); +} + +export default EmptyData; diff --git a/front/odiparpack/app/components/Tables/TreeTable.js b/front/odiparpack/app/components/Tables/TreeTable.js new file mode 100644 index 0000000..12eeb19 --- /dev/null +++ b/front/odiparpack/app/components/Tables/TreeTable.js @@ -0,0 +1,190 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import ExpandLess from '@material-ui/icons/KeyboardArrowRight'; +import ExpandMore from '@material-ui/icons/ExpandMore'; +import Add from '@material-ui/icons/AddCircle'; +import Remove from '@material-ui/icons/RemoveCircleOutline'; + +import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, + hideRow: { + display: 'none' + }, + anchor: { + cursor: 'pointer' + }, + icon: { + top: 5, + position: 'relative', + left: -5 + } +}); + +let RenderRow = props => { + const { + classes, + toggleTree, + treeOpen, + item, + parent, + arrowMore, + icon, + branch + } = props; + + const keyID = item.id; + const dataBody = Object.keys(item); + const dataBodyVal = Object.values(item); + + const renderIconMore = (iconName) => { + if (iconName === 'arrow') { + return ; + } + return ; + }; + + const renderIconLess = (iconName) => { + if (iconName === 'arrow') { + return ; + } + return ; + }; + + const renderCell = (dataArray, parentCell) => dataArray.map((itemCell, index) => { + if (index < 1) { + if (parentCell) { + return ( + + {arrowMore.indexOf(keyID) > -1 ? renderIconMore(icon) : renderIconLess(icon)} + {keyID} + + ); + } + return ( + {keyID} + ); + } + + if (itemCell !== 'child') { + return ( + {dataBodyVal[index]} + ); + } + + return false; + }); + + const row = parent ? ( + -1 ? classes.hideRow : classes.anchor} + onClick={() => toggleTree(keyID, item.child, branch)} + > + {renderCell(dataBody, true)} + + ) : ( + -1 ? classes.hideRow : ''} + > + {renderCell(dataBody, false)} + + ); + + return [row]; +}; + +RenderRow.propTypes = { + classes: PropTypes.object.isRequired, + item: PropTypes.object.isRequired, + parent: PropTypes.bool.isRequired, + toggleTree: PropTypes.func.isRequired, + treeOpen: PropTypes.object.isRequired, + arrowMore: PropTypes.object.isRequired, + branch: PropTypes.string.isRequired, + icon: PropTypes.string.isRequired +}; + +RenderRow = withStyles(styles)(RenderRow); + +class TreeTable extends React.Component { + render() { + const { + classes, + dataTable, + icon, + treeOpen, + arrowMore, + toggleTree, + branch + } = this.props; + const parentRow = true; + const getData = dataArray => dataArray.map((item, index) => { + if (item.child) { + return [ + , + getData(item.child) + ]; + } + return ( + + ); + }); + + const getHead = dataArray => dataArray.map((item, index) => {item.label} + ); + + return ( + + + + { getHead(dataTable.head) } + + + + { getData(dataTable.body) } + +
+ ); + } +} + +TreeTable.propTypes = { + classes: PropTypes.object.isRequired, + dataTable: PropTypes.object.isRequired, + treeOpen: PropTypes.object.isRequired, + toggleTree: PropTypes.func.isRequired, + arrowMore: PropTypes.object.isRequired, + branch: PropTypes.string.isRequired, + icon: PropTypes.string.isRequired +}; + +export default withStyles(styles)(TreeTable); 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 ( + + + + + + ); + } +} + +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 ( + + this.handleUpdate(event)} + disabled={!edited} + margin="none" + inputProps={{ + 'aria-label': 'Description', + }} + /> + + ); + case 'number': + return ( + + this.handleUpdate(event)} + type="number" + InputLabelProps={{ + shrink: true, + }} + margin="none" + disabled={!edited} + /> + + ); + default: + return ( + + this.handleUpdate(event)} + disabled={!edited} + margin="none" + inputProps={{ + 'aria-label': 'Description', + }} + /> + + ); + } + } +} + +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 ( +
+
+
+ {children} +
+
+ + +
+
+
+ ); + } +} + +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 => ( + 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 ( + {item.label} + ); + } + return false; + }); + return ( +
+ +
+ {title} +
+
+
+ + + +
+ +
+ + + + { getHead(anchor) } + + + + {getItems(items)} + +
+
+
+ ); + } +} + +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 => ( + 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 ( + {item.label} + ); + } + return false; + }); + return ( +
+ +
+ {title} +
+
+
+ + + +
+ +
+ + + + { getHead(anchor) } + + + + {getItems(items)} + +
+
+
+ ); + } +} + +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 ( + 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 ( + 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 ( + 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 ( + 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 ( + 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 ( + + {renderCell(anchor)} + + eventEdit(this)} + className={classNames((item.get('edited') ? css.hideAction : ''), classes.button)} + aria-label="Edit" + > + + + eventDone(this)} + color="secondary" + className={classNames((!item.get('edited') ? css.hideAction : ''), classes.button)} + aria-label="Done" + > + + + eventDel(this)} + className={classes.button} + aria-label="Delete" + > + + + + + ); + } +} + +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 ( + + {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''} + + ); + } + return false; + }); + return ( + + {renderCell(anchor)} + + eventEdit(this)} + className={classNames((item.get('edited') ? css.hideAction : ''), classes.button)} + aria-label="Edit" + > + + + eventDel(this)} + className={classes.button} + aria-label="Delete" + > + + + + + ); + } +} + +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 ( + + + + ); + } +} + +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 ( + + + {checkcell + && ( + + 0 && numSelected < rowCount} + checked={numSelected === rowCount} + onChange={onSelectAllClick} + /> + + ) + } + {columnData.map(column => ( + + + + {column.label} + + + + ), this)} + + + ); + } +} + +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 ( + 0, + })} + > +
+ {numSelected > 0 ? ( + + {numSelected} + {' '} +selected + + ) : ( + Nutrition + )} +
+
+
+ {numSelected > 0 ? ( +
+ + + + + + + + + + + + + + + +
+ ) : ( +
+ {showSearch + && ( + + this.handleChange(event)} + endAdornment={( + + + + + + )} + /> + + ) + } + + this.toggleSearch()} + > + + + +
+ )} +
+ + ); + } +} + +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 ( + + + + + access_time + + + ), + }} + onChange={this.handleTimeChange} + /> + + + ); + } +} + +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 ( + +
+ + )} + /> + + ); + } +} + +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; -- cgit v1.2.3