Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3201 | Rev 3694 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3201 Rev 3692
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react';
2 
import { Link as NavLink, useNavigate } from 'react-router-dom'
 2 
import { useNavigate } from 'react-router-dom';
- 
 
 3 
import { useDispatch } from 'react-redux';
3 
import {
 4 
import {
4 
  Box,
 5 
  Box,
5 
  Drawer,
 6 
  Drawer,
6 
  List,
 7 
  List,
7 
  ListItem,
 8 
  ListItem,
- 
 
 9 
  ListItemButton,
8 
  ListItemIcon,
 10 
  ListItemIcon,
9 
  ListItemText,
 11 
  ListItemText,
10 
  Accordion,
 12 
  Accordion,
11 
  AccordionSummary,
 13 
  AccordionSummary,
12 
  AccordionDetails,
 14 
  AccordionDetails,
13 
  Typography,
 15 
  Typography
14 
  Link
 - 
 
15 
} from '@mui/material'
 16 
} from '@mui/material';
16 
import { ExpandMore } from '@mui/icons-material'
 17 
import { ExpandMore } from '@mui/icons-material';
17 
 
 18 
 
18 
import { axios } from '@app/utils'
 19 
import { axios } from '@app/utils';
- 
 
 20 
import { addNotification } from '@app/redux/notification/notification.actions';
19 
 
 21 
 
20 
function MenuDrawer({
 - 
 
21 
  isOpen = false,
 - 
 
22 
  items = [],
 - 
 
23 
  icons = [],
 - 
 
24 
  closeDrawer = () => {}
 22 
function MenuDrawer({ show = false, items = [], onClose = () => {} }) {
25 
}) {
 - 
 
26 
  return (
 23 
  return (
27 
    <Drawer anchor='right' open={isOpen} onClose={closeDrawer}>
 24 
    <Drawer anchor='right' open={show} onClose={onClose}>
28 
      <Box sx={{ width: 250 }} role='presentation'>
 25 
      <Box role='presentation' onClick={onClose}>
29 
        <List>
 26 
        <List>
30 
          {items.map((item, index) => {
 27 
          {items.map((item) => (
31 
            const icon = icons[index]
 - 
 
32 
            const menuItem = { ...item, icon }
 - 
 
33 
 
 - 
 
34 
            return (
 - 
 
35 
              <ListItem key={index} sx={{ padding: '8px 16px !important' }}>
 - 
 
36 
                {item.childs?.length ? (
 - 
 
37 
                  <AccordionItem
 - 
 
38 
                    key={index}
 - 
 
39 
                    item={menuItem}
 - 
 
40 
                    close={closeDrawer}
 - 
 
41 
                  />
 - 
 
42 
                ) : (
 - 
 
43 
                  <MenuDrawerItem item={menuItem} close={closeDrawer} />
 28 
            <RenderMenuItem key={item.href} item={item} onClose={onClose} />
44 
                )}
 - 
 
45 
              </ListItem>
 - 
 
46 
            )
 - 
 
47 
          })}
 29 
          ))}
48 
        </List>
 30 
        </List>
49 
      </Box>
 31 
      </Box>
50 
    </Drawer>
 32 
    </Drawer>
51 
  )
 33 
  );
52 
}
 34 
}
Línea 53... Línea 35...
53 
 
 35 
 
