Browse Source

on demand itemlist

amenpunk 2 years ago
parent
commit
e7ce3658f2
3 changed files with 99 additions and 24 deletions
  1. 2 2
      src/Components/Dashboard.js
  2. 22 22
      src/Components/Navigation/listItems.js
  3. 75 0
      src/Utils/MenuItems.js

+ 2 - 2
src/Components/Dashboard.js

@@ -124,8 +124,8 @@ function DashboardContent() {
124 124
                                 open={open_profile}
125 125
                                 onClose={handleClose}
126 126
                                 MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
127
-                                <MenuItem onClick={() => navigate('dashboard/perfil') }>Profile</MenuItem>
128
-                                <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
127
+                                <MenuItem onClick={() => navigate('dashboard/perfil') }>Mi Cuenta</MenuItem>
128
+                                <MenuItem onClick={() => console.log('dashboard/perfil')}>Configuraciones</MenuItem>
129 129
                                 <MenuItem onClick={CerrarSession}>Logout</MenuItem>
130 130
                             </Menu>
131 131
                         </Box>

+ 22 - 22
src/Components/Navigation/listItems.js

@@ -2,16 +2,17 @@ import * as React from 'react';
2 2
 import { Nav } from 'react-bootstrap';
3 3
 
4 4
 import { 
5
-    Home, Fingerprint, History, MiscellaneousServices , 
6
-    Work, VisibilityOff, PeopleAlt, Equalizer,
7
-    OndemandVideo, SupportAgent, Star,
5
+    Fingerprint, History, MiscellaneousServices , 
8 6
     ExpandLess, ExpandMore
9 7
 } from '@mui/icons-material/'
10 8
 
11
-
12 9
 import { useNavigate, useResolvedPath, useMatch } from 'react-router-dom'
13 10
 import { Collapse,ListItem, List ,ListItemIcon,ListItemText,ListSubheader } from '@mui/material/'
14 11
 
12
+import { 
13
+    MainItems, ExtraItems, PruebaItems
14
+} from '../../Utils/MenuItems'
15
+
15 16
 function NavItem (props) {
16 17
     
17 18
     let navigate = useNavigate()
@@ -22,7 +23,6 @@ function NavItem (props) {
22 23
 
23 24
     if(route.startsWith('prueba') && match && open && !AppBarVisible ){
24 25
         setOpen(false);
25
-        // setAppBarVisible(true)
26 26
     }
27 27
 
28 28
 
@@ -31,8 +31,7 @@ function NavItem (props) {
31 31
             sx={{ color : '#25344f'}}
32 32
             selected={ match && typeof(match) === "object" }
33 33
             onClick={() => navigate(route) } 
34
-            button
35
-        >
34
+            button >
36 35
             <ListItemIcon>
37 36
                 {icon && icon}
38 37
             </ListItemIcon>
@@ -66,11 +65,12 @@ export const MainListItems = (props) =>  {
66 65
 
67 66
             <ListSubheader inset>MENÚ</ListSubheader>
68 67
 
69
-            <NavItem icon={<Home/>} title="Inicio" route="home" />
70
-            <NavItem icon={<Work/>} title="Puestos" route="puestos" />
71
-            <NavItem icon={<VisibilityOff/>} title="Contraseñas" route="contrasenas" />
72
-            <NavItem icon={<PeopleAlt/>}  title="Expedientes" route="expedientes" />
73
-            <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
68
+
69
+            {
70
+                MainItems.map( ({ icon, title, route}) =>  (
71
+                    <NavItem icon={icon} title={title} route={route} />
72
+                ))
73
+            }
74 74
 
75 75
             <ListItem selected={open} onClick={showPruebas}>
76 76
                 <ListItemIcon>
@@ -93,13 +93,11 @@ export const MainListItems = (props) =>  {
93 93
 
94 94
             <Collapse in={open} timeout="auto" unmountOnExit>
95 95
                 <List component="div" disablePadding>
96
-
97
-                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/crear" title="Crear Prueba" />
98
-                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/listar"  title="Listado de pruebas" />
99
-                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/aplicar"  title="Aplicar" />
100
-                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/respuestas" title="Respuestas" />
101
-                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/calificaciones" title="Calificaciones" />
102
-
96
+                    {
97
+                        PruebaItems.map( ({ route, title}) => 
98
+                            ( <NavItem setOpen={setOpen} { ...props} open={open} route={route} title={title} />)
99
+                        )
100
+                    }
103 101
                 </List>
104 102
             </Collapse>
105 103
 
@@ -112,9 +110,11 @@ export const MainListItems = (props) =>  {
112 110
 export const SecondaryListItems = (
113 111
     <Nav>
114 112
         <ListSubheader inset>EXTRAS</ListSubheader>
115
-        <NavItem icon={<Star/>} title="Elementos" route="/work" />
116
-        <NavItem icon={<OndemandVideo/>} title="Tutoriales" route="/worktwo" />
117
-        <NavItem icon={<SupportAgent/>} title="Asistencia Técnica" route="/worktree" />
113
+        {
114
+            ExtraItems.map( ({ icon, route, title}) => 
115
+                ( <NavItem icon={icon} title={title} route={route} />)
116
+            )
117
+        }
118 118
     </Nav>
119 119
 );
120 120
 

+ 75 - 0
src/Utils/MenuItems.js

@@ -0,0 +1,75 @@
1
+import React from 'react';
2
+import {
3
+    Home,Work, VisibilityOff, PeopleAlt,
4
+    Equalizer, OndemandVideo, SupportAgent, Star
5
+} from '@mui/icons-material'
6
+
7
+
8
+export const MainItems = [
9
+    {
10
+        icon : <Home/>,
11
+        route : 'home',
12
+        title : 'Inicio'
13
+    },
14
+    {
15
+        icon : <Work/>,
16
+        route : 'puestos',
17
+        title : 'Puestos'
18
+    },
19
+    {
20
+        icon : <VisibilityOff/>,
21
+        route : 'contrasenas',
22
+        title : 'Contraseñas'
23
+    },
24
+    {
25
+        icon : <PeopleAlt/>,
26
+        route : 'expedientes',
27
+        title : 'Expedientes'
28
+    },
29
+    {
30
+        icon : <Equalizer/>,
31
+        route : 'resultados',
32
+        title : 'Resultados'
33
+    },
34
+]
35
+
36
+export const ExtraItems = [
37
+    {
38
+        icon : <Star/>,
39
+        route : 'work',
40
+        title : 'Elementos'
41
+    },
42
+    {
43
+        icon : <OndemandVideo/>,
44
+        route : 'worktwo',
45
+        title : 'Tutoriales'
46
+    },
47
+    {
48
+        icon : <SupportAgent/>,
49
+        route : 'worktree',
50
+        title : 'Asistencia Técnica'
51
+    },
52
+]
53
+
54
+export const PruebaItems = [
55
+    {
56
+        route:"pruebas/crear",
57
+        title:"Crear Prueba",
58
+    },
59
+    {
60
+        route:"pruebas/listar",
61
+        title:"Listado de pruebas",
62
+    },
63
+    {
64
+        route:"pruebas/aplicar",
65
+        title:"Aplicar",
66
+    },
67
+    {
68
+        route:"pruebas/respuestas",
69
+        title:"Respuestas",
70
+    },
71
+    {
72
+        route:"pruebas/calificaciones",
73
+        title:"Calificaciones",
74
+    },
75
+]