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

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);