60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
import BaseFormModal, { CreateEditFormProps } from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
|
|
import { GetServiceKitSchema } from "../../../client";
|
|
import { ContextModalProps } from "@mantine/modals";
|
|
import { useForm } from "@mantine/form";
|
|
import { ServiceType } from "../../../shared/enums/ServiceType.ts";
|
|
import { TextInput } from "@mantine/core";
|
|
import ServiceTypeSelect from "../components/ServiceTypeSelect/ServiceTypeSelect.tsx";
|
|
import ServicesMultiselect from "../../../components/Selects/ServicesMultiselect/ServicesMultiselect.tsx";
|
|
|
|
type Props = CreateEditFormProps<GetServiceKitSchema>;
|
|
const ServiceKitModalForm = ({
|
|
context,
|
|
id,
|
|
innerProps,
|
|
}: ContextModalProps<Props>) => {
|
|
const isEditing = "element" in innerProps;
|
|
const initialValues: Partial<GetServiceKitSchema> = isEditing ? innerProps.element : {
|
|
name: "",
|
|
serviceType: ServiceType.DEAL_SERVICE,
|
|
services: [],
|
|
};
|
|
|
|
const form = useForm<Partial<GetServiceKitSchema>>(
|
|
{
|
|
initialValues,
|
|
},
|
|
);
|
|
return (
|
|
<BaseFormModal
|
|
{...innerProps}
|
|
form={form}
|
|
closeOnSubmit
|
|
onClose={() => context.closeContextModal(id)}
|
|
>
|
|
<BaseFormModal.Body>
|
|
<>
|
|
<TextInput
|
|
label={"Название"}
|
|
placeholder={"Введите название набора услуг"}
|
|
{...form.getInputProps("name")}
|
|
/>
|
|
<ServiceTypeSelect
|
|
label={"Тип услуг"}
|
|
placeholder={"Выберите тип услуг"}
|
|
{...form.getInputProps("serviceType")}
|
|
/>
|
|
<ServicesMultiselect
|
|
label={"Услуги"}
|
|
placeholder={"Выберите услуги"}
|
|
filterBy={(service) => service.serviceType === form.values.serviceType}
|
|
groupBy={(service) => service.category.name}
|
|
{...form.getInputProps("services")}
|
|
/>
|
|
</>
|
|
</BaseFormModal.Body>
|
|
</BaseFormModal>
|
|
);
|
|
};
|
|
|
|
export default ServiceKitModalForm; |