feat: deal product services

2024-05-13 07:46:24 +03:00
parent 0ebb1d5e08
commit 6acb34271d
19 changed files with 401 additions and 30 deletions
--- a/src/pages/ServicesPage/components/ServicePriceInput/RangePriceInput.tsx
+++ b/src/pages/ServicesPage/components/ServicePriceInput/RangePriceInput.tsx
@@ -0,0 +1,100 @@
+import {BaseFormInputProps} from "../../../../types/utils.ts";
+import {ServicePriceRangeSchema} from "../../../../client";
+import {FC, useEffect, useState} from "react";
+import {ActionIcon, Button, Flex, Input, NumberInput, rem} from "@mantine/core";
+import {IconTrash} from "@tabler/icons-react";
+import {isNumber} from "lodash";
+
+export type PriceRangeInputType = BaseFormInputProps<ServicePriceRangeSchema[]>;
+
+const RangePriceInput: FC<PriceRangeInputType> = (props: PriceRangeInputType) => {
+    const {value} = props;
+    const [innerValue, setInnerValue] = useState<ServicePriceRangeSchema[]>(props.value || []);
+    const onAddRange = () => {
+        const newRange = {
+            fromQuantity: 0,
+            toQuantity: 0,
+            price: 0,
+            id: null
+        }
+        setInnerValue([...innerValue, newRange]);
+        props.onChange([...innerValue, newRange]);
+    }
+    const onDeleteRange = (idx: number) => {
+        const newRanges = innerValue.filter((_, i) => i !== idx);
+        setInnerValue(newRanges);
+        props.onChange(newRanges);
+    }
+    const onFromQuantityChange = (idx: number, value: number) => {
+        const newRanges = innerValue.map((item, i) => i === idx ? {
+            ...item,
+            fromQuantity: value
+        } : item);
+        setInnerValue(newRanges);
+        props.onChange(newRanges);
+    }
+    const onToQuantityChange = (idx: number, value: number) => {
+        const newRanges = innerValue.map((item, i) => i === idx ? {
+            ...item,
+            toQuantity: value
+        } : item);
+        setInnerValue(newRanges);
+        props.onChange(newRanges);
+    }
+    const onPriceChange = (idx: number, value: number) => {
+        const newRanges = innerValue.map((item, i) => i === idx ? {
+            ...item,
+            price: value
+        } : item);
+        setInnerValue(newRanges);
+        props.onChange(newRanges);
+    }
+    useEffect(() => {
+        if (props.value === innerValue) return;
+        setInnerValue(props.value || []);
+    }, [value]);
+
+    return (
+        <Input.Wrapper error={props.error} label={"Диапазон цен"}>
+            <Flex direction={"column"} gap={rem(10)}>
+                {innerValue.map((range, idx) => (
+                    <Flex
+                        key={idx}
+                        gap={rem(10)}
+                        align={"flex-end"}
+                    >
+                        <ActionIcon onClick={() => onDeleteRange(idx)} variant={"default"}>
+                            <IconTrash/>
+                        </ActionIcon>
+                        <NumberInput
+                            label={"От количества"}
+                            placeholder={"От"}
+                            hideControls
+                            value={range.fromQuantity}
+                            onChange={event => (event && isNumber(event)) && onFromQuantityChange(idx, event)}
+                        />
+                        <NumberInput
+                            label={"До количества"}
+                            placeholder={"До"}
+                            hideControls
+                            value={range.toQuantity}
+                            onChange={event => (event && isNumber(event)) && onToQuantityChange(idx, event)}
+                        />
+                        <NumberInput
+                            label={"Цена"}
+                            placeholder={"Цена"}
+                            hideControls
+                            value={range.price}
+                            onChange={event => (event && isNumber(event)) && onPriceChange(idx, event)}
+                        />
+
+                    </Flex>
+                ))}
+
+                <Button onClick={onAddRange}>Добавить диапазон</Button>
+            </Flex>
+        </Input.Wrapper>
+
+    )
+}
+export default RangePriceInput
--- a/src/pages/ServicesPage/components/ServicePriceInput/ServicePriceInput.tsx
+++ b/src/pages/ServicesPage/components/ServicePriceInput/ServicePriceInput.tsx
@@ -0,0 +1,38 @@
+import {FC, useState} from "react";
+import {Button, Flex} from "@mantine/core";
+import SinglePriceInput, {PriceInputType} from "./SinglePriceInput.tsx";
+import RangePriceInput, {PriceRangeInputType} from "./RangePriceInput.tsx";
+
+type Props = {
+    singlePriceInputProps: PriceInputType;
+    priceRangeInputProps: PriceRangeInputType;
+}
+
+const ServicePriceInput: FC<Props> = ({priceRangeInputProps, singlePriceInputProps}) => {
+    const [isUsingRange, setIsUsingRange] = useState<boolean>(true);
+    return (
+        <>
+            <Flex
+                direction={"column"}
+                gap={10}
+            >
+                {isUsingRange ?
+                    <RangePriceInput
+                        {...priceRangeInputProps}
+                    /> :
+                    <SinglePriceInput
+                        {...singlePriceInputProps}
+                    />}
+                <Button
+                    variant={"default"}
+                    onClick={() => setIsUsingRange(!isUsingRange)}
+                >
+                    {isUsingRange ? "Использовать одну цену" : "Использовать диапазон цен"}
+                </Button>
+            </Flex>
+        </>
+
+    )
+}
+
+export default ServicePriceInput;
--- a/src/pages/ServicesPage/components/ServicePriceInput/SinglePriceInput.tsx
+++ b/src/pages/ServicesPage/components/ServicePriceInput/SinglePriceInput.tsx
@@ -0,0 +1,14 @@
+import {FC} from "react";
+import {NumberInput, NumberInputProps} from "@mantine/core";
+
+export type PriceInputType = NumberInputProps;
+
+const SinglePriceInput: FC<PriceInputType> = (props) => {
+    return (
+        <NumberInput
+            {...props}
+        />
+    )
+}
+
+export default SinglePriceInput;
--- a/src/pages/ServicesPage/components/ServiceTypeSelect/ServiceTypeSelect.tsx
+++ b/src/pages/ServicesPage/components/ServiceTypeSelect/ServiceTypeSelect.tsx
@@ -0,0 +1,15 @@
+import {ServiceService} from "../../../../client";
+import {FC} from "react";
+import BaseEnumSelect, {EnumSelectProps} from "../../../../components/Selects/BaseEnumSelect/BaseEnumSelect.tsx";
+
+
+const ServiceTypeSelect: FC<EnumSelectProps> = (props: EnumSelectProps) => {
+    return (
+        <BaseEnumSelect
+            {...props}
+            fetchFn={ServiceService.getAllServiceTypes}
+            queryKey='getAllServiceTypes'
+        />
+    )
+}
+export default ServiceTypeSelect;
--- a/src/pages/ServicesPage/modals/CreateServiceModal.tsx
+++ b/src/pages/ServicesPage/modals/CreateServiceModal.tsx
@@ -1,9 +1,12 @@
-import {ServiceSchema} from "../../../client";
+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 {NumberInput, TextInput} from "@mantine/core";
+import {TextInput} from "@mantine/core";
 import ServiceCategorySelect from "../components/ServiceCategorySelect/ServiceCategorySelect.tsx";
