From bb1d403021eabb19f6f13fcea5592d9f08e186e7 Mon Sep 17 00:00:00 2001
From: Nikolai <ni.tkachuk@yandex.ru>
Date: Thu, 13 Oct 2022 12:36:28 +0600
Subject: [PATCH] =?UTF-8?q?=D0=BF=D1=80=D0=BE=D0=BC=D0=BE=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LoggedIn/Content/Promocode/index.tsx      | 460 ++++++++++++------
 .../Content/Tariffs/DataGridElement/index.tsx |  34 +-
 .../LoggedIn/Content/Tariffs/index.tsx        |   2 +-
 3 files changed, 325 insertions(+), 171 deletions(-)

diff --git a/src/Components/LoggedIn/Content/Promocode/index.tsx b/src/Components/LoggedIn/Content/Promocode/index.tsx
index 757979b..eb05258 100644
--- a/src/Components/LoggedIn/Content/Promocode/index.tsx
+++ b/src/Components/LoggedIn/Content/Promocode/index.tsx
@@ -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>
diff --git a/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx b/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx
index 6e68ec8..2b84732 100644
--- a/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx
+++ b/src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx
@@ -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() } />
diff --git a/src/Components/LoggedIn/Content/Tariffs/index.tsx b/src/Components/LoggedIn/Content/Tariffs/index.tsx
index 35c46b0..b608b00 100644
--- a/src/Components/LoggedIn/Content/Tariffs/index.tsx
+++ b/src/Components/LoggedIn/Content/Tariffs/index.tsx
@@ -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";