мок пользователи
This commit is contained in:
Nikolai
parent
875b5bf375
commit
b11bfddbd7
28
package-lock.json
generated
28
package-lock.json
generated
@ -15,8 +15,8 @@
|
||||
"@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",
|
||||
"@mui/x-data-grid": "^5.17.4",
|
||||
"@mui/x-date-pickers": "^5.0.3",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
@ -3718,9 +3718,9 @@
|
||||
"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==",
|
||||
"version": "5.17.4",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.17.4.tgz",
|
||||
"integrity": "sha512-cxZuu65Whh1DNU9M2X5ljDOx+GAEpGeJLPnugMjhgqTOszfJZX/4kI7NftrPy051Hy0um0sv0NVTDSFXG6yixA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.9",
|
||||
"@mui/utils": "^5.10.3",
|
||||
@ -3743,9 +3743,9 @@
|
||||
}
|
||||
},
|
||||
"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",
|
||||
"integrity": "sha512-O2yxax8SnUX/M1lfU8+fcBEY+PmOnl0T4onmNrnFOT/7wiry7OYQDLa48nFpBYIK8ROjfi4sPzEKiFCrcwEwjw==",
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.3.tgz",
|
||||
"integrity": "sha512-njoQvsh7WzgiHu0wGSSPnQ4emT3SDzxCpaKK9DM0jRaxyxfC2wQX431RWmouG8JjnugTltwLnPwkKjLclHQhhA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.9",
|
||||
"@date-io/core": "^2.15.0",
|
||||
@ -20205,9 +20205,9 @@
|
||||
}
|
||||
},
|
||||
"@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==",
|
||||
"version": "5.17.4",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.17.4.tgz",
|
||||
"integrity": "sha512-cxZuu65Whh1DNU9M2X5ljDOx+GAEpGeJLPnugMjhgqTOszfJZX/4kI7NftrPy051Hy0um0sv0NVTDSFXG6yixA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.18.9",
|
||||
"@mui/utils": "^5.10.3",
|
||||
@ -20217,9 +20217,9 @@
|
||||
}
|
||||
},
|
||||
"@mui/x-date-pickers": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.2.tgz",
|
||||
"integrity": "sha512-O2yxax8SnUX/M1lfU8+fcBEY+PmOnl0T4onmNrnFOT/7wiry7OYQDLa48nFpBYIK8ROjfi4sPzEKiFCrcwEwjw==",
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.3.tgz",
|
||||
"integrity": "sha512-njoQvsh7WzgiHu0wGSSPnQ4emT3SDzxCpaKK9DM0jRaxyxfC2wQX431RWmouG8JjnugTltwLnPwkKjLclHQhhA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.18.9",
|
||||
"@date-io/core": "^2.15.0",
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
"@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",
|
||||
"@mui/x-data-grid": "^5.17.4",
|
||||
"@mui/x-date-pickers": "^5.0.3",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
|
||||
@ -1,18 +1,21 @@
|
||||
import * as React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Box, Typography, TextField, Button } from "@mui/material";
|
||||
import Table from '@mui/material/Table';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import Radio from '@mui/material/Radio';
|
||||
import Table from "@mui/material/Table";
|
||||
import TableHead from "@mui/material/TableHead";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableCell from "@mui/material/TableCell";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Radio from "@mui/material/Radio";
|
||||
import Skeleton from "@mui/material/Skeleton";
|
||||
import { getRoles_mock, TMockData } from "../../../../api/roles";
|
||||
import theme from "../../../../theme"
|
||||
|
||||
|
||||
const Users: React.FC = () => {
|
||||
const [selectedValue, setSelectedValue] = React.useState('a');
|
||||
const radioboxes = [ "a", "b", "c" ];
|
||||
|
||||
const [selectedValue, setSelectedValue] = React.useState("a");
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedValue(event.target.value);
|
||||
};
|
||||
@ -21,11 +24,13 @@ const Users: React.FC = () => {
|
||||
|
||||
const [data, setData] = React.useState<TMockData>([]);
|
||||
const handleChangeData = () => {
|
||||
getRoles_mock().then((mockdata: TMockData) => {
|
||||
setData( mockdata )
|
||||
getRoles_mock().then((mockdata) => {
|
||||
setData( mockdata );
|
||||
})
|
||||
};
|
||||
|
||||
handleChangeData();
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
@ -49,155 +54,98 @@ const Users: React.FC = () => {
|
||||
ИНФОРМАЦИЯ О ПРОЕКТЕ
|
||||
</Button>
|
||||
|
||||
|
||||
{
|
||||
data
|
||||
? <Table>YES</Table>
|
||||
: <Table>NO</Table>
|
||||
data.length
|
||||
? (
|
||||
<Table sx={{
|
||||
width: "90%",
|
||||
border: "2px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
marginTop: "35px",
|
||||
}} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow sx={{
|
||||
borderBottom: "2px solid",
|
||||
borderColor: theme.palette.grayLight.main,
|
||||
height: "100px"
|
||||
}}>
|
||||
<TableCell>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
}}>
|
||||
Имя
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
}}>
|
||||
Описание
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
}}>
|
||||
Отобразить
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
|
||||
{
|
||||
data.map(function(item, i) {
|
||||
return(
|
||||
<TableRow sx={{
|
||||
borderTop: "2px solid",
|
||||
borderColor: theme.palette.grayLight.main,
|
||||
height: "100px"
|
||||
}}>
|
||||
<TableCell>
|
||||
<Typography sx={{
|
||||
color: theme.palette.secondary.main
|
||||
}}>
|
||||
{ item.name }
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography sx={{
|
||||
color: theme.palette.secondary.main
|
||||
}}>
|
||||
{ item.desc }
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Radio
|
||||
checked={selectedValue === radioboxes[ i ]}
|
||||
onChange={handleChange}
|
||||
value={ radioboxes[ i ] }
|
||||
sx={{
|
||||
"&, &.Mui-checked": {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
}} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
</TableBody>
|
||||
</Table>
|
||||
) : (
|
||||
<Skeleton variant="circular" width={410} height={200} />
|
||||
)
|
||||
}
|
||||
|
||||
<Table sx={{
|
||||
width: "90%",
|
||||
border: "2px solid",
|
||||
borderColor: theme.palette.secondary.main,
|
||||
marginTop: "35px",
|
||||
}} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow sx={{
|
||||
borderBottom: "2px solid",
|
||||
borderColor: theme.palette.grayLight.main,
|
||||
height: "100px"
|
||||
}}>
|
||||
<TableCell>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
}}>
|
||||
Имя
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
}}>
|
||||
Описание
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
color: theme.palette.secondary.main,
|
||||
}}>
|
||||
Отобразить
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
<TableRow sx={{
|
||||
borderBottom: "2px solid",
|
||||
borderColor: theme.palette.grayLight.main,
|
||||
height: "100px"
|
||||
}}>
|
||||
<TableCell>
|
||||
<Typography sx={{
|
||||
color: theme.palette.secondary.main
|
||||
}}>
|
||||
admin
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography sx={{
|
||||
color: theme.palette.secondary.main
|
||||
}}>
|
||||
Администратор сервиса
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Radio
|
||||
checked={selectedValue === 'a'}
|
||||
onChange={handleChange}
|
||||
value="a"
|
||||
sx={{
|
||||
'&, &.Mui-checked': {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
}} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow sx={{
|
||||
borderBottom: "2px solid",
|
||||
borderColor: theme.palette.grayLight.main,
|
||||
height: "100px"
|
||||
}}>
|
||||
<TableCell>
|
||||
<Typography sx={{
|
||||
color: theme.palette.secondary.main
|
||||
}}>
|
||||
manager
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography sx={{
|
||||
color: theme.palette.secondary.main
|
||||
}}>
|
||||
Менеджер сервиса
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Radio
|
||||
checked={selectedValue === 'b'}
|
||||
onChange={handleChange}
|
||||
value="b"
|
||||
sx={{
|
||||
'&, &.Mui-checked': {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
}} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow sx={{
|
||||
borderBottom: "1px solid",
|
||||
border: theme.palette.secondary.main,
|
||||
height: "100px"
|
||||
}}>
|
||||
<TableCell>
|
||||
<Typography sx={{
|
||||
color: theme.palette.secondary.main
|
||||
}}>
|
||||
user
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography sx={{
|
||||
color: theme.palette.secondary.main
|
||||
}}>
|
||||
Пользователь сервиса
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Radio
|
||||
checked={selectedValue === 'c'}
|
||||
onChange={handleChange}
|
||||
value="c"
|
||||
sx={{
|
||||
'&, &.Mui-checked': {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
}} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
|
||||
<Box sx={{
|
||||
width: "90%",
|
||||
marginTop: "35px"
|
||||
|
||||
@ -18,7 +18,7 @@ const MOCK_DATA_USERS = [
|
||||
|
||||
export type TMockData = typeof MOCK_DATA_USERS;
|
||||
|
||||
export const getRoles_mock = () => {
|
||||
export const getRoles_mock = ():Promise<TMockData> => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve( MOCK_DATA_USERS );
|
||||
|
||||
Loading…
Reference in New Issue
Block a user