You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
437 lines
16 KiB
437 lines
16 KiB
import React from "react"; |
|
import { connect } from "react-redux"; |
|
import { userProduct } from "~/Redux/actions"; |
|
|
|
import { makeStyles } from "@material-ui/core/styles"; |
|
import Table from "@material-ui/core/Table"; |
|
import TableBody from "@material-ui/core/TableBody"; |
|
import TableCell from "@material-ui/core/TableCell"; |
|
import TableContainer from "@material-ui/core/TableContainer"; |
|
import TableHead from "@material-ui/core/TableHead"; |
|
import TableRow from "@material-ui/core/TableRow"; |
|
import Paper from "@material-ui/core/Paper"; |
|
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined"; |
|
|
|
import "./index.scss"; |
|
const useStyles = makeStyles({ |
|
table: {}, |
|
}); |
|
const grades = [ |
|
"پیش دبستان", |
|
"اول", |
|
"دوم", |
|
"سوم", |
|
"چهارم", |
|
"پنجم", |
|
"ششم", |
|
"هفتم", |
|
"هشتم", |
|
"نهم", |
|
"دهم", |
|
"یازدهم", |
|
"دوازدهم", |
|
]; |
|
const maxMobileSize = 550; |
|
const maxDesktopSize = 1250; |
|
|
|
const fontSize = { |
|
mobile: { |
|
info: { |
|
strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28, |
|
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
|
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, |
|
}, |
|
price: { |
|
strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, |
|
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40, |
|
}, |
|
counter: { |
|
button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, |
|
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25, |
|
}, |
|
delete: { |
|
span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28, |
|
}, |
|
}, |
|
desktop: { |
|
info: { |
|
strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
|
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
|
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, |
|
}, |
|
price: { |
|
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, |
|
span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |
|
}, |
|
counter: { |
|
button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, |
|
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, |
|
}, |
|
delete: { |
|
span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, |
|
}, |
|
}, |
|
}; |
|
|
|
function BasicTable(props) { |
|
const classes = useStyles(); |
|
const { list, handleCounter, handleDelete, route, factorInfo } = props; |
|
const sum = () => { |
|
let total = 0; |
|
for (let i = 0; i < list.length; i++) { |
|
total += list[i].count * 1; |
|
} |
|
return total; |
|
}; |
|
|
|
return ( |
|
<> |
|
{window.innerWidth < 1000 ? ( |
|
<TableContainer component={Paper}> |
|
<Table className={classes.table} aria-label="simple table"> |
|
<TableHead> |
|
<TableRow> |
|
<TableCell align="right">محصولات</TableCell> |
|
<TableCell align="center">قیمت</TableCell> |
|
|
|
{route === "callback" ? ( |
|
<TableCell align="center">تعداد</TableCell> |
|
) : null} |
|
</TableRow> |
|
</TableHead> |
|
<TableBody> |
|
{list.map((row, i) => ( |
|
<Item |
|
data={row} |
|
key={i} |
|
// handleCounter={handleCounter} |
|
pushToCart={props.pushToCart} |
|
info={props.info} |
|
id={props.id} |
|
handleDelete={handleDelete} |
|
route={route} |
|
factorInfo={factorInfo} |
|
/> |
|
))} |
|
{route === "cart" && factorInfo ? ( |
|
<TableRow> |
|
<TableCell align="center"> |
|
<span style={{ color: "grey" }}> |
|
مبلغ کل {factorInfo.sumPrice} |
|
</span> |
|
</TableCell> |
|
<TableCell align="right" component="th" scope="row"> |
|
<span style={{ color: "grey" }}>{sum()} محصول</span> |
|
</TableCell> |
|
</TableRow> |
|
) : null} |
|
</TableBody> |
|
</Table> |
|
</TableContainer> |
|
) : null} |
|
{window.innerWidth > 1000 ? ( |
|
<TableContainer component={Paper}> |
|
<Table className={classes.table} aria-label="simple table"> |
|
<TableHead> |
|
<TableRow> |
|
<TableCell align="right">محصولات</TableCell> |
|
<TableCell align="center">قیمت</TableCell> |
|
<TableCell align="center">تعداد</TableCell> |
|
<TableCell align="center"></TableCell> |
|
</TableRow> |
|
</TableHead> |
|
<TableBody> |
|
{list.map((row, i) => ( |
|
<Item |
|
data={row} |
|
key={i} |
|
// handleCounter={handleCounter} |
|
pushToCart={props.pushToCart} |
|
info={props.info} |
|
id={props.id} |
|
handleDelete={handleDelete} |
|
route={route} |
|
factorInfo={factorInfo} |
|
/> |
|
))} |
|
{factorInfo ? ( |
|
<TableRow> |
|
<TableCell align="right" component="th" scope="row"> |
|
<span style={{ color: "grey" }}></span> |
|
</TableCell> |
|
<TableCell align="center"> |
|
<span style={{ color: "grey" }}> |
|
مبلغ کل {factorInfo.sumPrice} |
|
</span> |
|
</TableCell> |
|
<TableCell align="center" component="th" scope="row"> |
|
<span style={{ color: "grey" }}>{sum()} محصول</span> |
|
</TableCell> |
|
<TableCell align="center" component="th" scope="row"> |
|
<span style={{ color: "grey" }}></span> |
|
</TableCell> |
|
</TableRow> |
|
) : null} |
|
</TableBody> |
|
</Table> |
|
</TableContainer> |
|
) : null} |
|
</> |
|
); |
|
} |
|
|
|
const Item = (props) => { |
|
const { data, pushToCart, id, route, factorInfo } = props; |
|
return ( |
|
<> |
|
{window.innerWidth < 1000 ? ( |
|
<TableRow key={data.product.book.name}> |
|
<TableCell align="right" component="th" scope="row"> |
|
<div className="mobile-cart-table-product d-flex align-items-center"> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} |
|
alt={data.product.book.name} |
|
/> |
|
<div className="mobile-cart-table-product__info d-flex flex-column p-1"> |
|
<strong style={{ fontSize: fontSize.mobile.info.strong }}> |
|
{`نسخه ${ |
|
+data.product.productType === 1 ? "الکترونیکی" : "چاپی" |
|
} ${data.product.book.name} `} |
|
</strong> |
|
<p style={{ fontSize: 12 }}> |
|
{`پایه ${grades[data.product.book.gradeId]}`} |
|
</p> |
|
<span style={{ fontSize: 10 }}> |
|
همراه با: |
|
{data.product.book.items || "کد فعالسازی محتوای الکترونیک"} |
|
</span> |
|
{route !== "callback" ? ( |
|
<div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end"> |
|
<DeleteOutlineOutlinedIcon |
|
style={{ |
|
color: "#FC120A", |
|
fontSize: 25, |
|
marginLeft: 0, |
|
cursor: "pointer", |
|
}} |
|
onClick={() => |
|
pushToCart({ |
|
productId: data.productId, |
|
userId: id, |
|
count: -data.count, |
|
}) |
|
} |
|
/> |
|
<span |
|
onClick={() => |
|
pushToCart({ |
|
productId: data.productId, |
|
userId: id, |
|
count: -data.count, |
|
}) |
|
} |
|
style={{ |
|
fontSize: fontSize.mobile.delete.span, |
|
color: "#FC120A", |
|
cursor: "pointer", |
|
}} |
|
> |
|
حذف |
|
</span> |
|
</div> |
|
) : null} |
|
</div> |
|
</div> |
|
</TableCell> |
|
<TableCell> |
|
<div className="mobile-cart-table-price d-flex flex-column align-items-center"> |
|
<div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center"> |
|
<strong style={{ fontSize: fontSize.mobile.price.strong }}> |
|
{data.product.price * data.count || "1000"} |
|
</strong> |
|
{route !== "callback" ? ( |
|
<span style={{ fontSize: fontSize.mobile.price.span }}> |
|
{data.product.price || "100"} قیمت هر واحد |
|
</span> |
|
) : null} |
|
</div> |
|
{route === "cart" ? ( |
|
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> |
|
<button |
|
onClick={() => |
|
pushToCart( |
|
{ |
|
productId: data.productId, |
|
userId: id, |
|
count: 1, |
|
}, |
|
{}, |
|
{ id: data.factorId } |
|
) |
|
} |
|
style={{ fontSize: fontSize.mobile.counter.button }} |
|
> |
|
+ |
|
</button> |
|
<span style={{ fontSize: fontSize.mobile.counter.span }}> |
|
{data.count} |
|
</span> |
|
<button |
|
onClick={() => |
|
data.count > 0 |
|
? pushToCart( |
|
{ |
|
productId: data.productId, |
|
userId: id, |
|
count: -1, |
|
}, |
|
{}, |
|
{ id: data.factorId } |
|
) |
|
: null |
|
} |
|
style={{ fontSize: fontSize.mobile.counter.button }} |
|
> |
|
- |
|
</button> |
|
</div> |
|
) : null} |
|
</div> |
|
</TableCell> |
|
{route === "callback" ? ( |
|
<TableCell> |
|
<strong className="d-flex justify-content-center align-items-center"> |
|
{data.count} |
|
</strong> |
|
</TableCell> |
|
) : null} |
|
</TableRow> |
|
) : null} |
|
{window.innerWidth > 1000 ? ( |
|
<TableRow key={data.product.book.name}> |
|
<TableCell align="right" component="th" scope="row"> |
|
<div className="cart-item__info d-flex"> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`} |
|
alt={data.product.book.name} |
|
/> |
|
<div className="d-flex flex-column justify-content-center"> |
|
<strong style={{ fontSize: fontSize.desktop.info.strong }}> |
|
{`نسخه ${ |
|
+data.product.productType === 1 ? "الکترونیکی" : "چاپی" |
|
} ${data.product.book.name} `} |
|
</strong> |
|
<p style={{ fontSize: fontSize.desktop.info.p }}> |
|
{`پایه ${grades[data.product.book.gradeId]}`} |
|
</p> |
|
<span style={{ fontSize: fontSize.desktop.info.span }}> |
|
همراه با: |
|
{data.product.book.items || "کد فعالسازی محتوای الکترونیک"} |
|
</span> |
|
</div> |
|
</div> |
|
</TableCell> |
|
<TableCell> |
|
<div className="cart-item__price d-flex flex-column justify-content-center align-items-center"> |
|
<strong style={{ fontSize: fontSize.desktop.price.strong }}> |
|
{data.product.price * data.count || "1000"} تومان |
|
</strong> |
|
<span style={{ fontSize: fontSize.desktop.price.span }}> |
|
قیمت هر عدد |
|
{data.product.price || "100"} |
|
تومان |
|
</span> |
|
</div> |
|
</TableCell> |
|
<TableCell> |
|
<div className="cart-item__counter d-flex align-items-center"> |
|
<div className="cart-item__counter--box d-flex justify-content-around align-items-center"> |
|
<button |
|
onClick={() => |
|
pushToCart( |
|
{ |
|
productId: data.productId, |
|
userId: id, |
|
count: 1, |
|
}, |
|
{}, |
|
{ id: data.factorId } |
|
) |
|
} |
|
style={{ fontSize: fontSize.desktop.counter.button }} |
|
> |
|
+ |
|
</button> |
|
<span style={{ fontSize: fontSize.desktop.counter.span }}> |
|
{data.count} |
|
</span> |
|
<button |
|
onClick={() => |
|
pushToCart( |
|
{ |
|
productId: data.productId, |
|
userId: id, |
|
count: -1, |
|
}, |
|
{}, |
|
{ id: data.factorId } |
|
) |
|
} |
|
style={{ fontSize: fontSize.desktop.counter.button }} |
|
> |
|
- |
|
</button> |
|
</div> |
|
</div> |
|
</TableCell> |
|
<TableCell> |
|
<div className="cart-item__delete d-flex align-items-center justify-content-center"> |
|
<DeleteOutlineOutlinedIcon |
|
style={{ |
|
color: "#FC120A", |
|
fontSize: 30, |
|
marginLeft: 5, |
|
cursor: "pointer", |
|
}} |
|
// onClick={() => handleDelete(data.id)} |
|
onClick={() => |
|
pushToCart({ |
|
productId: data.productId, |
|
userId: id, |
|
count: -data.count, |
|
}) |
|
} |
|
/> |
|
<span |
|
// onClick={() => handleDelete(data.id)} |
|
onClick={() => |
|
pushToCart({ |
|
productId: data.productId, |
|
userId: id, |
|
count: -data.count, |
|
}) |
|
} |
|
style={{ |
|
fontSize: fontSize.desktop.delete.span, |
|
cursor: "pointer", |
|
}} |
|
> |
|
حذف |
|
</span> |
|
</div> |
|
</TableCell> |
|
</TableRow> |
|
) : null} |
|
</> |
|
); |
|
}; |
|
|
|
export default connect( |
|
(state) => ({ |
|
loading: state.userProduct.loading, |
|
info: state.book.info, |
|
id: state.user.status.id, |
|
factorInfo: state.userFactor.info, |
|
}), |
|
{ pushToCart: userProduct.add } |
|
)(BasicTable);
|
|
|