From 9c0d831050fa0c7227b0210d90b07977585c8ae7 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Wed, 24 May 2023 16:34:46 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B9?= =?UTF-8?q?=D0=BA=D0=B0=20SettingRoles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/privilege.hook.ts | 2 +- src/kitUI/CustomWrapper.tsx | 128 +++++++++++++++ src/pages/Setting/CardPrivilegie.tsx | 23 ++- src/pages/Setting/PrivilegiesWrapper.tsx | 14 +- src/pages/Setting/SettingRoles.tsx | 190 ++++++++++++----------- 5 files changed, 256 insertions(+), 101 deletions(-) create mode 100644 src/kitUI/CustomWrapper.tsx diff --git a/src/hooks/privilege.hook.ts b/src/hooks/privilege.hook.ts index c56ce2a..4595a8d 100644 --- a/src/hooks/privilege.hook.ts +++ b/src/hooks/privilege.hook.ts @@ -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; diff --git a/src/kitUI/CustomWrapper.tsx b/src/kitUI/CustomWrapper.tsx new file mode 100644 index 0000000..ab9536c --- /dev/null +++ b/src/kitUI/CustomWrapper.tsx @@ -0,0 +1,128 @@ +import { useState } from "react"; + +import { Box, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material"; + +interface CustomWrapperProps { + text: string; + sx?: SxProps; + 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(false); + + return ( + + + setIsExpanded((prev) => !prev)} + sx={{ + height: "88px", + px: "20px", + display: "flex", + alignItems: "center", + justifyContent: "space-between", + cursor: "pointer", + userSelect: "none", + }} + > + + {text} + + + + {result ? ( + <> + + + + + + + + ) : ( + + + + + )} + + + {isExpanded && <>{children}} + + + ); +}; diff --git a/src/pages/Setting/CardPrivilegie.tsx b/src/pages/Setting/CardPrivilegie.tsx index 6772336..7c877b0 100644 --- a/src/pages/Setting/CardPrivilegie.tsx +++ b/src/pages/Setting/CardPrivilegie.tsx @@ -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(false); const [inputValue, setInputValue] = useState(""); + const priceRef = useRef(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 }} /> ) : ( - price: {price} +
+ price: {price} +
)} {type} diff --git a/src/pages/Setting/PrivilegiesWrapper.tsx b/src/pages/Setting/PrivilegiesWrapper.tsx index ede7823..c21ec1f 100644 --- a/src/pages/Setting/PrivilegiesWrapper.tsx +++ b/src/pages/Setting/PrivilegiesWrapper.tsx @@ -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 ? ( {errorMessage} ) : ( - 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} diff --git a/src/pages/Setting/SettingRoles.tsx b/src/pages/Setting/SettingRoles.tsx index 9a1b854..26c139f 100644 --- a/src/pages/Setting/SettingRoles.tsx +++ b/src/pages/Setting/SettingRoles.tsx @@ -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,98 +10,106 @@ import theme from "../../theme"; export const SettingRoles = (): JSX.Element => { return ( - - - - - - - Настройки ролей - - - - + + +
+ + + + + Настройки ролей + + + + - - - - - -
- - - - - - Удаление ролей - - - - + + + + + +
+ + + + + + Удаление ролей + + + + + + + + + + +
+ + } + /> - - - - - - );