255 lines
9.0 KiB
255 lines
9.0 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 "./index.scss"; |
|
const useStyles = makeStyles({ |
|
table: {}, |
|
}); |
|
const grades = [ |
|
window.t("پیش دبستان"), |
|
window.t("اول"), |
|
window.t("دوم"), |
|
window.t("سوم"), |
|
window.t("چهارم"), |
|
window.t("پنجم"), |
|
window.t("ششم"), |
|
window.t("هفتم"), |
|
window.t("هشتم"), |
|
window.t("نهم"), |
|
window.t("دهم"), |
|
window.t("یازدهم"), |
|
window.t("دوازدهم"), |
|
]; |
|
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, handleDelete, route, factorInfo } = props; |
|
|
|
return ( |
|
<> |
|
{window.innerWidth < 1000 ? ( |
|
<TableContainer component={Paper}> |
|
<Table className={classes.table} aria-label="simple table"> |
|
<TableHead> |
|
<TableRow> |
|
<TableCell align="right">{window.t("محصولات")}</TableCell> |
|
<TableCell align="center">{window.t("قیمت")}</TableCell> |
|
|
|
{route === "callback" ? ( |
|
<TableCell align="center">{window.t("تعداد")}</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} |
|
/> |
|
))} |
|
</TableBody> |
|
</Table> |
|
</TableContainer> |
|
) : null} |
|
{window.innerWidth > 1000 ? ( |
|
<TableContainer component={Paper}> |
|
<Table className={classes.table} aria-label="simple table"> |
|
<TableHead> |
|
<TableRow> |
|
<TableCell align="right">{window.t("محصولات")}</TableCell> |
|
<TableCell align="center">{window.t("تعداد")}</TableCell> |
|
<TableCell align="center">{window.t("قیمت")}</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} |
|
/> |
|
))} |
|
</TableBody> |
|
</Table> |
|
</TableContainer> |
|
) : null} |
|
</> |
|
); |
|
} |
|
|
|
const Item = (props) => { |
|
const { data, route } = props; |
|
if (!data.product) return null; |
|
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 |
|
style={{ height: 60 }} |
|
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 |
|
? window.t("الکترونیکی") |
|
: window.t("چاپی") |
|
} ${data.product.book.name} `} |
|
</strong> |
|
<p style={{ fontSize: 12 }}> |
|
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} |
|
</p> |
|
<span style={{ fontSize: 10 }}> |
|
{window.t("همراه با")} : |
|
{data.product.book.items || |
|
window.t("کد فعالسازی محتوای الکترونیک")} |
|
</span> |
|
</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: 14 }}> |
|
{window.tr(data.product.price * data.count) || "1000"}{" "} |
|
{window.t("تومان")} |
|
</strong> |
|
</div> |
|
{route === "cart" ? ( |
|
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> |
|
<span style={{ fontSize: 12 }}> |
|
{data.count} {window.t("عدد")} |
|
</span> |
|
</div> |
|
) : null} |
|
</div> |
|
</TableCell> |
|
{route === "callback" ? ( |
|
<TableCell> |
|
<strong className="d-flex justify-content-center align-items-center"> |
|
{data.count} {window.t("عدد")}{" "} |
|
</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 |
|
style={{ height: "60px" }} |
|
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: 13 }}> |
|
{`${data.product.book.name} `} |
|
</strong> |
|
<span style={{ fontSize: 12 }}> |
|
{" "} |
|
{`نسخه ${ |
|
+data.product.productType === 1 |
|
? window.t("الکترونیکی") |
|
: window.t("چاپی") |
|
}`} |
|
</span> |
|
|
|
<p style={{ fontSize: fontSize.desktop.info.p }}> |
|
{window.t("پایه") + ` ${grades[data.product.book.gradeId]}`} |
|
</p> |
|
</div> |
|
</div> |
|
</TableCell> |
|
<TableCell align="center"> |
|
<span style={{ fontSize: 12 }}>{data.count}</span> |
|
</TableCell> |
|
<TableCell> |
|
<div className="cart-item__price d-flex flex-column justify-content-center align-items-center"> |
|
<strong style={{ fontSize: 12 }}> |
|
{data.product.price * data.count || "1000"} |
|
</strong> |
|
</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);
|
|
|