123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240 |
- import {useState} from "react";
- import {Accordion, AccordionDetails, AccordionSummary, Box, Divider, Grid, Typography} from "@mui/material";
- import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
- import {backURL} from "../../actions/PathDB";
- import imgNotFound from "../../img/catalog/imgNotFound.png";
- import Link from "react-router-dom/es/Link";
- import {AccordionHeaderText} from "./AccordionHeaderText";
- import {timeCalc} from "../ProductPage/timeCalc";
- export const AccordionItem = ({data}) => {
- const time = timeCalc(+data['createdAt'])
- const [status, setStatus] = useState(false);
- return (
- <Accordion onChange={() => setStatus(!status)}>
- <AccordionSummary
- expandIcon={<ExpandMoreIcon />}
- >
- <Divider
- orientation="vertical"
- flexItem
- sx={{
- backgroundColor: data['total'] ? '#7cd545': '#ad2222',
- width:'5px',
- borderRadius: '3px',
- boxShadow: 'none'
- }}
- />
- <Box
- sx={{
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- width: '100%',
- padding: '10px 20px'
- }}
- >
- <AccordionHeaderText
- columnText={`№ ${data['_id']} from ${time}`}
- content={data['total'] ? 'Completed' : 'Canceled'}
- />
- {!status &&
- <AccordionHeaderText
- columnText={'Order price'}
- content={data['total'] ? `$${data['total']}` : 'null'}
- />
- }
- {!status &&
- <Box
- sx={{
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- width: '200px'
- }}
- >
- {data['orderGoods'] && data['orderGoods'].map((item, index, array) => {
- if (index < 2) {
- return (
- <Box
- key={index}
- maxWidth='60px'
- height='60px'
- borderRadius='10px'
- overflow='hidden'
- marginRight='20px'
- >
- <img style={{width: '100%', height: '100%', objectFit: 'cover'}}
- src={item?.good?.images && item.good.images[0].url ?
- backURL + '/' + item.good.images[0].url : imgNotFound}
- alt={'image'}/>
- </Box>
- )
- }
- else if (index === 2) {
- return (
- <Box
- key={index}
- sx={{
- width:'60px',
- height:'60px',
- border:'1px solid #616161',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- color: '#616161',
- borderRadius: '10px'}}
- >
- +{array.length - 2}
- </Box>
- )
- }})
- }
- </Box>}
- </Box>
- </AccordionSummary>
- <AccordionDetails sx={{padding: '20px'}}>
- {data['orderGoods'] && data['orderGoods'].length > 0 ?
- <>
- <Grid container>
- <Grid item md={7}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='left'
- >
- Product
- </Typography>
- </Grid>
- <Grid item md={2}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='center'
- >
- Price
- </Typography>
- </Grid>
- <Grid item md={1}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='center'
- >
- Count
- </Typography>
- </Grid>
- <Grid item md={2}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='right'
- >
- Sum
- </Typography>
- </Grid>
- </Grid>
- <Divider sx={{margin: '10px 0'}}/>
- {data['orderGoods'].map((item, index) => {
- return (
- <Grid
- key={index}
- container
- alignItems='center'
- marginBottom='20px'
- >
- <Grid item md={7}>
- <Link
- style={{
- textDecoration: 'none',
- display: 'flex',
- alignItems: 'center',
- color: '#616161'
- }}
- to={`/good/${item?.good?._id}`}
- >
- <Box
- minWidth='60px'
- maxWidth='60px'
- height='60px'
- borderRadius='10px'
- overflow='hidden'
- marginRight='20px'
- >
- <img style={{width: '100%', height: '100%', objectFit: 'cover'}}
- src={item?.good?.images && item.good.images[0].url ?
- backURL + '/' + item.good.images[0].url : imgNotFound}
- alt={'image'}/>
- </Box>
- <Typography
- variant='body1'
- >
- {item.good?.name || 'product name'}
- </Typography>
- </Link>
- </Grid>
- <Grid item md={2}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='center'
- >
- {item?.price ? '$' + parseFloat(item.price).toFixed(2) : 'NaN'}
- </Typography>
- </Grid>
- <Grid item md={1}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='center'
- >
- {item?.count || '1'}
- </Typography>
- </Grid>
- <Grid item md={2}>
- <Typography
- color='#616161'
- variant='body1'
- letterSpacing='1px'
- textAlign='right'
- >
- {item?.price && item?.count ? '$'+parseFloat(item.price * item.count)
- .toFixed(2) : 'NaN'
- }
- </Typography>
- </Grid>
- </Grid>
- )
- })}
- <Divider sx={{margin: '-10px 0 10px 0'}}/>
- <Box
- display='flex'
- justifyContent='space-between'
- >
- <Typography
- variant='body1'
- color='#616161'
- >
- Total
- </Typography>
- <Typography
- variant='body1'
- color='#616161'
- >
- {data?.total ? '$'+parseFloat(data.total).toFixed(2) : 'NaN'}
- </Typography>
- </Box>
- </> :
- <Typography>Error</Typography>
- }
- </AccordionDetails>
- </Accordion>
- )
- }
|