passwords view config

src/Components/Password/config.js

@@ -0,0 +1,166 @@
+import { 
+    TableHead,
+    TableRow,
+    TableCell,
+    Checkbox,
+    TableSortLabel,
+    Box,
+} from '@mui/material'
+
+import { visuallyHidden } from '@mui/utils';
+
+export const rows = [
+    createData('Cupcake', 305, 3.7, 67, 4.3, 'Nice', 'Good'),
+    createData('Cupcake 1', 305, 3.7, 67, 4.3, 'Nice', 'Good'),
+    createData('Cupcake 2', 305, 3.7, 67, 4.3, 'Nice', 'Good'),
+    createData('Cupcake 3', 305, 3.7, 67, 4.3, 'Nice', 'Good'),
+    createData('Cupcake 4', 305, 3.7, 67, 4.3, 'Nice', 'Good'),
+]
+
+export function createData(name, calories, fat, carbs, protein) {
+    return {
+        name,
+        calories,
+        fat,
+        carbs,
+        protein,
+    };
+}
+
+function descendingComparator(a, b, orderBy) {
+    if (b[orderBy] < a[orderBy]) {
+        return -1;
+    }
+    if (b[orderBy] > a[orderBy]) {
+        return 1;
+    }
+    return 0;
+}
+
+export function Comparar(order, orderBy) {
+    return order === 'desc'
+        ? (a, b) => descendingComparator(a, b, orderBy)
+        : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+export function Cuerpo(array, comparator) {
+    const stabilizedThis = array.map((el, index) => [el, index]);
+    stabilizedThis.sort((a, b) => {
+        const order = comparator(a[0], b[0]);
+        if (order !== 0) {
+            return order;
+        }
+        return a[1] - b[1];
+    });
+    return stabilizedThis.map((el) => el[0]);
+}
+
+export const encabezados = [
+    {
+        id: 'pass',
+        numeric: false,
+        disablePadding: true,
+        label: 'Contraseñas',
+    },
+    {
+        id: 'nivel',
+        numeric: true,
+        disablePadding: false,
+        label: 'Nivel',
+    },
+    {
+        id: 'puesto',
+        numeric: true,
+        disablePadding: false,
+        label: 'Puesto',
+    },
+    {
+        id: 'cui',
+        numeric: true,
+        disablePadding: false,
+        label: 'CUI/Cedula',
+    },
+    {
+        id: 'uso',
+        numeric: true,
+        disablePadding: false,
+        label: 'En uso?',
+    },
+    {
+        id: 'picture',
+        numeric: true,
+        disablePadding: false,
+        label: 'Fotografía',
+    },
+    {
+        id: 'cv',
+        numeric: true,
+        disablePadding: false,
+        label: 'Con CV',
+    },
+    {
+        id: 'replic',
+        numeric: true,
+        disablePadding: false,
+        label: 'Replicar',
+    },
+    {
+        id: 'ope',
+        numeric: true,
+        disablePadding: false,
+        label: 'Operacion',
+    },
+]
+
+export function TableHeader(props){
+
+    const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
+        props;
+    const createSortHandler = (property) => (event) => {
+        onRequestSort(event, property);
+    };
+
+    return (
+        <TableHead>
+            <TableRow>
+                <TableCell padding="checkbox">
+                    <Checkbox
+                        color="primary"
+                        indeterminate={numSelected > 0 && numSelected < rowCount}
+                        checked={rowCount > 0 && numSelected === rowCount}
+                        onChange={onSelectAllClick}
+                        inputProps={{
+                            'aria-label': 'select all desserts',
+                        }}
+                        />
+                </TableCell>
+                { encabezados.map( (headCell, index) => (
+                    <TableCell
+                        key={index}
+                        align={headCell.numeric ? 'right' : 'left'}
+                        padding={headCell.disablePadding ? 'none' : 'normal'}
+                        sortDirection={orderBy === headCell.id ? order : false}
+                    >
+                        <TableSortLabel
+                            style={{ fontWeight:'bold' }}
+                            active={orderBy === headCell.id}
+                            direction={orderBy === headCell.id ? order : 'asc'}
+                            onClick={createSortHandler(headCell.id)}
+                        >
+                            {headCell.label}
+                            {orderBy === headCell.id ? (
+                                <Box component="span" sx={visuallyHidden}>
+                                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                                </Box>
+                            ) : null}
+                        </TableSortLabel>
+                    </TableCell>
+                ))}
+            </TableRow>
+        </TableHead>
+    );
+}
+
+
+
+

src/Pages/Contras.jsx

@@ -1,5 +1,12 @@
 import * as React from 'react';
 // import { useTheme } from '@mui/material/styles';
+import { 
+    rows,
+    // descendingComparator,
+    Comparar,
+    Cuerpo,
+    TableHeader as EnhancedTableHead
+} from '../Components/Password/config.js';
 
 import { 
     Table, TableBody, TableCell, TableContainer, 
@@ -7,14 +14,12 @@ import {
     IconButton, Paper, Box,
     Switch, FormControlLabel,Tooltip,
     Checkbox, Typography, Toolbar,
-    TableSortLabel,TableHead
+    // TableSortLabel,TableHead,Card
 } from '@mui/material';
 
-import { visuallyHidden } from '@mui/utils';
-
 import { alpha } from '@mui/material/styles';
 
-// import { Row, Col, Container } from 'react-bootstrap';
+import { Row, Col, Container } from 'react-bootstrap';
 
 import {
     Delete as DeleteIcon,
@@ -22,49 +27,7 @@ import {
     // LastPage as LastPageIcon, FirstPage as FirstPageIcon, KeyboardArrowRight, KeyboardArrowLeft,
 } from '@mui/icons-material/'
 
-function createData(name, calories, fat, carbs, protein) {
-    return {
-        name,
-        calories,
-        fat,
-        carbs,
-        protein,
-    };
-}
-
-const rows = [
-    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),
-];
-
-function descendingComparator(a, b, orderBy) {
-    if (b[orderBy] < a[orderBy]) {
-        return -1;
-    }
-    if (b[orderBy] > a[orderBy]) {
-        return 1;
-    }
-    return 0;
-}
-
-function getComparator(order, orderBy) {
-    return order === 'desc'
-        ? (a, b) => descendingComparator(a, b, orderBy)
-        : (a, b) => -descendingComparator(a, b, orderBy);
-}
-
-const EnhancedTableToolbar = (props) => {
+const TableEncabezadoOperation = (props) => {
 
     const { numSelected } = props;
     return (
@@ -94,7 +57,7 @@ const EnhancedTableToolbar = (props) => {
                         id="tableTitle"
                         component="div"
                     >
-                        Nutrition
+                        Contraseñas
                     </Typography>
                 )}
 
@@ -116,101 +79,6 @@ const EnhancedTableToolbar = (props) => {
 
 }
 
-function EnhancedTableHead(props) {
-    const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
-        props;
-    const createSortHandler = (property) => (event) => {
-        onRequestSort(event, property);
-    };
-
-    return (
-        <TableHead>
-            <TableRow>
-                <TableCell padding="checkbox">
-                    <Checkbox
-                        color="primary"
-                        indeterminate={numSelected > 0 && numSelected < rowCount}
-                        checked={rowCount > 0 && numSelected === rowCount}
-                        onChange={onSelectAllClick}
-                        inputProps={{
-                            'aria-label': 'select all desserts',
-                        }}
-                        />
-                </TableCell>
-                {headCells.map((headCell) => (
-                    <TableCell
-                        key={headCell.id}
-                        align={headCell.numeric ? 'right' : 'left'}
-                        padding={headCell.disablePadding ? 'none' : 'normal'}
-                        sortDirection={orderBy === headCell.id ? order : false}
-                    >
-                        <TableSortLabel
-                            style={{ fontWeight:'bold' }}
-                            active={orderBy === headCell.id}
-                            direction={orderBy === headCell.id ? order : 'asc'}
-                            onClick={createSortHandler(headCell.id)}
-                        >
-                            {headCell.label}
-                            {orderBy === headCell.id ? (
-                                <Box component="span" sx={visuallyHidden}>
-                                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                                </Box>
-                            ) : null}
-                        </TableSortLabel>
-                    </TableCell>
-                ))}
-            </TableRow>
-        </TableHead>
-    );
-}
-
-function stableSort(array, comparator) {
-    const stabilizedThis = array.map((el, index) => [el, index]);
-    stabilizedThis.sort((a, b) => {
-        const order = comparator(a[0], b[0]);
-        if (order !== 0) {
-            return order;
-        }
-        return a[1] - b[1];
-    });
-    return stabilizedThis.map((el) => el[0]);
-}
-
-const headCells = [
-    {
-        id: 'name',
-        numeric: false,
-        disablePadding: true,
-        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)',
-    },
-];
-
-
-
 export function Contras() {
 
     const [order, setOrder] = React.useState('asc');
@@ -218,7 +86,7 @@ export function Contras() {
     const [selected, setSelected] = React.useState([]);
     const [page, setPage] = React.useState(0);
     const [dense, setDense] = React.useState(false);
-    const [rowsPerPage, setRowsPerPage] = React.useState(5);
+    const [rowsPerPage, setRowsPerPage] = React.useState(15);
 
     const handleRequestSort = (event, property) => {
         const isAsc = orderBy === property && order === 'asc';
@@ -228,7 +96,7 @@ export function Contras() {
 
     const handleSelectAllClick = (event) => {
         if (event.target.checked) {
-            const newSelecteds = rows.map((n) => n.name);
+            const newSelecteds = rows.map( (n) => n.name);
             setSelected(newSelecteds);
             return;
         }
@@ -269,102 +137,106 @@ export function Contras() {
     };
 
     const isSelected = (name) => selected.indexOf(name) !== -1;
-  
+
     const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
 
     return (
-
         <div className="content-section">
             <div className="main">
-
-                <Box sx={{ width: '100%' }}>
-                    <Paper sx={{ width: '100%', mb: 2 }}>
-                        <EnhancedTableToolbar numSelected={selected.length} />
-                        <TableContainer>
-                            <Table
-                                sx={{ minWidth: 750 }}
-                                aria-labelledby="tableTitle"
-                                size={dense ? 'small' : 'medium'}
-                            >
-                                <EnhancedTableHead
-                                    numSelected={selected.length}
-                                    order={order}
-                                    orderBy={orderBy}
-                                    onSelectAllClick={handleSelectAllClick}
-                                    onRequestSort={handleRequestSort}
-                                    rowCount={rows.length}
-                                    />
-                                <TableBody>
-                                    {/* if you don't need to support IE11, you can replace the `stableSort` call with:
-rows.slice().sort(getComparator(order, orderBy)) */}
-                                    {stableSort(rows, getComparator(order, orderBy))
-                                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                                    .map((row, index) => {
-                                        const isItemSelected = isSelected(row.name);
-                                        const labelId = `enhanced-table-checkbox-${index}`;
-
-                                        return (
-                                            <TableRow
-                                                hover
-                                                onClick={(event) => handleClick(event, row.name)}
-                                                role="checkbox"
-                                                aria-checked={isItemSelected}
-                                                tabIndex={-1}
-                                                key={row.name}
-                                                selected={isItemSelected}
-                                            >
-                                                <TableCell padding="checkbox">
-                                                    <Checkbox
-                                                        color="primary"
-                                                        checked={isItemSelected}
-                                                        inputProps={{
-                                                            'aria-labelledby': labelId,
-                                                        }}
-                                                        />
-                                                </TableCell>
-                                                <TableCell
-                                                    component="th"
-                                                    id={labelId}
-                                                    scope="row"
-                                                    padding="none"
-                                                >
-                                                    {row.name}
-                                                </TableCell>
-                                                <TableCell align="right">{row.calories}</TableCell>
-                                                <TableCell align="right">{row.fat}</TableCell>
-                                                <TableCell align="right">{row.carbs}</TableCell>
-                                                <TableCell align="right">{row.protein}</TableCell>
-                                            </TableRow>
-                                        );
-                                    })}
-                                    {emptyRows > 0 && (
-                                        <TableRow
-                                            style={{
-                                                height: (dense ? 33 : 53) * emptyRows,
-                                            }}
+                <Container>
+                    <Row>
+                        <Col>
+                            <Box sx={{ width: '100%' }}>
+                                <Paper sx={{ width: '100%', mb: 2 }}>
+                                    <TableEncabezadoOperation numSelected={selected.length} />
+                                    <TableContainer>
+                                        <Table
+                                            sx={{ minWidth: 750 }}
+                                            aria-labelledby="tableTitle"
+                                            size={dense ? 'small' : 'medium'}
                                         >
-                                            <TableCell colSpan={6} />
-                                        </TableRow>
-                                    )}
-                                </TableBody>
-                            </Table>
-                        </TableContainer>
-                        <TablePagination
-                            rowsPerPageOptions={[5, 10, 25]}
-                            component="div"
-                            count={rows.length}
-                            rowsPerPage={rowsPerPage}
-                            page={page}
-                            onPageChange={handleChangePage}
-                            onRowsPerPageChange={handleChangeRowsPerPage}
-                            />
-                    </Paper>
-                    <FormControlLabel
-                        control={<Switch checked={dense} onChange={handleChangeDense} />}
-                        label="Dense padding"
-                        />
-                </Box>
-
+                                            <EnhancedTableHead
+                                                numSelected={selected.length}
+                                                order={order}
+                                                orderBy={orderBy}
+                                                onSelectAllClick={handleSelectAllClick}
+                                                onRequestSort={handleRequestSort}
+                                                rowCount={rows.length}
+                                                />
+                                            <TableBody>
+                                                {Cuerpo(rows, Comparar(order, orderBy))
+                                                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                                                .map( (row, index) => {
+                                                    const isItemSelected = isSelected(row.name);
+                                                    const labelId = `enhanced-table-checkbox-${index}`;
+
+                                                    console.log('INDEX >> ',row)
+                                                    return (
+                                                        <TableRow
+                                                            hover
+                                                            onClick={(event) => handleClick(event, row.name)}
+                                                            role="checkbox"
+                                                            aria-checked={isItemSelected}
+                                                            tabIndex={-1}
+                                                            key={row.name}
+                                                            selected={isItemSelected}
+                                                        >
+                                                            <TableCell padding="checkbox">
+                                                                <Checkbox
+                                                                    color="primary"
+                                                                    checked={isItemSelected}
+                                                                    inputProps={{
+                                                                        'aria-labelledby': labelId,
+                                                                    }}
+                                                                />
+                                                            </TableCell>
+                                                            <TableCell
+                                                                component="th"
+                                                                id={labelId}
+                                                                scope="row"
+                                                                padding="none"
+                                                            >
+                                                                {row.name}
+                                                            </TableCell>
+                                                            <TableCell align="right">{row.calories}</TableCell>
+                                                            <TableCell align="right">{row.fat}</TableCell>
+                                                            <TableCell align="right">{row.carbs}</TableCell>
+                                                            <TableCell align="right">{row.protein}</TableCell>
+                                                            <TableCell align="right">{row.protein}</TableCell>
+                                                            <TableCell align="right">{row.protein}</TableCell>
+                                                        </TableRow>
+                                                    );
+                                                })}
+                                                {emptyRows > 0 && (
+                                                    <TableRow
+                                                        style={{
+                                                            height: (dense ? 33 : 53) * emptyRows,
+                                                        }}
+                                                    >
+                                                        <TableCell colSpan={6} />
+                                                    </TableRow>
+                                                )}
+                                            </TableBody>
+                                        </Table>
+                                    </TableContainer>
+                                    <TablePagination
+                                        rowsPerPageOptions={[5, 10, 25]}
+                                        component="div"
+                                        count={rows.length}
+                                        rowsPerPage={rowsPerPage}
+                                        page={page}
+                                        onPageChange={handleChangePage}
+                                        onRowsPerPageChange={handleChangeRowsPerPage}
+                                        />
+                                </Paper>
+                                <FormControlLabel
+                                    control={<Switch checked={dense} onChange={handleChangeDense} />}
+                                    label="Comprimir"
+                                    />
+                            </Box>
+                        </Col>
+                    </Row>
+                </Container>
             </div>
         </div>
     );