ЩДобавил аккардеон для привелегий
This commit is contained in:
ArtChaos189
parent
097c51d652
commit
35a0a8c334
250
src/pages/Setting/CustomWrapper.tsx
Normal file
250
src/pages/Setting/CustomWrapper.tsx
Normal file
@ -0,0 +1,250 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import axios from "axios";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
IconButton,
|
||||||
|
SxProps,
|
||||||
|
TextField,
|
||||||
|
Theme,
|
||||||
|
Tooltip,
|
||||||
|
Typography,
|
||||||
|
useMediaQuery,
|
||||||
|
useTheme,
|
||||||
|
} from "@mui/material";
|
||||||
|
import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
|
||||||
|
|
||||||
|
import { usePrivilegies } from "@root/hooks/privilege.hook";
|
||||||
|
|
||||||
|
interface CustomWrapperProps {
|
||||||
|
text: string;
|
||||||
|
sx?: SxProps<Theme>;
|
||||||
|
result?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface СardChildren {
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
price: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const СardChildren = ({ name, type, price, description }: СardChildren) => {
|
||||||
|
const [inputOpen, setInputOpen] = useState<boolean>(false);
|
||||||
|
const [inputValue, setInputValue] = useState<string>("");
|
||||||
|
|
||||||
|
const PutPrivilegies = () => {
|
||||||
|
axios({
|
||||||
|
method: "put",
|
||||||
|
url: "https://admin.pena.digital/strator/privilege/service",
|
||||||
|
data: {
|
||||||
|
price: inputValue,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!inputOpen && inputValue !== "") {
|
||||||
|
PutPrivilegies();
|
||||||
|
setInputValue("");
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
key={type}
|
||||||
|
sx={{
|
||||||
|
px: "20px",
|
||||||
|
py: "25px",
|
||||||
|
backgroundColor: "#F1F2F6",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ display: "flex" }}>
|
||||||
|
<Box sx={{ width: "200px", borderRight: "1px solid black" }}>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
sx={{
|
||||||
|
color: "#fe9903",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</Typography>
|
||||||
|
<Tooltip placement="top" title={description}>
|
||||||
|
<IconButton>
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M9.25 9.25H10V14.5H10.75"
|
||||||
|
stroke="#7E2AEA"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M9.8125 7C10.4338 7 10.9375 6.49632 10.9375 5.875C10.9375 5.25368 10.4338 4.75 9.8125 4.75C9.19118 4.75 8.6875 5.25368 8.6875 5.875C8.6875 6.49632 9.19118 7 9.8125 7Z"
|
||||||
|
fill="#7E2AEA"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<IconButton onClick={() => setInputOpen(!inputOpen)}>
|
||||||
|
<ModeEditOutlineOutlinedIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ width: "600px", display: "flex", justifyContent: "space-around" }}>
|
||||||
|
{inputOpen ? (
|
||||||
|
<TextField
|
||||||
|
placeholder="введите число"
|
||||||
|
fullWidth
|
||||||
|
onChange={(event) => setInputValue(event.target.value)}
|
||||||
|
sx={{
|
||||||
|
alignItems: "center",
|
||||||
|
width: "400px",
|
||||||
|
"& .MuiInputBase-root": {
|
||||||
|
backgroundColor: "#F2F3F7",
|
||||||
|
height: "48px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
inputProps={{
|
||||||
|
sx: {
|
||||||
|
borderRadius: "10px",
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "21px",
|
||||||
|
py: 0,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Typography sx={{ color: "black", mr: "5px" }}>price: {price}</Typography>
|
||||||
|
)}
|
||||||
|
<Typography sx={{ color: "black" }}>{type}</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const PrivilegiesWrapper = ({ text, sx, result }: CustomWrapperProps) => {
|
||||||
|
const theme = useTheme();
|
||||||
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||||
|
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||||||
|
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const { privilegies, isError, isLoading, errorMessage } = usePrivilegies();
|
||||||
|
|
||||||
|
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 &&
|
||||||
|
(isError ? (
|
||||||
|
<Typography>errorMessage</Typography>
|
||||||
|
) : (
|
||||||
|
privilegies?.Шаблонизатор.map(({ name, type, price, description }) => (
|
||||||
|
<СardChildren key={type} name={name} type={type} price={price} description={description} />
|
||||||
|
))
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -2,7 +2,7 @@ import { AccordionDetails, Table, TableBody, TableCell, TableHead, TableRow, Typ
|
|||||||
|
|
||||||
import FormDeleteRoles from "./FormDeleteRoles";
|
import FormDeleteRoles from "./FormDeleteRoles";
|
||||||
import FormCreateRoles from "./FormCreateRoles";
|
import FormCreateRoles from "./FormCreateRoles";
|
||||||
import { PrivilegiesWrapper } from "./PrivilegiesWrapper";
|
import { PrivilegiesWrapper } from "./CustomWrapper";
|
||||||
|
|
||||||
import theme from "../../theme";
|
import theme from "../../theme";
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user