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