feat: deal product services

src/components/ServiceWithPriceInput/ServiceWithPriceInput.tsx

@@ -1,10 +1,9 @@
 import {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";
 import {ServiceSchema} from "../../client";
-import {ActionIcon, Flex, FlexProps, NumberInput, NumberInputProps, rem} from "@mantine/core";
+import {Flex, FlexProps, NumberInput, NumberInputProps, rem} from "@mantine/core";
 import {FC, useEffect, useRef, useState} from "react";
 import ServiceSelectNew from "../Selects/ServiceSelectNew/ServiceSelectNew.tsx";
 import {ServiceType} from "../../shared/enums/ServiceType.ts";
-import {IconReload, IconTrash, IconUpload} from "@tabler/icons-react";
 
 type ServiceProps = Omit<ObjectSelectProps<ServiceSchema>, 'data'>;
 type PriceProps = NumberInputProps;
@@ -14,14 +13,16 @@ type Props = {
     priceProps: PriceProps,
     quantity: number,
     containerProps: FlexProps,
-    filterType?: ServiceType
+    filterType?: ServiceType,
+    lockOnEdit?: boolean
 }
 const ServiceWithPriceInput: FC<Props> = ({
                                               serviceProps,
                                               priceProps,
                                               quantity,
                                               containerProps,
-                                              filterType = ServiceType.PRODUCT_SERVICE
+                                              filterType = ServiceType.PRODUCT_SERVICE,
+                                              lockOnEdit = true
                                           }) => {
     const [price, setPrice] = useState<number | undefined>(
         typeof priceProps.value === 'number' ? priceProps.value : undefined);
@@ -48,23 +49,21 @@ const ServiceWithPriceInput: FC<Props> = ({
         setPrice(value);
     }
     useEffect(() => {
-        if (isFirstRender.current) return;
+        if (isFirstRender.current && lockOnEdit) return;
 
         setPriceBasedOnQuantity();
     }, [quantity]);
 
     useEffect(() => {
-        if (isFirstRender.current) return;
+        if (isFirstRender.current && lockOnEdit) return;
 
         if (!priceProps.onChange || typeof price === 'undefined') return;
         priceProps.onChange(price);
     }, [price]);
 
     useEffect(() => {
-        // if (!isFirstRender) setPrice(0);
-        // if (isFirstRender.current && price) return;
         if (!serviceProps.onChange || !service) return;
-        if (price && isFirstRender.current) return;
+        if (price && isFirstRender.current && lockOnEdit) return;
         setPriceBasedOnService();
         serviceProps.onChange(service);
     }, [service]);
@@ -73,9 +72,7 @@ const ServiceWithPriceInput: FC<Props> = ({
         isFirstRender.current = false;
     }, []);
 
-    const onReload = () => {
-        setPriceBasedOnService();
-    }
+
     return (
         <Flex
             align={"center"}
@@ -83,19 +80,21 @@ const ServiceWithPriceInput: FC<Props> = ({
             {...containerProps}
         >
 
-            <ActionIcon variant={"default"}>
-                <IconReload onClick={() => onReload()}/>
-            </ActionIcon>
+            {/*<ActionIcon variant={"default"}>*/}
+            {/*<IconReload onClick={() => onReload()}/>*/}
+            {/*</ActionIcon>*/}
             <ServiceSelectNew
                 {...serviceProps}
                 value={service}
                 onChange={onServiceManualChange}
                 filterType={filterType}
+                disabled={serviceProps.value !== undefined && lockOnEdit}
             />
             <NumberInput
                 {...priceProps}
                 onChange={onPriceManualChange}
-                value={price}
+                // value={price}
+                defaultValue={priceProps.value}
             />
 
         </Flex>