adminFront/src/pages/dashboard/Content/Tariffs/CreateTariff.tsx
2023-03-06 16:26:55 +03:00

165 lines
6.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Typography, Container, Button, Select, MenuItem, FormControl, InputLabel, TextField, useTheme, Box } from "@mui/material";
import { Tariff } from "@root/model/tariff";
import { usePrivilegeStore } from "@root/stores/privileges";
import { useTariffStore } from "@root/stores/tariffs";
import { nanoid } from "nanoid";
import { ChangeEvent, HTMLInputTypeAttribute, useState } from "react";
export default function CreateTariff() {
const theme = useTheme();
const privileges = usePrivilegeStore(store => store.privileges);
const addTariffs = useTariffStore(store => store.addTariffs);
const [nameField, setNameField] = useState<string>("");
const [amountField, setAmountField] = useState<string>("");
const [customPriceField, setCustomPriceField] = useState<string>("");
const [privilegeIdField, setPrivilegeIdField] = useState<string | "">("");
const privilege = privileges.find(p => p.privilegeId === privilegeIdField);
function handleCreateTariffClick() {
const amount = Number(amountField);
const customPricePerUnit = Number(customPriceField);
if (isNaN(amount) || !privilege) return;
const newTariff: Tariff = {
id: nanoid(5),
name: nameField,
amount,
privilege,
customPricePerUnit: customPricePerUnit ? customPricePerUnit : undefined,
};
addTariffs([newTariff]);
}
return (
<Container sx={{
p: "20px",
border: "1px solid rgba(224, 224, 224, 1)",
borderRadius: "4px",
display: "flex",
flexDirection: "column",
gap: "12px",
}}>
<Typography variant="h6" sx={{ textAlign: "center", mb: "16px" }}>Создание кастомного тарифа</Typography>
<FormControl
fullWidth
sx={{
height: "52px",
color: theme.palette.secondary.main,
"& .MuiInputLabel-outlined": {
color: theme.palette.secondary.main,
},
"& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
color: theme.palette.secondary.main,
}
}}
>
<InputLabel
id="privilege-select-label"
sx={{
color: theme.palette.secondary.main,
fontSize: "16px",
lineHeight: "19px",
}}
>Привелегия</InputLabel>
<Select
labelId="privilege-select-label"
id="privilege-select"
value={privilegeIdField}
label="Привелегия"
onChange={e => setPrivilegeIdField(e.target.value)}
sx={{
color: theme.palette.secondary.main,
borderColor: theme.palette.secondary.main,
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: theme.palette.secondary.main,
border: "1px solid",
},
".MuiSvgIcon-root ": {
fill: theme.palette.secondary.main,
}
}}
inputProps={{ sx: { pt: "12px" } }}
>
{privileges.map((privilege, index) => (
<MenuItem key={index} value={privilege.privilegeId}>
{privilege.description}
</MenuItem>
))}
</Select>
</FormControl>
{privilege &&
<Box sx={{
display: "flex",
flexDirection: "column",
}}>
<Typography>Имя: <span>{privilege.name}</span></Typography>
<Typography>Сервис: <span>{privilege.serviceKey}</span></Typography>
<Typography>Единица: <span>{privilege.type}</span></Typography>
<Typography>Стандартная цена за единицу: <span>{privilege.pricePerUnit}</span></Typography>
</Box>
}
<CustomTextField
id="tariff-name"
label="Название тарифа"
value={nameField}
setValue={e => setNameField(e.target.value)}
/>
<CustomTextField
id="tariff-amount"
label="Кол-во единиц привилегии"
value={amountField}
setValue={e => setAmountField(e.target.value)}
type="number"
/>
<CustomTextField
id="tariff-custom-price"
label="Кастомная цена за единицу (не обязательно)"
value={customPriceField}
setValue={e => setCustomPriceField(e.target.value)}
type="number"
/>
<Button
onClick={handleCreateTariffClick}
disabled={privilegeIdField === "" || amountField === "" || nameField === ""}
>Создать</Button>
</Container>
);
}
function CustomTextField({ id, label, value, type, setValue }: {
id: string;
label: string;
value: number | string | null;
type?: HTMLInputTypeAttribute;
setValue: (e: ChangeEvent<HTMLInputElement>) => void;
}) {
const theme = useTheme();
return (
<TextField
fullWidth
id={id}
label={label}
variant="filled"
color="secondary"
type={type}
InputProps={{
style: {
backgroundColor: theme.palette.content.main,
color: theme.palette.secondary.main,
}
}}
InputLabelProps={{
style: {
color: theme.palette.secondary.main
}
}}
value={value ? value : ""}
onChange={setValue}
/>
);
}