Browse Source

row selected type

amenpunk 3 years ago
parent
commit
d705de3fc2
3 changed files with 54 additions and 43 deletions
  1. 1 1
      src/Components/Password/Rows.js
  2. 21 24
      src/Components/Password/config.js
  3. 32 18
      src/Pages/Contras.jsx

+ 1 - 1
src/Components/Password/Rows.js

49
     },
49
     },
50
     {
50
     {
51
         id: 'ope',
51
         id: 'ope',
52
-        numeric: true,
52
+        numeric: false,
53
         disablePadding: false,
53
         disablePadding: false,
54
         label: 'Operacion',
54
         label: 'Operacion',
55
     },
55
     },

+ 21 - 24
src/Components/Password/config.js

12
 import {
12
 import {
13
     Delete as DeleteIcon,
13
     Delete as DeleteIcon,
14
     FilterList as FilterListIcon,
14
     FilterList as FilterListIcon,
15
-    // LastPage as LastPageIcon, FirstPage as FirstPageIcon, KeyboardArrowRight, KeyboardArrowLeft,
16
 } from '@mui/icons-material/'
15
 } from '@mui/icons-material/'
17
 
16
 
18
 export const rows = [
17
 export const rows = [
19
     createData('Cupcake', 305, 'Analista',109238109238, 'SI', 'SI', 'Nice', 'Good'),
18
     createData('Cupcake', 305, 'Analista',109238109238, 'SI', 'SI', 'Nice', 'Good'),
20
 ]
19
 ]
21
 
20
 
22
-for(let x of new Array(50)){
23
-    console.log(x)
24
-    rows.push(rows[0])
25
-}
21
+new Array(50).fill(50).forEach( (_,i) => {
22
+    rows.push({
23
+        ...rows[0],
24
+        nivel:i + 10000,
25
+        pass : Math.random().toString(36).slice(-6),
26
+    })
27
+})
26
 
28
 
29
+export const action_icon =  {
30
+    color: '#ec5e69',
31
+    fontSize: "20",
32
+    padding:1
33
+}
27
 
34
 
