Получение списка юзеров в адмике
This commit is contained in:
parent
c251a598cc
commit
3bf2eee43d
@ -21,6 +21,8 @@ export const MOCK_DATA_USERS = [
|
|||||||
|
|
||||||
export type TMockData = typeof MOCK_DATA_USERS;
|
export type TMockData = typeof MOCK_DATA_USERS;
|
||||||
|
|
||||||
|
export type UsersType = { login: string; email: string; phoneNumber: string; isDeleted: boolean; createdAt: string }[];
|
||||||
|
|
||||||
export const getRoles_mock = (): Promise<TMockData> => {
|
export const getRoles_mock = (): Promise<TMockData> => {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
@ -7,8 +7,6 @@ import { ThemeProvider } from "@mui/material/styles";
|
|||||||
|
|
||||||
import { SnackbarProvider } from "notistack";
|
import { SnackbarProvider } from "notistack";
|
||||||
|
|
||||||
import theme from "./theme";
|
|
||||||
|
|
||||||
import PublicRoute from "@kitUI/publicRoute";
|
import PublicRoute from "@kitUI/publicRoute";
|
||||||
import PrivateRoute from "@kitUI/privateRoute";
|
import PrivateRoute from "@kitUI/privateRoute";
|
||||||
|
|
||||||
@ -26,6 +24,7 @@ import PromocodeManagement from "@pages/dashboard/Content/PromocodeManagement";
|
|||||||
import { SettingRoles } from "@pages/Setting/SettingRoles";
|
import { SettingRoles } from "@pages/Setting/SettingRoles";
|
||||||
import Support from "@pages/dashboard/Content/Support/Support";
|
import Support from "@pages/dashboard/Content/Support/Support";
|
||||||
|
|
||||||
|
import theme from "./theme";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
|
|
||||||
const componentsArray = [
|
const componentsArray = [
|
||||||
|
@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
|
|||||||
|
|
||||||
type ConditionalRenderProps = {
|
type ConditionalRenderProps = {
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
|
role: string;
|
||||||
childrenUser?: JSX.Element;
|
childrenUser?: JSX.Element;
|
||||||
childrenAdmin?: JSX.Element;
|
childrenAdmin?: JSX.Element;
|
||||||
childrenManager?: JSX.Element;
|
childrenManager?: JSX.Element;
|
||||||
@ -10,25 +11,26 @@ type ConditionalRenderProps = {
|
|||||||
|
|
||||||
const ConditionalRender = ({
|
const ConditionalRender = ({
|
||||||
isLoading,
|
isLoading,
|
||||||
|
role,
|
||||||
childrenUser,
|
childrenUser,
|
||||||
childrenAdmin,
|
childrenAdmin,
|
||||||
childrenManager,
|
childrenManager,
|
||||||
}: ConditionalRenderProps): JSX.Element => {
|
}: ConditionalRenderProps): JSX.Element => {
|
||||||
const [role, setRole] = useState<string>("");
|
// const [role, setRole] = useState<string>("");
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
const axiosAccount = async () => {
|
// const axiosAccount = async () => {
|
||||||
try {
|
// try {
|
||||||
const { data } = await axios.get("https://admin.pena.digital/user/643e23f3dba63ba17272664d");
|
// const { data } = await axios.get("https://admin.pena.digital/user/643e23f3dba63ba17272664d");
|
||||||
setRole(data.role);
|
// setRole(data.role);
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
console.error("Ошибка при получение роли пользавателя");
|
// console.error("Ошибка при получение роли пользавателя");
|
||||||
}
|
// }
|
||||||
};
|
// };
|
||||||
axiosAccount();
|
// axiosAccount();
|
||||||
}, [role]);
|
// }, [role]);
|
||||||
|
|
||||||
if (isLoading) {
|
if (!isLoading) {
|
||||||
if (role === "admin") {
|
if (role === "admin") {
|
||||||
return childrenAdmin ? childrenAdmin : <div>Администратор</div>;
|
return childrenAdmin ? childrenAdmin : <div>Администратор</div>;
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { Box, Typography, TextField, Button } from "@mui/material";
|
import { Box, Typography, TextField, Button } from "@mui/material";
|
||||||
|
import axios from "axios";
|
||||||
import Table from "@mui/material/Table";
|
import Table from "@mui/material/Table";
|
||||||
import TableHead from "@mui/material/TableHead";
|
import TableHead from "@mui/material/TableHead";
|
||||||
import TableBody from "@mui/material/TableBody";
|
import TableBody from "@mui/material/TableBody";
|
||||||
@ -13,14 +14,18 @@ import AccordionSummary from "@mui/material/AccordionSummary";
|
|||||||
import AccordionDetails from "@mui/material/AccordionDetails";
|
import AccordionDetails from "@mui/material/AccordionDetails";
|
||||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||||
import ClearIcon from "@mui/icons-material/Clear";
|
import ClearIcon from "@mui/icons-material/Clear";
|
||||||
|
|
||||||
import { getRoles_mock, TMockData } from "../../../api/roles";
|
import { getRoles_mock, TMockData } from "../../../api/roles";
|
||||||
|
|
||||||
|
import type { UsersType } from "../../../api/roles";
|
||||||
|
|
||||||
import theme from "../../../theme";
|
import theme from "../../../theme";
|
||||||
import axios from "axios";
|
import ConditionalRender from "@root/pages/Setting/ConditionalRender";
|
||||||
|
|
||||||
const Users: React.FC = () => {
|
const Users: React.FC = () => {
|
||||||
const radioboxes = ["a", "b", "c"];
|
const radioboxes = ["admin", "manager", "user"];
|
||||||
|
|
||||||
const [selectedValue, setSelectedValue] = React.useState("a");
|
const [selectedValue, setSelectedValue] = React.useState("admin");
|
||||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
setSelectedValue(event.target.value);
|
setSelectedValue(event.target.value);
|
||||||
};
|
};
|
||||||
@ -57,20 +62,30 @@ const Users: React.FC = () => {
|
|||||||
handleChangeData();
|
handleChangeData();
|
||||||
|
|
||||||
const [roles, setRoles] = React.useState<TMockData>([]);
|
const [roles, setRoles] = React.useState<TMockData>([]);
|
||||||
|
const [users, setUsers] = React.useState<UsersType>();
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
const axiosRoles = async () => {
|
const axiosRoles = async () => {
|
||||||
const response = await axios({
|
const { data } = await axios({
|
||||||
method: "get",
|
method: "get",
|
||||||
url: "https://admin.pena.digital/strator/role/",
|
url: "https://admin.pena.digital/strator/role/",
|
||||||
});
|
});
|
||||||
return response;
|
setRoles(data);
|
||||||
};
|
};
|
||||||
axiosRoles().then((result) => {
|
const gettingRegisteredUsers = async () => {
|
||||||
setRoles(result.data);
|
const { data } = await axios({
|
||||||
});
|
method: "get",
|
||||||
|
url: "https://hub.pena.digital/user/",
|
||||||
|
});
|
||||||
|
setUsers(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
gettingRegisteredUsers();
|
||||||
|
axiosRoles();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
console.log(users);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Button
|
<Button
|
||||||
@ -382,72 +397,125 @@ const Users: React.FC = () => {
|
|||||||
color: theme.palette.secondary.main,
|
color: theme.palette.secondary.main,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
ID
|
login
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell sx={{ textAlign: "center" }}>
|
||||||
|
<Typography
|
||||||
|
variant="h4"
|
||||||
|
sx={{
|
||||||
|
color: theme.palette.secondary.main,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
email
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell sx={{ textAlign: "center" }}>
|
||||||
|
<Typography
|
||||||
|
variant="h4"
|
||||||
|
sx={{
|
||||||
|
color: theme.palette.secondary.main,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
phoneNumber
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell sx={{ textAlign: "center" }}>
|
||||||
|
<Typography
|
||||||
|
variant="h4"
|
||||||
|
sx={{
|
||||||
|
color: theme.palette.secondary.main,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
isDeleted
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell sx={{ textAlign: "center" }}>
|
||||||
|
<Typography
|
||||||
|
variant="h4"
|
||||||
|
sx={{
|
||||||
|
color: theme.palette.secondary.main,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
createdAt
|
||||||
</Typography>
|
</Typography>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
|
|
||||||
<TableBody>
|
<TableBody>
|
||||||
<TableRow
|
<ConditionalRender
|
||||||
sx={{
|
isLoading={false}
|
||||||
borderBottom: "2px solid",
|
role={selectedValue}
|
||||||
borderColor: theme.palette.grayLight.main,
|
childrenUser={
|
||||||
height: "100px",
|
<>
|
||||||
cursor: "pointer",
|
{users &&
|
||||||
}}
|
users.map(({ login, email, phoneNumber, isDeleted, createdAt }) => (
|
||||||
onClick={() => navigate("/modalUser")}
|
<TableRow
|
||||||
>
|
key={createdAt}
|
||||||
<TableCell sx={{ textAlign: "center" }}>
|
sx={{
|
||||||
<Typography
|
borderBottom: "2px solid",
|
||||||
sx={{
|
borderColor: theme.palette.grayLight.main,
|
||||||
color: theme.palette.secondary.main,
|
height: "100px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
1
|
<TableCell sx={{ textAlign: "center" }}>
|
||||||
</Typography>
|
<Typography
|
||||||
</TableCell>
|
variant="h4"
|
||||||
</TableRow>
|
sx={{
|
||||||
|
color: theme.palette.secondary.main,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{login}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
<TableRow
|
<TableCell sx={{ textAlign: "center" }}>
|
||||||
sx={{
|
<Typography
|
||||||
borderBottom: "2px solid",
|
variant="h4"
|
||||||
borderColor: theme.palette.grayLight.main,
|
sx={{
|
||||||
height: "100px",
|
color: theme.palette.secondary.main,
|
||||||
cursor: "pointer",
|
}}
|
||||||
}}
|
>
|
||||||
onClick={() => navigate("/modalUser")}
|
{email}
|
||||||
>
|
</Typography>
|
||||||
<TableCell sx={{ textAlign: "center" }}>
|
</TableCell>
|
||||||
<Typography
|
<TableCell sx={{ textAlign: "center" }}>
|
||||||
sx={{
|
<Typography
|
||||||
color: theme.palette.secondary.main,
|
variant="h4"
|
||||||
}}
|
sx={{
|
||||||
>
|
color: theme.palette.secondary.main,
|
||||||
2
|
}}
|
||||||
</Typography>
|
>
|
||||||
</TableCell>
|
{phoneNumber}
|
||||||
</TableRow>
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
<TableRow
|
<TableCell sx={{ textAlign: "center" }}>
|
||||||
sx={{
|
<Typography
|
||||||
borderBottom: "1px solid",
|
variant="h4"
|
||||||
border: theme.palette.secondary.main,
|
sx={{
|
||||||
height: "100px",
|
color: theme.palette.secondary.main,
|
||||||
cursor: "pointer",
|
}}
|
||||||
}}
|
>
|
||||||
onClick={() => navigate("/modalUser")}
|
{isDeleted ? "true" : "false"}
|
||||||
>
|
</Typography>
|
||||||
<TableCell sx={{ textAlign: "center" }}>
|
</TableCell>
|
||||||
<Typography
|
<TableCell sx={{ textAlign: "center" }}>
|
||||||
sx={{
|
<Typography
|
||||||
color: theme.palette.secondary.main,
|
variant="h4"
|
||||||
}}
|
sx={{
|
||||||
>
|
color: theme.palette.secondary.main,
|
||||||
3
|
}}
|
||||||
</Typography>
|
>
|
||||||
</TableCell>
|
{createdAt}
|
||||||
</TableRow>
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
|
Loading…
Reference in New Issue
Block a user