Facebook
From Magnus, 3 Years ago, written in JavaScript.
Embed
Download Paste or View Raw
Hits: 54
  1. /* eslint-disable */
  2. import React, { useState } from 'react';
  3. import { Link as RouterLink } from 'react-router-dom';
  4. import PropTypes from 'prop-types';
  5. import _ from 'lodash';
  6. import { useAlert } from 'react-alert';
  7. import clsx from 'clsx';
  8. import moment from 'moment';
  9. import { Drawer as AntDrawer } from 'antd';
  10. import { useDispatch, useSelector } from 'react-redux';
  11. import { updateMenu } from 'src/slices/menu';
  12. import { useSnackbar } from 'notistack';
  13. import CardForm from './MenuCardForm'
  14.  
  15. import {
  16.   Box,
  17.   Button,
  18.   Card,
  19.   CardMedia,
  20.   CardContent,
  21.   CardActions,
  22.   CardHeader,
  23.   Divider,
  24.   Dialog,
  25.   DialogActions,
  26.   DialogContent,
  27.   DialogContentText,
  28.   DialogTitle,
  29.   Grid,
  30.   Collapse,
  31.   Link,
  32.   SvgIcon,
  33.   Typography,
  34.   colors,
  35.   makeStyles
  36. } from '@material-ui/core';
  37. import IconButton from '@material-ui/core/IconButton';
  38. import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
  39. import { PlusCircle as PlusIcon } from 'react-feather';
  40. import { Edit as EditIcon, Trash2 as DeleteIcon } from 'react-feather';
  41. import MenuModal from '../MenuModal';
  42.  
  43. const useStyles = makeStyles(theme => ({
  44.   root: {},
  45.   media: {
  46.     height: 200,
  47.     backgroundColor: theme.palette.background.dark
  48.   },
  49.   drawerButton: {
  50.     marginTop: theme.spacing(1)
  51.   },
  52.  
  53.   likedButton: {
  54.     color: colors.red[600]
  55.   },
  56.   subscribersIcon: {
  57.     marginLeft: theme.spacing(2),
  58.     marginRight: theme.spacing(1)
  59.   },
  60.   actionIcon: {
  61.     marginRight: theme.spacing(1)
  62.   },
  63.   deleteButton: {
  64.     backgroundColor: '#d9534f'
  65.   },
  66.   deleteText: {
  67.     color: '#d9534f'
  68.   },
  69.   subMenu: {
  70.     padding: theme.spacing(2)
  71.   },
  72.   expand: {
  73.     transform: 'rotate(0deg)',
  74.     marginLeft: 'auto',
  75.     transition: theme.transitions.create('transform', {
  76.       duration: theme.transitions.duration.shortest
  77.     })
  78.   },
  79.   expandOpen: {
  80.     transform: 'rotate(180deg)'
  81.   }
  82. }));
  83.  
  84. function MenuCard({ menuItem, className, ...rest }) {
  85.   const classes = useStyles();
  86.   const dispatch = useDispatch();
  87.   const { result } = useSelector(state => state.menu);
  88.   const { enqueueSnackbar } = useSnackbar();
  89.  
  90.   const [antDrawer, toggleAntDrawer] = useState(false);
  91.   const [secondAntDrawer, toggleSecondAntDrawer] = useState(false);
  92.   const [selectedSubMenu, setSubMenu] = useState({
  93.     name: '',
  94.     items: [],
  95.     index: ''
  96.   });
  97.   const [expanded, setExpanded] = useState(false);
  98.   const [isOpened, setOpened] = useState(false);
  99.   const [dialogOpen, setDialog] = useState({
  100.     open: false,
  101.     item: {},
  102.     index: null
  103.   });
  104.  
  105.   // Close Ant drawer
  106.   const antOnClose = () => {
  107.     toggleAntDrawer(false);
  108.   };
  109.  
  110.   // Close 2 level Ant drawer
  111.   const secondAntOnClose = () => {
  112.     toggleSecondAntDrawer(false);
  113.   };
  114.  
  115.   //Card Modal handle open
  116.   const handleOpen = () => {
  117.     setOpened(true);
  118.   };
  119.   //Card Modal handle close
  120.   const handleClose = () => {
  121.     setOpened(false);
  122.   };
  123.  
  124.   const handleSecondDrawer = (bool, item, index) => {
  125.     // Open second stage drawer
  126.     toggleSecondAntDrawer(bool);
  127.     setSubMenu({ name: item.name, items: item.items, index: index });
  128.   };
  129.  
  130.   const handleCloseDialog = () => {
  131.     setDialog({ ...dialogOpen, open: false });
  132.    
  133.   };
  134.   const handleExpandClick = () => {
  135.     setExpanded(!expanded);
  136.   };
  137.  
  138.  
  139.  
  140.   const handleDelete = (item, index) => {
  141.     const menu = _.cloneDeep(menuItem);
  142.     let update = menu.sections[selectedSubMenu.index].items.splice([index], 1);
  143.  
  144.     // console.log(menu.sections[selectedSubMenu.index].items[index], 'item to be updated/deleted')
  145.     // console.log(update)
  146.     // console.log(menu.sections[selectedSubMenu.index].items[index], 'item to be updated/deleted')
  147.     dispatch(updateMenu(menu));
  148.     setDialog({ ...dialogOpen, open: false });
  149.    
  150.     setTimeout(() => {
  151.       enqueueSnackbar(`${item.name} slettet`, {
  152.         variant: 'success',
  153.         classes:{},
  154.         anchorOrigin: {
  155.           vertical: 'bottom',
  156.           horizontal: 'center'
  157.         }
  158.       });
  159.     }, 200);
  160.   };
  161.  
  162.   return (
  163.     <>
  164.       <Card className={clsx(classes.root, className)} {...rest}>
  165.         <Box p={3}>
  166.           {menuItem.image && (
  167.             <CardMedia className={classes.media} image={menuItem.image || ''} />
  168.           )}
  169.           <Box display="flex" alignItems="center" mt={2}>
  170.             <Box>
  171.               <Typography variant="body2" color="textSecondary">
  172.                 <Link
  173.                   color="textPrimary"
  174.                   component={RouterLink}
  175.                   to="#"
  176.                   variant="h3"
  177.                 >
  178.                   {menuItem.name}
  179.                 </Link>{' '}
  180.                 | Updated {moment(menuItem.createdAt).fromNow()}
  181.               </Typography>
  182.             </Box>
  183.           </Box>
  184.         </Box>
  185.         {/* <Box pb={2} px={3}>
  186.           <Typography color="textSecondary" variant="body2">
  187.             Description
  188.           </Typography>
  189.           <Typography variant="h5" color="textPrimary">
  190.             {menuItem.desc}
  191.           </Typography>
  192.         </Box> */}
  193.         {/* <Box py={2} px={3}>
  194.           <Grid
  195.             alignItems="center"
  196.             container
  197.             justify="space-between"
  198.             spacing={3}
  199.           >
  200.             <Grid item>
  201.               <Typography variant="body2" color="textSecondary">
  202.                 Type
  203.               </Typography>
  204.               <Typography variant="h5" color="textPrimary">
  205.                 {menuItem.type}
  206.               </Typography>
  207.             </Grid>
  208.             <Grid item>
  209.               <Typography variant="body2" color="textSecondary">
  210.                 Price
  211.               </Typography>
  212.               <Typography variant="h5" color="textPrimary">
  213.                 {menuItem.price}
  214.               </Typography>
  215.             </Grid>
  216.           </Grid>
  217.         </Box> */}
  218.         <Divider />
  219.         <Box
  220.           py={2}
  221.           pl={2}
  222.           pr={3}
  223.           display="flex"
  224.           alignItems="center"
  225.           justifyContent="space-between"
  226.         >
  227.           <Button color="secondary" variant="contained" onClick={handleOpen}>
  228.             <SvgIcon fontSize="small" className={classes.actionIcon}>
  229.               <EditIcon />
  230.             </SvgIcon>
  231.             Rediger
  232.           </Button>
  233.  
  234.           <Button className={classes.deleteButton} variant="contained">
  235.             <SvgIcon fontSize="small" className={classes.actionIcon}>
  236.               <DeleteIcon />
  237.             </SvgIcon>
  238.             Slett
  239.           </Button>
  240.         </Box>
  241.         {/* Modal Card for menu items */}
  242.         <MenuModal open={isOpened} onClose={handleClose} menuItem={menuItem} />
  243.       </Card>
  244.       <Button
  245.         variant="outlined"
  246.         color="primary"
  247.         className={classes.drawerButton}
  248.         onClick={() => toggleAntDrawer(true)}
  249.       >
  250.         Se undermeny til {menuItem.name}
  251.       </Button>
  252.  
  253.       <AntDrawer
  254.         placement="right"
  255.         title={menuItem.name}
  256.         width={420}
  257.         bodyStyle={{ backgroundColor: '#1c2025' }}
  258.         closable={true}
  259.         onClose={antOnClose}
  260.         visible={antDrawer}
  261.         zIndex={5000}
  262.       >
  263.         <div>
  264.           <Button type="primary" onClick={() => toggleSecondAntDrawer(true)}>
  265.             Under-menyene til {menuItem.name}:
  266.           </Button>
  267.           {menuItem.sections.map((item, index) => (
  268.             <Box key={item.name} mb={1}>
  269.               <Card
  270.                 className={classes.subMenu}
  271.                 style={{ cursor: 'pointer' }}
  272.                 onClick={() => handleSecondDrawer(true, item, index)}
  273.               >
  274.                 <Typography>{item.name} {`(${item.items.length})`}</Typography>
  275.               </Card>
  276.             </Box>
  277.           ))}
  278.           <Box mt={2} mb={2}>
  279.             <Divider variant="fullWidth" />
  280.           </Box>
  281.           <Card className={classes.subMenu}>
  282.             <Typography>Ny</Typography>
  283.           </Card>
  284.         </div>
  285.         <AntDrawer
  286.           title={selectedSubMenu.name}
  287.           width={520}
  288.           closable={true}
  289.           bodyStyle={{ backgroundColor: '#1c2025' }}
  290.           onClose={secondAntOnClose}
  291.           visible={secondAntDrawer}
  292.           zIndex={5000}
  293.         >
  294.           {selectedSubMenu.items.map((item, index) => (
  295.             <Box key={item.name} mb={1}>
  296.               <Card className={classes.subMenu}>
  297.                 <CardHeader
  298.                   action={
  299.                     <Button
  300.                       className={classes.deleteButton}
  301.                       variant="contained"
  302.                       size="small"
  303.                       onClick={() =>
  304.                         setDialog({ open: true, item: item, index: index })
  305.                       }
  306.                     >
  307.                       <SvgIcon fontSize="small" className={classes.actionIcon}>
  308.                         <DeleteIcon />
  309.                       </SvgIcon>
  310.                       Slett
  311.                     </Button>
  312.                   }
  313.                   title={item.name}
  314.                   subheader={item.description}
  315.                 />
  316.                 <CardActions disableSpacing>
  317.                   <Button
  318.                     variant="contained"
  319.                     color="primary"
  320.                     size="small"
  321.                     onClick={handleExpandClick}
  322.                   >
  323.                     Rediger
  324.                   </Button>
  325.                   <IconButton
  326.                     className={clsx(classes.expand, {
  327.                       [classes.expandOpen]: expanded
  328.                     })}
  329.                     onClick={handleExpandClick}
  330.                     aria-expanded={expanded}
  331.                     aria-label="show more"
  332.                   >
  333.                     <ExpandMoreIcon />
  334.                   </IconButton>
  335.                 </CardActions>
  336.                 <Collapse in={expanded} timeout="auto" unmountOnExit>
  337.                   <CardContent>
  338.                     {/* Send in details about item, index of item, submenu clicked and menu selected */}
  339.                     <CardForm
  340.                      item={item}
  341.                      index={index}
  342.                      menuItem={menuItem}
  343.                      subMenu={selectedSubMenu}
  344.  
  345.                      
  346.                      />
  347.                   </CardContent>
  348.                 </Collapse>
  349.               </Card>
  350.             </Box>
  351.           ))}
  352.         </AntDrawer>
  353.       </AntDrawer>
  354.       <Dialog
  355.         open={dialogOpen.open}
  356.         style={{ zIndex: 9000 }}
  357.         onClose={handleClose}
  358.         aria-labelledby="alert-dialog-title"
  359.         aria-describedby="alert-dialog-description"
  360.       >
  361.         <DialogTitle id="alert-dialog-title">
  362.           <Typography className={classes.deleteText}>
  363.             Slett {dialogOpen.item.name}
  364.           </Typography>
  365.         </DialogTitle>
  366.         <DialogContent>
  367.           <DialogContentText id="alert-dialog-description">
  368.             Denne handlingen vil slette {dialogOpen.item.name}. Er du sikker at
  369.             du vil gjøre dette?
  370.           </DialogContentText>
  371.         </DialogContent>
  372.         <DialogActions>
  373.           <Button
  374.             onClick={handleCloseDialog}
  375.             variant="contained"
  376.             color="primary"
  377.           >
  378.             Avbryt
  379.           </Button>
  380.           {/* Send item and index of item to be deleted. */}
  381.           <Button
  382.             onClick={() => handleDelete(dialogOpen.item, dialogOpen.index)}
  383.             className={classes.deleteButton}
  384.             variant="outlined"
  385.             autoFocus
  386.           >
  387.             Slett
  388.           </Button>
  389.         </DialogActions>
  390.       </Dialog>
  391.     </>
  392.   );
  393. }
  394.  
  395. MenuCard.propTypes = {
  396.   className: PropTypes.string
  397.   // menuItem: PropTypes.array.isRequired
  398. };
  399.  
  400. export default MenuCard;
  401.