118 lines
3.4 KiB
TypeScript
118 lines
3.4 KiB
TypeScript
|
import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
|
|||
|
|
import { Box, IconButton, TextField, Tooltip, Typography } from "@mui/material";
|
|||
|
|
import axios from "axios";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
|
|||
|
|
interface CardPrivilegie {
|
|||
|
|
name: string;
|
|||
|
|
type: string;
|
|||
|
|
price: string;
|
|||
|
|
description: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const СardPrivilegie = ({ name, type, price, description }: CardPrivilegie) => {
|
|||
|
|
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,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const requestOnclickEnter = (event: any) => {
|
|||
|
|
if (event.key === "Enter" && inputValue !== "") {
|
|||
|
|
PutPrivilegies();
|
|||
|
|
setInputValue("");
|
|||
|
|
setInputOpen(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onCloseInput = (event: any) => {
|
|||
|
|
if (event.key === "Escape") {
|
|||
|
|
setInputOpen(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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
|
|||
|
|
onKeyDown={onCloseInput}
|
|||
|
|
onKeyPress={requestOnclickEnter}
|
|||
|
|
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>
|
|||
|
|
);
|
|||
|
|
};
|