@ -1,4 +1,7 @@
import React from "react" ;
import React from "react" ;
import { connect } from "react-redux" ;
import { userProduct } from "~/Redux/actions" ;
import { makeStyles } from "@material-ui/core/styles" ;
import { makeStyles } from "@material-ui/core/styles" ;
import Table from "@material-ui/core/Table" ;
import Table from "@material-ui/core/Table" ;
import TableBody from "@material-ui/core/TableBody" ;
import TableBody from "@material-ui/core/TableBody" ;
@ -56,7 +59,7 @@ const fontSize = {
} ,
} ,
} ;
} ;
export default function BasicTable ( props ) {
function BasicTable ( props ) {
const classes = useStyles ( ) ;
const classes = useStyles ( ) ;
const { list , handleCounter , handleDelete } = props ;
const { list , handleCounter , handleDelete } = props ;
const sum = ( ) => {
const sum = ( ) => {
@ -91,7 +94,10 @@ export default function BasicTable(props) {
< Item
< Item
data = { row }
data = { row }
key = { i }
key = { i }
handleCounter = { handleCounter }
// handleCounter={handleCounter}
pushToCart = { props . pushToCart }
info = { props . info }
id = { props . id }
handleDelete = { handleDelete }
handleDelete = { handleDelete }
/ >
/ >
) ) }
) ) }
@ -100,7 +106,9 @@ export default function BasicTable(props) {
< span style = { { color : "grey" } } > { sum ( ) } محصول < / s p a n >
< span style = { { color : "grey" } } > { sum ( ) } محصول < / s p a n >
< / T a b l e C e l l >
< / T a b l e C e l l >
< TableCell align = "center" >
< TableCell align = "center" >
< span style = { { color : "grey" } } > مبلغ کل { totalPrice ( ) } < / s p a n >
< span style = { { color : "grey" } } >
مبلغ کل { props . payPrice }
< / s p a n >
< / T a b l e C e l l >
< / T a b l e C e l l >
< / T a b l e R o w >
< / T a b l e R o w >
< / T a b l e B o d y >
< / T a b l e B o d y >
@ -123,7 +131,10 @@ export default function BasicTable(props) {
< Item
< Item
data = { row }
data = { row }
key = { i }
key = { i }
handleCounter = { handleCounter }
// handleCounter={handleCounter}
pushToCart = { props . pushToCart }
info = { props . info }
id = { props . id }
handleDelete = { handleDelete }
handleDelete = { handleDelete }
/ >
/ >
) ) }
) ) }
@ -132,7 +143,9 @@ export default function BasicTable(props) {
< span style = { { color : "grey" } } > < / s p a n >
< span style = { { color : "grey" } } > < / s p a n >
< / T a b l e C e l l >
< / T a b l e C e l l >
< TableCell align = "center" >
< TableCell align = "center" >
< span style = { { color : "grey" } } > مبلغ کل { totalPrice ( ) } < / s p a n >
< span style = { { color : "grey" } } >
مبلغ کل { props . payPrice }
< / s p a n >
< / T a b l e C e l l >
< / T a b l e C e l l >
< TableCell align = "center" component = "th" scope = "row" >
< TableCell align = "center" component = "th" scope = "row" >
< span style = { { color : "grey" } } > { sum ( ) } محصول < / s p a n >
< span style = { { color : "grey" } } > { sum ( ) } محصول < / s p a n >
@ -149,33 +162,31 @@ export default function BasicTable(props) {
) ;
) ;
}
}
// id: 1,
// title: "ریاضیات گسسته خیلی پیشرفته",
// subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
// options: "بسته های الحاقی: کیف، کفش و کوله پشتی",
// image: book1,
// slicePrice: 300000,
// number: 1,
// price: 2500000,
const Item = ( props ) => {
const Item = ( props ) => {
const { data , handleCounter , handleDelete } = props ;
const { data , pushToCart , handleDelete , info , id } = props ;
return (
return (
< >
< >
{ window . innerWidth < 1000 ? (
{ window . innerWidth < 1000 ? (
< TableRow key = { data . name } >
< TableRow key = { data . product . book . name } >
< TableCell align = "right" component = "th" scope = "row" >
< TableCell align = "right" component = "th" scope = "row" >
< div className = "mobile-cart-table-product d-flex align-items-center" >
< div className = "mobile-cart-table-product d-flex align-items-center" >
< img src = { data . image } alt = { data . title } / >
< 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" >
< div className = "mobile-cart-table-product__info d-flex flex-column p-1" >
< strong style = { { fontSize : fontSize . mobile . info . strong } } >
< strong style = { { fontSize : fontSize . mobile . info . strong } } >
{ data . title }
{ ` کتاب ${
data . product . productType === "1" ? "دیجیتال" : "فیزیکی"
} ` +
" " +
data . product . book . name }
< / s t r o n g >
< / s t r o n g >
< p style = { { fontSize : fontSize . mobile . info . p } } >
< p style = { { fontSize : fontSize . mobile . info . p } } >
{ data . subTitle }
{ data . product . book . category }
< / p >
< / p >
< span style = { { fontSize : fontSize . mobile . info . span } } >
< span style = { { fontSize : fontSize . mobile . info . span } } >
{ data . options }
{ data . product . book . item || "هیچی" }
< / s p a n >
< / s p a n >
< div className = "mobile-cart-table-product__info--delete d-flex align-items-center align-self-end" >
< div className = "mobile-cart-table-product__info--delete d-flex align-items-center align-self-end" >
< DeleteOutlineOutlinedIcon
< DeleteOutlineOutlinedIcon
@ -199,27 +210,35 @@ const Item = (props) => {
< div className = "mobile-cart-table-price d-flex flex-column align-items-center" >
< 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" >
< div className = "mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center" >
< strong style = { { fontSize : fontSize . mobile . price . strong } } >
< strong style = { { fontSize : fontSize . mobile . price . strong } } >
{ data . price }
{ data . product . book . pr ice || "1000" }
< / s t r o n g >
< / s t r o n g >
< span style = { { fontSize : fontSize . mobile . price . span } } >
< span style = { { fontSize : fontSize . mobile . price . span } } >
{ data . slicePrice } قیمت هر واحد
{ data . product . book . subPrice || "100" } قیمت هر واحد
< / s p a n >
< / s p a n >
< / d i v >
< / d i v >
< div className = "mobile-cart-table-price__counter d-flex justify-content-around align-items-center" >
< div className = "mobile-cart-table-price__counter d-flex justify-content-around align-items-center" >
< button
< button
onClick = { ( ) => handleCounter ( "increase" , data . id ) }
onClick = { ( ) =>
pushToCart ( {
productId : data . productId ,
userId : id ,
count : 1 ,
} )
}
style = { { fontSize : fontSize . mobile . counter . button } }
style = { { fontSize : fontSize . mobile . counter . button } }
>
>
+
+
< / b u t t o n >
< / b u t t o n >
< span style = { { fontSize : fontSize . mobile . counter . span } } >
< span style = { { fontSize : fontSize . mobile . counter . span } } >
{ data . number }
{ data . count }
< / s p a n >
< / s p a n >
< button
< button
onClick = { ( ) =>
onClick = { ( ) =>
data . number > 1
pushToCart ( {
? handleCounter ( "decrease" , data . id )
productId : data . productId ,
: handleDelete ( data . id )
userId : id ,
count : - 1 ,
} )
}
}
style = { { fontSize : fontSize . mobile . counter . button } }
style = { { fontSize : fontSize . mobile . counter . button } }
>
>
@ -231,19 +250,26 @@ const Item = (props) => {
< / T a b l e R o w >
< / T a b l e R o w >
) : null }
) : null }
{ window . innerWidth > 1000 ? (
{ window . innerWidth > 1000 ? (
< TableRow key = { data . name } >
< TableRow key = { data . product . book . name } >
< TableCell align = "right" component = "th" scope = "row" >
< TableCell align = "right" component = "th" scope = "row" >
< div className = "cart-item__info d-flex" >
< div className = "cart-item__info d-flex" >
< img src = { data . image } alt = { data . title } / >
< 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" >
< div className = "d-flex flex-column justify-content-center" >
< strong style = { { fontSize : fontSize . desktop . info . strong } } >
< strong style = { { fontSize : fontSize . desktop . info . strong } } >
{ data . title }
{ ` کتاب ${
data . product . productType === "1" ? "دیجیتال" : "فیزیکی"
} ` +
" " +
data . product . book . name }
< / s t r o n g >
< / s t r o n g >
< p style = { { fontSize : fontSize . desktop . info . p } } >
< p style = { { fontSize : fontSize . desktop . info . p } } >
{ data . subTitle }
{ data . product . book . category }
< / p >
< / p >
< span style = { { fontSize : fontSize . desktop . info . span } } >
< span style = { { fontSize : fontSize . desktop . info . span } } >
{ data . options } بسته الحاقی :
{ data . product . book . items || "چیزی وارد نشده" } بسته الحاقی :
< / s p a n >
< / s p a n >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
@ -251,10 +277,10 @@ const Item = (props) => {
< TableCell >
< TableCell >
< div className = "cart-item__price d-flex flex-column justify-content-center align-items-center" >
< div className = "cart-item__price d-flex flex-column justify-content-center align-items-center" >
< strong style = { { fontSize : fontSize . desktop . price . strong } } >
< strong style = { { fontSize : fontSize . desktop . price . strong } } >
{ data . price } تومان
{ data . product . book . pr ice || "1000" } تومان
< / s t r o n g >
< / s t r o n g >
< span style = { { fontSize : fontSize . desktop . price . span } } >
< span style = { { fontSize : fontSize . desktop . price . span } } >
{ data . slicePrice } قیمت هر واحد
{ data . product . book . subPrice || "100" } قیمت هر واحد
< / s p a n >
< / s p a n >
< / d i v >
< / d i v >
< / T a b l e C e l l >
< / T a b l e C e l l >
@ -262,19 +288,27 @@ const Item = (props) => {
< div className = "cart-item__counter d-flex align-items-center" >
< div className = "cart-item__counter d-flex align-items-center" >
< div className = "cart-item__counter--box d-flex justify-content-around align-items-center" >
< div className = "cart-item__counter--box d-flex justify-content-around align-items-center" >
< button
< button
onClick = { ( ) => handleCounter ( "increase" , data . id ) }
onClick = { ( ) =>
pushToCart ( {
productId : data . productId ,
userId : id ,
count : 1 ,
} )
}
style = { { fontSize : fontSize . desktop . counter . button } }
style = { { fontSize : fontSize . desktop . counter . button } }
>
>
+
+
< / b u t t o n >
< / b u t t o n >
< span style = { { fontSize : fontSize . desktop . counter . span } } >
< span style = { { fontSize : fontSize . desktop . counter . span } } >
{ data . number }
{ data . count }
< / s p a n >
< / s p a n >
< button
< button
onClick = { ( ) =>
onClick = { ( ) =>
data . number > 1
pushToCart ( {
? handleCounter ( "decrease" , data . id )
productId : data . productId ,
: handleDelete ( data . id )
userId : id ,
count : - 1 ,
} )
}
}
style = { { fontSize : fontSize . desktop . counter . button } }
style = { { fontSize : fontSize . desktop . counter . button } }
>
>
@ -287,10 +321,10 @@ const Item = (props) => {
< div className = "cart-item__delete d-flex align-items-center justify-content-center" >
< div className = "cart-item__delete d-flex align-items-center justify-content-center" >
< DeleteOutlineOutlinedIcon
< DeleteOutlineOutlinedIcon
style = { { color : "#FC120A" , fontSize : 30 , marginLeft : 5 } }
style = { { color : "#FC120A" , fontSize : 30 , marginLeft : 5 } }
onClick = { ( ) => handleDelete ( data . id ) }
// onClick={() => handleDelete(data.id)}
/ >
/ >
< span
< span
onClick = { ( ) => handleDelete ( data . id ) }
// onClick={() => handleDelete(data.id)}
style = { { fontSize : fontSize . desktop . delete . span } }
style = { { fontSize : fontSize . desktop . delete . span } }
>
>
حذف
حذف
@ -302,3 +336,12 @@ const Item = (props) => {
< / >
< / >
) ;
) ;
} ;
} ;
export default connect (
( state ) => ( {
loading : state . userProduct . loading ,
info : state . book . info ,
id : state . user . status . id ,
} ) ,
{ pushToCart : userProduct . add }
) ( BasicTable ) ;