PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

DataTable

Browse Source
This commit is contained in:
Nikolai 2022-09-22 15:09:10 +03:00
parent b006bea51e
commit fbc1818bc9
4 changed files with 190 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
package-lock.json generated
View File

@ -15,6 +15,7 @@
"@mui/icons-material": "^5.10.3",
"@mui/material": "^5.10.5",
"@mui/styled-engine-sc": "^5.10.3",
"@mui/x-data-grid": "^5.17.3",
"@mui/x-date-pickers": "^5.0.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
@ -3716,6 +3717,31 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/@mui/x-data-grid": {
"version": "5.17.3",
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.17.3.tgz",
"integrity": "sha512-EBTD7nfV3b6Zz7X8IS0BR4x3ihzHqGAemP6Ah22N/oHTIz+HWsCMtsYWRs5SjQewVjY8JXJ3fcJJEgldOcaqqg==",
"dependencies": {
"@babel/runtime": "^7.18.9",
"@mui/utils": "^5.10.3",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
"reselect": "^4.1.6"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"@mui/material": "^5.4.1",
"@mui/system": "^5.4.1",
"react": "^17.0.2 || ^18.0.0",
"react-dom": "^17.0.2 || ^18.0.0"
}
},
"node_modules/@mui/x-date-pickers": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.2.tgz",
@ -15137,6 +15163,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
},
"node_modules/reselect": {
"version": "4.1.6",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
"integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
},
"node_modules/resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@ -20173,6 +20204,18 @@
}
}
},
"@mui/x-data-grid": {
"version": "5.17.3",
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.17.3.tgz",
"integrity": "sha512-EBTD7nfV3b6Zz7X8IS0BR4x3ihzHqGAemP6Ah22N/oHTIz+HWsCMtsYWRs5SjQewVjY8JXJ3fcJJEgldOcaqqg==",
"requires": {
"@babel/runtime": "^7.18.9",
"@mui/utils": "^5.10.3",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
"reselect": "^4.1.6"
}
},
"@mui/x-date-pickers": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.2.tgz",
@ -28319,6 +28362,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
},
"reselect": {
"version": "4.1.6",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
"integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
},
"resolve": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",

1
package.json
View File

@ -10,6 +10,7 @@
"@mui/icons-material": "^5.10.3",
"@mui/material": "^5.10.5",
"@mui/styled-engine-sc": "^5.10.3",
"@mui/x-data-grid": "^5.17.3",
"@mui/x-date-pickers": "^5.0.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",

76
src/Components/LoggedIn/ModalEntities/index.tsx
View File

@ -3,6 +3,7 @@ import { useLinkClickHandler } from "react-router-dom";
import { Box, Modal, Fade, Backdrop, Typography } from "@mui/material";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import theme from "../../../theme";
@ -10,6 +11,54 @@ export interface MWProps {
open: boolean
}
const columns: GridColDef[] = [
{
field: 'id',
headerName: 'ID',
width: 30,
sortable: false,
},
{
field: 'dateTime',
headerName: 'Дата / время',
width: 150,
sortable: false,
},
{
field: 'email',
headerName: 'Почта',
width: 110,
sortable: false,
},{
field: 'summa',
headerName: 'Сумма',
type: 'number',
width: 110,
sortable: false,
},
{
field: 'idLong',
headerName: 'ID long',
type: 'number',
width: 110,
sortable: false,
},
{
field: 'paymentStatus',
headerName: 'Статус платежа',
width: 160,
sortable: false,
},
];
const rows = [
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
];
const ModalEntities = ({open}: MWProps ) => {
const [value, setValue] = React.useState(0);
@ -36,8 +85,8 @@ const ModalEntities = ({open}: MWProps ) => {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "30%",
height: "30%",
width: "72%",
height: "60%",
bgcolor: theme.palette.menu.main,
boxShadow: 24,
color: theme.palette.secondary.main,
@ -96,10 +145,25 @@ const ModalEntities = ({open}: MWProps ) => {
{ value == 1 && (
<Box sx={{ marginLeft: "20px" }}>
<Typography>Дата/время</Typography>
<Typography>Сумма</Typography>
<Typography>Id long</Typography>
<Typography>Статус платежа</Typography>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
disableSelectionOnClick
experimentalFeatures={{ newEditingApi: true }}
sx={{
width: "700px",
height: "400px",
color: theme.palette.secondary.main,
"& .MuiDataGrid-iconSeparator": {
display: "none"
},
"& .css-levciy-MuiTablePagination-displayedRows": {
color: theme.palette.secondary.main
}
}}
/>
</Box>
) }

77
src/Components/LoggedIn/ModalUser/index.tsx
View File

@ -3,12 +3,62 @@ import { useLinkClickHandler } from "react-router-dom";
import { Box, Modal, Fade, Backdrop, Typography } from "@mui/material";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import theme from "../../../theme";
export interface MWProps {
open: boolean
}
const columns: GridColDef[] = [
{
field: 'id',
headerName: 'ID',
width: 30,
sortable: false,
},
{
field: 'dateTime',
headerName: 'Дата / время',
width: 150,
sortable: false,
},
{
field: 'email',
headerName: 'Почта',
width: 110,
sortable: false,
},{
field: 'summa',
headerName: 'Сумма',
type: 'number',
width: 110,
sortable: false,
},
{
field: 'idLong',
headerName: 'ID long',
type: 'number',
width: 110,
sortable: false,
},
{
field: 'paymentStatus',
headerName: 'Статус платежа',
width: 160,
sortable: false,
},
];
const rows = [
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
{ id: 1, dateTime: '22.09.22 12:15', email: 'asd@mail.ru', summa: 100500, idLong: 123, paymentStatus: "В обработке" },
];
const ModalUser = ({open}: MWProps ) => {
const [value, setValue] = React.useState(0);
@ -35,8 +85,8 @@ const ModalUser = ({open}: MWProps ) => {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "30%",
height: "30%",
width: "72%",
height: "60%",
bgcolor: theme.palette.menu.main,
boxShadow: 24,
color: theme.palette.secondary.main,
@ -95,10 +145,25 @@ const ModalUser = ({open}: MWProps ) => {
{ value == 1 && (
<Box sx={{ marginLeft: "20px" }}>
<Typography>Дата/время</Typography>
<Typography>Сумма</Typography>
<Typography>Id long</Typography>
<Typography>Статус платежа</Typography>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
disableSelectionOnClick
experimentalFeatures={{ newEditingApi: true }}
sx={{
width: "700px",
height: "400px",
color: theme.palette.secondary.main,
"& .MuiDataGrid-iconSeparator": {
display: "none"
},
"& .css-levciy-MuiTablePagination-displayedRows": {
color: theme.palette.secondary.main
}
}}
/>
</Box>
) }