корзина - на ревью
This commit is contained in:
Nikolai
parent
647a8bffb6
commit
adf272ba5b
@ -1,9 +1,17 @@
|
||||
import * as React from "react";
|
||||
import { Box, Button } from "@mui/material";
|
||||
import { Box, Button, Typography } from "@mui/material";
|
||||
import { DataGrid, GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
|
||||
import { useDemoData } from "@mui/x-data-grid-generator";
|
||||
import useStore, { StoreState } from "../../../../../store";
|
||||
import { ArrayProps } from "../types";
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemAvatar from '@mui/material/ListItemAvatar';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import theme from "../../../../../theme";
|
||||
|
||||
|
||||
@ -70,6 +78,9 @@ const rows = [
|
||||
//localStorage.setItem("tariffs", JSON.stringify(rows));
|
||||
|
||||
const DataGridElement: React.FC<MWProps> = ({ openModal }) => {
|
||||
let price = 0;
|
||||
let prices = 0;
|
||||
|
||||
const { data } = useDemoData({
|
||||
dataSet: "Commodity",
|
||||
rowLength: 10,
|
||||
@ -95,7 +106,9 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) => {
|
||||
}
|
||||
} );
|
||||
|
||||
let { selectedRowsData, selectedRowsDataSet } = useStore<StoreState>((state) => state);
|
||||
localStorage.setItem("tariffs", JSON.stringify(tariffsArray));
|
||||
|
||||
const { selectedRowsData, selectedRowsDataSet } = useStore<StoreState>((state) => state);
|
||||
const onRowsSelectionHandler = ( ids:GridSelectionModel ) => {
|
||||
const result:Array<ArrayProps> = [];
|
||||
ids.forEach((id) => tariffsArray.forEach( (row) => {
|
||||
@ -105,6 +118,16 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) => {
|
||||
selectedRowsDataSet( result );
|
||||
};
|
||||
|
||||
const { cartRowsData, cartRowsDataSet } = useStore<StoreState>((state) => state);
|
||||
const handleToBasket = () => {
|
||||
cartRowsDataSet( selectedRowsData );
|
||||
}
|
||||
|
||||
const handleRemoveBasket = ( id:number ) => {
|
||||
const cartFiltered = cartRowsData.filter( (row) => row.id != id );
|
||||
cartRowsDataSet( cartFiltered );
|
||||
}
|
||||
|
||||
return (
|
||||
<Box style={{ width: "100%" }}>
|
||||
<Box style={{ height: 400 }}>
|
||||
@ -153,14 +176,123 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) => {
|
||||
height: "42px",
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
marginTop: "25px",
|
||||
marginBottom: "25px",
|
||||
marginTop: "45px",
|
||||
marginBottom: "15px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.grayMedium.main
|
||||
}
|
||||
}}>
|
||||
Пакетизировать
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
onClick={ () => handleToBasket() }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "42px",
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
marginBottom: "45px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.grayMedium.main
|
||||
}
|
||||
}}>
|
||||
Сложить в корзину
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingBottom: "45px"
|
||||
}}>
|
||||
<Typography id="transition-modal-title" variant="caption">
|
||||
Корзина
|
||||
</Typography>
|
||||
|
||||
<List sx={{
|
||||
width: "50%",
|
||||
marginTop: "15px",
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.secondary.main
|
||||
}}>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ backgroundColor: theme.palette.content.main }}>
|
||||
<ShoppingCartIcon sx={{
|
||||
color: theme.palette.content.main,
|
||||
display: "none"
|
||||
}} />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary="Название тарифа"
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Цена ( ₽ )"
|
||||
/>
|
||||
<IconButton edge="end" aria-label="delete">
|
||||
<DeleteIcon sx={{
|
||||
color: theme.palette.grayDisabled.main,
|
||||
display: "none"
|
||||
}} />
|
||||
</IconButton>
|
||||
</ListItem>
|
||||
|
||||
{ cartRowsData.map( (item) => {
|
||||
if( item.type == "package" ) {
|
||||
price = 0;
|
||||
|
||||
if( item.tariffs ) {
|
||||
item.tariffs.forEach( (tariff) => {
|
||||
price += tariff.price;
|
||||
} );
|
||||
}
|
||||
} else {
|
||||
price = item.price;
|
||||
}
|
||||
|
||||
prices += price;
|
||||
|
||||
return(
|
||||
<ListItem key={ item.id }>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ backgroundColor: theme.palette.secondary.main }}>
|
||||
<ShoppingCartIcon sx={{
|
||||
color: theme.palette.content.main,
|
||||
}} />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={ item.name }
|
||||
/>
|
||||
<ListItemText
|
||||
primary={ price }
|
||||
sx={{ textAlign: "center" }}
|
||||
/>
|
||||
<IconButton edge="end" aria-label="delete" onClick={ () => handleRemoveBasket( item.id ) }>
|
||||
<DeleteIcon sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
}} />
|
||||
</IconButton>
|
||||
</ListItem>
|
||||
)
|
||||
} ) }
|
||||
|
||||
<Typography id="transition-modal-title" variant="h6" sx={{
|
||||
fontWeight: "normal",
|
||||
textAlign: "center",
|
||||
marginTop: "10px"
|
||||
}}>
|
||||
ИТОГО:   { prices } ₽
|
||||
</Typography>
|
||||
|
||||
</List>
|
||||
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
@ -7,7 +7,7 @@ import DataGridElement from "./DataGridElement";
|
||||
import ModalMini from "./ModalMini";
|
||||
import ModalPackage from "./ModalPackage";
|
||||
import { ArrayProps, Tariff } from "./types";
|
||||
import useStore from "../../../../store";
|
||||
import useStore, { StoreState } from "../../../../store";
|
||||
import theme from "../../../../theme";
|
||||
|
||||
|
||||
|
||||
10
src/store.ts
10
src/store.ts
@ -7,7 +7,10 @@ const useStore = create<StoreState>((set) => ({
|
||||
tariffsArraySet: (array) => set({ tariffsArray: array }),
|
||||
|
||||
selectedRowsData: [],
|
||||
selectedRowsDataSet: (array) => set({ selectedRowsData: array })
|
||||
selectedRowsDataSet: (array) => set({ selectedRowsData: array }),
|
||||
|
||||
cartRowsData: [],
|
||||
cartRowsDataSet: (array) => set({ cartRowsData: array })
|
||||
}))
|
||||
|
||||
export interface StoreState {
|
||||
@ -15,7 +18,10 @@ export interface StoreState {
|
||||
tariffsArraySet: (array:Array<ArrayProps>) => void,
|
||||
|
||||
selectedRowsData: Array<ArrayProps>,
|
||||
selectedRowsDataSet: (array:Array<ArrayProps>) => void
|
||||
selectedRowsDataSet: (array:Array<ArrayProps>) => void,
|
||||
|
||||
cartRowsData: Array<ArrayProps>,
|
||||
cartRowsDataSet: (array:Array<ArrayProps>) => void
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user