+import ServiceTypeSelect from "../components/ServiceTypeSelect/ServiceTypeSelect.tsx";
+import ServicePriceInput from "../components/ServicePriceInput/ServicePriceInput.tsx";
+import {PriceRangeInputType} from "../components/ServicePriceInput/RangePriceInput.tsx";

 type Props = CreateEditFormProps<ServiceSchema>
 const CreateServiceModal = ({
@@ -13,32 +16,35 @@ const CreateServiceModal = ({
                            }: ContextModalProps<Props>) => {

    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,
-    } : {
+    const initialValues: ServiceSchema = isEditing ? innerProps.element : {
        id: -1,
        name: '',
        price: 0,
        category: {
            id: -1,
            name: ''
-        }
+        },
+        serviceType: -1,
+        priceRanges: [] as ServicePriceRangeSchema[]
    }
+
    const form = useForm<ServiceSchema>({
        initialValues: initialValues,
        validate: {
            name: (name: string) => name.trim() !== '' ? null : "Необходимо ввести название услуги",
-            price: (price: number) => price > 0 ? null : "Цена должна быть больше 0",
            category: (category: {
                id: number,
                name: string
-            }) => category.id !== -1 ? null : "Необходимо выбрать категорию"
+            }) => 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 : "Необходимо добавить хотя бы один диапазон цен или указать цену за единицу услуги"
+
        }
    })

+
+    console.log(form.values)
    const onCancelClick = () => {
        context.closeContextModal(id);
    }
@@ -62,12 +68,21 @@ const CreateServiceModal = ({
                        label={"Название услуги"}
                        {...form.getInputProps('name')}
                    />
-                    <NumberInput
-                        placeholder={"Введите стоимость услуги"}
-                        label={"Стоимость услуги"}
-                        hideControls
-                        decimalScale={2}
-                        {...form.getInputProps('price')}
+                    <ServiceTypeSelect
+                        placeholder={"Выберите тип услуги"}
+                        label={"Тип услуги"}
+                        {...form.getInputProps('serviceType')}
+                    />
+                    <ServicePriceInput
+                        singlePriceInputProps={{
+                            hideControls: true,
+                            label: "Цена за единицу услуги",
+                            placeholder: "Введите цену за одну услугу",
+                            ...form.getInputProps('price'),
+                        }}
+                        priceRangeInputProps={{
+                            ...form.getInputProps('priceRanges')
+                        } as PriceRangeInputType}
                    />
                </>
            </BaseFormModal.Body>