Настройка SettingRoles
This commit is contained in:
ArtChaos189
parent
ab603c35c2
commit
9c0d831050
@ -9,7 +9,7 @@ export type Privilege = {
|
||||
price: string;
|
||||
privilegeId: string;
|
||||
serviceKey: string;
|
||||
type: string;
|
||||
type: "count" | "day" | "mb";
|
||||
updatedAt: string;
|
||||
value: string;
|
||||
_id: string;
|
||||
|
||||
128
src/kitUI/CustomWrapper.tsx
Normal file
128
src/kitUI/CustomWrapper.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useRef, useState } from "react";
|
||||
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";
|
||||
|
||||
interface CardPrivilegie {
|
||||
@ -16,6 +16,7 @@ interface CardPrivilegie {
|
||||
export const СardPrivilegie = ({ name, type, price, description, value, privilegeId, serviceKey }: CardPrivilegie) => {
|
||||
const [inputOpen, setInputOpen] = useState<boolean>(false);
|
||||
const [inputValue, setInputValue] = useState<string>("");
|
||||
const priceRef = useRef<any>(null);
|
||||
|
||||
const PutPrivilegies = () => {
|
||||
axios({
|
||||
@ -30,13 +31,20 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
|
||||
value: value,
|
||||
price: inputValue,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
priceRef.current.innerText = "price: " + inputValue;
|
||||
setInputValue("");
|
||||
setInputOpen(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error.message);
|
||||
});
|
||||
};
|
||||
|
||||
const requestOnclickEnter = (event: any) => {
|
||||
if (event.key === "Enter" && inputValue !== "") {
|
||||
PutPrivilegies();
|
||||
setInputValue("");
|
||||
setInputOpen(false);
|
||||
}
|
||||
};
|
||||
@ -64,7 +72,8 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
|
||||
variant="h6"
|
||||
sx={{
|
||||
color: "#fe9903",
|
||||
whiteSpace: "nowrap",
|
||||
overflowWrap: "break-word",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
</Box>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
import { Box, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
|
||||
@ -12,6 +12,12 @@ interface CustomWrapperProps {
|
||||
result?: boolean;
|
||||
}
|
||||
|
||||
const translationType = {
|
||||
count: "за единицу",
|
||||
day: "за день",
|
||||
mb: "за МБ",
|
||||
};
|
||||
|
||||
export const PrivilegiesWrapper = ({ text, sx, result }: CustomWrapperProps) => {
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
@ -129,11 +135,11 @@ export const PrivilegiesWrapper = ({ text, sx, result }: CustomWrapperProps) =>
|
||||
(isError ? (
|
||||
<Typography>{errorMessage}</Typography>
|
||||
) : (
|
||||
privilegies?.Шаблонизатор.map(({ name, type, price, description, value, privilegeId, serviceKey }) => (
|
||||
privilegies?.Шаблонизатор.map(({ name, type, price, description, value, privilegeId, serviceKey, _id }) => (
|
||||
<СardPrivilegie
|
||||
key={type}
|
||||
key={_id}
|
||||
name={name}
|
||||
type={type}
|
||||
type={translationType[type]}
|
||||
price={price}
|
||||
value={value}
|
||||
privilegeId={privilegeId}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { AccordionDetails, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
|
||||
|
||||
import { CustomWrapper } from "@root/kitUI/CustomWrapper";
|
||||
|
||||
import FormDeleteRoles from "./FormDeleteRoles";
|
||||
import FormCreateRoles from "./FormCreateRoles";
|
||||
import { PrivilegiesWrapper } from "./PrivilegiesWrapper";
|
||||
@ -8,7 +10,11 @@ import theme from "../../theme";
|
||||
|
||||
export const SettingRoles = (): JSX.Element => {
|
||||
return (
|
||||
<AccordionDetails>
|
||||
<AccordionDetails sx={{ width: "890px" }}>
|
||||
<CustomWrapper
|
||||
text="Роли"
|
||||
children={
|
||||
<>
|
||||
<Table
|
||||
sx={{
|
||||
width: "890px",
|
||||
@ -100,6 +106,10 @@ export const SettingRoles = (): JSX.Element => {
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<PrivilegiesWrapper text="Привелегии" sx={{ mt: "50px" }} />
|
||||
</AccordionDetails>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user