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

Merge branch 'dev' into 'main'

Browse Source 
Dev

See merge request frontend/admin!11
This commit is contained in:
Mikhail 2023-05-08 15:43:43 +00:00
commit 1254227e54
24 changed files with 10873 additions and 10313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/roles.ts
View File

@ -1,30 +1,32 @@
const MOCK_DATA_USERS = [ export const MOCK_DATA_USERS = [
{ {
key: 0, key: 0,
id: "someid1", id: "someid1",
name: "admin", name: "admin",
desc:"Администратор сервиса" desc: "Администратор сервиса",
}, },
{ {
key: 1, key: 1,
id: "someid2", id: "someid2",
name: "manager", name: "manager",
desc:"Менеджер сервиса" desc: "Менеджер сервиса",
}, },
{ {
key: 2, key: 2,
id: "someid3", id: "someid3",
name: "user", name: "user",
desc:"Пользователь сервиса" desc: "Пользователь сервиса",
} },
]; ];
export type TMockData = typeof MOCK_DATA_USERS; export type TMockData = typeof MOCK_DATA_USERS;
export const getRoles_mock = ():Promise<TMockData> => { export type UsersType = { login: string; email: string; phoneNumber: string; isDeleted: boolean; createdAt: string }[];
export const getRoles_mock = (): Promise<TMockData> => {
return new Promise((resolve) => { return new Promise((resolve) => {
setTimeout(() => { setTimeout(() => {
resolve( MOCK_DATA_USERS ); resolve(MOCK_DATA_USERS);
}, 1000); }, 1000);
}); });
} };

41
src/api/tickets.ts
View File

