121 lines
5.4 KiB
TypeScript
121 lines
5.4 KiB
TypeScript
import { ServicePriceRangeSchema, ServiceSchema } from "../../../client";
|
||
import { useForm } from "@mantine/form";
|
||
import { ContextModalProps } from "@mantine/modals";
|
||
import BaseFormModal, { CreateEditFormProps } from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
|
||
import { Fieldset, Flex, rem, TextInput } from "@mantine/core";
|
||
import ServiceCategorySelect from "../components/ServiceCategorySelect/ServiceCategorySelect.tsx";
|
||
import ServiceTypeSelect from "../components/ServiceTypeSelect/ServiceTypeSelect.tsx";
|
||
import ServicePriceTypeSegmentedControl, {
|
||
ServicePriceType,
|
||
} from "../components/ServicePriceTypeSegmentedControl/ServicePriceTypeSegmentedControl.tsx";
|
||
import { useEffect, useState } from "react";
|
||
import RangePriceInput, { PriceRangeInputType } from "../components/ServicePriceInput/RangePriceInput.tsx";
|
||
import SinglePriceInput from "../components/ServicePriceInput/SinglePriceInput.tsx";
|
||
import PriceCategoryInput, { PriceCategoryInputProps } from "../components/ServicePriceInput/PriceCategoryInput.tsx";
|
||
|
||
type Props = CreateEditFormProps<ServiceSchema>
|
||
const CreateServiceModal = ({
|
||
context,
|
||
id,
|
||
innerProps,
|
||
}: ContextModalProps<Props>) => {
|
||
const [priceType, setPriceType] = useState<ServicePriceType>(ServicePriceType.DEFAULT);
|
||
const isEditing = "onChange" in innerProps;
|
||
const initialValues: ServiceSchema = isEditing ? innerProps.element : {
|
||
id: -1,
|
||
name: "",
|
||
price: 0,
|
||
category: {
|
||
id: -1,
|
||
name: "",
|
||
},
|
||
serviceType: -1,
|
||
priceRanges: [] as ServicePriceRangeSchema[],
|
||
cost: null,
|
||
categoryPrices: [],
|
||
};
|
||
|
||
const form = useForm<ServiceSchema>({
|
||
initialValues: initialValues,
|
||
validate: {
|
||
name: (name: string) => name.trim() !== "" ? null : "Необходимо ввести название услуги",
|
||
category: (category: {
|
||
id: number,
|
||
name: string
|
||
}) => category.id !== -1 ? null : "Необходимо выбрать категорию",
|
||
serviceType: (serviceType: number) => serviceType !== -1 ? null : "Необходимо выбрать тип услуги",
|
||
priceRanges: (value, values) => value.length > 0 || values.price > 0 ? null : "Необходимо добавить хотя бы один диапазон цен или указать цену за единицу услуги",
|
||
price: (value, values) => value > 0 || values.priceRanges.length > 0 ? null : "Необходимо добавить хотя бы один диапазон цен или указать цену за единицу услуги",
|
||
|
||
},
|
||
});
|
||
useEffect(() => {
|
||
console.log(form.values.categoryPrices);
|
||
}, [form.values]);
|
||
const getPriceBody = () => {
|
||
switch (priceType) {
|
||
case ServicePriceType.DEFAULT:
|
||
return <SinglePriceInput
|
||
placeholder={"Введите стоимость услуги"}
|
||
label={"Cтоимость услуги"}
|
||
hideControls
|
||
{...form.getInputProps("cost")}
|
||
/>;
|
||
case ServicePriceType.BY_RANGE:
|
||
return <RangePriceInput
|
||
{...form.getInputProps("priceRanges") as PriceRangeInputType}
|
||
/>;
|
||
case ServicePriceType.BY_CATEGORY:
|
||
return <PriceCategoryInput
|
||
{...form.getInputProps("categoryPrices") as PriceCategoryInputProps}
|
||
/>;
|
||
}
|
||
};
|
||
const onCancelClick = () => {
|
||
context.closeContextModal(id);
|
||
};
|
||
return (
|
||
<BaseFormModal
|
||
{...innerProps}
|
||
closeOnSubmit
|
||
form={form}
|
||
onClose={onCancelClick}
|
||
>
|
||
<BaseFormModal.Body>
|
||
<>
|
||
<Fieldset legend={"Общие параметры"}>
|
||
<ServiceCategorySelect
|
||
placeholder={"Выберите категорию"}
|
||
label={"Категория услуги"}
|
||
{...form.getInputProps("category")}
|
||
/>
|
||
<TextInput
|
||
placeholder={"Введите название услуги"}
|
||
label={"Название услуги"}
|
||
{...form.getInputProps("name")}
|
||
/>
|
||
<ServiceTypeSelect
|
||
placeholder={"Выберите тип услуги"}
|
||
label={"Тип услуги"}
|
||
{...form.getInputProps("serviceType")}
|
||
/>
|
||
</Fieldset>
|
||
<Fieldset legend={"Стоимость"}>
|
||
<Flex direction={"column"} gap={rem(10)} justify={"center"}>
|
||
<ServicePriceTypeSegmentedControl
|
||
value={priceType}
|
||
onChange={setPriceType}
|
||
/>
|
||
{getPriceBody()}
|
||
|
||
</Flex>
|
||
|
||
</Fieldset>
|
||
|
||
</>
|
||
</BaseFormModal.Body>
|
||
</BaseFormModal>
|
||
);
|
||
};
|
||
|
||
export default CreateServiceModal; |