промокод
This commit is contained in:
Nikolai
parent
7d91b09757
commit
bb1d403021
@ -1,12 +1,56 @@
|
||||
import * as React from "react";
|
||||
import { Box, Typography, TextField, Checkbox, Button } from "@mui/material";
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
|
||||
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||||
import dayjs, { Dayjs } from "dayjs";
|
||||
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 InputLabel from "@mui/material/InputLabel";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Select, { SelectChangeEvent } from "@mui/material/Select";
|
||||
import theme from "../../../../theme";
|
||||
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{
|
||||
field: "id",
|
||||
headerName: "ID",
|
||||
width: 30,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: "name",
|
||||
headerName: "Название промокода",
|
||||
width: 200,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: "terms",
|
||||
headerName: "Условия",
|
||||
width: 210,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
field: "time",
|
||||
headerName: "Срок действия",
|
||||
type: "number",
|
||||
width: 110,
|
||||
sortable: false,
|
||||
}
|
||||
];
|
||||
|
||||
const rows = [
|
||||
{ id: 1, name: "Промокод 1", terms: "Первое, второе, третье", time: "200 дней" },
|
||||
{ id: 2, name: "Промокод 2", terms: "Первое, второе, третье", time: "200 дней" },
|
||||
{ id: 3, name: "Промокод 3", terms: "Первое, второе, третье", time: "200 дней" },
|
||||
];
|
||||
|
||||
const Promocode: React.FC = () => {
|
||||
const [value1, setValue1] = React.useState<Dayjs | null>();
|
||||
const handleChange1 = (newValue: Dayjs | null) => {
|
||||
@ -18,6 +62,11 @@ const Promocode: React.FC = () => {
|
||||
setValue2(newValue);
|
||||
};
|
||||
|
||||
const [service, setService] = React.useState("Шаблонизатор");
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setService(event.target.value as string);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
@ -35,164 +84,269 @@ const Promocode: React.FC = () => {
|
||||
ПРОМОКОД
|
||||
</Typography>
|
||||
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
width: "90%",
|
||||
height: "40px",
|
||||
fontWeight: "normal",
|
||||
color: theme.palette.grayDisabled.main,
|
||||
marginTop: "65px"
|
||||
}}>
|
||||
Название:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
width: "90%",
|
||||
height: "60px",
|
||||
fontWeight: "normal",
|
||||
color: theme.palette.secondary.main
|
||||
}}>
|
||||
GJ58HG6GG
|
||||
</Typography>
|
||||
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
width: "90%",
|
||||
height: "40px",
|
||||
fontWeight: "normal",
|
||||
color: theme.palette.grayDisabled.main,
|
||||
marginTop: "35px"
|
||||
}}>
|
||||
Условия:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
width: "90%",
|
||||
height: "60px",
|
||||
fontWeight: "normal",
|
||||
color: theme.palette.secondary.main
|
||||
}}>
|
||||
Работает, если заплатите 100500 денег
|
||||
</Typography>
|
||||
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
width: "90%",
|
||||
height: "40px",
|
||||
fontWeight: "normal",
|
||||
color: theme.palette.grayDisabled.main,
|
||||
marginTop: "35px"
|
||||
}}>
|
||||
Дата действия:
|
||||
</Typography>
|
||||
|
||||
<Box sx={{
|
||||
width: "90%",
|
||||
display: "flex"
|
||||
}}>
|
||||
<Typography sx={{
|
||||
width: "35px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "left",
|
||||
}}>С</Typography>
|
||||
|
||||
<DesktopDatePicker
|
||||
inputFormat="MM/DD/YYYY"
|
||||
value={value1}
|
||||
onChange={handleChange1}
|
||||
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="MM/DD/YYYY"
|
||||
value={value2}
|
||||
onChange={handleChange2}
|
||||
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),
|
||||
flexDirection: "column",
|
||||
justifyContent: "left",
|
||||
alignItems: "left",
|
||||
marginTop: "15px",
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: "20px",
|
||||
height: "42px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "left",
|
||||
alignItems: "left",
|
||||
marginRight: theme.spacing(1)
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
width: "90%",
|
||||
height: "40px",
|
||||
fontWeight: "normal",
|
||||
color: theme.palette.grayDisabled.main,
|
||||
marginTop: "35px"
|
||||
}}>
|
||||
<Checkbox sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
'&.Mui-checked': {
|
||||
Название:
|
||||
</Typography>
|
||||
<TextField
|
||||
id = "standard-basic"
|
||||
label = { "" }
|
||||
variant = "filled"
|
||||
color = "secondary"
|
||||
sx={{
|
||||
width: "200px",
|
||||
height: "30px",
|
||||
marginTop: "-20px"
|
||||
}}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
} }}
|
||||
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={ fieldName }
|
||||
/>
|
||||
|
||||
<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="MM/DD/YYYY"
|
||||
value={value1}
|
||||
onChange={handleChange1}
|
||||
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="MM/DD/YYYY"
|
||||
value={value2}
|
||||
onChange={handleChange2}
|
||||
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,
|
||||
},
|
||||
}} />
|
||||
</Box>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
Бессрочно
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "90%",
|
||||
marginTop: "55px",
|
||||
alignItems: "left"
|
||||
}}>
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
height: "52px",
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.grayMedium.main
|
||||
}
|
||||
}}>
|
||||
Cоздать
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
width: "90%",
|
||||
marginTop: "55px",
|
||||
alignItems: "left"
|
||||
}}>
|
||||
<Button
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
height: "52px",
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.grayMedium.main
|
||||
}
|
||||
}}>
|
||||
Cоздать
|
||||
</Button>
|
||||
<Box style={{ width: "80%", marginTop: "35px" }}>
|
||||
<Box style={{ height: 400 }}>
|
||||
<DataGrid
|
||||
checkboxSelection={true}
|
||||
rows={ rows }
|
||||
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>
|
||||
|
||||
@ -4,16 +4,16 @@ import { DataGrid, GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-da
|
||||
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 FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
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 FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import theme from "../../../../../theme";
|
||||
|
||||
|
||||
@ -68,12 +68,12 @@ const columns: GridColDef[] = [
|
||||
];
|
||||
|
||||
const rows = [
|
||||
{ id: 1, name: 'Тариф 1', type: 'tariff', service: 'Шаблонизатор', disk: "100 гб", time: "200 дней", points: "300", price: 100500 },
|
||||
{ id: 2, name: 'Тариф 2', type: 'tariff', service: 'Шаблонизатор', disk: "100 гб", time: "200 дней", points: "300", price: 100500 },
|
||||
{ id: 3, name: 'Тариф 3', type: 'tariff', service: 'Шаблонизатор', disk: "100 гб", time: "200 дней", points: "300", price: 100500 },
|
||||
{ id: 4, name: 'Пакет 1', type: 'package', tariffs: [
|
||||
{ id: 1, name: 'Тариф 1', type: 'tariff', service: 'Шаблонизатор', disk: "100 гб", time: "200 дней", points: "300", price: 100500 },
|
||||
{ id: 2, name: 'Тариф 2', type: 'tariff', service: 'Шаблонизатор', disk: "100 гб", time: "200 дней", points: "300", price: 100500 },
|
||||
{ id: 1, name: "Тариф 1", type: "tariff", service: "Шаблонизатор", disk: "100 гб", time: "200 дней", points: "300", price: 100500 },
|
||||
{ id: 2, name: "Тариф 2", type: "tariff", service: "Шаблонизатор", disk: "100 гб", time: "200 дней", points: "300", price: 100500 },
|
||||
{ id: 3, name: "Тариф 3", type: "tariff", service: "Шаблонизатор", disk: "100 гб", time: "200 дней", points: "300", price: 100500 },
|
||||
{ id: 4, name: "Пакет 1", type: "package", tariffs: [
|
||||
{ id: 1, name: "Тариф 1", type: "tariff", service: "Шаблонизатор", disk: "100 гб", time: "200 дней", points: "300", price: 100500 },
|
||||
{ id: 2, name: "Тариф 2", type: "tariff", service: "Шаблонизатор", disk: "100 гб", time: "200 дней", points: "300", price: 100500 },
|
||||
] },
|
||||
];
|
||||
|
||||
@ -227,7 +227,7 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) => {
|
||||
<FormControlLabel sx={{ marginTop: "15px", }} control={
|
||||
<Checkbox sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
'&.Mui-checked': {
|
||||
"&.Mui-checked": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
}} onClick={ () => checkboxToggle() } />
|
||||
|
||||
@ -7,7 +7,7 @@ import DataGridElement from "./DataGridElement";
|
||||
import ModalMini from "./ModalMini";
|
||||
import ModalPackage from "./ModalPackage";
|
||||
import { ArrayProps, Tariff } from "./types";
|
||||
import useStore, { StoreState } from "../../../../store";
|
||||
import useStore from "../../../../store";
|
||||
import theme from "../../../../theme";
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user