@ -1,11 +1,23 @@
import makeRequest from "@root/kitUI/makeRequest"; import makeRequest from "@root/kitUI/makeRequest";
import { GetMessagesRequest, GetMessagesResponse, GetTicketsRequest, GetTicketsResponse, SendTicketMessageRequest } from "@root/model/ticket"; import {
GetMessagesRequest,
GetMessagesResponse,
GetTicketsRequest,
GetTicketsResponse,
SendTicketMessageRequest,
} from "@root/model/ticket";
import { authStore } from "@root/stores/auth";
import ReconnectingEventSource from "reconnecting-eventsource"; import ReconnectingEventSource from "reconnecting-eventsource";
// const { makeRequest } = authStore();
const supportApiUrl = "https://admin.pena.digital/heruvym"; const supportApiUrl = "https://admin.pena.digital/heruvym";
export function subscribeToAllTickets({ onMessage, onError, accessToken }: { export function subscribeToAllTickets({
onMessage,
onError,
accessToken,
}: {
accessToken: string; accessToken: string;
onMessage: (e: MessageEvent) => void; onMessage: (e: MessageEvent) => void;
onError: (e: Event) => void; onError: (e: Event) => void;
@ -19,7 +31,12 @@ export function subscribeToAllTickets({ onMessage, onError, accessToken }: {
}; };
} }
export function subscribeToTicketMessages({ onMessage, onError, accessToken, ticketId }: { export function subscribeToTicketMessages({
onMessage,
onError,
accessToken,
ticketId,
}: {
accessToken: string; accessToken: string;
ticketId: string; ticketId: string;
onMessage: (e: MessageEvent) => void; onMessage: (e: MessageEvent) => void;
@ -34,7 +51,10 @@ export function subscribeToTicketMessages({ onMessage, onError, accessToken, tic
}; };
} }
export async function getTickets({ body, signal }: { export async function getTickets({
body,
signal,
}: {
body: GetTicketsRequest; body: GetTicketsRequest;
signal: AbortSignal; signal: AbortSignal;
}): Promise<GetTicketsResponse> { }): Promise<GetTicketsResponse> {
@ -44,13 +64,16 @@ export async function getTickets({ body, signal }: {
useToken: true, useToken: true,
body, body,
signal, signal,
}).then(response => { }).then((response) => {
const result = (response as any).data as GetTicketsResponse; const result = (response as any).data as GetTicketsResponse;
return result; return result;
}); });
} }
export async function getTicketMessages({ body, signal }: { export async function getTicketMessages({
body,
signal,
}: {
body: GetMessagesRequest; body: GetMessagesRequest;
signal: AbortSignal; signal: AbortSignal;
}): Promise<GetMessagesResponse> { }): Promise<GetMessagesResponse> {
@ -60,15 +83,13 @@ export async function getTicketMessages({ body, signal }: {
useToken: true, useToken: true,
body, body,
signal, signal,
}).then(response => { }).then((response) => {
const result = (response as any).data as GetMessagesResponse; const result = (response as any).data as GetMessagesResponse;
return result; return result;
}); });
} }
export async function sendTicketMessage({ body }: { export async function sendTicketMessage({ body }: { body: SendTicketMessageRequest }) {
body: SendTicketMessageRequest;
}) {
return makeRequest({ return makeRequest({
url: `${supportApiUrl}/send`, url: `${supportApiUrl}/send`,
method: "POST", method: "POST",

96
src/index.tsx
View File

@ -1,12 +1,15 @@
import * as React from "react"; import * as React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import CssBaseline from "@mui/material/CssBaseline"; import CssBaseline from "@mui/material/CssBaseline";
import { SnackbarProvider } from 'notistack'; import { ThemeProvider } from "@mui/material/styles";
import { ThemeProvider } from '@mui/material/styles';
import { createRoot } from 'react-dom/client'; import { SnackbarProvider } from "notistack";
import { BrowserRouter, Routes, Route, Outlet, Navigate } from "react-router-dom";
import theme from "./theme";
import PublicRoute from "@kitUI/publicRoute"; import PublicRoute from "@kitUI/publicRoute";
import PrivateRoute from "@kitUI/privateRoute"; import PrivateRoute from "@kitUI/privateRoute";
import Signin from "@pages/Authorization/signin"; import Signin from "@pages/Authorization/signin";
import Signup from "@pages/Authorization/signup"; import Signup from "@pages/Authorization/signup";
import Restore from "@pages/Authorization/restore"; import Restore from "@pages/Authorization/restore";
@ -18,22 +21,25 @@ import Entities from "@pages/dashboard/Content/Entities";
import Tariffs from "@pages/dashboard/Content/Tariffs"; import Tariffs from "@pages/dashboard/Content/Tariffs";
import DiscountManagement from "@pages/dashboard/Content/DiscountManagement"; import DiscountManagement from "@pages/dashboard/Content/DiscountManagement";
import PromocodeManagement from "@pages/dashboard/Content/PromocodeManagement"; import PromocodeManagement from "@pages/dashboard/Content/PromocodeManagement";
import Support from "@root/pages/dashboard/Content/Support/Support"; import { SettingRoles } from "@pages/Setting/SettingRoles";
import "./index.css"; import Support from "@pages/dashboard/Content/Support/Support";
import theme from "./theme";
import "./index.css";
const componentsArray = [ const componentsArray = [
["/users", <Users />], ["/users", <Users />],
["/entities",<Entities />], ["/entities", <Entities />],
["/tariffs", <Tariffs />], ["/tariffs", <Tariffs />],
["/discounts", <DiscountManagement />], ["/discounts", <DiscountManagement />],
["/promocode", <PromocodeManagement />], ["/promocode", <PromocodeManagement />],
["/support", <Support />], ["/support", <Support />],
["/support/:ticketId", <Support />], ["/support/:ticketId", <Support />],
] ];
const container = document.getElementById('root'); const container = document.getElementById("root");
const root = createRoot(container!); const root = createRoot(container!);
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<CssBaseline /> <CssBaseline />
@ -41,21 +47,67 @@ root.render(
<SnackbarProvider> <SnackbarProvider>
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route path="/" element={<PublicRoute><Signin /></PublicRoute> } /> <Route
<Route path="/signin" element={ <PublicRoute><Signin /></PublicRoute> } /> path="/"
<Route path="/signup" element={ <PublicRoute><Signup /></PublicRoute> } /> element={
<Route path="/restore" element={ <PublicRoute><Restore /></PublicRoute> } /> <PublicRoute>
<Route path="/dispatch" element={ <PublicRoute><Sections /></PublicRoute> } /> <Signin />
<Route element={<PrivateRoute><Dashboard/></PrivateRoute>}> </PublicRoute>
{componentsArray.map((e:any, i) => ( }
<Route key={i} path={e[0]} element={e[1]} /> />
<Route
path="/signin"
element={
<PublicRoute>
<Signin />
</PublicRoute>
}
/>
<Route
path="/signup"
element={
<PublicRoute>
<Signup />
</PublicRoute>
}
/>
<Route
path="/restore"
element={
<PublicRoute>
<Restore />
</PublicRoute>
}
/>
<Route
path="/dispatch"
element={
<PublicRoute>
<Sections />
</PublicRoute>
}
/>
<Route
element={
<PrivateRoute>
<Dashboard />
</PrivateRoute>
}
>
<Route
path="/settingRoles"
element={
<PrivateRoute>
<SettingRoles />
</PrivateRoute>
}
/>
{componentsArray.map((e: any, i) => (
<Route key={e} path={e[0]} element={e[1]} />
))} ))}
</Route> </Route>
<Route <Route path="*" element={<Error404 />} />
path="*"
element={ <Error404 /> }
/>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
</SnackbarProvider> </SnackbarProvider>

73
src/kitUI/makeRequest.ts
View File

@ -1,36 +1,27 @@
import axios from 'axios' import axios from "axios";
interface MakeRequest { interface MakeRequest {
method?: string method?: string;
url: string url: string;
body?: unknown body?: unknown;
useToken?: boolean useToken?: boolean;
contentType?: boolean contentType?: boolean;
signal?: AbortSignal signal?: AbortSignal;
} }
export default (props: MakeRequest) => { export default (props: MakeRequest) => {
return ( return new Promise(async (resolve, reject) => {
new Promise(async (resolve, reject) => {
await makeRequest(props) await makeRequest(props)
.then(r => resolve(r)) .then((r) => resolve(r))
.catch(r => reject(r)) .catch((r) => reject(r));
}) });
) };
}
function makeRequest({ function makeRequest({ method = "post", url, body, useToken = true, signal, contentType = false }: MakeRequest) {
method = "post",
url,
body,
useToken = true,
signal,
contentType = false
}: MakeRequest) {
//В случае 401 рефреш должен попробовать вызваться 1 раз //В случае 401 рефреш должен попробовать вызваться 1 раз
let counterRefresh = true let counterRefresh = true;
let headers: any = {} let headers: any = {};
if (useToken) headers["Authorization"] = localStorage.getItem('AT') if (useToken) headers["Authorization"] = localStorage.getItem("AT");
if (contentType) headers["Content-Type"] = "application/json" if (contentType) headers["Content-Type"] = "application/json";
return axios({ return axios({
url: url, url: url,
method: method, method: method,
@ -38,30 +29,30 @@ function makeRequest({
data: body, data: body,
signal, signal,
}) })
.then(response => { .then((response) => {
if (response.data && response.data.accessToken) { if (response.data && response.data.accessToken) {
localStorage.setItem('AT', response.data.accessToken) localStorage.setItem("AT", response.data.accessToken);
} }
return response return response;
}) })
.catch(error => { .catch((error) => {
if (error.response.status == 401 && counterRefresh) { if (error.response.status == 401 && counterRefresh) {
refresh().then(response => { refresh().then((response) => {
if (response.data && response.data.accessToken) localStorage.setItem('AT', response.data.accessToken) if (response.data && response.data.accessToken) localStorage.setItem("AT", response.data.accessToken);
counterRefresh = false counterRefresh = false;
}) });
} else { } else {
throw error throw error;
} }
throw error throw error;
}) });
} }
function refresh() { function refresh() {
return axios("https://admin.pena.digital/auth/refresh", { return axios("https://admin.pena.digital/auth/refresh", {
headers: { headers: {
"Authorization": localStorage.getItem('AT'), Authorization: localStorage.getItem("AT"),
"Content-Type": "application/json" "Content-Type": "application/json",
} },
}) });
} }

17
src/kitUI/privateRoute.tsx
View File

@ -1,12 +1,13 @@
import { authStore } from "@root/stores/auth";
import * as React from "react"; import * as React from "react";
import { useLocation, Navigate } from 'react-router-dom' import { useLocation, Navigate } from "react-router-dom";
export default ({ children }: any) => { export default ({ children }: any) => {
const location = useLocation() const { token } = authStore();
//Если пользователь авторизован, перенаправляем его на нужный путь. Иначе выкидываем в регистрацию const location = useLocation();
if (localStorage.getItem('AT')) { //Если пользователь авторизован, перенаправляем его на нужный путь. Иначе выкидываем в регистрацию
return children if (token) {
return children;
} }
return <Navigate to="/" state={{from: location}} /> return <Navigate to="/" state={{ from: location }} />;
};
}

22
src/kitUI/publicRoute.tsx
View File

@ -1,12 +1,16 @@
import * as React from "react"; import { useLocation, Navigate } from "react-router-dom";
import { useLocation, Navigate } from 'react-router-dom'
export default ({ children }: any) => { import { authStore } from "@root/stores/auth";
const location = useLocation()
//Если пользователь авторизован, перенаправляем его в приложение. Иначе пускаем куда хотел const PublicRoute = ({ children }: any) => {
if (localStorage.getItem('AT')) { const location = useLocation();
return <Navigate to="/users" state={{from: location}} /> const { token } = authStore();
if (token) {
return <Navigate to="/users" state={{ from: location }} />;
} }
return children
} return children;
};
export default PublicRoute;

97
src/pages/Authorization/restore.tsx
View File

@ -1,34 +1,35 @@
import * as React from "react"; import * as React from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Formik, Field, Form } from 'formik'; import { Formik, Field, Form } from "formik";
import {useTheme} from "@mui/material/styles"; import { useTheme } from "@mui/material/styles";
import { Link } from "react-router-dom" import { Link } from "react-router-dom";
import {Box, Typography} from "@mui/material"; import { Box, Typography } from "@mui/material";
import Logo from "@pages/Logo"; import Logo from "@pages/Logo";
import CleverButton from "@kitUI/cleverButton" import CleverButton from "@kitUI/cleverButton";
import MakeRequest from "@kitUI/makeRequest";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined"; import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined"; import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import OutlinedInput from "@kitUI/outlinedInput"; import OutlinedInput from "@kitUI/outlinedInput";
import { authStore } from "@root/stores/auth";
export default () => { export default () => {
const theme = useTheme() const theme = useTheme();
const navigate = useNavigate(); const navigate = useNavigate();
const [restore, setRestore] = React.useState(true) const [restore, setRestore] = React.useState(true);
const [isReady, setIsReady] = React.useState(true) const [isReady, setIsReady] = React.useState(true);
const { makeRequest } = authStore();
if (restore) { if (restore) {
return ( return (
<Formik <Formik
initialValues={{ initialValues={{
mail: "" mail: "",
}} }}
onSubmit={(values) => { onSubmit={(values) => {
setRestore(false) setRestore(false);
}} }}
> >
<Form> <Form>
<Box component="section" <Box
component="section"
sx={{ sx={{
minHeight: "100vh", minHeight: "100vh",
height: "100%", height: "100%",
@ -37,10 +38,11 @@ export default () => {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
padding: "15px 0" padding: "15px 0",
}} }}
> >
<Box component="article" <Box
component="article"
sx={{ sx={{
width: "350px", width: "350px",
backgroundColor: theme.palette.content.main, backgroundColor: theme.palette.content.main,
@ -48,35 +50,39 @@ export default () => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
"> *": { "> *": {
marginTop: "15px" marginTop: "15px",
} },
}} }}
> >
<Typography variant="h6" color={theme.palette.secondary.main}>Восстановление пароля</Typography> <Typography variant="h6" color={theme.palette.secondary.main}>
<Logo/> Восстановление пароля
</Typography>
<Logo />
<Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}> <Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<EmailOutlinedIcon htmlColor={theme.palette.golden.main}/> <EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} autoComplete="none" variant="filled" name="mail" label="Эл. почта"/> <Field as={OutlinedInput} autoComplete="none" variant="filled" name="mail" label="Эл. почта" />
</Box> </Box>
<CleverButton type="submit" text="Отправить" isReady={isReady}/> <CleverButton type="submit" text="Отправить" isReady={isReady} />
<Link to="/signin" style={{textDecoration:"none"}}><Typography color={theme.palette.golden.main}>Я помню пароль</Typography></Link> <Link to="/signin" style={{ textDecoration: "none" }}>
<Typography color={theme.palette.golden.main}>Я помню пароль</Typography>
</Link>
</Box> </Box>
</Box> </Box>
</Form> </Form>
</Formik> </Formik>
) );
} else { } else {
return( return (
<Formik <Formik
initialValues={{ initialValues={{
code: "" code: "",
}}
onSubmit={(values) => {
}} }}
onSubmit={(values) => {}}
> >
<Form> <Form>
<Box component="section" <Box
component="section"
sx={{ sx={{
minHeight: "100vh", minHeight: "100vh",
height: "100%", height: "100%",
@ -85,10 +91,11 @@ export default () => {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
padding: "15px 0" padding: "15px 0",
}} }}
> >
<Box component="article" <Box
component="article"
sx={{ sx={{
width: "350px", width: "350px",
backgroundColor: theme.palette.content.main, backgroundColor: theme.palette.content.main,
@ -96,24 +103,28 @@ export default () => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
"> *": { "> *": {
marginTop: "15px" marginTop: "15px",
} },
}} }}
> >
<Typography variant="h6" color={theme.palette.secondary.main}>Восстановление пароля</Typography> <Typography variant="h6" color={theme.palette.secondary.main}>
<Logo/> Восстановление пароля
</Typography>
<Logo />
<Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}> <Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<LockOutlinedIcon htmlColor={theme.palette.golden.main}/> <LockOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} name="code" variant="filled" label="Код из сообщения"/> <Field as={OutlinedInput} name="code" variant="filled" label="Код из сообщения" />
</Box> </Box>
<CleverButton type="submit" text="Отправить" isReady={isReady}/> <CleverButton type="submit" text="Отправить" isReady={isReady} />
<Link to="/signin" style={{textDecoration:"none"}}><Typography color={theme.palette.golden.main}>Я помню пароль</Typography></Link> <Link to="/signin" style={{ textDecoration: "none" }}>
<Typography color={theme.palette.golden.main}>Я помню пароль</Typography>
</Link>
</Box> </Box>
</Box> </Box>
</Form> </Form>
</Formik> </Formik>
) );
} }
} };

148
src/pages/Authorization/signin.tsx
View File

@ -1,16 +1,16 @@
import * as React from "react" import * as React from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { enqueueSnackbar } from 'notistack'; import { enqueueSnackbar } from "notistack";
import {useTheme} from "@mui/material/styles" import { useTheme } from "@mui/material/styles";
import { Formik, Field, Form } from 'formik' import { Formik, Field, Form } from "formik";
import { Link } from "react-router-dom" import { Link } from "react-router-dom";
import { Box, Checkbox, TextField, Typography, FormControlLabel} from "@mui/material" import { Box, Checkbox, Typography, FormControlLabel } from "@mui/material";
import Logo from "@pages/Logo" import Logo from "@pages/Logo";
import CleverButton from "@kitUI/cleverButton" import CleverButton from "@kitUI/cleverButton";
import OutlinedInput from "@kitUI/outlinedInput" import OutlinedInput from "@kitUI/outlinedInput";
import makeRequest from "@kitUI/makeRequest";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined"; import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined" import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { authStore } from "@root/stores/auth";
interface Values { interface Values {
email: string; email: string;
@ -19,49 +19,57 @@ interface Values {
function validate(values: Values) { function validate(values: Values) {
const errors = {} as any; const errors = {} as any;
if (!values.email) { if (!values.email) {
errors.email = "Required"; errors.email = "Required";
} }
if (!values.password) { if (!values.password) {
errors.password = "Required"; errors.password = "Required";
} else if (!/^[\S]{8,25}$/i.test(values.password)) { }
if (values.password && !/^[\S]{8,25}$/i.test(values.password)) {
errors.password = "Invalid password"; errors.password = "Invalid password";
} }
return errors; return errors;
} }
export default () => {
const theme = useTheme()
const navigate = useNavigate();
const [isReady, setIsReady] = React.useState(true)
return( const SigninForm = () => {
<Formik const theme = useTheme();
initialValues={{ const navigate = useNavigate();
const [isReady] = React.useState(true);
const { makeRequest } = authStore();
const initialValues: Values = {
email: "", email: "",
password: "" password: "",
}} };
validate={validate}
onSubmit={(values) => { const onSignFormSubmit = (values: Values) => {
makeRequest({ makeRequest({
url: "https://admin.pena.digital/auth/login", url: "https://admin.pena.digital/auth/login",
body: { body: {
"email": values.email, email: values.email,
"password": values.password password: values.password,
}, },
useToken: false useToken: false,
}) })
.then((e) => { .then((e) => {
console.log(e) navigate("/users");
navigate("/users")
}) })
.catch((e) => { .catch((e) => {
console.log(e) console.log(e);
enqueueSnackbar(e.message ? e.message : `Unknown error`) enqueueSnackbar(e.message ? e.message : `Unknown error`);
}) });
}} };
>
return (
<Formik initialValues={initialValues} validate={validate} onSubmit={onSignFormSubmit}>
<Form> <Form>
<Box component="section" <Box
component="section"
sx={{ sx={{
minHeight: "100vh", minHeight: "100vh",
height: "100%", height: "100%",
@ -70,10 +78,11 @@ export default () => {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
padding: "15px 0" padding: "15px 0",
}} }}
> >
<Box component="article" <Box
component="article"
sx={{ sx={{
width: "350px", width: "350px",
backgroundColor: theme.palette.content.main, backgroundColor: theme.palette.content.main,
@ -81,34 +90,40 @@ export default () => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
"> *": { "> *": {
marginTop: "15px" marginTop: "15px",
} },
}} }}
> >
<Logo/> <Logo />
<Box> <Box>
<Typography variant="h5" color={theme.palette.secondary.main}>Добро пожаловать</Typography> <Typography variant="h5" color={theme.palette.secondary.main}>
<Typography variant="h6" color={theme.palette.secondary.main}>Мы рады что вы выбрали нас!</Typography> Добро пожаловать
</Typography>
<Typography variant="h6" color={theme.palette.secondary.main}>
Мы рады что вы выбрали нас!
</Typography>
</Box> </Box>
<Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}> <Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<EmailOutlinedIcon htmlColor={theme.palette.golden.main}/> <EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} name="email" variant="filled" label="Эл. почта"/> <Field as={OutlinedInput} name="email" variant="filled" label="Эл. почта" />
</Box> </Box>
<Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}> <Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<LockOutlinedIcon htmlColor={theme.palette.golden.main}/> <LockOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} type="password" name="password" variant="filled" label="Пароль"/> <Field as={OutlinedInput} type="password" name="password" variant="filled" label="Пароль" />
</Box> </Box>
<Box component="article" <Box
component="article"
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center" alignItems: "center",
}} }}
> >
<FormControlLabel <FormControlLabel
sx={{color:"white"}} sx={{ color: "white" }}
control={<Checkbox control={
<Checkbox
value="checkedA" value="checkedA"
inputProps={{ 'aria-label': 'Checkbox A' }} inputProps={{ "aria-label": "Checkbox A" }}
sx={{ sx={{
color: "white", color: "white",
transform: "scale(1.5)", transform: "scale(1.5)",
@ -119,19 +134,30 @@ export default () => {
color: "white", color: "white",
}, },
}} }}
/>} label="Запомнить этот компьютер" /> />
}
label="Запомнить этот компьютер"
/>
</Box> </Box>
<Link to="/restore" style={{textDecoration:"none"}}><Typography color={theme.palette.golden.main}>Забыли пароль?</Typography></Link> <Link to="/restore" style={{ textDecoration: "none" }}>
<CleverButton type="submit" text="Войти" isReady={isReady}/> <Typography color={theme.palette.golden.main}>Забыли пароль?</Typography>
<Box sx={{ </Link>
display: "flex" <CleverButton type="submit" text="Войти" isReady={isReady} />
}}> <Box
sx={{
display: "flex",
}}
>
<Typography color={theme.palette.secondary.main}>У вас нет аккаунта?&nbsp;</Typography> <Typography color={theme.palette.secondary.main}>У вас нет аккаунта?&nbsp;</Typography>
<Link to="/signup" style={{textDecoration:"none"}}><Typography color={theme.palette.golden.main}>Зарегестрируйтесь</Typography></Link> <Link to="/signup" style={{ textDecoration: "none" }}>
<Typography color={theme.palette.golden.main}>Зарегестрируйтесь</Typography>
</Link>
</Box> </Box>
</Box> </Box>
</Box> </Box>
</Form> </Form>
</Formik> </Formik>
) );
} };
export default SigninForm;