54 
const MenuDrawerItem = ({ item, close }) => {
 36 
const RenderMenuItem = ({ item, onClose }) => {
- 
 
 37 
  if (item.childs?.length) {
- 
 
 38 
    return (
- 
 
 39 
      <ListItem sx={{ padding: '0 !important' }}>
- 
 
 40 
        <AccordionItem item={item} onClose={onClose} />
- 
 
 41 
      </ListItem>
- 
 
 42 
    );
Línea -... Línea 43...
- 
 
 43 
  }
- 
 
 44 
 
- 
 
 45 
  return (
- 
 
 46 
    <ListItem sx={{ padding: '8px 16px !important' }}>
- 
 
 47 
      <MenuDrawerItem item={item} onClose={onClose} />
- 
 
 48 
    </ListItem>
- 
 
 49 
  );
55 
  const navigate = useNavigate()
 50 
};
- 
 
 51 
 
- 
 
 52 
const MenuDrawerItem = ({ item: { label, href, ajax, icon: Icon }, onClose }) => {
- 
 
 53 
  const navigate = useNavigate();
- 
 
 54 
  const dispatch = useDispatch();
- 
 
 55 
 
- 
 
 56 
  const asyncNavigate = async (url) => {
- 
 
 57 
    try {
- 
 
 58 
      const { data } = await axios.get(url);
- 
 
 59 
      if (!data.success) throw new Error('Ha ocurrido un error. Por favor, intente nuevamente.');
- 
 
 60 
      navigate(data.data);
- 
 
 61 
    } catch (error) {
- 
 
 62 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
Línea 56... Línea 63...
56 
 
 63 
    }
57 
  const { label, href, ajax, icon: Icon } = item
 64 
  };
- 
 
 65 
 
- 
 
 66 
  const handleClick = (e) => {
58 
 
 67 
    e.stopPropagation();
- 
 
 68 
    onClose();
- 
 
 69 
 
- 
 
 70 
    if (ajax) {
59 
  const navigateTo = async (url) => {
 71 
      e.preventDefault();
60 
    const { data } = await axios.get(url)
 72 
      asyncNavigate(href);
61 
    if (data.success) {
 73 
    } else {
Línea 62... Línea 74...
62 
      navigate(data.data)
 74 
      navigate(href);
63 
    }
 75 
    }
64 
  }
 76 
  };
65 
 
 - 
 
66 
  return (
 - 
 
67 
    <Link
 77 
 
68 
      component={NavLink}
 78 
  return (
69 
      to={`/${href}`}
 79 
    <ListItemButton
70 
      onClick={() => (ajax ? navigateTo(href) : close())}
 80 
      onClick={handleClick}
71 
      sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
 81 
      sx={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}
72 
    >
 82 
    >
73 
      {Icon ? (
 83 
      {Icon && (
74 
        <ListItemIcon sx={{ minWidth: 'auto' }}>
 84 
        <ListItemIcon>
75 
          <Icon />
 85 
          <Icon />
76 
        </ListItemIcon>
 86 
        </ListItemIcon>
77 
      ) : null}
 87 
      )}
78 
      <ListItemText primary={label} />
 88 
      <ListItemText primary={label} />
79 
    </Link>
 89 
    </ListItemButton>
80 
  )
 90 
  );
- 
 
 91 
};
- 
 
 92 
 
Línea 81... Línea 93...
81 
}
 93 
const AccordionItem = ({ item: { label, childs, icon: Icon }, onClose }) => {
82 
 
 94 
  const handleAccordionClick = (e) => {
- 
 
 95 
    e.stopPropagation();
- 
 
 96 
  };
83 
const AccordionItem = ({ item, close }) => {
 97 
 
84 
  const { label, childs, icon: Icon } = item
 - 
 
85 
 
 98 
  return (
86 
  return (
 - 
 
87 
    <Accordion
 - 
 
88 
      sx={{
 99 
    <Accordion
89 
        border: 'none',
 100 
      disableGutters
90 
        width: '100%',
 101 
      elevation={0}
91 
        boxShadow: 'none',
 102 
      sx={{
92 
        padding: 0,
 103 
        width: '100%',
93 
        '&::before': {
 104 
        '&::before': {
94 
          display: 'none'
 - 
 
95 
        }
 105 
          display: 'none'
- 
 
 106 
        }
- 
 
 107 
      }}
- 
 
 108 
    >
- 
 
 109 
      <AccordionSummary
- 
 
 110 
        expandIcon={<ExpandMore />}
- 
 
 111 
        onClick={handleAccordionClick}
- 
 
 112 
        sx={{
96 
      }}
 113 
          padding: '8px 16px !important',
97 
    >
 114 
          '& .MuiAccordionSummary-content': {
98 
      <AccordionSummary
 115 
            margin: 0
99 
        sx={{ padding: '0.5rem 0 !important' }}
 116 
          }
100 
        expandIcon={<ExpandMore />}
 117 
        }}
101 
      >
 118 
      >
Línea 102... Línea 119...
102 
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
 119 
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
- 
 
 120 
          {Icon && <Icon />}
103 
          {Icon && <Icon />}
 121 
          <Typography margin='0'>{label}</Typography>
104 
          <Typography margin='0'>{label}</Typography>
 122 
        </Box>
105 
        </Box>
 123 
      </AccordionSummary>
106 
      </AccordionSummary>
 124 
 
107 
 
 - 
 
108 
      <AccordionDetails sx={{ padding: 0 }}>
 125 
      <AccordionDetails sx={{ padding: 0 }}>
- 
 
 126 
        <List disablePadding>
- 
 
 127 
          {childs.map((child) => (
109 
        {childs.map((child, index) => {
 128 
            <RenderMenuItem
- 
 
 129 
              key={child.href || child.label}
110 
          if (child.childs?.length) {
 130 
              item={child}
111 
            return <AccordionItem key={index} item={child} close={close} />
 131 
              onClose={onClose}
112 
          }
 132 
              isSubItem
113 
 
 133 
            />
Línea 114... Línea 134...
114 
          return <MenuDrawerItem key={index} item={child} close={close} />
 134 
          ))}