Получение списка юзеров в адмике

This commit is contained in:
ArtChaos189 2023-05-05 15:07:37 +03:00
parent c251a598cc
commit 3bf2eee43d
4 changed files with 153 additions and 82 deletions

@ -21,6 +21,8 @@ export const 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> => {
return new Promise((resolve) => {
setTimeout(() => {

@ -7,8 +7,6 @@ import { ThemeProvider } from "@mui/material/styles";
import { SnackbarProvider } from "notistack";
import theme from "./theme";
import PublicRoute from "@kitUI/publicRoute";
import PrivateRoute from "@kitUI/privateRoute";
@ -26,6 +24,7 @@ import PromocodeManagement from "@pages/dashboard/Content/PromocodeManagement";
import { SettingRoles } from "@pages/Setting/SettingRoles";
import Support from "@pages/dashboard/Content/Support/Support";
import theme from "./theme";
import "./index.css";
const componentsArray = [

@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
type ConditionalRenderProps = {
isLoading: boolean;
role: string;
childrenUser?: JSX.Element;
childrenAdmin?: JSX.Element;
childrenManager?: JSX.Element;
@ -10,25 +11,26 @@ type ConditionalRenderProps = {
const ConditionalRender = ({
isLoading,
role,
childrenUser,
childrenAdmin,
childrenManager,
}: ConditionalRenderProps): JSX.Element => {
const [role, setRole] = useState<string>("");
// const [role, setRole] = useState<string>("");
useEffect(() => {
const axiosAccount = async () => {
try {
const { data } = await axios.get("https://admin.pena.digital/user/643e23f3dba63ba17272664d");
setRole(data.role);
} catch (error) {
console.error("Ошибка при получение роли пользавателя");
}
};
axiosAccount();
}, [role]);
// useEffect(() => {
// const axiosAccount = async () => {
// try {
// const { data } = await axios.get("https://admin.pena.digital/user/643e23f3dba63ba17272664d");
// setRole(data.role);
// } catch (error) {
// console.error("Ошибка при получение роли пользавателя");
// }
// };
// axiosAccount();
// }, [role]);
if (isLoading) {
if (!isLoading) {
if (role === "admin") {
return childrenAdmin ? childrenAdmin : <div>Администратор</div>;
}

@ -1,6 +1,7 @@
import * as React from "react";
import { useNavigate } from "react-router-dom";
import { Box, Typography, TextField, Button } from "@mui/material";
import axios from "axios";
import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableBody from "@mui/material/TableBody";
@ -13,14 +14,18 @@ import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ClearIcon from "@mui/icons-material/Clear";
import { getRoles_mock, TMockData } from "../../../api/roles";
import type { UsersType } from "../../../api/roles";
import theme from "../../../theme";
import axios from "axios";
import ConditionalRender from "@root/pages/Setting/ConditionalRender";
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>) => {
setSelectedValue(event.target.value);
};
@ -57,20 +62,30 @@ const Users: React.FC = () => {
handleChangeData();
const [roles, setRoles] = React.useState<TMockData>([]);
const [users, setUsers] = React.useState<UsersType>();
React.useEffect(() => {
const axiosRoles = async () => {
const response = await axios({
const { data } = await axios({
method: "get",
url: "https://admin.pena.digital/strator/role/",
});
return response;
setRoles(data);
};
axiosRoles().then((result) => {
setRoles(result.data);
});
const gettingRegisteredUsers = async () => {
const { data } = await axios({
method: "get",
url: "https://hub.pena.digital/user/",
});
setUsers(data);
};
gettingRegisteredUsers();
axiosRoles();
}, []);
console.log(users);
return (
<React.Fragment>
<Button
@ -382,72 +397,125 @@ const Users: React.FC = () => {
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>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow
sx={{
borderBottom: "2px solid",
borderColor: theme.palette.grayLight.main,
height: "100px",
cursor: "pointer",
}}
onClick={() => navigate("/modalUser")}
>
<TableCell sx={{ textAlign: "center" }}>
<Typography
sx={{
color: theme.palette.secondary.main,
}}
>
1
</Typography>
</TableCell>
</TableRow>
<ConditionalRender
isLoading={false}
role={selectedValue}
childrenUser={
<>
{users &&
users.map(({ login, email, phoneNumber, isDeleted, createdAt }) => (
<TableRow
key={createdAt}
sx={{
borderBottom: "2px solid",
borderColor: theme.palette.grayLight.main,
height: "100px",
}}
>
<TableCell sx={{ textAlign: "center" }}>
<Typography
variant="h4"
sx={{
color: theme.palette.secondary.main,
}}
>
{login}
</Typography>
</TableCell>
<TableRow
sx={{
borderBottom: "2px solid",
borderColor: theme.palette.grayLight.main,
height: "100px",
cursor: "pointer",
}}
onClick={() => navigate("/modalUser")}
>
<TableCell sx={{ textAlign: "center" }}>
<Typography
sx={{
color: theme.palette.secondary.main,
}}
>
2
</Typography>
</TableCell>
</TableRow>
<TableRow
sx={{
borderBottom: "1px solid",
border: theme.palette.secondary.main,
height: "100px",
cursor: "pointer",
}}
onClick={() => navigate("/modalUser")}
>
<TableCell sx={{ textAlign: "center" }}>
<Typography
sx={{
color: theme.palette.secondary.main,
}}
>
3
</Typography>
</TableCell>
</TableRow>
<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 ? "true" : "false"}
</Typography>
</TableCell>
<TableCell sx={{ textAlign: "center" }}>
<Typography
variant="h4"
sx={{
color: theme.palette.secondary.main,
}}
>
{createdAt}
</Typography>
</TableCell>
</TableRow>
))}
</>
}
/>
</TableBody>
</Table>
</React.Fragment>