112
src/pages/Authorization/signup.tsx
View File

@ -1,16 +1,17 @@
import * as React from "react" import * as React from "react";
import { enqueueSnackbar } from 'notistack'; import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useTheme } from "@mui/material/styles" import { useTheme } from "@mui/material/styles";
import { Formik, Field, Form } from "formik" import { Formik, Field, Form } from "formik";
import { Link } from "react-router-dom" import { Link } from "react-router-dom";
import {Box, Typography} from "@mui/material" import { Box, Typography } from "@mui/material";
import CleverButton from "@kitUI/cleverButton" import CleverButton from "@kitUI/cleverButton";
import OutlinedInput from "@kitUI/outlinedInput"; import OutlinedInput from "@kitUI/outlinedInput";
import makeRequest from "@kitUI/makeRequest";
import Logo from "@pages/Logo/index" import Logo from "@pages/Logo/index";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined" import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined" import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { authStore } from "@root/stores/auth";
interface Values { interface Values {
email: string; email: string;
password: string; password: string;
@ -33,39 +34,43 @@ function validate(values: Values) {
} }
export default () => { export default () => {
const navigate = useNavigate(); const navigate = useNavigate();
const theme = useTheme() const theme = useTheme();
const [isReady, setIsReady] = React.useState(true) const [isReady, setIsReady] = React.useState(true);
const { makeRequest } = authStore();
return( return (
<Formik <Formik
initialValues={{ initialValues={{
email: "", email: "",
password: "", password: "",
repeatPassword: "" repeatPassword: "",
}} }}
validate={validate} validate={validate}
onSubmit={(values) => { onSubmit={(values) => {
makeRequest({ makeRequest({
url: "https://admin.pena.digital/auth/register", url: "https://admin.pena.digital/auth/register",
body: { body: {
"login": values.email, login: values.email,
"email": values.email, email: values.email,
"password": values.repeatPassword, password: values.repeatPassword,
"phoneNumber": "--" phoneNumber: "--",
}, },
useToken: false useToken: false,
}) })
.then((e) => { .then((e) => {
navigate("/users") navigate("/users");
}) })
.catch((e) => { .catch((e) => {
console.log(e) console.log(e);
enqueueSnackbar(e.response && e.response.data && e.response.data.message ? e.response.data.message : `Unknown error`) enqueueSnackbar(
}) e.response && e.response.data && e.response.data.message ? e.response.data.message : `Unknown error`
);
});
}} }}
> >
<Form> <Form>
<Box component="section" <Box
component="section"
sx={{ sx={{
minHeight: "100vh", minHeight: "100vh",
height: "100%", height: "100%",
@ -74,10 +79,11 @@ export default () => {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
padding: "15px 0" padding: "15px 0",
}} }}
> >
<Box component="article" <Box
component="article"
sx={{ sx={{
width: "350px", width: "350px",
backgroundColor: theme.palette.content.main, backgroundColor: theme.palette.content.main,
@ -85,34 +91,48 @@ export default () => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
"> *": { "> *": {
marginTop: "15px" marginTop: "15px",
} },
}} }}
> >
<Typography variant="h6" color={theme.palette.secondary.main}>Новый аккаунт</Typography> <Typography variant="h6" color={theme.palette.secondary.main}>
<Logo/> Новый аккаунт
</Typography>
<Logo />
<Box> <Box>
<Typography variant="h5" color={theme.palette.secondary.main}>Добро пожаловать</Typography> <Typography variant="h5" color={theme.palette.secondary.main}>
<Typography variant="h6" color={theme.palette.secondary.main}>Мы рады что вы выбрали нас!</Typography> Добро пожаловать
</Typography>
<Typography variant="h6" color={theme.palette.secondary.main}>
Мы рады что вы выбрали нас!
</Typography>
</Box> </Box>
<Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}> <Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<EmailOutlinedIcon htmlColor={theme.palette.golden.main}/> <EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} name="email" variant="filled" label="Эл. почта"/> <Field as={OutlinedInput} name="email" variant="filled" label="Эл. почта" />
</Box> </Box>
<Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}> <Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<LockOutlinedIcon htmlColor={theme.palette.golden.main}/> <LockOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} type="password" name="password" variant="filled" label="Пароль"/> <Field as={OutlinedInput} type="password" name="password" variant="filled" label="Пароль" />
</Box> </Box>
<Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}> <Box sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
<LockOutlinedIcon htmlColor={theme.palette.golden.main}/> <LockOutlinedIcon htmlColor={theme.palette.golden.main} />
<Field as={OutlinedInput} type="password" name="repeatPassword" variant="filled" label="Повторите пароль"/> <Field
as={OutlinedInput}
type="password"
name="repeatPassword"
variant="filled"
label="Повторите пароль"
/>
</Box> </Box>
<CleverButton type="submit" text="Отправить" isReady={isReady}/> <CleverButton type="submit" text="Отправить" isReady={isReady} />
<Link to="/signin" style={{textDecoration: "none"}} ><Typography color={theme.palette.golden.main}>У меня уже есть аккаунт</Typography></Link> <Link to="/signin" style={{ textDecoration: "none" }}>
<Typography color={theme.palette.golden.main}>У меня уже есть аккаунт</Typography>
</Link>
</Box> </Box>
</Box> </Box>
</Form> </Form>
</Formik> </Formik>
) );
} };

48
src/pages/Setting/ConditionalRender.tsx Normal file
View File

@ -0,0 +1,48 @@
import axios from "axios";
import React, { useEffect, useState } from "react";
type ConditionalRenderProps = {
isLoading: boolean;
role: string;
childrenUser?: JSX.Element;
childrenAdmin?: JSX.Element;
childrenManager?: JSX.Element;
};
const ConditionalRender = ({
isLoading,
role,
childrenUser,
childrenAdmin,
childrenManager,
}: ConditionalRenderProps): JSX.Element => {
// 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]);
if (!isLoading) {
if (role === "admin") {
return childrenAdmin ? childrenAdmin : <div>Администратор</div>;
}
if (role === "user") {
return childrenUser ? childrenUser : <div>Пользователь</div>;
}
if (role === "manager") {
return childrenManager ? childrenManager : <div>Менеджер</div>;
}
}
return <React.Fragment />;
};
export default ConditionalRender;

79
src/pages/Setting/FormCreateRoles.tsx Normal file
View File

