|
@@ -6,76 +6,76 @@ import EditI from '@mui/icons-material/Edit';
|
6
|
6
|
import Deletei from '@mui/icons-material/Delete';
|
7
|
7
|
|
8
|
8
|
export function ListMode(props) {
|
9
|
|
-
|
10
|
|
- const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
|
11
|
|
- let { data, index, showing } = props;
|
12
|
9
|
|
13
|
|
- const isMovil = Size('(min-width:770px)');
|
|
10
|
+ const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
|
|
11
|
+ let { data, index, showing } = props;
|
14
|
12
|
|
15
|
|
- return(
|
16
|
|
- <Col md="12">
|
17
|
|
- <div className={!isMovil ? "body-table-responsive" : "body-table"}>
|
18
|
|
- <Table responsive borderless id="tablaproductos" style={{ color : 'white' }}>
|
19
|
|
- <thead>
|
20
|
|
- <tr >
|
21
|
|
- <th className="text-center">Nombre</th>
|
22
|
|
- <th className="text-center">Descripción</th>
|
23
|
|
- <th className="text-center">Creación</th>
|
24
|
|
- <th className="text-center">Acción</th>
|
25
|
|
- </tr>
|
26
|
|
- </thead>
|
27
|
|
- <tbody>
|
28
|
|
- {
|
29
|
|
- data.length && showing === 'list' ?
|
30
|
|
- data[index].map( (plaza) => {
|
31
|
|
- return (
|
32
|
|
- <Zoom key={plaza.id} in={true}>
|
33
|
|
- <tr >
|
34
|
|
- <td className="text-center">{ plaza.nombrepuesto }</td>
|
35
|
|
- <td className="text-center">{plaza.notas.length > 50 ? plaza.notas.slice(0,50) + "...." : plaza.notas }</td>
|
36
|
|
- <td className="text-center">{ new Date( plaza.createday ).toLocaleDateString('es-GT',opciones) }</td>
|
37
|
|
- <TableCell
|
38
|
|
- sx={{
|
39
|
|
- "display":'flex',
|
40
|
|
- "flexDirection":'row',
|
41
|
|
- "justifyContent": "space-between !important",
|
42
|
|
- "flexWrap": !isMovil ? "wrap": "nowrap",
|
43
|
|
- }}
|
44
|
|
- className="actions_butons_plaza">
|
45
|
|
- <Button
|
46
|
|
- onClick={() => props.toggle("VER", plaza)}
|
47
|
|
- className="ver_producto">
|
48
|
|
- {!isMovil ? <ShowI/> : "Ver"}
|
49
|
|
- </Button>
|
50
|
|
- <Button
|
51
|
|
- onClick={() => props.toggle("EDIT", plaza)}
|
52
|
|
- className="editar_producto">
|
53
|
|
- {!isMovil ? <EditI/> : "Editar"}
|
54
|
|
- </Button>
|
55
|
|
- <Button
|
56
|
|
- onClick={() => {
|
57
|
|
- console.log("ELIMINAR")
|
58
|
|
- }}
|
59
|
|
- className="eliminar_producto">
|
60
|
|
- {!isMovil ? <Deletei/> : "Eliminar"}
|
61
|
|
- </Button>
|
62
|
|
- </TableCell>
|
63
|
|
- </tr>
|
64
|
|
- </Zoom>
|
65
|
|
- )
|
66
|
|
- }) : undefined
|
67
|
|
- }
|
68
|
|
- </tbody>
|
69
|
|
- <tfoot>
|
70
|
|
- <tr>
|
71
|
|
- <th className="text-center">Nombre de la plaza</th>
|
72
|
|
- <th className="text-center">Descripción</th>
|
73
|
|
- <th className="text-center">Salario</th>
|
74
|
|
- <th className="text-center">Acciones</th>
|
75
|
|
- </tr>
|
76
|
|
- </tfoot>
|
77
|
|
- </Table>
|
78
|
|
- </div>
|
79
|
|
- </Col>
|
80
|
|
- )
|
|
13
|
+ const isMovil = Size('(min-width:770px)');
|
|
14
|
+
|
|
15
|
+ return(
|
|
16
|
+ <Col md="12">
|
|
17
|
+ <div className={!isMovil ? "body-table-responsive" : "body-table"}>
|
|
18
|
+ <Table responsive borderless id="tablaproductos" style={{ color : 'white' }}>
|
|
19
|
+ <thead>
|
|
20
|
+ <tr >
|
|
21
|
+ <th className="text-center">Nombre</th>
|
|
22
|
+ <th className="text-center">Descripción</th>
|
|
23
|
+ <th className="text-center">Creación</th>
|
|
24
|
+ <th className="text-center">Acción</th>
|
|
25
|
+ </tr>
|
|
26
|
+ </thead>
|
|
27
|
+ <tbody>
|
|
28
|
+ {
|
|
29
|
+ data.length && showing === 'list' ?
|
|
30
|
+ data[index].map( (plaza) => {
|
|
31
|
+ return (
|
|
32
|
+ <Zoom key={plaza.id} in={true}>
|
|
33
|
+ <tr >
|
|
34
|
+ <td className="text-center">{ plaza.nombrepuesto }</td>
|
|
35
|
+ <td className="text-center">{plaza.notas.length > 50 ? plaza.notas.slice(0,50) + "...." : plaza.notas }</td>
|
|
36
|
+ <td className="text-center">{ new Date( plaza.createday ).toLocaleDateString('es-GT',opciones) }</td>
|
|
37
|
+ <TableCell
|
|
38
|
+ sx={{
|
|
39
|
+ "display":'flex',
|
|
40
|
+ "flexDirection":'row',
|
|
41
|
+ "justifyContent": "space-between !important",
|
|
42
|
+ "flexWrap": !isMovil ? "wrap": "nowrap",
|
|
43
|
+ }}
|
|
44
|
+ className="actions_butons_plaza">
|
|
45
|
+ <Button
|
|
46
|
+ onClick={() => props.toggle("VER", plaza)}
|
|
47
|
+ className="ver_producto">
|
|
48
|
+ {!isMovil ? <ShowI/> : "Ver"}
|
|
49
|
+ </Button>
|
|
50
|
+ <Button
|
|
51
|
+ onClick={() => props.toggle("EDIT", plaza)}
|
|
52
|
+ className="editar_producto">
|
|
53
|
+ {!isMovil ? <EditI/> : "Editar"}
|
|
54
|
+ </Button>
|
|
55
|
+ <Button
|
|
56
|
+ onClick={() => {
|
|
57
|
+ console.log("ELIMINAR")
|
|
58
|
+ }}
|
|
59
|
+ className="eliminar_producto">
|
|
60
|
+ {!isMovil ? <Deletei/> : "Eliminar"}
|
|
61
|
+ </Button>
|
|
62
|
+ </TableCell>
|
|
63
|
+ </tr>
|
|
64
|
+ </Zoom>
|
|
65
|
+ )
|
|
66
|
+ }) : undefined
|
|
67
|
+ }
|
|
68
|
+ </tbody>
|
|
69
|
+ <tfoot>
|
|
70
|
+ <tr>
|
|
71
|
+ <th className="text-center">Nombre de la plaza</th>
|
|
72
|
+ <th className="text-center">Descripción</th>
|
|
73
|
+ <th className="text-center">Salario</th>
|
|
74
|
+ <th className="text-center">Acciones</th>
|
|
75
|
+ </tr>
|
|
76
|
+ </tfoot>
|
|
77
|
+ </Table>
|
|
78
|
+ </div>
|
|
79
|
+ </Col>
|
|
80
|
+ )
|
81
|
81
|
}
|