forked from VinokurovVE/tests
Rename interfaces, AppBar changes
This commit is contained in:
@ -10,7 +10,7 @@ import ApiTest from "./pages/ApiTest"
|
||||
import SignUp from "./pages/auth/SignUp"
|
||||
import { initAuth, useAuthStore } from "./store/auth"
|
||||
import { useEffect, useState } from "react"
|
||||
import { CircularProgress } from "@mui/material"
|
||||
import { Box, CircularProgress, Container } from "@mui/material"
|
||||
|
||||
function App() {
|
||||
const auth = useAuthStore()
|
||||
@ -33,7 +33,10 @@ function App() {
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
height: "100vh"
|
||||
}}>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route element={<MainLayout />}>
|
||||
@ -50,7 +53,7 @@ function App() {
|
||||
</Route>
|
||||
</Routes>
|
||||
</Router>
|
||||
</>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -6,9 +6,7 @@ import MenuItem from '@mui/material/MenuItem';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import PersonAdd from '@mui/icons-material/PersonAdd';
|
||||
import Settings from '@mui/icons-material/Settings';
|
||||
import Logout from '@mui/icons-material/Logout';
|
||||
|
||||
|
@ -9,7 +9,8 @@ export default function DataTable(props: Props) {
|
||||
|
||||
return (
|
||||
<DataGrid
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
autoHeight
|
||||
style={{ width: "100%" }}
|
||||
rows={props.rows}
|
||||
columns={props.columns}
|
||||
initialState={{
|
||||
@ -19,9 +20,16 @@ export default function DataTable(props: Props) {
|
||||
}}
|
||||
pageSizeOptions={[10, 20, 50, 100]}
|
||||
checkboxSelection
|
||||
|
||||
disableRowSelectionOnClick
|
||||
|
||||
processRowUpdate={(updatedRow, originalRow) => {
|
||||
console.log(updatedRow)
|
||||
return updatedRow
|
||||
}}
|
||||
|
||||
onProcessRowUpdateError={(error)=>{
|
||||
console.log(error)
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
@ -1,11 +1,97 @@
|
||||
import React from 'react'
|
||||
import { SubmitHandler, useForm } from 'react-hook-form';
|
||||
import { IRoleCreate } from '../../interfaces/role';
|
||||
import { AxiosResponse } from 'axios';
|
||||
import { ApiResponse } from '../../interfaces/auth';
|
||||
import RoleService from '../../services/RoleService';
|
||||
import { Box, Button, Modal, TextField, Typography } from '@mui/material';
|
||||
|
||||
const CreateRoleModal = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
interface Props {
|
||||
open: boolean;
|
||||
setOpen: (state: boolean) => void;
|
||||
}
|
||||
|
||||
export default CreateRoleModal
|
||||
const style = {
|
||||
position: 'absolute' as 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 400,
|
||||
bgcolor: 'background.paper',
|
||||
boxShadow: 24,
|
||||
borderRadius: 2,
|
||||
p: 4,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "8px"
|
||||
}
|
||||
|
||||
export default function CreateRoleModal({
|
||||
open,
|
||||
setOpen
|
||||
}: Props) {
|
||||
const { register, handleSubmit, formState: { errors } } = useForm<IRoleCreate>({
|
||||
defaultValues: {
|
||||
name: '',
|
||||
description: ''
|
||||
}
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<IRoleCreate> = async (data) => {
|
||||
try {
|
||||
const response: AxiosResponse<ApiResponse> = await RoleService.createRole(data)
|
||||
console.log(response.data)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
|
||||
<Box sx={style}>
|
||||
<Typography variant="h6" component="h6" gutterBottom>
|
||||
Создание роли
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
margin="normal"
|
||||
label="Название"
|
||||
required
|
||||
{...register('name', { required: 'Название обязательно' })}
|
||||
error={!!errors.name}
|
||||
helperText={errors.name?.message}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
margin="normal"
|
||||
label="Описание"
|
||||
{...register('description')}
|
||||
error={!!errors.description}
|
||||
helperText={errors.description?.message}
|
||||
/>
|
||||
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
gap: "8px"
|
||||
}}>
|
||||
<Button type="submit" variant="contained" color="primary">
|
||||
Добавить пользователя
|
||||
</Button>
|
||||
|
||||
<Button type="button" variant="outlined" color="primary" onClick={() => setOpen(false)}>
|
||||
Отмена
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
@ -3,7 +3,7 @@ import { AxiosResponse } from 'axios';
|
||||
import { SubmitHandler, useForm } from 'react-hook-form';
|
||||
import { ApiResponse } from '../../interfaces/auth';
|
||||
import UserService from '../../services/UserService';
|
||||
import { CreateUserFormData } from '../../interfaces/user';
|
||||
import { IUserCreate } from '../../interfaces/user';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
@ -29,7 +29,7 @@ export default function CreateUserModal({
|
||||
open,
|
||||
setOpen,
|
||||
}: Props) {
|
||||
const { register, handleSubmit, formState: { errors } } = useForm<CreateUserFormData>({
|
||||
const { register, handleSubmit, formState: { errors } } = useForm<IUserCreate>({
|
||||
defaultValues: {
|
||||
email: '',
|
||||
login: '',
|
||||
@ -41,7 +41,7 @@ export default function CreateUserModal({
|
||||
}
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<CreateUserFormData> = async (data) => {
|
||||
const onSubmit: SubmitHandler<IUserCreate> = async (data) => {
|
||||
try {
|
||||
const response: AxiosResponse<ApiResponse> = await UserService.createUser(data)
|
||||
console.log(response.data)
|
||||
|
@ -16,18 +16,6 @@ export interface UserCreds extends User {
|
||||
password: string;
|
||||
}
|
||||
|
||||
|
||||
export interface Role {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
id: number;
|
||||
}
|
||||
|
||||
export interface RoleCreate {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
}
|
||||
|
||||
export interface AuthState {
|
||||
isAuthenticated: boolean;
|
||||
token: string | null;
|
||||
|
10
frontend_reactjs/src/interfaces/role.ts
Normal file
10
frontend_reactjs/src/interfaces/role.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export interface IRole {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
id: number;
|
||||
}
|
||||
|
||||
export interface IRoleCreate {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
export interface CreateUserFormData {
|
||||
export interface IUserCreate {
|
||||
email: string;
|
||||
login: string;
|
||||
phone: string;
|
||||
|
@ -128,7 +128,10 @@ export default function DashboardLayout() {
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={innerTheme}>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
height: "100%"
|
||||
}}>
|
||||
<CssBaseline />
|
||||
<AppBar position="absolute" open={open}>
|
||||
<Toolbar
|
||||
@ -143,7 +146,7 @@ export default function DashboardLayout() {
|
||||
onClick={toggleDrawer}
|
||||
sx={{
|
||||
marginRight: '36px',
|
||||
...(open && { display: 'none' }),
|
||||
//...(open && { display: 'none' }),
|
||||
}}
|
||||
>
|
||||
<MenuIcon />
|
||||
@ -172,7 +175,7 @@ export default function DashboardLayout() {
|
||||
</Badge>
|
||||
</IconButton> */}
|
||||
|
||||
<AccountMenu/>
|
||||
<AccountMenu />
|
||||
</Box>
|
||||
|
||||
</Toolbar>
|
||||
@ -187,16 +190,18 @@ export default function DashboardLayout() {
|
||||
}}
|
||||
>
|
||||
<Box display="flex" justifyContent={'space-between'} width={"100%"}>
|
||||
<IconButton onClick={toggleDrawer}>
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
|
||||
</Box>
|
||||
</Toolbar>
|
||||
|
||||
<Divider />
|
||||
|
||||
<List component="nav">
|
||||
{pages.map((item, index) => (
|
||||
<ListItem key={index} disablePadding>
|
||||
<ListItem
|
||||
key={index}
|
||||
disablePadding
|
||||
>
|
||||
<ListItemButton
|
||||
onClick={() => {
|
||||
navigate(item.path)
|
||||
@ -207,7 +212,9 @@ export default function DashboardLayout() {
|
||||
<ListItemIcon>
|
||||
{item.icon}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={item.label} />
|
||||
<ListItemText
|
||||
primary={item.label}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
|
@ -1,32 +1,24 @@
|
||||
import { useState } from 'react'
|
||||
import RoleCard from '../components/RoleCard'
|
||||
import Modal from '../components/Modal'
|
||||
import useDataFetching from '../components/FetchingData'
|
||||
import RoleService from '../services/RoleService'
|
||||
import { Box, Button } from '@mui/material'
|
||||
import { Box, Button, CircularProgress } from '@mui/material'
|
||||
import DataTable from '../components/DataTable'
|
||||
import { GridColDef } from '@mui/x-data-grid'
|
||||
import { useRoles } from '../hooks/swrHooks'
|
||||
import CreateRoleModal from '../components/modals/CreateRoleModal'
|
||||
|
||||
interface IRoleCard {
|
||||
id: number
|
||||
name: string
|
||||
description: string
|
||||
}
|
||||
export default function Roles() {
|
||||
const { roles, isError, isLoading } = useRoles()
|
||||
|
||||
interface Props {
|
||||
showModal: boolean;
|
||||
}
|
||||
|
||||
function Roles() {
|
||||
const [showModal, setShowModal] = useState<Props>({ showModal: false });
|
||||
const cards = useDataFetching<IRoleCard[]>(`${import.meta.env.VITE_API_AUTH_URL}/auth/roles/`, [])
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{ field: 'id', headerName: 'ID', type: "number", width: 70 },
|
||||
{ field: 'name', headerName: 'Название', width: 90 },
|
||||
{ field: 'description', headerName: 'Описание', width: 90 },
|
||||
{ field: 'name', headerName: 'Название', width: 90, editable: true },
|
||||
{ field: 'description', headerName: 'Описание', width: 90, editable: true },
|
||||
];
|
||||
|
||||
if (isError) return <div>Произошла ошибка при получении данных.</div>
|
||||
if (isLoading) return <CircularProgress />
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
@ -35,23 +27,16 @@ function Roles() {
|
||||
gap: '16px',
|
||||
flexGrow: 1
|
||||
}}>
|
||||
<Button onClick={() => console.log("TODO: Add")}>
|
||||
<Button onClick={() => setOpen(true)}>
|
||||
Добавить роль
|
||||
</Button>
|
||||
|
||||
{cards &&
|
||||
<DataTable rows={cards} columns={columns} />
|
||||
}
|
||||
<CreateRoleModal
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
/>
|
||||
|
||||
<DataTable rows={roles} columns={columns} />
|
||||
</Box>
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
{cards.length > 0 && cards.map((card, index) => <RoleCard key={index} {...card} />)}
|
||||
<button className='absolute w-0 h-0' onClick={() => setShowModal({ showModal: true })}>+</button>
|
||||
<Modal {...showModal} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Roles
|
||||
}
|
@ -2,7 +2,7 @@ import { Box, Button, CircularProgress } from "@mui/material"
|
||||
import DataTable from "../components/DataTable"
|
||||
import { GridColDef } from "@mui/x-data-grid"
|
||||
import { useRoles, useUsers } from "../hooks/swrHooks"
|
||||
import { Role } from "../interfaces/auth"
|
||||
import { IRole } from "../interfaces/role"
|
||||
import { useState } from "react"
|
||||
import CreateUserModal from "../components/modals/CreateUserModal"
|
||||
|
||||
@ -26,7 +26,7 @@ export default function Users() {
|
||||
headerName: 'Роль',
|
||||
valueGetter: (value, row) => {
|
||||
if (roles) {
|
||||
const roleName = roles.find((role: Role) => role.id === value).name
|
||||
const roleName = roles.find((role: IRole) => role.id === value).name
|
||||
return roleName
|
||||
} else {
|
||||
return value
|
||||
|
@ -3,10 +3,10 @@ import { TextField, Button, Container, Typography, Box } from '@mui/material';
|
||||
import { AxiosResponse } from 'axios';
|
||||
import { ApiResponse } from '../../interfaces/auth';
|
||||
import UserService from '../../services/UserService';
|
||||
import { CreateUserFormData } from '../../interfaces/user';
|
||||
import { IUserCreate } from '../../interfaces/user';
|
||||
|
||||
const SignUp = () => {
|
||||
const { register, handleSubmit, formState: { errors } } = useForm<CreateUserFormData>({
|
||||
const { register, handleSubmit, formState: { errors } } = useForm<IUserCreate>({
|
||||
defaultValues: {
|
||||
email: '',
|
||||
login: '',
|
||||
@ -19,7 +19,7 @@ const SignUp = () => {
|
||||
})
|
||||
|
||||
|
||||
const onSubmit: SubmitHandler<CreateUserFormData> = async (data) => {
|
||||
const onSubmit: SubmitHandler<IUserCreate> = async (data) => {
|
||||
try {
|
||||
const response: AxiosResponse<ApiResponse> = await UserService.createUser(data)
|
||||
console.log('Успешная регистрация:', response.data);
|
||||
|
@ -1,12 +1,12 @@
|
||||
import axiosInstance from "../http/axiosInstance";
|
||||
import { Role, RoleCreate } from "../interfaces/auth";
|
||||
import { IRoleCreate } from "../interfaces/role";
|
||||
|
||||
export default class RoleService {
|
||||
static async getRoles() {
|
||||
return await axiosInstance.get(`/auth/roles`)
|
||||
}
|
||||
|
||||
static async createRole(data: RoleCreate) {
|
||||
static async createRole(data: IRoleCreate) {
|
||||
return await axiosInstance.post(`/auth/roles/`, data)
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user