@ -0,0 +1,79 @@
import { useState } from "react";
import {
Button,
Checkbox,
FormControl,
ListItemText,
MenuItem,
Select,
SelectChangeEvent,
TextField,
} from "@mui/material";
import { MOCK_DATA_USERS } from "@root/api/roles";
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
},
},
};
export default function CreateForm() {
const [personName, setPersonName] = useState<string[]>([]);
const handleChange = (event: SelectChangeEvent<typeof personName>) => {
const {
target: { value },
} = event;
setPersonName(typeof value === "string" ? value.split(",") : value);
};
return (
<>
<TextField
placeholder="название"
fullWidth
sx={{
alignItems: "center",
width: "400px",
"& .MuiInputBase-root": {
backgroundColor: "#F2F3F7",
height: "48px",
},
}}
inputProps={{
sx: {
borderRadius: "10px",
fontSize: "18px",
lineHeight: "21px",
py: 0,
},
}}
/>
<Button sx={{ ml: "5px", bgcolor: "#fe9903", color: "white" }}>Отправить</Button>
<FormControl sx={{ ml: "25px", width: "80%" }}>
<Select
sx={{ bgcolor: "white", height: "48px" }}
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
multiple
value={personName}
onChange={handleChange}
renderValue={(selected) => selected.join(", ")}
MenuProps={MenuProps}
>
{MOCK_DATA_USERS.map(({ name, id }) => (
<MenuItem key={id} value={name}>
<Checkbox checked={personName.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</>
);
}

84
src/pages/Setting/FormDeleteRoles.tsx Normal file
View File

@ -0,0 +1,84 @@
import { useState } from "react";
import axios from "axios";
import {
Button,
Checkbox,
FormControl,
ListItemText,
MenuItem,
Select,
SelectChangeEvent,
TextField,
} from "@mui/material";
import { MOCK_DATA_USERS } from "@root/api/roles";
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
},
},
};
export default function DeleteForm() {
const [personName, setPersonName] = useState<string[]>([]);
const [roleId, setRoleId] = useState<string>();
const handleChange = (event: SelectChangeEvent<typeof personName>) => {
const {
target: { value },
} = event;
setPersonName(typeof value === "string" ? value.split(",") : value);
};
const rolesDelete = (id = "") => {
axios.delete("https://admin.pena.digital/role/" + id);
};
return (
<>
<Button onClick={() => rolesDelete(roleId)} sx={{ mr: "5px", bgcolor: "#fe9903", color: "white" }}>
Удалить
</Button>
<TextField
placeholder="название"
fullWidth
sx={{
alignItems: "center",
width: "400px",
"& .MuiInputBase-root": {
backgroundColor: "#F2F3F7",
height: "48px",
},
}}
inputProps={{
sx: {
borderRadius: "10px",
fontSize: "18px",
lineHeight: "21px",
py: 0,
},
}}
/>
<FormControl sx={{ ml: "25px", width: "80%" }}>
<Select
sx={{ bgcolor: "white", height: "48px" }}
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
value={personName}
onChange={handleChange}
renderValue={(selected) => selected.join(", ")}
MenuProps={MenuProps}
>
{MOCK_DATA_USERS.map(({ name, id }) => (
<MenuItem key={id} value={name}>
<Checkbox onClick={() => setRoleId(id)} checked={personName.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</>
);
}

104
src/pages/Setting/SettingRoles.tsx Normal file
View File

@ -0,0 +1,104 @@
import { AccordionDetails, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
import FormDeleteRoles from "./FormDeleteRoles";
import FormCreateRoles from "./FormCreateRoles";
import theme from "../../theme";
export const SettingRoles = () => {
return (
<AccordionDetails>
<Table
sx={{
width: "890px",
border: "2px solid",
borderColor: theme.palette.secondary.main,
}}
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>
</TableRow>
</TableHead>
<TableBody>
<TableRow
sx={{
p: "5px",
display: "flex",
alignItems: "center",
borderTop: "2px solid",
borderColor: theme.palette.grayLight.main,
height: "100px",
cursor: "pointer",
}}
>
<FormCreateRoles />
</TableRow>
</TableBody>
</Table>
<Table
sx={{
mt: "30px",
width: "890px",
border: "2px solid",
borderColor: theme.palette.secondary.main,
}}
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>
</TableRow>
</TableHead>
<TableBody>
<TableRow
sx={{
p: "5px",
display: "flex",
alignItems: "center",
borderTop: "2px solid",
borderColor: theme.palette.grayLight.main,
height: "100px",
cursor: "pointer",
}}
>
<FormDeleteRoles />
</TableRow>
</TableBody>
</Table>
</AccordionDetails>
);
};

83
src/pages/dashboard/Content/Support/Chat/Chat.tsx
View File

@ -1,5 +1,5 @@
import { Box, IconButton, InputAdornment, TextField, Typography, useMediaQuery, useTheme } from "@mui/material"; import { Box, IconButton, InputAdornment, TextField, Typography, useMediaQuery, useTheme } from "@mui/material";
import { addOrUpdateMessages, clearMessages, setMessages, useMessageStore } from "@root/stores/messages"; import { addOrUpdateMessages, clearMessageState, incrementMessageApiPage, setIsPreventAutoscroll, setMessageFetchState, useMessageStore } from "@root/stores/messages";
import Message from "./Message"; import Message from "./Message";
import SendIcon from "@mui/icons-material/Send"; import SendIcon from "@mui/icons-material/Send";
import AttachFileIcon from "@mui/icons-material/AttachFile"; import AttachFileIcon from "@mui/icons-material/AttachFile";
@ -9,9 +9,12 @@ import { GetMessagesRequest, TicketMessage } from "@root/model/ticket";
import { getTicketMessages, sendTicketMessage, subscribeToTicketMessages } from "@root/api/tickets"; import { getTicketMessages, sendTicketMessage, subscribeToTicketMessages } from "@root/api/tickets";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import { useTicketStore } from "@root/stores/tickets"; import { useTicketStore } from "@root/stores/tickets";
import { throttle } from "@root/utils/throttle";
import { authStore } from "@root/stores/auth";
export default function Chat() { export default function Chat() {
const { token } = authStore();
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const tickets = useTicketStore(state => state.tickets); const tickets = useTicketStore(state => state.tickets);
@ -19,6 +22,11 @@ export default function Chat() {
const [messageField, setMessageField] = useState<string>(""); const [messageField, setMessageField] = useState<string>("");
const ticketId = useParams().ticketId; const ticketId = useParams().ticketId;
const chatBoxRef = useRef<HTMLDivElement>(null); const chatBoxRef = useRef<HTMLDivElement>(null);
const messageApiPage = useMessageStore(state => state.apiPage);
const messagesPerPage = useMessageStore(state => state.messagesPerPage);
const messagesFetchStateRef = useRef(useMessageStore.getState().fetchState);
const isPreventAutoscroll = useMessageStore(state => state.isPreventAutoscroll);
const lastMessageId = useMessageStore(state => state.lastMessageId);
const ticket = tickets.find(ticket => ticket.id === ticketId); const ticket = tickets.find(ticket => ticket.id === ticketId);
@ -26,37 +34,41 @@ export default function Chat() {
scrollToBottom(); scrollToBottom();
}, [messages]); }, [messages]);
useEffect(function fetchTicketMessages() { useEffect(
function fetchTicketMessages() {
if (!ticketId) return; if (!ticketId) return;
const getTicketsBody: GetMessagesRequest = { const getTicketsBody: GetMessagesRequest = {
amt: 100, // TODO use pagination amt: messagesPerPage,
page: 0, page: messageApiPage,
ticket: ticketId, ticket: ticketId,
}; };
const controller = new AbortController(); const controller = new AbortController();
setMessageFetchState("fetching");
getTicketMessages({ getTicketMessages({
body: getTicketsBody, body: getTicketsBody,
signal: controller.signal, signal: controller.signal,
}).then(result => { }).then(result => {
console.log("GetMessagesResponse", result); console.log("GetMessagesResponse", result);
setMessages(result); if (result?.length > 0) {
addOrUpdateMessages(result);
setMessageFetchState("idle");
} else setMessageFetchState("all fetched");
}).catch(error => { }).catch(error => {
console.log("Error fetching tickets", error); console.log("Error fetching messages", error);
enqueueSnackbar(error.message); enqueueSnackbar(error.message);
}); });
return () => { return () => {
controller.abort(); controller.abort();
clearMessages(); clearMessageState();
}; };
}, [ticketId]); }, [messageApiPage, messagesPerPage, ticketId]);
useEffect(function subscribeToMessages() { useEffect(function subscribeToMessages() {
if (!ticketId) return; if (!ticketId) return;
const token = localStorage.getItem("AT");
if (!token) return; if (!token) return;
const unsubscribe = subscribeToTicketMessages({ const unsubscribe = subscribeToTicketMessages({
@ -79,16 +91,57 @@ export default function Chat() {
return () => { return () => {
unsubscribe(); unsubscribe();
clearMessageState();
setIsPreventAutoscroll(false);
}; };
}, [ticketId]); }, [ticketId]);
function scrollToBottom() { useEffect(function attachScrollHandler() {
if (!chatBoxRef.current) return; if (!chatBoxRef.current) return;
chatBoxRef.current.scroll({ const chatBox = chatBoxRef.current;
const scrollHandler = () => {
const scrollBottom = chatBox.scrollHeight - chatBox.scrollTop - chatBox.clientHeight;
const isPreventAutoscroll = scrollBottom > chatBox.clientHeight;
setIsPreventAutoscroll(isPreventAutoscroll);
if (messagesFetchStateRef.current !== "idle") return;
if (chatBox.scrollTop < chatBox.clientHeight) {
if (chatBox.scrollTop < 1) chatBox.scrollTop = 1;
incrementMessageApiPage();
}
};
const throttledScrollHandler = throttle(scrollHandler, 200);
chatBox.addEventListener("scroll", throttledScrollHandler);
return () => {
chatBox.removeEventListener("scroll", throttledScrollHandler);
};
}, []);
useEffect(function scrollOnNewMessage() {
if (!chatBoxRef.current) return;
if (!isPreventAutoscroll) {
setTimeout(() => {
scrollToBottom();
}, 50);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [lastMessageId]);
useEffect(() => useMessageStore.subscribe(state => (messagesFetchStateRef.current = state.fetchState)), []);
function scrollToBottom(behavior?: ScrollBehavior) {
if (!chatBoxRef.current) return;
const chatBox = chatBoxRef.current;
chatBox.scroll({
left: 0, left: 0,
top: chatBoxRef.current.scrollHeight, top: chatBox.scrollHeight,
behavior: "smooth", behavior,
}); });
} }
@ -106,9 +159,7 @@ export default function Chat() {
setMessageField(""); setMessageField("");
} }
function handleAddAttachment() { function handleAddAttachment() {}
}
function handleTextfieldKeyPress(e: KeyboardEvent) { function handleTextfieldKeyPress(e: KeyboardEvent) {
if (e.key === "Enter" && !e.shiftKey) { if (e.key === "Enter" && !e.shiftKey) {

2
src/pages/dashboard/Content/Support/Chat/Message.tsx
View File

@ -35,7 +35,7 @@ export default function Message({ message, isSelf }: Props) {
borderTopRightRadius: isSelf ? 0 : "20px", borderTopRightRadius: isSelf ? 0 : "20px",
maxWidth: "90%", maxWidth: "90%",
}}> }}>
<Typography fontSize="14px"> <Typography fontSize="14px" sx={{ wordBreak: "break-word" }}>
{message.message} {message.message}
</Typography> </Typography>
</Box> </Box>

37
src/pages/dashboard/Content/Support/Support.tsx
View File

@ -1,32 +1,32 @@
import { Box, useMediaQuery, useTheme } from "@mui/material"; import { Box, useMediaQuery, useTheme } from "@mui/material";
import { useEffect, useRef, useState } from "react"; import { useEffect } from "react";
import Chat from "./Chat/Chat"; import Chat from "./Chat/Chat";
import Collapse from "./Collapse"; import Collapse from "./Collapse";
import TicketList from "./TicketList/TicketList"; import TicketList from "./TicketList/TicketList";
import { getTickets, subscribeToAllTickets } from "@root/api/tickets"; import { getTickets, subscribeToAllTickets } from "@root/api/tickets";
import { GetTicketsRequest, Ticket } from "@root/model/ticket"; import { GetTicketsRequest, Ticket } from "@root/model/ticket";
import { clearTickets, updateTickets } from "@root/stores/tickets"; import { clearTickets, setTicketsFetchState, updateTickets, useTicketStore } from "@root/stores/tickets";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import { clearMessages } from "@root/stores/messages"; import {clearMessageState } from "@root/stores/messages";
import { authStore } from "@root/stores/auth";
const TICKETS_PER_PAGE = 20;
export default function Support() { export default function Support() {
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [currentPage, setCurrentPage] = useState<number>(0); const ticketsPerPage = useTicketStore(state => state.ticketsPerPage);
const fetchingStateRef = useRef<"idle" | "fetching" | "all fetched">("idle"); const ticketApiPage = useTicketStore(state => state.apiPage);
const { token } = authStore();
useEffect(function fetchTickets() { useEffect(function fetchTickets() {
const getTicketsBody: GetTicketsRequest = { const getTicketsBody: GetTicketsRequest = {
amt: TICKETS_PER_PAGE, amt: ticketsPerPage,
page: currentPage, page: ticketApiPage,
status: "open", status: "open",
}; };
const controller = new AbortController(); const controller = new AbortController();
fetchingStateRef.current = "fetching"; setTicketsFetchState("fetching");
getTickets({ getTickets({
body: getTicketsBody, body: getTicketsBody,
signal: controller.signal, signal: controller.signal,
@ -34,18 +34,17 @@ export default function Support() {
console.log("GetTicketsResponse", result); console.log("GetTicketsResponse", result);
if (result.data) { if (result.data) {
updateTickets(result.data); updateTickets(result.data);
fetchingStateRef.current = "idle"; setTicketsFetchState("idle");
} else fetchingStateRef.current = "all fetched"; } else setTicketsFetchState("all fetched");
}).catch(error => { }).catch(error => {
console.log("Error fetching tickets", error); console.log("Error fetching tickets", error);
enqueueSnackbar(error.message); enqueueSnackbar(error.message);
}); });
return () => controller.abort(); return () => controller.abort();
}, [currentPage]); }, [ticketApiPage, ticketsPerPage]);
useEffect(function subscribeToTickets() { useEffect(function subscribeToTickets() {
const token = localStorage.getItem("AT");
if (!token) return; if (!token) return;
const unsubscribe = subscribeToAllTickets({ const unsubscribe = subscribeToAllTickets({
@ -67,15 +66,11 @@ export default function Support() {
return () => { return () => {
unsubscribe(); unsubscribe();
clearMessages(); clearMessageState();
clearTickets(); clearTickets();
}; };
}, []); }, []);
const incrementCurrentPage = () => setCurrentPage(prev => prev + 1);
const ticketList = <TicketList fetchingStateRef={fetchingStateRef} incrementCurrentPage={incrementCurrentPage} />;
return ( return (
<Box sx={{ <Box sx={{
display: "flex", display: "flex",
@ -85,11 +80,11 @@ export default function Support() {
}}> }}>
{!upMd && {!upMd &&
<Collapse headerText="Тикеты"> <Collapse headerText="Тикеты">
{ticketList} <TicketList />
</Collapse> </Collapse>
} }
<Chat /> <Chat />
{upMd && ticketList} {upMd && <TicketList />}
</Box> </Box>
); );
} }

22
src/pages/dashboard/Content/Support/TicketList/TicketList.tsx
View File

@ -2,21 +2,17 @@ import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined'; import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import { Box, Button, useMediaQuery, useTheme } from "@mui/material"; import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
import { Ticket } from "@root/model/ticket"; import { Ticket } from "@root/model/ticket";
import { useTicketStore } from "@root/stores/tickets"; import { incrementTicketsApiPage, useTicketStore } from "@root/stores/tickets";
import { throttle } from '@root/utils/throttle'; import { throttle } from '@root/utils/throttle';
import { MutableRefObject, useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import TicketItem from "./TicketItem"; import TicketItem from "./TicketItem";
interface Props { export default function TicketList() {
fetchingStateRef: MutableRefObject<"idle" | "fetching" | "all fetched">;
incrementCurrentPage: () => void;
}
export default function TicketList({ fetchingStateRef, incrementCurrentPage }: Props) {
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const tickets = useTicketStore(state => state.tickets); const tickets = useTicketStore(state => state.tickets);
const ticketsFetchStateRef = useRef(useTicketStore.getState().fetchState);
const ticketsBoxRef = useRef<HTMLDivElement>(null); const ticketsBoxRef = useRef<HTMLDivElement>(null);
useEffect(function updateCurrentPageOnScroll() { useEffect(function updateCurrentPageOnScroll() {
@ -26,9 +22,9 @@ export default function TicketList({ fetchingStateRef, incrementCurrentPage }: P
const scrollHandler = () => { const scrollHandler = () => {
const scrollBottom = ticketsBox.scrollHeight - ticketsBox.scrollTop - ticketsBox.clientHeight; const scrollBottom = ticketsBox.scrollHeight - ticketsBox.scrollTop - ticketsBox.clientHeight;
if ( if (
scrollBottom < 10 && scrollBottom < ticketsBox.clientHeight &&
fetchingStateRef.current === "idle" ticketsFetchStateRef.current === "idle"
) incrementCurrentPage(); ) incrementTicketsApiPage();
}; };
const throttledScrollHandler = throttle(scrollHandler, 200); const throttledScrollHandler = throttle(scrollHandler, 200);
@ -37,7 +33,9 @@ export default function TicketList({ fetchingStateRef, incrementCurrentPage }: P
return () => { return () => {
ticketsBox.removeEventListener("scroll", throttledScrollHandler); ticketsBox.removeEventListener("scroll", throttledScrollHandler);
}; };
}, [incrementCurrentPage, fetchingStateRef]); }, []);
useEffect(() => useTicketStore.subscribe(state => (ticketsFetchStateRef.current = state.fetchState)), []);
const sortedTickets = tickets.sort(sortTicketsByUpdateTime).sort(sortTicketsByUnread); const sortedTickets = tickets.sort(sortTicketsByUpdateTime).sort(sortTicketsByUnread);

530
src/pages/dashboard/Content/Users.tsx
View File

@ -8,61 +8,107 @@ import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow";
import Radio from "@mui/material/Radio"; import Radio from "@mui/material/Radio";
import Skeleton from "@mui/material/Skeleton"; import Skeleton from "@mui/material/Skeleton";
import Accordion from '@mui/material/Accordion'; import Accordion from "@mui/material/Accordion";
import AccordionSummary from '@mui/material/AccordionSummary'; 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 theme from "../../../theme"
import type { UsersType } from "../../../api/roles";
import theme from "../../../theme";
import axios from "axios";
import {authStore} from "@stores/auth";
import ConditionalRender from "@root/pages/Setting/ConditionalRender";
const Users: React.FC = () => { const Users: React.FC = () => {
const radioboxes = [ "a", "b", "c" ]; const { makeRequest } = authStore();
// makeRequest({
// url: "https://admin.pena.digital/strator/account",
// method: "get",
// bearer: true,
// contentType: true,
// })
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);
if (selectedValue === "manager") {
}
}; };
const navigate = useNavigate(); const navigate = useNavigate();
const [data, setData] = React.useState<TMockData>([]); const [data, setData] = React.useState<TMockData>([]);
const handleChangeData = () => { const handleChangeData = () => {
getRoles_mock().then((mockdata) => { getRoles_mock().then((mockdata) => {
setData( mockdata ); setData(mockdata);
}) });
}; };
const [accordionHeader, setAccordionHeader] = React.useState<string>("none"); const [accordionHeader, setAccordionHeader] = React.useState<string>("none");
const [accordionState, setAccordionState] = React.useState<boolean>(true); const [accordionState, setAccordionState] = React.useState<boolean>(true);
const [accordionText, setAccordionText] = React.useState<string>(""); const [accordionText, setAccordionText] = React.useState<string>("");
const handleChangeAccordion = (text:string) => { const handleChangeAccordion = (text: string) => {
if( text == "" ) { if (text == "") {
setAccordionState( true ); setAccordionState(true);
setAccordionHeader("none"); setAccordionHeader("none");
} } else {
else {
handleToggleAccordion(); handleToggleAccordion();
setAccordionHeader("flex") setAccordionHeader("flex");
} }
accordionState accordionState ? setAccordionText(text) : setAccordionText("");
? setAccordionText( text ) };
: setAccordionText( "" )
}
const handleToggleAccordion = () => { const handleToggleAccordion = () => {
setAccordionState( !accordionState ); setAccordionState(!accordionState);
} };
handleChangeData(); handleChangeData();
const [roles, setRoles] = React.useState<TMockData>([]);
const [users, setUsers] = React.useState<UsersType>();
const [manager, setManager] = React.useState<UsersType>();
React.useEffect(() => {
const axiosRoles = async () => {
const { data } = await axios({
method: "get",
url: "https://admin.pena.digital/strator/role/",
});
setRoles(data);
};
const gettingRegisteredUsers = async () => {
const { data } = await axios({
method: "get",
url: "https://hub.pena.digital/user/",
});
setUsers(data);
};
const gettingListManagers = async () => {
const { data } = await axios({
method: "get",
url: "https://admin.pena.digital/user/",
});
setManager(data);
};
gettingListManagers();
gettingRegisteredUsers();
axiosRoles();
}, []);
return ( return (
<React.Fragment> <React.Fragment>
<Button <Button
variant="text" variant="text"
onClick={ () => navigate("/modalAdmin") } onClick={() => navigate("/modalAdmin")}
sx={{ sx={{
width: "84%", width: "84%",
display: "flex", display: "flex",
@ -75,65 +121,75 @@ const Users: React.FC = () => {
borderColor: theme.palette.golden.main, borderColor: theme.palette.golden.main,
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
"&:hover": { "&:hover": {
backgroundColor: theme.palette.menu.main backgroundColor: theme.palette.menu.main,
} },
}}> }}
>
ИНФОРМАЦИЯ О ПРОЕКТЕ ИНФОРМАЦИЯ О ПРОЕКТЕ
</Button> </Button>
<Accordion
<Accordion sx={{ sx={{
width: "84%", width: "84%",
backgroundColor: theme.palette.content.main backgroundColor: theme.palette.content.main,
}} expanded={ accordionState }>
<AccordionSummary
sx = {{ display: accordionHeader }}
expandIcon={
<ExpandMoreIcon sx={{
color: theme.palette.secondary.main
}} }}
onClick={ () => handleToggleAccordion() } expanded={accordionState}
>
<AccordionSummary
sx={{ display: accordionHeader }}
expandIcon={
<ExpandMoreIcon
sx={{
color: theme.palette.secondary.main,
}}
onClick={() => handleToggleAccordion()}
/> />
} }
aria-controls="panel1a-content" aria-controls="panel1a-content"
id="panel1a-header" id="panel1a-header"
> >
<Typography sx={{ <Typography
sx={{
width: "100%", width: "100%",
color: theme.palette.secondary.main color: theme.palette.secondary.main,
}}> }}
{ accordionText } >
{accordionText}
</Typography> </Typography>
<Box sx={{ <Box
sx={{
display: "flex", display: "flex",
alignItems: "right" alignItems: "right",
}}> }}
<ClearIcon >
sx={{ color: theme.palette.secondary.main }} <ClearIcon sx={{ color: theme.palette.secondary.main }} onClick={() => handleChangeAccordion("")} />
onClick={ () => handleChangeAccordion("") }
/>
</Box> </Box>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Table
<Table sx={{ sx={{
width: "100%", width: "100%",
border: "2px solid", border: "2px solid",
borderColor: theme.palette.secondary.main, borderColor: theme.palette.secondary.main,
}} aria-label="simple table"> }}
aria-label="simple table"
>
<TableHead> <TableHead>
<TableRow sx={{ <TableRow
sx={{
borderBottom: "2px solid", borderBottom: "2px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
height: "100px" height: "100px",
}}> }}
>
<TableCell> <TableCell>
<Typography <Typography
variant="h4" variant="h4"
sx={{ sx={{
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
}}> }}
>
Имя Имя
</Typography> </Typography>
</TableCell> </TableCell>
@ -142,7 +198,8 @@ const Users: React.FC = () => {
variant="h4" variant="h4"
sx={{ sx={{
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
}}> }}
>
Описание Описание
</Typography> </Typography>
</TableCell> </TableCell>
@ -151,7 +208,8 @@ const Users: React.FC = () => {
variant="h4" variant="h4"
sx={{ sx={{
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
}}> }}
>
Отобразить Отобразить
</Typography> </Typography>
</TableCell> </TableCell>
@ -159,89 +217,93 @@ const Users: React.FC = () => {
</TableHead> </TableHead>
<TableBody> <TableBody>
{data.length ? (
{ data.map(function (item, index) {
data.length return (
? ( <TableRow
data.map(function(item, i) { sx={{
return(
<TableRow sx={{
borderTop: "2px solid", borderTop: "2px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
height: "100px", height: "100px",
cursor: "pointer" cursor: "pointer",
}} }}
key={ item.key } key={item.key}
onClick={ () => handleChangeAccordion( item.desc ) }> onClick={() => handleChangeAccordion(item.desc)}
>
<TableCell> <TableCell>
<Typography sx={{ <Typography
color: theme.palette.secondary.main sx={{
}}> color: theme.palette.secondary.main,
{ item.name } }}
>
{item.name}
</Typography> </Typography>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Typography sx={{ <Typography
color: theme.palette.secondary.main sx={{
}}> color: theme.palette.secondary.main,
{ item.desc } }}
>
{item.desc}
</Typography> </Typography>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Radio <Radio
checked={selectedValue === radioboxes[ i ]} checked={selectedValue === radioboxes[index]}
onChange={handleChange} onChange={handleChange}
value={ radioboxes[ i ] } value={radioboxes[index]}
sx={{ sx={{
"&, &.Mui-checked": { "&, &.Mui-checked": {
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
}, },
}} /> }}
/>
</TableCell> </TableCell>
</TableRow> </TableRow>
); );
}) })
) : ( ) : (
<TableRow sx={{ <TableRow
sx={{
borderTop: "2px solid", borderTop: "2px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
height: "100px" height: "100px",
}}> }}
>
<TableCell colSpan={3}> <TableCell colSpan={3}>
<Skeleton variant="rectangular" <Skeleton
variant="rectangular"
sx={{ sx={{
width: "100%", width: "100%",
minWidth: "100%", minWidth: "100%",
minHeight: "200px", minHeight: "200px",
marginTop: "15px", marginTop: "15px",
marginBottom: "15px" marginBottom: "15px",
}} }}
/> />
</TableCell> </TableCell>
</TableRow> </TableRow>
) )}
}
</TableBody> </TableBody>
</Table> </Table>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Box
<Box sx={{ sx={{
width: "90%", width: "90%",
marginTop: "35px" marginTop: "35px",
}}> }}
>
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex" }}>
<TextField <TextField
id = "standard-basic" id="standard-basic"
label = "id" label="id"
variant = "filled" variant="filled"
color = "secondary" color="secondary"
sx = {{ sx={{
width: "80%" width: "80%",
}} }}
InputProps={{ InputProps={{
style: { style: {
@ -249,30 +311,33 @@ const Users: React.FC = () => {
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
borderBottom: "1px solid", borderBottom: "1px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
} }} },
}}
InputLabelProps={{ InputLabelProps={{
style: { style: {
color: theme.palette.secondary.main color: theme.palette.secondary.main,
} }} },
}}
/> />
<Box <Box
sx={{ sx={{
display: 'flex', display: "flex",
justifyContent: 'center', justifyContent: "center",
maxWidth: '317px', maxWidth: "317px",
width: '100%' width: "100%",
}} }}
> >
<Button <Button
variant = "text" variant="text"
sx={{ sx={{
backgroundColor: theme.palette.content.main, backgroundColor: theme.palette.content.main,
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
// width: "20%", // width: "20%",
"&:hover": { "&:hover": {
backgroundColor: theme.palette.content.main backgroundColor: theme.palette.content.main,
} },
}}> }}
>
НАЙТИ НАЙТИ
</Button> </Button>
</Box> </Box>
@ -280,12 +345,12 @@ const Users: React.FC = () => {
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex" }}>
<TextField <TextField
id = "standard-basic" id="standard-basic"
label = "mail" label="mail"
variant = "filled" variant="filled"
color = "secondary" color="secondary"
sx = {{ sx={{
width: "80%" width: "80%",
}} }}
InputProps={{ InputProps={{
style: { style: {
@ -293,112 +358,253 @@ const Users: React.FC = () => {
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
borderBottom: "1px solid", borderBottom: "1px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
} }} },
}}
InputLabelProps={{ InputLabelProps={{
style: { style: {
color: theme.palette.secondary.main color: theme.palette.secondary.main,
} }} },
}}
/> />
<Box <Box
sx={{ sx={{
display: 'flex', display: "flex",
justifyContent: 'center', justifyContent: "center",
maxWidth: '317px', maxWidth: "317px",
width: '100%' width: "100%",
}} }}
> >
<Button <Button
variant = "text" variant="text"
sx={{ sx={{
backgroundColor: theme.palette.content.main, backgroundColor: theme.palette.content.main,
color: theme.palette.secondary.main, color: theme.palette.secondary.main,
width: "20%", width: "20%",
"&:hover": { "&:hover": {
backgroundColor: theme.palette.content.main backgroundColor: theme.palette.content.main,
} },
}}> }}
>
СБРОСИТЬ СБРОСИТЬ
</Button> </Button>
</Box> </Box>
</Box> </Box>
</Box> </Box>
<Table
sx={{
<Table sx={{
width: "90%", width: "90%",
border: "2px solid", border: "2px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
marginTop: "35px", marginTop: "35px",
}} aria-label="simple table"> }}
aria-label="simple table"
>
<TableHead> <TableHead>
<TableRow sx={{ <TableRow
sx={{
borderBottom: "2px solid", borderBottom: "2px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
height: "100px" height: "100px",
}}> }}
>
<TableCell sx={{ textAlign: "center" }}> <TableCell sx={{ textAlign: "center" }}>
<Typography <Typography
variant="h4" variant="h4"
sx={{ sx={{
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 sx={{ <ConditionalRender
isLoading={false}
role={selectedValue}
childrenManager={
<>
{manager &&
manager.map(({ login, email, phoneNumber, isDeleted, createdAt }) => (
<TableRow
key={createdAt}
sx={{
borderBottom: "2px solid", borderBottom: "2px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
height: "100px", height: "100px",
cursor: "pointer" }}
}} onClick={ () => navigate("/modalUser") }> >
<TableCell sx={{ textAlign: "center" }}> <TableCell sx={{ textAlign: "center" }}>
<Typography sx={{ <Typography
color: theme.palette.secondary.main variant="h4"
}}> sx={{
1 color: theme.palette.secondary.main,
}}
>
{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 ? "true" : "false"}
</Typography>
</TableCell>
<TableCell sx={{ textAlign: "center" }}>
<Typography
variant="h4"
sx={{
color: theme.palette.secondary.main,
}}
>
{createdAt}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
))}
<TableRow sx={{ </>
}
childrenUser={
<>
{users &&
users.map(({ login, email, phoneNumber, isDeleted, createdAt }) => (
<TableRow
key={createdAt}
sx={{
borderBottom: "2px solid", borderBottom: "2px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
height: "100px", height: "100px",
cursor: "pointer" }}
}} onClick={ () => navigate("/modalUser") }> >
<TableCell sx={{ textAlign: "center" }}> <TableCell sx={{ textAlign: "center" }}>
<Typography sx={{ <Typography
color: theme.palette.secondary.main variant="h4"
}}> sx={{
2 color: theme.palette.secondary.main,
}}
>
{login}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow>
<TableRow sx={{
borderBottom: "1px solid",
border: theme.palette.secondary.main,
height: "100px",
cursor: "pointer"
}} onClick={ () => navigate("/modalUser") }>
<TableCell sx={{ textAlign: "center" }}> <TableCell sx={{ textAlign: "center" }}>
<Typography sx={{ <Typography
color: theme.palette.secondary.main variant="h4"
}}> sx={{
3 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> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
))}
</>
}
/>
</TableBody> </TableBody>
</Table> </Table>
</React.Fragment> </React.Fragment>
); );
} };
export default Users; export default Users;

59
src/pages/dashboard/Header/index.tsx
View File

@ -1,35 +1,41 @@
import * as React from "react"; import * as React from "react";
import {Box, IconButton, Typography} from "@mui/material"; import { Box, IconButton, Typography } from "@mui/material";
import theme from "../../../theme"; import theme from "../../../theme";
import ExitToAppOutlinedIcon from '@mui/icons-material/ExitToAppOutlined'; import ExitToAppOutlinedIcon from "@mui/icons-material/ExitToAppOutlined";
import Logo from "../../Logo"; import Logo from "../../Logo";
import makeRequest from "@kitUI/makeRequest"; import { authStore } from "@root/stores/auth";
const Header: React.FC = () => { const Header: React.FC = () => {
const { makeRequest, clearToken } = authStore();
return ( return (
<React.Fragment> <React.Fragment>
<Box sx={{ <Box
sx={{
backgroundColor: theme.palette.menu.main, backgroundColor: theme.palette.menu.main,
width: "100%", width: "100%",
minHeight: "85px", minHeight: "85px",
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
flexWrap: 'wrap', flexWrap: "wrap",
paddingLeft: '5px' paddingLeft: "5px",
}}> }}
<Box sx={{ >
<Box
sx={{
width: "150px", width: "150px",
display: "flex", display: "flex",
justifyContent: "right", justifyContent: "right",
alignItems: "center" alignItems: "center",
}}> }}
>
<Logo /> <Logo />
</Box> </Box>
<Box sx={{ <Box
display: "flex" sx={{
}}> display: "flex",
}}
>
<Typography <Typography
variant="h6" variant="h6"
sx={{ sx={{
@ -38,19 +44,18 @@ const Header: React.FC = () => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
fontWeight: "normal" fontWeight: "normal",
}} }}
> >
Добро пожаловать, Администратор сервиса Добро пожаловать, Администратор сервиса
</Typography> </Typography>
<IconButton <IconButton
onClick={()=>{ onClick={() => {
makeRequest({ makeRequest({
url: "https://admin.pena.digital/auth/logout", url: "https://admin.pena.digital/auth/logout",
contentType: true contentType: true,
}) }).then(() => clearToken());
.then(()=>localStorage.setItem('AT', ""))
}} }}
sx={{ sx={{
display: "flex", display: "flex",
@ -58,18 +63,20 @@ const Header: React.FC = () => {
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
cursor: "pointer", cursor: "pointer",
padding: '0 31px' padding: "0 31px",
}}> }}
<ExitToAppOutlinedIcon sx={{ >
<ExitToAppOutlinedIcon
sx={{
color: theme.palette.golden.main, color: theme.palette.golden.main,
transform: "scale(1.3)" transform: "scale(1.3)",
}} /> }}
/>
</IconButton> </IconButton>
</Box> </Box>
</Box> </Box>
</React.Fragment> </React.Fragment>
); );
} };
export default Header; export default Header;

195
src/pages/dashboard/Menu/index.tsx
View File

@ -1,13 +1,13 @@
import * as React from "react"; import * as React from "react";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined'; import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'; import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
import BathtubOutlinedIcon from '@mui/icons-material/BathtubOutlined'; import BathtubOutlinedIcon from "@mui/icons-material/BathtubOutlined";
import AddPhotoAlternateOutlinedIcon from '@mui/icons-material/AddPhotoAlternateOutlined'; import AddPhotoAlternateOutlinedIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
import NaturePeopleOutlinedIcon from '@mui/icons-material/NaturePeopleOutlined'; import NaturePeopleOutlinedIcon from "@mui/icons-material/NaturePeopleOutlined";
import SettingsIcon from '@mui/icons-material/Settings'; import SettingsIcon from "@mui/icons-material/Settings";
import CameraIcon from '@mui/icons-material/Camera'; import CameraIcon from "@mui/icons-material/Camera";
import HeadsetMicOutlinedIcon from '@mui/icons-material/HeadsetMicOutlined'; import HeadsetMicOutlinedIcon from "@mui/icons-material/HeadsetMicOutlined";
import theme from "../../../theme"; import theme from "../../../theme";
import CssBaseline from "@mui/material/CssBaseline"; import CssBaseline from "@mui/material/CssBaseline";
import Toolbar from "@mui/material/Toolbar"; import Toolbar from "@mui/material/Toolbar";
@ -21,44 +21,44 @@ import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton"; import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText"; import ListItemText from "@mui/material/ListItemText";
import {CSSObject, styled, Theme, useTheme} from "@mui/material/styles"; import { CSSObject, styled, Theme, useTheme } from "@mui/material/styles";
import MuiDrawer from '@mui/material/Drawer'; import MuiDrawer from "@mui/material/Drawer";
import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'; import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
import Header from "../Header/index"; import Header from "../Header/index";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
import useMediaQuery from '@mui/material/useMediaQuery'; import useMediaQuery from "@mui/material/useMediaQuery";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
const drawerWidth = 240; const drawerWidth = 240;
const openedMixin = (theme: Theme): CSSObject => ({ const openedMixin = (theme: Theme): CSSObject => ({
width: drawerWidth, width: drawerWidth,
background: '#2f3339', background: "#2f3339",
transition: theme.transitions.create('width', { transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
overflowX: 'hidden', overflowX: "hidden",
}); });
const closedMixin = (theme: Theme): CSSObject => ({ const closedMixin = (theme: Theme): CSSObject => ({
transition: theme.transitions.create('width', { transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.leavingScreen,
}), }),
overflowX: 'hidden', overflowX: "hidden",
width: `calc(${theme.spacing(7)} + 1px)`, width: `calc(${theme.spacing(7)} + 1px)`,
background: '#2f3339', background: "#2f3339",
// marginTop: '20px', // marginTop: '20px',
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up("sm")]: {
width: `calc(${theme.spacing(8)} + 1px)`, width: `calc(${theme.spacing(8)} + 1px)`,
}, },
}); });
const DrawerHeader = styled('div')(({ theme }) => ({ const DrawerHeader = styled("div")(({ theme }) => ({
display: 'flex', display: "flex",
alignItems: 'center', alignItems: "center",
justifyContent: 'flex-end', justifyContent: "flex-end",
padding: theme.spacing(0, 1), padding: theme.spacing(0, 1),
...theme.mixins.toolbar, ...theme.mixins.toolbar,
})); }));
@ -68,127 +68,131 @@ interface AppBarProps extends MuiAppBarProps {
} }
const AppBar = styled(MuiAppBar, { const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open', shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>(({ theme, open }) => ({ })<AppBarProps>(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], { transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.leavingScreen,
}), }),
...(open && { ...(open && {
marginLeft: drawerWidth, marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`, width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], { transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
}), }),
})); }));
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
({ theme, open }) => ({
width: drawerWidth, width: drawerWidth,
flexShrink: 0, flexShrink: 0,
boxSizing: 'border-box', boxSizing: "border-box",
...(open && { ...(open && {
...openedMixin(theme), ...openedMixin(theme),
'& .MuiDrawer-paper': openedMixin(theme), "& .MuiDrawer-paper": openedMixin(theme),
}), }),
...(!open && { ...(!open && {
...closedMixin(theme), ...closedMixin(theme),
'& .MuiDrawer-paper': closedMixin(theme), "& .MuiDrawer-paper": closedMixin(theme),
}), }),
}), }));
);
const links: {path: string; element: JSX.Element; title: string, className: string} [] =[ const links: { path: string; element: JSX.Element; title: string; className: string }[] = [
{path: '/users', element: <PersonOutlineOutlinedIcon/>, title: 'Информация о проекте', className:'menu'}, { path: "/users", element: <PersonOutlineOutlinedIcon />, title: "Информация о проекте", className: "menu" },
{path: '/entities', element: <SettingsOutlinedIcon/>, title: 'Юридические лица', className:'menu'}, { path: "/entities", element: <SettingsOutlinedIcon />, title: "Юридические лица", className: "menu" },
{path: '/tariffs', element: <BathtubOutlinedIcon/>, title: 'Шаблонизатор документов', className:'menu'}, { path: "/tariffs", element: <BathtubOutlinedIcon />, title: "Шаблонизатор документов", className: "menu" },
{path: '/discounts', element: <AddPhotoAlternateOutlinedIcon/>, title: 'Скидки', className:'menu'}, { path: "/discounts", element: <AddPhotoAlternateOutlinedIcon />, title: "Скидки", className: "menu" },
{path: '/promocode', element: <NaturePeopleOutlinedIcon/>, title: 'Промокод', className:'menu'}, { path: "/promocode", element: <NaturePeopleOutlinedIcon />, title: "Промокод", className: "menu" },
{path: '/kkk', element: <SettingsIcon/>, title: 'Настройки', className:'menu'}, { path: "/settingRoles", element: <SettingsIcon />, title: "Настройки", className: "menu" },
{path: '/jjj', element: <CameraIcon/>, title: 'Камера', className:'menu'}, { path: "/jjj", element: <CameraIcon />, title: "Камера", className: "menu" },
{path: '/support', element: <HeadsetMicOutlinedIcon/>, title: 'Служба поддержки', className:'menu'}, { path: "/support", element: <HeadsetMicOutlinedIcon />, title: "Служба поддержки", className: "menu" },
] ];
const Navigation = (props: any) => {
const Navigation = (props:any) => {
return ( return (
<List <List
sx={{ sx={{
background: '#2f3339' background: "#2f3339",
}} }}
> >
{links.map((e, i) => ( {links.map((e, i) => (
<ListItem key={i} disablePadding sx={{ display: 'block' }}> <ListItem key={i} disablePadding sx={{ display: "block" }}>
<Link to={e.path} style={{textDecoration: 'none'}} className={e.className}> <Link to={e.path} style={{ textDecoration: "none" }} className={e.className}>
<ListItemButton onClick={props.SladeMobileHC} <ListItemButton
onClick={props.SladeMobileHC}
sx={{ sx={{
minHeight: 48, minHeight: 48,
height: '50px', height: "50px",
justifyContent: props.visible ? 'initial' : 'center', justifyContent: props.visible ? "initial" : "center",
px: 2.5, px: 2.5,
margin: '20px 0' margin: "20px 0",
}} }}
> >
<ListItemIcon <ListItemIcon
sx={{ sx={{
minWidth: 0, minWidth: 0,
mr: props.visible ? 3 : 'auto', mr: props.visible ? 3 : "auto",
justifyContent: 'center', justifyContent: "center",
color: '#eaba5b', color: "#eaba5b",
transform: 'scale(1.2)' transform: "scale(1.2)",
}} }}
> >
{e.element} {e.element}
</ListItemIcon> </ListItemIcon>
<ListItemText primary={e.title} <ListItemText
primary={e.title}
sx={{ sx={{
opacity: props.visible ? 1 : 0, opacity: props.visible ? 1 : 0,
color: '#eaba5b', color: "#eaba5b",
}} /> }}
/>
</ListItemButton> </ListItemButton>
</Link> </Link>
</ListItem> </ListItem>
))} ))}
</List> </List>
) );
} };
const Menu: React.FC = () => { const Menu: React.FC = () => {
const tablet = useMediaQuery('(max-width:600px)'); const tablet = useMediaQuery("(max-width:600px)");
const mobile = useMediaQuery('(max-width:340px)'); const mobile = useMediaQuery("(max-width:340px)");
const theme = useTheme(); const theme = useTheme();
const [open, setOpen] = React.useState(tablet? false : true); const [open, setOpen] = React.useState(tablet ? false : true);
const handleDrawerOpen = () => { const handleDrawerOpen = () => {
if (!mobile) {setOpen(true)} if (!mobile) {
else {SladeMobileHC()} setOpen(true);
} else {
SladeMobileHC();
}
}; };
const handleDrawerClose = () => { const handleDrawerClose = () => {
setOpen(false); setOpen(false);
}; };
const [sladeMobile, setSladeMobile] = React.useState(false) const [sladeMobile, setSladeMobile] = React.useState(false);
const SladeMobileHC = () => { const SladeMobileHC = () => {
if (mobile) {setSladeMobile(old=>!old)} if (mobile) {
setSladeMobile((old) => !old);
}
}; };
return ( return (
<React.Fragment> <React.Fragment>
<Box sx={{ display: 'flex' }}> <Box sx={{ display: "flex" }}>
<CssBaseline /> <CssBaseline />
<AppBar open={open}> <AppBar open={open}>
<Toolbar <Toolbar
sx={{ sx={{
background: '#2f3339', background: "#2f3339",
borderBottom: '1px solid', borderBottom: "1px solid",
borderColor: '#45494c', borderColor: "#45494c",
}} }}
> >
<IconButton <IconButton
@ -197,9 +201,9 @@ const Menu: React.FC = () => {
edge="start" edge="start"
sx={{ sx={{
marginRight: 5, marginRight: 5,
...(open && { display: 'none' }), ...(open && { display: "none" }),
color: "#eaba5b", color: "#eaba5b",
background: '#2f3339' background: "#2f3339",
}} }}
> >
<MenuIcon /> <MenuIcon />
@ -207,39 +211,38 @@ const Menu: React.FC = () => {
<Header /> <Header />
</Toolbar> </Toolbar>
</AppBar> </AppBar>
{!mobile ? <Drawer variant="permanent" open={open}> {!mobile ? (
<DrawerHeader style={{minHeight: '86px',}}> <Drawer variant="permanent" open={open}>
<IconButton onClick={handleDrawerClose} sx={{color: "#eaba5b"}}> <DrawerHeader style={{ minHeight: "86px" }}>
<IconButton onClick={handleDrawerClose} sx={{ color: "#eaba5b" }}>
<ChevronLeftIcon /> <ChevronLeftIcon />
</IconButton> </IconButton>
</DrawerHeader> </DrawerHeader>
<Divider /> <Divider />
<Navigation visible={open}/> <Navigation visible={open} />
</Drawer> : null} </Drawer>
) : null}
</Box> </Box>
{sladeMobile ? <Paper {sladeMobile ? (
<Paper
sx={{ sx={{
position: 'absolute', position: "absolute",
width: '100%', width: "100%",
background: '#2f3339', background: "#2f3339",
zIndex: theme.zIndex.drawer + 3 zIndex: theme.zIndex.drawer + 3,
}} }}
> >
<Box <Box sx={{ display: "flex", justifyContent: "end", padding: "10px" }}>
sx={{display: 'flex', <IconButton onClick={SladeMobileHC} sx={{ color: "#eaba5b" }}>
justifyContent: 'end',
padding: '10px'
}}
>
<IconButton onClick={SladeMobileHC} sx={{color: "#eaba5b"}}>
<ChevronLeftIcon /> <ChevronLeftIcon />
</IconButton> </IconButton>
</Box> </Box>
<Divider /> <Divider />
<Navigation visible={true} SladeMobileHC={SladeMobileHC}/></Paper> : null} <Navigation visible={true} SladeMobileHC={SladeMobileHC} />
</Paper>
) : null}
</React.Fragment> </React.Fragment>
); );
} };
export default Menu; export default Menu;

91
src/stores/auth.ts
View File

@ -1,21 +1,102 @@
import axios, { AxiosError, AxiosResponse } from "axios";
import { create } from "zustand"; import { create } from "zustand";
import { devtools } from "zustand/middleware"; import { persist } from "zustand/middleware";
type Token = string type Token = string;
interface AuthStore { interface AuthStore {
token: Token token: Token;
setToken: (data: Token) => void; setToken: (data: Token) => void;
makeRequest: <TRequest = unknown, TResponse = unknown>(props: FirstRequest<TRequest>) => Promise<TResponse>;
clearToken: () => void;
}
interface FirstRequest<T> {
method?: string;
url: string;
body?: T;
useToken?: boolean;
contentType?: boolean;
bearer?: boolean;
signal?: AbortSignal;
} }
export const authStore = create<AuthStore>()( export const authStore = create<AuthStore>()(
devtools( persist(
(set, get) => ({ (set, get) => ({
token: "", token: "",
setToken: newToken => set({ token: newToken }) setToken: (newToken) => set({ token: newToken }),
makeRequest: <TRequest, TResponse>(props: FirstRequest<TRequest>): Promise<TResponse> => {
const newProps = { ...props, HC: (newToken: Token) => set({ token: newToken }), token: get().token };
return makeRequest<TRequest, TResponse>(newProps);
},
clearToken: () => set({ token: "" }),
}), }),
{ {
name: "token", name: "token",
} }
) )
); );
interface MakeRequest<T> extends FirstRequest<T> {
HC: (newToken: Token) => void;
token: Token;
}
async function makeRequest<TRequest, TResponse>({
method = "post",
url,
body,
useToken = true,
signal,
contentType = false,
bearer = false,
HC,
token,
}: MakeRequest<TRequest>) {
//В случае 401 рефреш должен попробовать вызваться 1 раз
let headers: any = {};
if (useToken) headers["Authorization"] = bearer ? "Bearer " + token : token;
if (contentType) headers["Content-Type"] = "application/json";
try {
const { data } = await axios<TRequest, AxiosResponse<TResponse & { accessToken?: string }>>({
url,
method,
headers,
data: body,
signal,
withCredentials: true
});
if (data?.accessToken) {
HC(data.accessToken);
}
return data;
} catch (nativeError: unknown) {
const error = nativeError as AxiosError;
if (error?.response?.status === 401) {
const refreshResponse = await refresh(token);
if (refreshResponse.data?.accessToken) HC(refreshResponse.data.accessToken);
headers["Authorization"] = refreshResponse.data.accessToken;
const response = await axios<TRequest, AxiosResponse<TResponse>>({ url, method, headers, data: body, signal });
return response.data;
}
throw error;
}
}
function refresh(token:Token) {
return axios<never, AxiosResponse<{ accessToken: string }>>("https://admin.pena.digital/auth/refresh", {
headers: {
Authorization: token,
"Content-Type": "application/json",
},
});
}

42
src/stores/messages.ts
View File

@ -6,12 +6,22 @@ import { testMessages } from "./mocks/messages";
interface MessageStore { interface MessageStore {
messages: TicketMessage[]; messages: TicketMessage[];
fetchState: "idle" | "fetching" | "all fetched";
apiPage: number;
messagesPerPage: number;
lastMessageId: string | undefined;
isPreventAutoscroll: boolean;
} }
export const useMessageStore = create<MessageStore>()( export const useMessageStore = create<MessageStore>()(
devtools( devtools(
(set, get) => ({ (set, get) => ({
messages: testMessages, messages: testMessages,
messagesPerPage: 10,
fetchState: "idle",
apiPage: 0,
lastMessageId: undefined,
isPreventAutoscroll: false,
}), }),
{ {
name: "Message store (admin)" name: "Message store (admin)"
@ -19,15 +29,39 @@ export const useMessageStore = create<MessageStore>()(
) )
); );
export const setMessages = (messages: TicketMessage[]) => useMessageStore.setState(({ messages }));
export const addOrUpdateMessages = (receivedMessages: TicketMessage[]) => { export const addOrUpdateMessages = (receivedMessages: TicketMessage[]) => {
const state = useMessageStore.getState(); const state = useMessageStore.getState();
const messageIdToMessageMap: { [messageId: string]: TicketMessage; } = {}; const messageIdToMessageMap: { [messageId: string]: TicketMessage; } = {};
[...state.messages, ...receivedMessages].forEach(message => messageIdToMessageMap[message.id] = message); [...state.messages, ...receivedMessages].forEach(message => messageIdToMessageMap[message.id] = message);
useMessageStore.setState({ messages: Object.values(messageIdToMessageMap) }); const sortedMessages = Object.values(messageIdToMessageMap).sort(sortMessagesByTime);
useMessageStore.setState({
messages: sortedMessages,
lastMessageId: sortedMessages.at(-1)?.id,
});
}; };
export const clearMessages = () => useMessageStore.setState({ messages: [] }); export const clearMessageState = () => useMessageStore.setState({
messages: [],
apiPage: 0,
lastMessageId: undefined,
fetchState: "idle",
});
export const setMessageFetchState = (fetchState: MessageStore["fetchState"]) => useMessageStore.setState({ fetchState });
export const incrementMessageApiPage = () => {
const state = useMessageStore.getState();
useMessageStore.setState({ apiPage: state.apiPage + 1 });
};
function sortMessagesByTime(ticket1: TicketMessage, ticket2: TicketMessage) {
const date1 = new Date(ticket1.created_at).getTime();
const date2 = new Date(ticket2.created_at).getTime();
return date1 - date2;
}
export const setIsPreventAutoscroll = (isPreventAutoscroll: boolean) => useMessageStore.setState({ isPreventAutoscroll });

15
src/stores/tickets.ts
View File

@ -5,12 +5,18 @@ import { devtools } from "zustand/middleware";
interface TicketStore { interface TicketStore {
tickets: Ticket[]; tickets: Ticket[];
fetchState: "idle" | "fetching" | "all fetched";
apiPage: number;
ticketsPerPage: number;
} }
export const useTicketStore = create<TicketStore>()( export const useTicketStore = create<TicketStore>()(
devtools( devtools(
(set, get) => ({ (set, get) => ({
tickets: [], tickets: [],
fetchState: "idle",
apiPage: 0,
ticketsPerPage: 20,
}), }),
{ {
name: "Tickets store (admin)" name: "Tickets store (admin)"
@ -18,6 +24,15 @@ export const useTicketStore = create<TicketStore>()(
) )
); );
export const setTicketsFetchState = (fetchState: TicketStore["fetchState"]) => useTicketStore.setState({ fetchState });
export const incrementTicketsApiPage = () => {
const state = useTicketStore.getState();
if (state.fetchState !== "idle") return;
useTicketStore.setState({ apiPage: state.apiPage + 1 });
};
export const updateTickets = (receivedTickets: Ticket[]) => { export const updateTickets = (receivedTickets: Ticket[]) => {
const state = useTicketStore.getState(); const state = useTicketStore.getState();
const ticketIdToTicketMap: { [ticketId: string]: Ticket; } = {}; const ticketIdToTicketMap: { [ticketId: string]: Ticket; } = {};

18127
yarn.lock
View File

File diff suppressed because it is too large Load Diff