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 +++++++++++++++++++++
1 file changed, 206 insertions(+)
create mode 100644 front/odiparpack/app/components/Tables/AdvTable.js
(limited to 'front/odiparpack/app/components/Tables/AdvTable.js')
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 && (
+
+
+
+ )}
+
+
+