28
 export const TableEncabezadoOperation = (props) => {
35
 export const TableEncabezadoOperation = (props) => {
29
 
36
 
30
     const { numSelected } = props;
37
     const { numSelected } = props;
38
+
31
     return (
39
     return (
32
         <Toolbar
40
         <Toolbar
33
             sx={{
41
             sx={{
46
                     variant="subtitle1"
54
                     variant="subtitle1"
47
                     component="div"
55
                     component="div"
48
                 >
56
                 >
49
-                    {numSelected} selected
57
+                    {numSelected} Seleccionados
50
                 </Typography>
58
                 </Typography>
51
             ) : (
59
             ) : (
52
                     <Typography
60
                     <Typography
60
                 )}
68
                 )}
61
 
69
 
62
             {numSelected > 0 ? (
70
             {numSelected > 0 ? (
63
-                <Tooltip title="Delete">
71
+                <Tooltip title="Elimnar">
64
                     <IconButton>
72
                     <IconButton>
65
                         <DeleteIcon />
73
                         <DeleteIcon />
66
                     </IconButton>
74
                     </IconButton>
67
                 </Tooltip>
75
                 </Tooltip>
68
             ) : (
76
             ) : (
69
-                    <Tooltip title="Filter list">
77
+                    <Tooltip title="Buscar">
70
                         <IconButton>
78
                         <IconButton>
71
                             <FilterListIcon />
79
                             <FilterListIcon />
72
                         </IconButton>
80
                         </IconButton>
121
     return stabilizedThis.map((el) => el[0]);
129
     return stabilizedThis.map((el) => el[0]);
122
 }
130
 }
123
 
131
 
124
-export function TableHeader(props){
125
-
126
-    const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
127
-        props;
132
+export function EnhancedTableHead(props){
133
+    // header de la tabla
134
+    
135
+    const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
128
     const createSortHandler = (property) => (event) => {
136
     const createSortHandler = (property) => (event) => {
129
         onRequestSort(event, property);
137
         onRequestSort(event, property);
130
     };
138
     };
141
                         inputProps={{
149
                         inputProps={{
142
                             'aria-label': 'select all desserts',
150
                             'aria-label': 'select all desserts',
143
                         }}
151
                         }}
144
-                        />
152
+                    />
145
                 </TableCell>
153
                 </TableCell>
146
                 { encabezados.map( (headCell, index) => (
154
                 { encabezados.map( (headCell, index) => (
147
                     <TableCell
155
                     <TableCell
169
         </TableHead>
177
         </TableHead>
170
     );
178
     );
171
 }
179
 }
172
-
173
-export const action_icon =  {
174
-    color: '#ec5e69',
175
-    fontSize: "20",
176
-    padding:1
177
-    // background: '#ec5e69',
178
-    // color: "#fff",
179
-}
180
-
181
-
182
-

+ 32 - 18
src/Pages/Contras.jsx

11
     action_icon,
11
     action_icon,
12
     Comparar,
12
     Comparar,
13
     Cuerpo,
13
     Cuerpo,
14
-    TableHeader as EnhancedTableHead,
14
+    EnhancedTableHead,
15
     TableEncabezadoOperation
15
     TableEncabezadoOperation
16
 } from '../Components/Password/config.js';
16
 } from '../Components/Password/config.js';
17
 
17
 
29
 export function Contras() {
29
 export function Contras() {
30
 
30
 
31
     const [order, setOrder] = React.useState('asc');
31
     const [order, setOrder] = React.useState('asc');
32
-    const [orderBy, setOrderBy] = React.useState('calories');
32
+    const [orderBy, setOrderBy] = React.useState('pass');
33
     const [selected, setSelected] = React.useState([]);
33
     const [selected, setSelected] = React.useState([]);
34
     const [page, setPage] = React.useState(0);
34
     const [page, setPage] = React.useState(0);
35
     const [dense, setDense] = React.useState(false);
35
     const [dense, setDense] = React.useState(false);
36
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
36
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
37
 
37
 
38
-    const handleRequestSort = (_event, property) => {
38
+    const CambiarTipoOrden = (_event, property) => {
39
         const isAsc = orderBy === property && order === 'asc';
39
         const isAsc = orderBy === property && order === 'asc';
40
         setOrder(isAsc ? 'desc' : 'asc');
40
         setOrder(isAsc ? 'desc' : 'asc');
41
         setOrderBy(property);
41
         setOrderBy(property);
42
     };
42
     };
43
 
43
 
44
-    const handleSelectAllClick = (event) => {
45
-
44
+    const SeleccionarTodos = (event) => {
46
         if (event.target.checked) {
45
         if (event.target.checked) {
47
             const newSelecteds = rows.map( (n) => n.name);
46
             const newSelecteds = rows.map( (n) => n.name);
48
             setSelected(newSelecteds);
47
             setSelected(newSelecteds);
51
         setSelected([]);
50
         setSelected([]);
52
     };
51
     };
53
 
52
 
54
-    const handleClick = (__event, name) => {
53
+    const Seleccionar = (event, name) => {
54
+
55
         const selectedIndex = selected.indexOf(name);
55
         const selectedIndex = selected.indexOf(name);
56
         let newSelected = [];
56
         let newSelected = [];
57
 
57
 
58
+        console.log(name, selectedIndex)
59
+
58
         if (selectedIndex === -1) {
60
         if (selectedIndex === -1) {
59
             newSelected = newSelected.concat(selected, name);
61
             newSelected = newSelected.concat(selected, name);
60
         } else if (selectedIndex === 0) {
62
         } else if (selectedIndex === 0) {
96
                         <Col>
98
                         <Col>
97
                             <Box sx={{ width: '100%' }}>
99
                             <Box sx={{ width: '100%' }}>
98
                                 <Paper sx={{ width: '100%', mb: 2 }}>
100
                                 <Paper sx={{ width: '100%', mb: 2 }}>
101
+
99
                                     <TableEncabezadoOperation numSelected={selected.length} />
102
                                     <TableEncabezadoOperation numSelected={selected.length} />
103
+
100
                                     <TableContainer>
104
                                     <TableContainer>
105
+
101
                                         <Table
106
                                         <Table
102
                                             sx={{ minWidth: 750 }}
107
                                             sx={{ minWidth: 750 }}
103
                                             aria-labelledby="tableTitle"
108
                                             aria-labelledby="tableTitle"
104
-                                            size={dense ? 'small' : 'medium'}
109
+                                            size={dense ? 'small' : 'medium'} 
105
                                         >
110
                                         >
111
+
106
                                             <EnhancedTableHead
112
                                             <EnhancedTableHead
107
                                                 numSelected={selected.length}
113
                                                 numSelected={selected.length}
108
                                                 order={order}
114
                                                 order={order}
109
                                                 orderBy={orderBy}
115
                                                 orderBy={orderBy}
110
-                                                onSelectAllClick={handleSelectAllClick}
111
-                                                onRequestSort={handleRequestSort}
112
-                                                rowCount={rows.length}
113
-                                                />
116
+                                                onSelectAllClick={SeleccionarTodos}
117
+                                                onRequestSort={CambiarTipoOrden}
118
+                                                rowCount={rows.length} />
119
+
120
+
114
                                             <TableBody>
121
                                             <TableBody>
115
                                                 {Cuerpo(rows, Comparar(order, orderBy))
122
                                                 {Cuerpo(rows, Comparar(order, orderBy))
116
                                                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
123
                                                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
117
                                                 .map( (row, index) => {
124
                                                 .map( (row, index) => {
118
-                                                    const isItemSelected = isSelected(row.name);
125
+
126
+                                                    const isItemSelected = isSelected(row.pass);
119
                                                     const labelId = `enhanced-table-checkbox-${index}`;
127
                                                     const labelId = `enhanced-table-checkbox-${index}`;
120
 
128
 
121
                                                     return (
129
                                                     return (
122
                                                         <TableRow
130
                                                         <TableRow
123
                                                             hover
131
                                                             hover
124
-                                                            onClick={(event) => handleClick(event, row.name)}
132
+                                                            onClick={(event) => Seleccionar(event, row.pass)}
133
+                                                            // onClick={(event) => console.log(event)}
125
                                                             role="checkbox"
134
                                                             role="checkbox"
126
                                                             aria-checked={isItemSelected}
135
                                                             aria-checked={isItemSelected}
127
                                                             tabIndex={-1}
136
                                                             tabIndex={-1}
128
-                                                            key={row.name}
137
+                                                            key={row.pass}
129
                                                             selected={isItemSelected}
138
                                                             selected={isItemSelected}
130
                                                         >
139
                                                         >
131
                                                             <TableCell padding="checkbox">
140
                                                             <TableCell padding="checkbox">
135
                                                                     inputProps={{
144
                                                                     inputProps={{
136
                                                                         'aria-labelledby': labelId,
145
                                                                         'aria-labelledby': labelId,
137
                                                                     }}
146
                                                                     }}
138
-                                                                />
147
+                                                                    />
139
                                                             </TableCell>
148
                                                             </TableCell>
140
                                                             <TableCell
149
                                                             <TableCell
141
                                                                 component="th"
150
                                                                 component="th"
152
                                                             <TableCell align="right">{row.picture}</TableCell>
161
                                                             <TableCell align="right">{row.picture}</TableCell>
153
                                                             <TableCell align="right">{row.cv}</TableCell>
162
                                                             <TableCell align="right">{row.cv}</TableCell>
154
                                                             <TableCell align="right">{row.replic}</TableCell>
163
                                                             <TableCell align="right">{row.replic}</TableCell>
155
-                                                            <TableCell align="right">
164
+                                                            <TableCell align="center">
156
                                                                 <EditSharp  style={action_icon} />
165
                                                                 <EditSharp  style={action_icon} />
157
                                                                 <MailSharp style={action_icon}/>
166
                                                                 <MailSharp style={action_icon}/>
158
                                                             </TableCell>
167
                                                             </TableCell>
171
                                             </TableBody>
180
                                             </TableBody>
172
                                         </Table>
181
                                         </Table>
173
                                     </TableContainer>
182
                                     </TableContainer>
183
+
174
                                     <TablePagination
184
                                     <TablePagination
175
                                         rowsPerPageOptions={[5, 10, 25]}
185
                                         rowsPerPageOptions={[5, 10, 25]}
176
                                         component="div"
186
                                         component="div"
179
                                         page={page}
189
                                         page={page}
180
                                         onPageChange={handleChangePage}
190
                                         onPageChange={handleChangePage}
181
                                         onRowsPerPageChange={handleChangeRowsPerPage}
191
                                         onRowsPerPageChange={handleChangeRowsPerPage}
182
-                                        />
192
+                                    />
193
+
194
+
183
                                 </Paper>
195
                                 </Paper>
196
+
184
                                 <FormControlLabel
197
                                 <FormControlLabel
185
                                     control={<Switch checked={dense} onChange={handleChangeDense} />}
198
                                     control={<Switch checked={dense} onChange={handleChangeDense} />}
186
                                     label="Comprimir"
199
                                     label="Comprimir"
187
-                                    />
200
+                                />
201
+
188
                             </Box>
202
                             </Box>
189
                         </Col>
203
                         </Col>
190
                     </Row>
204
                     </Row>