452 lines
14 KiB
TypeScript
452 lines
14 KiB
TypeScript
import * as React from "react";
|
||
import { Box, Typography, TextField, Checkbox, Button } from "@mui/material";
|
||
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
|
||
import Table from "@mui/material/Table";
|
||
import TableBody from "@mui/material/TableBody";
|
||
import TableCell from "@mui/material/TableCell";
|
||
import TableRow from "@mui/material/TableRow";
|
||
import TableContainer from "@mui/material/TableContainer";
|
||
import Paper from "@mui/material/Paper";
|
||
import { DataGrid, GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
|
||
import MenuItem from "@mui/material/MenuItem";
|
||
import Select, { SelectChangeEvent } from "@mui/material/Select";
|
||
import { PrivilegesProps, PromocodeProps } from "./types";
|
||
import useStore, { StoreState } from "../../../../store";
|
||
import theme from "../../../../theme";
|
||
|
||
|
||
const columns: GridColDef[] = [
|
||
{
|
||
field: "id",
|
||
headerName: "ID",
|
||
width: 30,
|
||
sortable: false,
|
||
},
|
||
{
|
||
field: "name",
|
||
headerName: "Название промокода",
|
||
width: 200,
|
||
sortable: false,
|
||
},
|
||
{
|
||
field: "endless",
|
||
headerName: "Бесконечный",
|
||
width: 120,
|
||
sortable: false,
|
||
},
|
||
{
|
||
field: "from",
|
||
headerName: "От",
|
||
width: 120,
|
||
sortable: false,
|
||
},
|
||
{
|
||
field: "dueTo",
|
||
headerName: "До",
|
||
width: 120,
|
||
sortable: false,
|
||
},
|
||
{
|
||
field: "privileges",
|
||
headerName: "Привилегии",
|
||
width: 210,
|
||
sortable: false,
|
||
}
|
||
];
|
||
|
||
const rows:Array<PromocodeProps> = [
|
||
{ id: 1, name: "Промокод 1", endless: false, from: "", dueTo: "", privileges: [
|
||
{
|
||
good: "Товар 1",
|
||
discount: 0.3
|
||
},
|
||
{
|
||
good: "Товар 2",
|
||
discount: 0.2
|
||
}
|
||
] },
|
||
{ id: 2, name: "Промокод 2", endless: false, from: "", dueTo: "", privileges: [
|
||
{
|
||
good: "Товар 3",
|
||
discount: 0.3
|
||
},
|
||
{
|
||
good: "Товар 4",
|
||
discount: 0.2
|
||
}
|
||
] },
|
||
{ id: 3, name: "Промокод 3", endless: false, from: "", dueTo: "", privileges: [
|
||
{
|
||
good: "Товар 5",
|
||
discount: 0.3
|
||
},
|
||
{
|
||
good: "Товар 6",
|
||
discount: 0.2
|
||
}
|
||
] },
|
||
];
|
||
|
||
const Promocode: React.FC = () => {
|
||
const [checkboxState, setCheckboxState] = React.useState<boolean>(false);
|
||
const toggleCheckbox = () => { setCheckboxState( !checkboxState ); }
|
||
|
||
const [value1, setValue1] = React.useState<Date>( new Date() );
|
||
const [value2, setValue2] = React.useState<Date>( new Date() );
|
||
|
||
const [service, setService] = React.useState("Шаблонизатор");
|
||
const handleChange = (event: SelectChangeEvent) => {
|
||
setService(event.target.value as string);
|
||
};
|
||
|
||
const { promocodeArray, promocodeArraySet } = useStore<StoreState>((state) => state);
|
||
|
||
const promocodeArrayConverted = promocodeArray.map( (item) => {
|
||
const dateFrom = item.from ? new Date( Number(item.from) ) : "";
|
||
const dateDueTo = item.from ? new Date( Number(item.dueTo) ) : "";
|
||
|
||
const strFrom = dateFrom
|
||
? `${dateFrom.getDate()}.${dateFrom.getMonth()}.${dateFrom.getFullYear()}`
|
||
: "-"
|
||
|
||
const strDueTo = dateDueTo
|
||
? `${dateDueTo.getDate()}.${dateDueTo.getMonth()}.${dateDueTo.getFullYear()}`
|
||
: "-"
|
||
|
||
if( item.privileges.length ) {
|
||
const result = item.privileges.reduce( (acc, privilege) => {
|
||
acc = acc
|
||
? `${acc}, ${privilege.good} - ${privilege.discount}%`
|
||
: `${privilege.good} - ${privilege.discount * 100}%`;
|
||
|
||
return acc;
|
||
}, "" );
|
||
|
||
return { ...item, privileges: result, from: strFrom, dueTo: strDueTo }
|
||
} else {
|
||
return { ...item, from: strFrom, dueTo: strDueTo }
|
||
}
|
||
} );
|
||
|
||
const createPromocode = ( name:string, discount: number ) => {
|
||
const newPromocode = {
|
||
id: new Date().getTime(),
|
||
name,
|
||
endless: checkboxState,
|
||
from: checkboxState ? "" : new Date( value1 ).getTime() +"",
|
||
dueTo: checkboxState ? "" : new Date( value2 ).getTime() +"",
|
||
privileges: [{
|
||
good: service,
|
||
discount: discount / 100
|
||
}]
|
||
}
|
||
|
||
const promocodeArrayUpdated = [ ...promocodeArray, newPromocode ];
|
||
promocodeArraySet( promocodeArrayUpdated );
|
||
}
|
||
|
||
const fieldName = React.useRef<HTMLInputElement | null>(null);
|
||
const fieldDiscount = React.useRef<HTMLInputElement | null>(null);
|
||
|
||
const checkFields = () => {
|
||
if( fieldName.current != null && fieldDiscount.current != null ) {
|
||
createPromocode( fieldName.current.value, Number(fieldDiscount.current.value) );
|
||
}
|
||
}
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||
<Typography
|
||
variant="subtitle1"
|
||
sx={{
|
||
width: "90%",
|
||
height: "60px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
color: theme.palette.secondary.main
|
||
}}>
|
||
ПРОМОКОД
|
||
</Typography>
|
||
|
||
<Box sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "left",
|
||
alignItems: "left",
|
||
marginTop: "15px",
|
||
}}>
|
||
{/*<Typography */}
|
||
{/* variant="h4" */}
|
||
{/* sx={{*/}
|
||
{/* width: "90%",*/}
|
||
{/* height: "40px",*/}
|
||
{/* fontWeight: "normal",*/}
|
||
{/* color: theme.palette.grayDisabled.main,*/}
|
||
{/* marginTop: "35px"*/}
|
||
{/*}}>*/}
|
||
{/* Название:*/}
|
||
{/*</Typography>*/}
|
||
<TextField
|
||
id = "standard-basic"
|
||
label = { "Название" }
|
||
variant = "filled"
|
||
color = "secondary"
|
||
sx={{
|
||
height: "30px",
|
||
}}
|
||
InputProps={{
|
||
style: {
|
||
backgroundColor: theme.palette.content.main,
|
||
color: theme.palette.secondary.main,
|
||
} }}
|
||
InputLabelProps={{
|
||
style: {
|
||
color: theme.palette.secondary.main
|
||
} }}
|
||
inputRef={ fieldName }
|
||
/>
|
||
|
||
<Typography
|
||
variant="h4"
|
||
sx={{
|
||
width: "90%",
|
||
height: "40px",
|
||
fontWeight: "normal",
|
||
color: theme.palette.grayDisabled.main,
|
||
marginTop: "75px"
|
||
}}>
|
||
Условия:
|
||
</Typography>
|
||
|
||
<Select
|
||
labelId="demo-simple-select-label"
|
||
id="demo-simple-select"
|
||
value={service}
|
||
label="Age"
|
||
onChange={handleChange}
|
||
sx={{
|
||
color: theme.palette.secondary.main,
|
||
border: "1px solid",
|
||
borderColor: theme.palette.secondary.main,
|
||
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
||
borderColor: theme.palette.secondary.main
|
||
},
|
||
".MuiSvgIcon-root ": {
|
||
fill: theme.palette.secondary.main,
|
||
}
|
||
}}
|
||
>
|
||
<MenuItem value={"Шаблонизатор документов"}>Шаблонизатор</MenuItem>
|
||
<MenuItem value={"Опросник"}>Опросник</MenuItem>
|
||
<MenuItem value={"Аналитика сокращателя"}>Аналитика сокращателя</MenuItem>
|
||
<MenuItem value={"АБ тесты"}>АБ тесты</MenuItem>
|
||
</Select>
|
||
|
||
<TextField
|
||
id = "standard-basic"
|
||
label = { "Процент скидки" }
|
||
variant = "filled"
|
||
color = "secondary"
|
||
sx={{
|
||
marginTop: "15px"
|
||
}}
|
||
InputProps={{
|
||
style: {
|
||
backgroundColor: theme.palette.content.main,
|
||
color: theme.palette.secondary.main,
|
||
} }}
|
||
InputLabelProps={{
|
||
style: {
|
||
color: theme.palette.secondary.main
|
||
} }}
|
||
inputRef={ fieldDiscount }
|
||
/>
|
||
|
||
<TableContainer component={Paper} sx={{
|
||
width: "100%",
|
||
marginTop: "35px",
|
||
backgroundColor: theme.palette.content.main
|
||
}}>
|
||
<Table sx={{ minWidth: 650, }} aria-label="simple table">
|
||
<TableBody>
|
||
<TableRow sx={{ border: "1px solid white" }} >
|
||
<TableCell component="th" scope="row" sx={{ color: theme.palette.secondary.main }}>
|
||
Работает, если заплатите 100500 денег
|
||
</TableCell>
|
||
</TableRow>
|
||
<TableRow sx={{ border: "1px solid white" }} >
|
||
<TableCell component="th" scope="row" sx={{ color: theme.palette.secondary.main }}>
|
||
Вы должны будете продать душу дьяволу
|
||
</TableCell>
|
||
</TableRow>
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
|
||
<Typography
|
||
variant="h4"
|
||
sx={{
|
||
width: "90%",
|
||
height: "40px",
|
||
fontWeight: "normal",
|
||
color: theme.palette.grayDisabled.main,
|
||
marginTop: "55px"
|
||
}}>
|
||
Дата действия:
|
||
</Typography>
|
||
|
||
<Box
|
||
sx={{
|
||
width: "90%",
|
||
display: "flex"
|
||
}}
|
||
>
|
||
<Typography sx={{
|
||
width: "35px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "left",
|
||
}}>С</Typography>
|
||
|
||
<DesktopDatePicker
|
||
inputFormat="DD/MM/YYYY"
|
||
value={ value1 }
|
||
onChange={ (e) => { if(e) { setValue1(e) } } }
|
||
renderInput={(params) => <TextField {...params} />}
|
||
InputProps={{ sx: {
|
||
height: "40px",
|
||
color: theme.palette.secondary.main,
|
||
border: "1px solid",
|
||
borderColor: theme.palette.secondary.main,
|
||
"& .MuiSvgIcon-root": { color: theme.palette.secondary.main }
|
||
} }}
|
||
/>
|
||
|
||
<Typography sx={{
|
||
width: "65px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
}}>по</Typography>
|
||
|
||
<DesktopDatePicker
|
||
inputFormat="DD/MM/YYYY"
|
||
value={ value2 }
|
||
onChange={ (e) => { if(e) { setValue2(e) } } }
|
||
renderInput={(params) => <TextField {...params} />}
|
||
InputProps={{ sx: {
|
||
height: "40px",
|
||
color: theme.palette.secondary.main,
|
||
border: "1px solid",
|
||
borderColor: theme.palette.secondary.main,
|
||
"& .MuiSvgIcon-root": { color: theme.palette.secondary.main }
|
||
} }}
|
||
/>
|
||
</Box>
|
||
|
||
|
||
<Box sx={{
|
||
display: "flex",
|
||
width: "90%",
|
||
marginTop: theme.spacing(2),
|
||
}}>
|
||
<Box sx={{
|
||
width: "20px",
|
||
height: "42px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "left",
|
||
alignItems: "left",
|
||
marginRight: theme.spacing(1)
|
||
}}>
|
||
<Checkbox sx={{
|
||
color: theme.palette.secondary.main,
|
||
"&.Mui-checked": {
|
||
color: theme.palette.secondary.main,
|
||
},
|
||
}} onClick={ () => toggleCheckbox() } />
|
||
</Box>
|
||
<Box sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
Бессрочно
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box sx={{
|
||
width: "90%",
|
||
marginTop: "55px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
alignItems: "center"
|
||
}}>
|
||
<Button
|
||
variant = "contained"
|
||
sx={{
|
||
backgroundColor: theme.palette.menu.main,
|
||
height: "52px",
|
||
fontWeight: "normal",
|
||
fontSize: "17px",
|
||
"&:hover": {
|
||
backgroundColor: theme.palette.grayMedium.main
|
||
}
|
||
}}
|
||
onClick={ () => checkFields() } >
|
||
Cоздать
|
||
</Button>
|
||
</Box>
|
||
|
||
</Box>
|
||
|
||
<Box style={{ width: "80%", marginTop: "55px" }}>
|
||
<Box style={{ height: 400 }}>
|
||
<DataGrid
|
||
checkboxSelection={true}
|
||
rows={ promocodeArrayConverted }
|
||
columns={ columns }
|
||
sx={{
|
||
color: theme.palette.secondary.main,
|
||
"& .MuiDataGrid-iconSeparator": {
|
||
display: "none"
|
||
},
|
||
"& .css-levciy-MuiTablePagination-displayedRows": {
|
||
color: theme.palette.secondary.main
|
||
},
|
||
"& .MuiSvgIcon-root": {
|
||
color: theme.palette.secondary.main
|
||
},
|
||
"& .MuiTablePagination-selectLabel": {
|
||
color: theme.palette.secondary.main
|
||
},
|
||
"& .MuiInputBase-root": {
|
||
color: theme.palette.secondary.main
|
||
},
|
||
"& .MuiButton-text": {
|
||
color: theme.palette.secondary.main
|
||
},
|
||
}}
|
||
components={{ Toolbar: GridToolbar }}
|
||
onSelectionModelChange={ (ids) => console.log("datagrid select") }
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
|
||
</LocalizationProvider>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
|
||
|
||
export default Promocode;
|