Home Explore Help
Register Sign In
SuperAdminQA
/
psicoadmin
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 372 Releases 0 Wiki
Browse Source

[add] responsive show menu

amenpunk 3 years ago
parent
a0a9ee5f93
commit
2cad98280d
4 changed files with 587 additions and 28 deletions
Unified View Show Diff Stats
  1. 52 27
      psicoadmin/src/Components/Dashboard.js
  2. 99 0
      psicoadmin/src/Components/HeaderMobile.js
  3. 34 0
      psicoadmin/src/Components/MenuMovil.js
  4. 402 1
      psicoadmin/src/Pages/Puestos.js

+ 52 - 27
psicoadmin/src/Components/Dashboard.js
View File

1 
-import React, { useEffect, useState, useMemo } from 'react';
1 
+import React, { useEffect, useState, useMemo, useRef } from 'react';
2 
 import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
 2 
 import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
3 
 import CssBaseline from '@mui/material/CssBaseline';
 3 
 import CssBaseline from '@mui/material/CssBaseline';
4 
 import MuiDrawer from '@mui/material/Drawer';
 4 
 import MuiDrawer from '@mui/material/Drawer';
30
30
31 
 import useAuth from '../Auth/useAuth';
 31 
 import useAuth from '../Auth/useAuth';
32 
 import { Outlet, useNavigate} from "react-router-dom";
 32 
 import { Outlet, useNavigate} from "react-router-dom";
33 
+import MenuMovil from "./MenuMovil";
33
34
34
35
35 
 const drawerWidth = 240;
 36 
 const drawerWidth = 240;
56 
     const [width, setWidth] = useState(window.innerWidth);
 57 
     const [width, setWidth] = useState(window.innerWidth);
57 
     const handleWindowSizeChange = () => {
 58 
     const handleWindowSizeChange = () => {
58 
         let size = window.innerWidth;
 59 
         let size = window.innerWidth;
59 
-        console.log('SIZE >', size)
60 
         setWidth(size);
 60 
         setWidth(size);
61 
     }
 61 
     }
