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

Настройка SettingRoles

Browse Source
This commit is contained in:
ArtChaos189 2023-05-24 16:34:46 +03:00
parent ab603c35c2
commit 9c0d831050
5 changed files with 256 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/hooks/privilege.hook.ts
View File

@ -9,7 +9,7 @@ export type Privilege = {
price: string; price: string;
privilegeId: string; privilegeId: string;
serviceKey: string; serviceKey: string;
type: string; type: "count" | "day" | "mb";
updatedAt: string; updatedAt: string;
value: string; value: string;
_id: string; _id: string;

128
src/kitUI/CustomWrapper.tsx Normal file
View File

@ -0,0 +1,128 @@
import { useState } from "react";
import { Box, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
interface CustomWrapperProps {
text: string;
sx?: SxProps<Theme>;
result?: boolean;
children: JSX.Element;
}
export const CustomWrapper = ({ text, sx, result, children }: CustomWrapperProps) => {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
return (
<Box
sx={{
width: "100%",
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
4749)`,
...sx,
}}
>
<Box
sx={{
border: "1px solid white",
"&:first-of-type": {
borderTopLeftRadius: "12px ",
borderTopRightRadius: "12px",
},
"&:last-of-type": {
borderBottomLeftRadius: "12px",
borderBottomRightRadius: "12px",
},
"&:not(:last-of-type)": {
borderBottom: `1px solid gray`,
},
}}
>
<Box
onClick={() => setIsExpanded((prev) => !prev)}
sx={{
height: "88px",
px: "20px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
}}
>
<Typography
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
fontSize: "18px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 400,
color: "#FFFFFF",
px: 0,
}}
>
{text}
</Typography>
<Box
sx={{
display: "flex",
height: "100%",
alignItems: "center",
}}
>
{result ? (
<>
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
<path
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
stroke="#7E2AEA"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<Box
sx={{
borderLeft: upSm ? "1px solid #9A9AAF" : "none",
pl: upSm ? "2px" : 0,
height: "50%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
/>
</>
) : (
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
<path
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
stroke="#fe9903"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
)}
</Box>
</Box>
{isExpanded && <>{children}</>}
</Box>
</Box>
);
};

23
src/pages/Setting/CardPrivilegie.tsx
View File

@ -1,6 +1,6 @@
import { useState } from "react"; import { useRef, useState } from "react";
import axios from "axios"; import axios from "axios";
import { Box, IconButton, TextField, Tooltip, Typography } from "@mui/material"; import { Box, Button, IconButton, TextField, Tooltip, Typography } from "@mui/material";
import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined"; import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
interface CardPrivilegie { interface CardPrivilegie {
@ -16,6 +16,7 @@ interface CardPrivilegie {
export const СardPrivilegie = ({ name, type, price, description, value, privilegeId, serviceKey }: CardPrivilegie) => { export const СardPrivilegie = ({ name, type, price, description, value, privilegeId, serviceKey }: CardPrivilegie) => {
const [inputOpen, setInputOpen] = useState<boolean>(false); const [inputOpen, setInputOpen] = useState<boolean>(false);
const [inputValue, setInputValue] = useState<string>(""); const [inputValue, setInputValue] = useState<string>("");
const priceRef = useRef<any>(null);
const PutPrivilegies = () => { const PutPrivilegies = () => {
axios({ axios({
@ -30,13 +31,20 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
value: value, value: value,
price: inputValue, price: inputValue,
}, },
}); })
.then(() => {
priceRef.current.innerText = "price: " + inputValue;
setInputValue("");
setInputOpen(false);
})
.catch((error) => {
alert(error.message);
});
}; };
const requestOnclickEnter = (event: any) => { const requestOnclickEnter = (event: any) => {
if (event.key === "Enter" && inputValue !== "") { if (event.key === "Enter" && inputValue !== "") {
PutPrivilegies(); PutPrivilegies();
setInputValue("");
setInputOpen(false); setInputOpen(false);
} }
}; };
@ -64,7 +72,8 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
variant="h6" variant="h6"
sx={{ sx={{
color: "#fe9903", color: "#fe9903",
whiteSpace: "nowrap", overflowWrap: "break-word",
overflow: "hidden",
}} }}
> >
{name} {name}
@ -118,7 +127,9 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
}} }}
/> />
) : ( ) : (
<Typography sx={{ color: "black", mr: "5px" }}>price: {price}</Typography> <div ref={priceRef} style={{ color: "black", marginRight: "5px" }}>
price: {price}
</div>
)} )}
<Typography sx={{ color: "black" }}>{type}</Typography> <Typography sx={{ color: "black" }}>{type}</Typography>
</Box> </Box>

14
src/pages/Setting/PrivilegiesWrapper.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from "react"; import { useState } from "react";
import { Box, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material"; import { Box, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
@ -12,6 +12,12 @@ interface CustomWrapperProps {
result?: boolean; result?: boolean;
} }
const translationType = {
count: "за единицу",
day: "за день",
mb: "за МБ",
};
export const PrivilegiesWrapper = ({ text, sx, result }: CustomWrapperProps) => { export const PrivilegiesWrapper = ({ text, sx, result }: CustomWrapperProps) => {
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
@ -129,11 +135,11 @@ export const PrivilegiesWrapper = ({ text, sx, result }: CustomWrapperProps) =>
(isError ? ( (isError ? (
<Typography>{errorMessage}</Typography> <Typography>{errorMessage}</Typography>
) : ( ) : (
privilegies?.Шаблонизатор.map(({ name, type, price, description, value, privilegeId, serviceKey }) => ( privilegies?.Шаблонизатор.map(({ name, type, price, description, value, privilegeId, serviceKey, _id }) => (
<СardPrivilegie <СardPrivilegie
key={type} key={_id}
name={name} name={name}
type={type} type={translationType[type]}
price={price} price={price}
value={value} value={value}
privilegeId={privilegeId} privilegeId={privilegeId}

190
src/pages/Setting/SettingRoles.tsx
View File

@ -1,5 +1,7 @@
import { AccordionDetails, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material"; import { AccordionDetails, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
import { CustomWrapper } from "@root/kitUI/CustomWrapper";
import FormDeleteRoles from "./FormDeleteRoles"; import FormDeleteRoles from "./FormDeleteRoles";
import FormCreateRoles from "./FormCreateRoles"; import FormCreateRoles from "./FormCreateRoles";
import { PrivilegiesWrapper } from "./PrivilegiesWrapper"; import { PrivilegiesWrapper } from "./PrivilegiesWrapper";
@ -8,98 +10,106 @@ import theme from "../../theme";
export const SettingRoles = (): JSX.Element => { export const SettingRoles = (): JSX.Element => {
return ( return (
<AccordionDetails> <AccordionDetails sx={{ width: "890px" }}>
<Table <CustomWrapper
sx={{ text="Роли"
width: "890px", children={
border: "2px solid", <>
borderColor: theme.palette.secondary.main, <Table
}} sx={{
aria-label="simple table" width: "890px",
> border: "2px solid",
<TableHead> borderColor: theme.palette.secondary.main,
<TableRow }}
sx={{ aria-label="simple table"
borderBottom: "2px solid", >
borderColor: theme.palette.grayLight.main, <TableHead>
height: "100px", <TableRow
}} sx={{
> borderBottom: "2px solid",
<TableCell> borderColor: theme.palette.grayLight.main,
<Typography height: "100px",
variant="h4" }}
sx={{ >
color: theme.palette.secondary.main, <TableCell>
}} <Typography
> variant="h4"
Настройки ролей sx={{
</Typography> color: theme.palette.secondary.main,
</TableCell> }}
</TableRow> >
</TableHead> Настройки ролей
</Typography>
</TableCell>
</TableRow>
</TableHead>
<TableBody> <TableBody>
<TableRow <TableRow
sx={{ sx={{
p: "5px", p: "5px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
borderTop: "2px solid", borderTop: "2px solid",
borderColor: theme.palette.grayLight.main, borderColor: theme.palette.grayLight.main,
height: "100px", height: "100px",
cursor: "pointer", cursor: "pointer",
}} }}
> >
<FormCreateRoles /> <FormCreateRoles />
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
<Table <Table
sx={{ sx={{
mt: "30px", mt: "30px",
width: "890px", width: "890px",
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 <TableRow
sx={{ 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>
</TableRow> </TableRow>
</TableHead> </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>
</>
}
/>
<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>
<PrivilegiesWrapper text="Привелегии" sx={{ mt: "50px" }} /> <PrivilegiesWrapper text="Привелегии" sx={{ mt: "50px" }} />
</AccordionDetails> </AccordionDetails>
); );