Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3710 | Rev 3714 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3692 stevensc 1 
import React from 'react';
2 
import { useNavigate } from 'react-router-dom';
3 
import { useDispatch } from 'react-redux';
3201 stevensc 4 
import {
5 
  Box,
3710 stevensc 6 
  Drawer as MuiDrawer,
3201 stevensc 7 
  List,
8 
  ListItem,
3692 stevensc 9 
  ListItemButton,
3201 stevensc 10 
  ListItemText,
11 
  Accordion,
12 
  AccordionSummary,
13 
  AccordionDetails,
3692 stevensc 14 
  Typography
15 
} from '@mui/material';
3694 stevensc 16 
import ExpandMore from '@mui/icons-material/ExpandMore';
3201 stevensc 17 
 
3692 stevensc 18 
import { axios } from '@app/utils';
19 
import { addNotification } from '@app/redux/notification/notification.actions';
3201 stevensc 20 
 
3710 stevensc 21 
export const Drawer = ({ show = false, items = [], onClose = () => {} }) => {
3201 stevensc 22 
  return (
3710 stevensc 23 
    <MuiDrawer anchor='right' open={show} onClose={onClose}>
3692 stevensc 24 
      <Box role='presentation' onClick={onClose}>
3201 stevensc 25 
        <List>
3692 stevensc 26 
          {items.map((item) => (
3713 stevensc 27 
            <ListItem key={item.href}>
28 
              <RenderMenuItem item={item} onClose={onClose} />
29 
            </ListItem>
3692 stevensc 30 
          ))}
3201 stevensc 31 
        </List>
32 
      </Box>
3710 stevensc 33 
    </MuiDrawer>
3692 stevensc 34 
  );
3710 stevensc 35 
};
3201 stevensc 36 
 
3692 stevensc 37 
const RenderMenuItem = ({ item, onClose }) => {
3713 stevensc 38 
  if (item.childs && item.childs.length > 0) {
39 
    return <AccordionItem item={item} onClose={onClose} />;
3692 stevensc 40 
  }
3201 stevensc 41 
 
3713 stevensc 42 
  return <MenuDrawerItem item={item} onClose={onClose} />;
3692 stevensc 43 
};
3201 stevensc 44 
 
3713 stevensc 45 
const MenuDrawerItem = ({ item: { label, href, ajax }, onClose }) => {
3692 stevensc 46 
  const navigate = useNavigate();
47 
  const dispatch = useDispatch();
48 
 
49 
  const asyncNavigate = async (url) => {
50 
    try {
51 
      const { data } = await axios.get(url);
52 
      if (!data.success) throw new Error('Ha ocurrido un error. Por favor, intente nuevamente.');
53 
      navigate(data.data);
54 
    } catch (error) {
55 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
3201 stevensc 56 
    }
3692 stevensc 57 
  };
3201 stevensc 58 
 
3692 stevensc 59 
  const handleClick = (e) => {
60 
    e.stopPropagation();
61 
    onClose();
62 
 
63 
    if (ajax) {
64 
      e.preventDefault();
65 
      asyncNavigate(href);
66 
    } else {
67 
      navigate(href);
68 
    }
69 
  };
70 
 
3201 stevensc 71 
  return (
3713 stevensc 72 
    <ListItemButton onClick={handleClick}>
3201 stevensc 73 
      <ListItemText primary={label} />
3692 stevensc 74 
    </ListItemButton>
75 
  );
76 
};
3201 stevensc 77 
 
3713 stevensc 78 
const AccordionItem = ({ item: { label, childs }, onClose }) => {
3692 stevensc 79 
  const handleAccordionClick = (e) => {
80 
    e.stopPropagation();
81 
  };
3201 stevensc 82 
 
83 
  return (
3713 stevensc 84 
    <Accordion>
85 
      <AccordionSummary expandIcon={<ExpandMore />} onClick={handleAccordionClick}>
86 
        <Typography>{label}</Typography>
3201 stevensc 87 
      </AccordionSummary>
88 
 
3713 stevensc 89 
      <AccordionDetails>
90 
        <List>
3692 stevensc 91 
          {childs.map((child) => (
3713 stevensc 92 
            <ListItem key={child.href}>
93 
              <RenderMenuItem item={child} onClose={onClose} />
94 
            </ListItem>
3692 stevensc 95 
          ))}
96 
        </List>
3201 stevensc 97 
      </AccordionDetails>
98 
    </Accordion>
3692 stevensc 99 
  );
100 
};
3201 stevensc 101 
 
3710 stevensc 102 
export default Drawer;