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
---
.../app/containers/Tables/TablePlayground.js | 419 +++++++++++++++++++++
1 file changed, 419 insertions(+)
create mode 100644 front/odiparpack/app/containers/Tables/TablePlayground.js
(limited to 'front/odiparpack/app/containers/Tables/TablePlayground.js')
diff --git a/front/odiparpack/app/containers/Tables/TablePlayground.js b/front/odiparpack/app/containers/Tables/TablePlayground.js
new file mode 100644
index 0000000..30382bb
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/TablePlayground.js
@@ -0,0 +1,419 @@
+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 EnhancedTableHead from 'ba-components/Tables/tableParts/TableHeader';
+import EnhancedTableToolbar from 'ba-components/Tables/tableParts/TableToolbar';
+import { PapperBlock } from 'ba-components';
+
+import {
+ Grid,
+ FormControl,
+ FormLabel,
+ FormControlLabel,
+ FormGroup,
+ RadioGroup,
+ Radio,
+ Table,
+ TableBody,
+ TableCell,
+ TableRow,
+ TablePagination,
+ Paper,
+ Checkbox,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ demo: {
+ height: 240,
+ },
+ paper: {
+ padding: theme.spacing(2),
+ height: '100%',
+ backgroundColor: theme.palette.secondary.light,
+ },
+ control: {
+ padding: theme.spacing(2),
+ },
+ settings: {
+ padding: 30
+ },
+});
+
+let counter = 0;
+function createData(name, calories, fat, carbs, protein) {
+ counter += 1;
+ return {
+ id: counter,
+ name,
+ calories,
+ fat,
+ carbs,
+ protein
+ };
+}
+
+class InteractiveGrid extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ order: 'asc',
+ orderBy: 'calories',
+ selected: [],
+ columnData: [
+ {
+ id: 'name',
+ numeric: false,
+ disablePadding: false,
+ label: 'Dessert (100g serving)'
+ }, {
+ id: 'calories',
+ numeric: true,
+ disablePadding: false,
+ label: 'Calories'
+ }, {
+ id: 'fat',
+ numeric: true,
+ disablePadding: false,
+ label: 'Fat (g)'
+ }, {
+ id: 'carbs',
+ numeric: true,
+ disablePadding: false,
+ label: 'Carbs (g)'
+ }, {
+ id: 'protein',
+ numeric: true,
+ disablePadding: false,
+ label: 'Protein (g)'
+ },
+ ],
+ data: [
+ createData('Cupcake', 305, 3.7, 67, 4.3),
+ createData('Donut', 452, 25.0, 51, 4.9),
+ createData('Eclair', 262, 16.0, 24, 6.0),
+ createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+ createData('Gingerbread', 356, 16.0, 49, 3.9),
+ createData('Honeycomb', 408, 3.2, 87, 6.5),
+ createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+ createData('Jelly Bean', 375, 0.0, 94, 0.0),
+ createData('KitKat', 518, 26.0, 65, 7.0),
+ createData('Lollipop', 392, 0.2, 98, 0.0),
+ createData('Marshmallow', 318, 0, 81, 2.0),
+ createData('Nougat', 360, 19.0, 9, 37.0),
+ createData('Oreo', 437, 18.0, 63, 4.0),
+ ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
+ page: 0,
+ rowsPerPage: 5,
+ defaultPerPage: 5,
+ filterText: '',
+ size: 'medium',
+ bordered: false,
+ stripped: true,
+ hovered: false,
+ toolbar: true,
+ checkcell: false,
+ pagination: true
+ };
+ }
+
+ handleChangeRadio = key => (event, value) => {
+ this.setState({
+ [key]: value,
+ });
+ };
+
+ handleChangeCheck = name => event => {
+ this.setState({ [name]: event.target.checked });
+ };
+
+ 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) => {
+ if (!this.state.checkcell) {
+ return;
+ }
+ 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,
+ size,
+ columnData,
+ toolbar, pagination, checkcell,
+ bordered, stripped, hovered
+ } = this.state;
+ const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage));
+ const renderCell = (dataArray, keyArray) => keyArray.map((itemCell, index) => (
+ {dataArray[itemCell.id]}
+ ));
+ return (
+
+
+
+
+
+
+
+ Size
+
+ } label="Small" />
+ } label="Medium" />
+ } label="Big" />
+
+
+
+
+
+ Style
+
+
+ )}
+ label="Bordered"
+ />
+
+ )}
+ label="Strppied"
+ />
+
+ )}
+ label="Hovered"
+ />
+
+
+
+
+
+ Component
+
+
+ )}
+ label="Toolbar"
+ />
+
+ )}
+ label="Checkbox"
+ />
+
+ )}
+ label="Pagination"
+ />
+
+
+
+
+
+
+
+ {toolbar
+ && (
+ 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}
+ >
+ {checkcell
+ && (
+
+
+
+ )
+ }
+ {renderCell(n, columnData)}
+
+ );
+ })}
+ {emptyRows > 0 && (
+
+
+
+ )}
+
+
+
+