feat: ud service, create product in deal details

src/pages/ServicesPage/modals/CreateServiceModal.tsx

@@ -1,51 +1,60 @@
 import {ServiceSchema} from "../../../client";
-import {Button, Flex, NumberInput, rem, TextInput} from "@mantine/core";
-import ServiceCategorySelect from "../components/ServiceCategorySelect/ServiceCategorySelect.tsx";
 import {useForm} from "@mantine/form";
 import {ContextModalProps} from "@mantine/modals";
+import BaseFormModal, {CreateEditFormProps} from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
+import {NumberInput, TextInput} from "@mantine/core";
+import ServiceCategorySelect from "../components/ServiceCategorySelect/ServiceCategorySelect.tsx";
 
-type Props = {
-    onCreate: (service: ServiceSchema) => void
-}
+type Props = CreateEditFormProps<ServiceSchema>
 const CreateServiceModal = ({
                                 context,
                                 id,
                                 innerProps,
                             }: ContextModalProps<Props>) => {
-    const form = useForm({
-        initialValues: {
-            category: {
-                id: -1,
-                name: ''
-            },
-            name: '',
-            price: NaN
-        },
+
+    const isEditing = 'onChange' in innerProps;
+    const initialValues: ServiceSchema = isEditing ? {
+        id: innerProps.element.id,
+        name: innerProps.element.name,
+        price: innerProps.element.price,
+        category: innerProps.element.category,
+    } : {
+        id: -1,
+        name: '',
+        price: 0,
+        category: {
+            id: -1,
+            name: ''
+        }
+    }
+    const form = useForm<ServiceSchema>({
+        initialValues: initialValues,
         validate: {
-            category: (category) => category.id >= 0 ? null : "Необходимо выбрать категорию",
-            name: (name) => name.trim() !== '' ? null : "Необходимо ввести название услуги",
-            price: (price) => !isNaN(price) ? null : "Небходимо ввести стоимость услуги"
+            name: (name: string) => name.trim() !== '' ? null : "Необходимо ввести название услуги",
+            price: (price: number) => price > 0 ? null : "Цена должна быть больше 0",
+            category: (category: {
+                id: number,
+                name: string
+            }) => category.id !== -1 ? null : "Необходимо выбрать категорию"
         }
     })
 
-    const onSubmit = (values: { category: { id: number; name: string; }; name: string; price: number; }) => {
-        innerProps.onCreate({...values, id: -1});
-        context.closeContextModal(id);
-    }
     const onCancelClick = () => {
         context.closeContextModal(id);
     }
     return (
-        <>
-            <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
-                <Flex gap={rem(10)} direction={"column"}>
-
+        <BaseFormModal
+            {...innerProps}
+            closeOnSubmit
+            form={form}
+            onClose={onCancelClick}
+        >
+            <BaseFormModal.Body>
+                <>
                     <ServiceCategorySelect
-                        fullWidth
-                        onChange={event => {
-                            form.setFieldValue("category", event)
-                        }}
-                        error={form.getInputProps("category").error}
+                        placeholder={"Выберите категорию"}
+                        label={"Категория услуги"}
+                        {...form.getInputProps('category')}
                     />
                     <TextInput
 
@@ -60,16 +69,9 @@ const CreateServiceModal = ({
                         decimalScale={2}
                         {...form.getInputProps('price')}
                     />
-
-                    <Flex justify={"center"} mt={rem(5)} gap={rem(10)}>
-                        <Button onClick={() => onCancelClick()} variant={"subtle"}>Отменить</Button>
-                        <Button type={"submit"} variant={"default"}>Сохранить</Button>
-                    </Flex>
-                </Flex>
-
-            </form>
-
-        </>
+                </>
+            </BaseFormModal.Body>
+        </BaseFormModal>
     )
 }