62
62
103 
 function DashboardContent() {
 103 
 function DashboardContent() {
104
104
105 
     const [open, setOpen] = React.useState(false);
 105 
     const [open, setOpen] = React.useState(false);
106 
+    const elRef = useRef();
107 
+
106
108
107 
     const toggleDrawer = () => setOpen(!open);
 109 
     const toggleDrawer = () => setOpen(!open);
108 
     const auth = useAuth();
 110 
     const auth = useAuth();
111 
     const [anchorEl, setAnchorEl] = React.useState(null);
 113 
     const [anchorEl, setAnchorEl] = React.useState(null);
112 
     const open_profile = Boolean(anchorEl);
 114 
     const open_profile = Boolean(anchorEl);
113 
     const handleClick = (event) => setAnchorEl(event.currentTarget);
 115 
     const handleClick = (event) => setAnchorEl(event.currentTarget);
114 
-    const handleClose = () => setAnchorEl(null);
116 
+    const handleClose = () => setAnchorEl(null)
117 
+
118 
+    const [anchorElMovil, setAnchorElMov] = React.useState(null);
119 
+    const openMov = Boolean(anchorElMovil);
120 
+    const handleCloseMov = () => {
121 
+        setAnchorElMov(null);
122 
+    };
115
123
116 
     const MenuResponsive = ()  => {
 124 
     const MenuResponsive = ()  => {
117 
-        console.log('show menu responsive')
125 
+        setAnchorElMov(elRef.current);
118 
     }
126 
     }
119
127
120 
     const CerrarSession = () => {
 128 
     const CerrarSession = () => {
123 
         navigate('/')
 131 
         navigate('/')
124 
     }
132 
     }
125
133
126 
-
127 
     return (
 134 
     return (
128 
         <ThemeProvider theme={mdTheme}>
 135 
         <ThemeProvider theme={mdTheme}>
129 
             <Box sx={{ display: 'flex' }}>
 136 
             <Box sx={{ display: 'flex' }}>
132
139
133 
                     <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >
 140 
                     <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >
134
141
135 
-                        <IconButton
136 
-                            edge="start"
137 
-                            color="inherit"
138 
-                            aria-label="open drawer"
139 
-                            onClick={ useCheckMobileScreen() ? MenuResponsive : toggleDrawer }
140 
-                            // onClick={ () => console.log('que estoy haciendo con mi vida') }
141 
-                            sx={{ marginRight: '36px', ...( !useCheckMobileScreen() && open && { display: 'none' }), }} >
142 
-
143 
-                            <MenuIcon  style={{
144 
-                                background: '#ec5e69',
145 
-                                fontSize: "40",
146 
-                                color: "#fff"
147 
-                            }}/>
148 
-                        </IconButton>
142 
+                        <div ref={elRef}>
143 
+                            <IconButton
144 
+                                edge="start"
145 
+                                color="inherit"
146 
+                                aria-label="open drawer"
147 
+                                onClick={ useCheckMobileScreen() ? MenuResponsive : toggleDrawer }
148 
+                                // onClick={ () => console.log('que estoy haciendo con mi vida') }
149 
+                                sx={{ marginRight: '36px', ...( !useCheckMobileScreen() && open && { display: 'none' }), }} >
150 
+
151 
+                                <MenuIcon  style={{
152 
+                                    background: '#ec5e69',
153 
+                                    fontSize: "40",
154 
+                                    color: "#fff"
155 
+                                }}/>
156 
+                            </IconButton>
157 
+
158 
+                              <Menu
159 
+                                id="basic-menu"
160 
+                                anchorEl={anchorElMovil}
161 
+                                open={openMov}
162 
+                                onClose={handleCloseMov}
163 
+                                MenuListProps={{
164 
+                                  'aria-labelledby': 'basic-button',
165 
+                                }}
166 
+                                                      >
167 
+                                  <MenuItem onClick={handleCloseMov}>Profile</MenuItem>
168 
+                                  <MenuItem onClick={handleCloseMov}>My account</MenuItem>
169 
+                                  <MenuItem onClick={handleCloseMov}>Logout</MenuItem>
170 
+                              </Menu>
171 
+
172 
+
173 
+
174 
+
175 
+                        </div>
149
176
150 
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
 177 
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
151
178
179 
                             <IconButton
 206 
                             <IconButton
180 
                                 size="large"
 207 
                                 size="large"
181 
                                 aria-label="show 17 new notifications"
 208 
                                 aria-label="show 17 new notifications"
182 
-                                color="inherit"
183 
-                            >
209 
+                                color="inherit">
184 
                                 <Badge badgeContent={17} color="error">
 210 
                                 <Badge badgeContent={17} color="error">
185 
                                     <NotificationsIcon style={{ color : '#212529' }}/>
 211 
                                     <NotificationsIcon style={{ color : '#212529' }}/>
186 
                                 </Badge>
 212 
                                 </Badge>
196 
                                 onClick={handleClick}
 222 
                                 onClick={handleClick}
197 
                                 color="inherit"
 223 
                                 color="inherit"
198 
                             >
 224 
                             >
199 
-                                <Avatar alt="Cindy Baker" src={ProfilePicture} />
225 
+                            <Avatar alt="Cindy Baker" src={ProfilePicture} />
200
226
201 
                             </IconButton>
 227 
                             </IconButton>
202 
                             <Menu
 228 
                             <Menu
204 
                                 anchorEl={anchorEl}
 230 
                                 anchorEl={anchorEl}
205 
                                 open={open_profile}
 231 
                                 open={open_profile}
206 
                                 onClose={handleClose}
 232 
                                 onClose={handleClose}
207 
-                                MenuListProps={{
208 
-                                    'aria-labelledby': 'basic-button',
209 
-                                }}
210 
-                            >
233 
+                                MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
211 
                                 <MenuItem onClick={() => console.log('opcion 1') }>Profile</MenuItem>
 234 
                                 <MenuItem onClick={() => console.log('opcion 1') }>Profile</MenuItem>
212 
                                 <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
 235 
                                 <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
213 
                                 <MenuItem onClick={CerrarSession}>Logout</MenuItem>
 236 
                                 <MenuItem onClick={CerrarSession}>Logout</MenuItem>
242 
                         <MainListItems/>
 265 
                         <MainListItems/>
243 
                     </List>
 266 
                     </List>
244 
                     <Divider />
 267 
                     <Divider />
245 
-                    <List>{secondaryListItems}</List>
268 
+                    <List>
269 
+                        {secondaryListItems}
270 
+                    </List>
246 
                 </Drawer>
 271 
                 </Drawer>
247 
                 <Box component="main" sx={{ backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], flexGrow: 1, height: '100vh', overflow: 'auto', }} >
 272 
                 <Box component="main" sx={{ backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], flexGrow: 1, height: '100vh', overflow: 'auto', }} >
248
273

+ 99 - 0
psicoadmin/src/Components/HeaderMobile.js
View File

1 
+export default function HeaderMobile () {
2 
+    return(
3 
+        <div className="header_mobile">
4 
+            <div className="column">
5 
+                <div id="dl-menu" className="dl-menuwrapper">
6 
+                    <button className="dl-trigger"></button>
7 
+                    <ul className="dl-menu">
8 
+                        <li>
9 
+                            <a href="index.php">Inicio</a>
10 
+                        </li>
11 
+                        <li>
12 
+                            <a href="puestos.php">Puestos</a>
13 
+                        </li>
14 
+                        <li>
15 
+                            <a href="contraseñas.php">Contraseñas</a>
16 
+                        </li>
17 
+                        <li>
18 
+                            <a href="expedientes.php">Expedientes</a>
19 
+                        </li>
20 
+                        <li>
21 
+                            <a href="resultados.php">Resultados</a>
22 
+                        </li>
23 
+                        <li>
24 
+                            <a href="contraseñas.php">Contraseñas</a>
25 
+                        </li>
26 
+                        <li>
27 
+                            <a href="#">Pruebas<i className="fa fa-angle-right" aria-hidden="true"></i></a>
28 
+                            <ul className="dl-submenu">
29 
+                                <li>
30 
+                                    <a href="#">Crear prueba</a>
31 
+                                </li>
32 
+                                <li>
33 
+                                    <a href="#">Listado de pruebas</a>
34 
+                                </li>
35 
+                                <li>
36 
+                                    <a href="#">Aplicar</a>
37 
+                                </li>
38 
+                                <li>
39 
+                                    <a href="#">Respuestas</a>
40 
+                                </li>
41 
+                                <li>
42 
+                                    <a href="#">Calificaciones</a>
43 
+                                </li>
44 
+                            </ul>
45 
+                        </li>
46 
+                        <li>
47 
+                            <a href="#">Configuraciones</a>
48 
+                        </li>
49 
+                        <li>
50 
+                            <a href="#">Historial</a>
51 
+                        </li>
52 
+                        <li>
53 
+                            <a href="#">Tutoriales<i className="fa fa-angle-right" aria-hidden="true"></i></a>
54 
+                            <ul className="dl-submenu">
55 
+                                <li>
56 
+                                    <a href="#">Manual de Uso Básico</a>
57 
+                                </li>
58 
+                                <li>
59 
+                                    <a href="#">¿Qué evalúa cada test?</a>
60 
+                                </li>
61 
+                                <li>
62 
+                                    <a href="#">Ayuda General</a>
63 
+                                </li>
64 
+                            </ul>
65 
+                        </li>
66 
+                        <li>
67 
+                            <a href="#">Asistencia Técnica<i className="fa fa-angle-right" aria-hidden="true"></i></a>
68 
+                            <ul className="dl-submenu">
69 
+                                <li>
70 
+                                    <a href="#">Soporte En Línea</a>
71 
+                                </li>
72 
+                                <li>
73 
+                                    <a href="#">Soporte Por Ticket</a>
74 
+                                </li>
75 
+                            </ul>
76 
+                        </li>
77 
+                        <li>
78 
+                            <a href="#">Notificaciones</a>
79 
+                        </li>
80 
+                        <li>
81 
+                            <a href="#">Cuenta<i className="fa fa-angle-right" aria-hidden="true"></i></a>
82 
+                            <ul className="dl-submenu">
83 
+                                <li>
84 
+                                    <a href="#">Perfil</a>
85 
+                                </li>
86 
+                                <li>
87 
+                                    <a href="#">Configuraciones</a>
88 
+                                </li>
89 
+                                <li>
90 
+                                    <a href="#">Cerrar sesión</a>
91 
+                                </li>
92 
+                            </ul>
93 
+                        </li>
94 
+                    </ul>
95 
+                </div>
96 
+            </div>
97 
+        </div>
98 
+    )
99 
+}

+ 34 - 0
psicoadmin/src/Components/MenuMovil.js
View File

1 
+import * as React from 'react';
2 
+import Menu from '@mui/material/Menu';
3 
+import MenuItem from '@mui/material/MenuItem';
4 
+
5 
+export default function MenuMovil(props) {
6 
+
7 
+    const [anchorEl, setAnchorEl] = React.useState(props.open);
8 
+    const open = Boolean(anchorEl);
9 
+
10 
+    const handleClick = (event) => {
11 
+        setAnchorEl(event.currentTarget);
12 
+    };
13 
+    const handleClose = () => {
14 
+        console.log('cerrando el componente')
15 
+        // setAnchorEl(null);
16 
+    };
17 
+
18 
+    return (
19 
+        <div>
20 
+            <Menu
21 
+                id="basic-menu"
22 
+                anchorEl={anchorEl}
23 
+                open={open}
24 
+                onClose={handleClose}
25 
+                MenuListProps={{ 'aria-labelledby': 'basic-button', }}
26 
+            >
27 
+                <MenuItem onClick={handleClose}>Profile</MenuItem>
28 
+                <MenuItem onClick={handleClose}>My account</MenuItem>
29 
+                <MenuItem onClick={handleClose}>Logout</MenuItem>
30 
+            </Menu>
31 
+        </div>
32 
+    );
33 
+
34 
+}

+ 402 - 1
psicoadmin/src/Pages/Puestos.js
View File

1 
 export function Puestos() {
 1 
 export function Puestos() {
2 
-    return ( <h1>Puestos</h1>
2 
+    return (
3 
+        <div id="content" style={{ paddingTop : 150 }}>
4 
+            <div class="content-section">
5 
+                <div class="main">
6 
+                    <h1 class="breadcrumb-header">Plazas</h1>
7 
+                    <div class="row">
8 
+                        <div class="col-md-6">
9 
+                            <div class="list_view">
10 
+                                <div class="row">
11 
+                                    <div class="colgrilla">
12 
+                                        <div class="btn_view">
13 
+                                            <a class="activar_vista" id="list_click" tooltip-location="top" tooltip-animate tooltip="Ver como lista" onclick="activarlista()"><i class="fas fa-list"></i></a>
14 
+                                        </div>
15 
+                                    </div>
16 
+                                    <div class="colgrilla">
17 
+                                        <div class="btn_view">
18 
+                                            <a id="grid_click" tooltip-location="top" tooltip-animate tooltip="Ver como grupo" onclick="activargrid()"><i class="fas fa-th"></i></a>
19 
+                                        </div>
20 
+                                    </div>
21 
+                                </div>
22 
+                            </div>
23 
+                        </div>
24 
+                        <div class="col-md-6">
25 
+                            <div class="add_producto">
26 
+                                <div class="btn_add_producto">
27 
+                                    <a href="#" data-toggle="modal" data-target="#addProducto">Agregar manual</a>
28 
+                                </div>
29 
+                            </div>
30 
+                            <div class="add_producto">
31 
+                                <div class="btn_add_producto">
32 
+                                    <a href="#" data-toggle="modal" data-target="#addProductoExpress">Agregar express</a>
33 
+                                </div>
34 
+                            </div>
35 
+                        </div>
36 
+                    </div>
37 
+                    <div class="main_productos" id="grid_view">
38 
+                        <div class="row">
39 
+                            <div class="col-md-3">
40 
+                                <div class="panel">
41 
+                                    <div class="row">
42 
+                                        <div class="col-md-4">
43 
+                                            <div class="img-container">
44 
+                                                <img src="images/not_found.png"/>
45 
+                                            </div>
46 
+                                        </div>
47 
+                                        <div class="col-md-8">
48 
+                                            <div class="info_details">
49 
+                                                <p>Nombre de la plaza</p>
50 
+                                                <p>Descripción</p>
51 
+                                                <p>Salario</p>
52 
+                                                <div class="botones_interactivos">
53 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
54 
+                                                </div>
55 
+                                                <div class="botones_interactivos">
56 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
57 
+                                                </div>
58 
+                                                <div class="botones_interactivos">
59 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
60 
+                                                </div>
61 
+                                            </div>
62 
+                                        </div>
63 
+                                    </div>
64 
+                                </div>
65 
+                            </div>
66 
+                            <div class="col-md-3">
67 
+                                <div class="panel">
68 
+                                    <div class="row">
69 
+                                        <div class="col-md-4">
70 
+                                            <div class="img-container">
71 
+                                                <img src="images/not_found.png"/>
72 
+                                            </div>
73 
+                                        </div>
74 
+                                        <div class="col-md-8">
75 
+                                            <div class="info_details">
76 
+                                                <p>Nombre de la plaza</p>
77 
+                                                <p>Descripción</p>
78 
+                                                <p>Salario</p>
79 
+                                                <div class="botones_interactivos">
80 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
81 
+                                                </div>
82 
+                                                <div class="botones_interactivos">
83 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
84 
+                                                </div>
85 
+                                                <div class="botones_interactivos">
86 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
87 
+                                                </div>
88 
+                                            </div>
89 
+                                        </div>
90 
+                                    </div>
91 
+                                </div>
92 
+                            </div>
93 
+                            <div class="col-md-3">
94 
+                                <div class="panel">
95 
+                                    <div class="row">
96 
+                                        <div class="col-md-4">
97 
+                                            <div class="img-container">
98 
+                                                <img src="images/not_found.png"/>
99 
+                                            </div>
100 
+                                        </div>
101 
+                                        <div class="col-md-8">
102 
+                                            <div class="info_details">
103 
+                                                <p>Nombre de la plaza</p>
104 
+                                                <p>Descripción</p>
105 
+                                                <p>Salario</p>
106 
+                                                <div class="botones_interactivos">
107 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
108 
+                                                </div>
109 
+                                                <div class="botones_interactivos">
110 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
111 
+                                                </div>
112 
+                                                <div class="botones_interactivos">
113 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
114 
+                                                </div>
115 
+                                            </div>
116 
+                                        </div>
117 
+                                    </div>
118 
+                                </div>
119 
+                            </div>
120 
+                            <div class="col-md-3">
121 
+                                <div class="panel">
122 
+                                    <div class="row">
123 
+                                        <div class="col-md-4">
124 
+                                            <div class="img-container">
125 
+                                                <img src="images/not_found.png"/>
126 
+                                            </div>
127 
+                                        </div>
128 
+                                        <div class="col-md-8">
129 
+                                            <div class="info_details">
130 
+                                                <p>Nombre de la plaza</p>
131 
+                                                <p>Descripción</p>
132 
+                                                <p>Salario</p>
133 
+                                                <div class="botones_interactivos">
134 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
135 
+                                                </div>
136 
+                                                <div class="botones_interactivos">
137 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
138 
+                                                </div>
139 
+                                                <div class="botones_interactivos">
140 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
141 
+                                                </div>
142 
+                                            </div>
143 
+                                        </div>
144 
+                                    </div>
145 
+                                </div>
146 
+                            </div>
147 
+                            <div class="col-md-3">
148 
+                                <div class="panel">
149 
+                                    <div class="row">
150 
+                                        <div class="col-md-4">
151 
+                                            <div class="img-container">
152 
+                                                <img src="images/not_found.png"/>
153 
+                                            </div>
154 
+                                        </div>
155 
+                                        <div class="col-md-8">
156 
+                                            <div class="info_details">
157 
+                                                <p>Nombre de la plaza</p>
158 
+                                                <p>Descripción</p>
159 
+                                                <p>Salario</p>
160 
+                                                <div class="botones_interactivos">
161 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
162 
+                                                </div>
163 
+                                                <div class="botones_interactivos">
164 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
165 
+                                                </div>
166 
+                                                <div class="botones_interactivos">
167 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
168 
+                                                </div>
169 
+                                            </div>
170 
+                                        </div>
171 
+                                    </div>
172 
+                                </div>
173 
+                            </div>
174 
+                            <div class="col-md-3">
175 
+                                <div class="panel">
176 
+                                    <div class="row">
177 
+                                        <div class="col-md-4">
178 
+                                            <div class="img-container">
179 
+                                                <img src="images/not_found.png"/>
180 
+                                            </div>
181 
+                                        </div>
182 
+                                        <div class="col-md-8">
183 
+                                            <div class="info_details">
184 
+                                                <p>Nombre de la plaza</p>
185 
+                                                <p>Descripción</p>
186 
+                                                <p>Salario</p>
187 
+                                                <div class="botones_interactivos">
188 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
189 
+                                                </div>
190 
+                                                <div class="botones_interactivos">
191 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
192 
+                                                </div>
193 
+                                                <div class="botones_interactivos">
194 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
195 
+                                                </div>
196 
+                                            </div>
197 
+                                        </div>
198 
+                                    </div>
199 
+                                </div>
200 
+                            </div>
201 
+                            <div class="col-md-3">
202 
+                                <div class="panel">
203 
+                                    <div class="row">
204 
+                                        <div class="col-md-4">
205 
+                                            <div class="img-container">
206 
+                                                <img src="images/not_found.png"/>
207 
+                                            </div>
208 
+                                        </div>
209 
+                                        <div class="col-md-8">
210 
+                                            <div class="info_details">
211 
+                                                <p>Nombre de la plaza</p>
212 
+                                                <p>Descripción</p>
213 
+                                                <p>Salario</p>
214 
+                                                <div class="botones_interactivos">
215 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
216 
+                                                </div>
217 
+                                                <div class="botones_interactivos">
218 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
219 
+                                                </div>
220 
+                                                <div class="botones_interactivos">
221 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
222 
+                                                </div>
223 
+                                            </div>
224 
+                                        </div>
225 
+                                    </div>
226 
+                                </div>
227 
+                            </div>
228 
+                            <div class="col-md-3">
229 
+                                <div class="panel">
230 
+                                    <div class="row">
231 
+                                        <div class="col-md-4">
232 
+                                            <div class="img-container">
233 
+                                                <img src="images/not_found.png"/>
234 
+                                            </div>
235 
+                                        </div>
236 
+                                        <div class="col-md-8">
237 
+                                            <div class="info_details">
238 
+                                                <p>Nombre de la plaza</p>
239 
+                                                <p>Descripción</p>
240 
+                                                <p>Salario</p>
241 
+                                                <div class="botones_interactivos">
242 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
243 
+                                                </div>
244 
+                                                <div class="botones_interactivos">
245 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
246 
+                                                </div>
247 
+                                                <div class="botones_interactivos">
248 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
249 
+                                                </div>
250 
+                                            </div>
251 
+                                        </div>
252 
+                                    </div>
253 
+                                </div>
254 
+                            </div>
255 
+                            <div class="col-md-3">
256 
+                                <div class="panel">
257 
+                                    <div class="row">
258 
+                                        <div class="col-md-4">
259 
+                                            <div class="img-container">
260 
+                                                <img src="images/not_found.png"/>
261 
+                                            </div>
262 
+                                        </div>
263 
+                                        <div class="col-md-8">
264 
+                                            <div class="info_details">
265 
+                                                <p>Nombre de la plaza</p>
266 
+                                                <p>Descripción</p>
267 
+                                                <p>Salario</p>
268 
+                                                <div class="botones_interactivos">
269 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
270 
+                                                </div>
271 
+                                                <div class="botones_interactivos">
272 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
273 
+                                                </div>
274 
+                                                <div class="botones_interactivos">
275 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
276 
+                                                </div>
277 
+                                            </div>
278 
+                                        </div>
279 
+                                    </div>
280 
+                                </div>
281 
+                            </div>
282 
+                            <div class="col-md-3">
283 
+                                <div class="panel">
284 
+                                    <div class="row">
285 
+                                        <div class="col-md-4">
286 
+                                            <div class="img-container">
287 
+                                                <img src="images/not_found.png"/>
288 
+                                            </div>
289 
+                                        </div>
290 
+                                        <div class="col-md-8">
291 
+                                            <div class="info_details">
292 
+                                                <p>Nombre de la plaza</p>
293 
+                                                <p>Descripción</p>
294 
+                                                <p>Salario</p>
295 
+                                                <div class="botones_interactivos">
296 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
297 
+                                                </div>
298 
+                                                <div class="botones_interactivos">
299 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
300 
+                                                </div>
301 
+                                                <div class="botones_interactivos">
302 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
303 
+                                                </div>
304 
+                                            </div>
305 
+                                        </div>
306 
+                                    </div>
307 
+                                </div>
308 
+                            </div>
309 
+                            <div class="col-md-3">
310 
+                                <div class="panel">
311 
+                                    <div class="row">
312 
+                                        <div class="col-md-4">
313 
+                                            <div class="img-container">
314 
+                                                <img src="images/not_found.png"/>
315 
+                                            </div>
316 
+                                        </div>
317 
+                                        <div class="col-md-8">
318 
+                                            <div class="info_details">
319 
+                                                <p>Nombre de la plaza</p>
320 
+                                                <p>Descripción</p>
321 
+                                                <p>Salario</p>
322 
+                                                <div class="botones_interactivos">
323 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
324 
+                                                </div>
325 
+                                                <div class="botones_interactivos">
326 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
327 
+                                                </div>
328 
+                                                <div class="botones_interactivos">
329 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
330 
+                                                </div>
331 
+                                            </div>
332 
+                                        </div>
333 
+                                    </div>
334 
+                                </div>
335 
+                            </div>
336 
+                            <div class="col-md-3">
337 
+                                <div class="panel">
338 
+                                    <div class="row">
339 
+                                        <div class="col-md-4">
340 
+                                            <div class="img-container">
341 
+                                                <img src="images/not_found.png"/>
342 
+                                            </div>
343 
+                                        </div>
344 
+                                        <div class="col-md-8">
345 
+                                            <div class="info_details">
346 
+                                                <p>Nombre de la plaza</p>
347 
+                                                <p>Descripción</p>
348 
+                                                <p>Salario</p>
349 
+                                                <div class="botones_interactivos">
350 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
351 
+                                                </div>
352 
+                                                <div class="botones_interactivos">
353 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
354 
+                                                </div>
355 
+                                                <div class="botones_interactivos">
356 
+                                                    <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
357 
+                                                </div>
358 
+                                            </div>
359 
+                                        </div>
360 
+                                    </div>
361 
+                                </div>
362 
+                            </div>
363 
+                        </div>
364 
+                    </div>
365 
+                    <div class="main_list_products" id="list_view_products">
366 
+                        <div class="row">
367 
+                            <div class="col-md-12">
368 
+                                <div class="body-table">
369 
+                                    <table id="tablaproductos" class="display" style={{ width : "100%" }}>
370 
+                                        <thead>
371 
+                                            <tr>
372 
+                                                <th>Nombre de la plaza</th>
373 
+                                                <th>Descripción</th>
374 
+                                                <th>Salario</th>
375 
+                                                <th>Acciones</th>
376 
+                                            </tr>
377 
+                                        </thead>
378 
+                                        <tbody>
379 
+                                            <tr>
380 
+                                                <td>Nombre de la plaza</td>
381 
+                                                <td>Descripción</td>
382 
+                                                <td>Salario</td>
383 
+                                                <td><a href="#" class="ver_producto" data-toggle="modal" data-target="#verProducto">Ver</a><a href="#" class="editar_producto" data-toggle="modal" data-target="#editarProducto">Editar</a><a href="#" class="eliminar_producto" data-toggle="modal" data-target="#deleteProducto">Eliminar</a></td>
384 
+                                            </tr>
385 
+
386 
+
387 
+                                        </tbody>
388 
+                                        <tfoot>
389 
+                                            <tr>
390 
+                                                <th>Nombre de la plaza</th>
391 
+                                                <th>Descripción</th>
392 
+                                                <th>Salario</th>
393 
+                                                <th>Acciones</th>
394 
+                                            </tr>
395 
+                                        </tfoot>
396 
+                                    </table>
397 
+                                </div>
398 
+                            </div>
399 
+                        </div>
400 
+                    </div>
401 
+                </div>
402 
+            </div>
403 
+        </div>
3 
     )
 404 
     )
4 
 }
 405 
 }