feat: deal product services

src/components/ObjectSelect/ObjectSelect.tsx

@@ -1,6 +1,7 @@
 import {Select, SelectProps} from "@mantine/core";
 import {useEffect, useMemo, useState} from "react";
 import {ObjectWithNameAndId} from "../../types/utils.ts";
+import {groupBy} from "lodash";
 
 
 export type SelectObjectType<T extends ObjectWithNameAndId> = T;
@@ -14,6 +15,7 @@ type RestProps<T extends ObjectWithNameAndId> = {
     defaultValue?: SelectObjectType<T>
     onChange: (value: SelectObjectType<T>) => void;
     data: SelectObjectType<T>[];
+    groupBy?: (item: SelectObjectType<T>) => string;
 }
 
 export type ObjectSelectProps<T extends ObjectWithNameAndId> =
@@ -27,14 +29,23 @@ const ObjectSelect = <T extends ObjectWithNameAndId, >(props: ObjectSelectProps<
 
     const value = isControlled ? props.value : internalValue;
 
-    const data = useMemo(() => props.data.reduce((acc, item) => {
-        acc.push({
-            label: item.name,
-            value: item.id.toString()
-        });
-        return acc;
-    }, [] as { label: string, value: string }[]), [props.data]);
-
+    const data = useMemo(() => {
+        if (props.groupBy) {
+            const groupedData = groupBy(props.data, props.groupBy);
+            return Object.entries(groupedData).map(([group, items]) => ({
+                group,
+                items: items.map(item => ({
+                    label: item.name,
+                    value: item.id.toString()
+                }))
+            }));
+        } else {
+            return props.data.map(item => ({
+                label: item.name,
+                value: item.id.toString()
+            }));
+        }
+    }, [props.data, props.groupBy]);
 
     const handleOnChange = (event: string | null) => {
         if (!event) return;

src/components/ProductSelect/ProductSelect.tsx

@@ -2,57 +2,75 @@ import {ProductSchema} from "../../client";
 import {Select, SelectProps} from "@mantine/core";
 import {FC, useEffect, useMemo, useState} from "react";
 import useProductsList from "../../pages/ProductsPage/hooks/useProductsList.tsx";
+import {omit} from "lodash";
+import ObjectSelect, {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";
 
-type ControlledValueProps = {
-    value: ProductSchema;
-    onChange: (value: ProductSchema) => void;
-}
 type RestProps = {
-    defaultValue?: ProductSchema;
-    onChange: (value: ProductSchema) => void;
     clientId: number;
 }
-type Props = (RestProps & Partial<ControlledValueProps>) & Omit<SelectProps, 'value' | 'onChange'>;
-
-const ProductSelect: FC<Props> = (props) => {
-    const isControlled = 'value' in props;
-    const [intertalValue, setInternalValue] = useState<ProductSchema | undefined>(props.defaultValue);
-    const value = isControlled ? props.value : intertalValue
-
+type Props = Omit<ObjectSelectProps<ProductSchema>, 'data'> & RestProps;
+const ProductSelect: FC<Props> = (props: Props) => {
     const {products} = useProductsList({clientId: props.clientId});
-
-
-    const data = useMemo(() => products.reduce((acc, product) => {
-        acc.push({
-            label: product.name,
-            value: product.id.toString()
-        });
-        return acc;
-    }, [] as { label: string, value: string }[]), [products]);
-
-    const handleOnChange = (event: string | null) => {
-        if (!event) return;
-        const product = products.find(product => parseInt(event) == product.id);
-        if (!product) return;
-        if (isControlled) {
-            props.onChange(product);
-            return;
-        }
-        setInternalValue(product);
-    }
-    useEffect(() => {
-        if (isControlled || !intertalValue) return;
-        props.onChange(intertalValue);
-    }, [intertalValue]);
+    const restProps = omit(props, ['clientId']);
     return (
-        <Select
-            {...props}
-            withCheckIcon={false}
-            searchable
-            value={value?.id.toString()}
-            onChange={handleOnChange}
-            data={data}
+        <ObjectSelect
+            {...restProps}
+            data={products}
         />
     )
 }
-export default ProductSelect;
+export default ProductSelect;
+// type ControlledValueProps = {
+//     value: ProductSchema;
+//     onChange: (value: ProductSchema) => void;
+// }
+// type RestProps = {
+//     defaultValue?: ProductSchema;
+//     onChange: (value: ProductSchema) => void;
+//     clientId: number;
+// }
+// type Props = (RestProps & Partial<ControlledValueProps>) & Omit<SelectProps, 'value' | 'onChange'>;
+//
+// const ProductSelect: FC<Props> = (props) => {
+//     const isControlled = 'value' in props;
+//     const [intertalValue, setInternalValue] = useState<ProductSchema | undefined>(props.defaultValue);
+//     const value = isControlled ? props.value : intertalValue
+//
+//     const {products} = useProductsList({clientId: props.clientId});
+//
+//
+//     const data = useMemo(() => products.reduce((acc, product) => {
+//         acc.push({
+//             label: product.name,
+//             value: product.id.toString()
+//         });
+//         return acc;
+//     }, [] as { label: string, value: string }[]), [products]);
+//
+//     const handleOnChange = (event: string | null) => {
+//         if (!event) return;
+//         const product = products.find(product => parseInt(event) == product.id);
+//         if (!product) return;
+//         if (isControlled) {
+//             props.onChange(product);
+//             return;
+//         }
+//         setInternalValue(product);
+//     }
+//     useEffect(() => {
+//         if (isControlled || !intertalValue) return;
+//         props.onChange(intertalValue);
+//     }, [intertalValue]);
+//     const restProps = omit(props, ['clientId'])
+//     return (
+//         <Select
+//             {...restProps}
+//             withCheckIcon={false}
+//             searchable
+//             value={value?.id.toString()}
+//             onChange={handleOnChange}
+//             data={data}
+//         />
+//     )
+// }
+// export default ProductSelect;

src/components/Selects/ServiceSelectNew/ServiceSelectNew.tsx

@@ -13,12 +13,14 @@ type Props = Omit<ObjectSelectProps<ServiceSchema>, 'data'> & RestProps;
 const ServiceSelectNew: FC<Props> = (props: Props) => {
     const {services} = useServicesList();
     const data = props.filterType ? services.filter(service => service.serviceType === props.filterType) : services;
+
     const restProps = omit(props, ['filterType']);
 
     return (
         <ObjectSelect
             {...restProps}
             data={data}
+            groupBy={item => item.category.name}
         />
     )
 }

src/components/ServiceWithPriceInput/ServiceWithPriceInput.tsx

@@ -0,0 +1,73 @@
+import {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";
+import {ServiceSchema} from "../../client";
+import {Flex, FlexProps, NumberInput, NumberInputProps, rem} from "@mantine/core";
+import {FC, useEffect, useState} from "react";
+import ServiceSelectNew from "../Selects/ServiceSelectNew/ServiceSelectNew.tsx";
+
+type ServiceProps = Omit<ObjectSelectProps<ServiceSchema>, 'data'>;
+type PriceProps = NumberInputProps;
+
+type Props = {
+    serviceProps: ServiceProps,
+    priceProps: PriceProps
+    quantity: number;
+    containerProps: FlexProps
+}
+const ServiceWithPriceInput: FC<Props> = ({serviceProps, priceProps, quantity, containerProps}) => {
+    const [price, setPrice] = useState<number | undefined>(
+        typeof priceProps.value === 'number' ? priceProps.value : undefined);
+    const [service, setService] = useState<ServiceSchema | undefined>(serviceProps.value);
+
+    const setPriceBasedOnQuantity = (): boolean => {
+        if (!service || !service.priceRanges.length) return false;
+        const range = service.priceRanges.find(priceRange =>
+            quantity >= priceRange.fromQuantity && quantity <= priceRange.toQuantity) || service.priceRanges[0];
+        setPrice(range.price);
+        return true;
+    }
+    const setPriceBasedOnService = () => {
+        if (!service) return;
+        if (setPriceBasedOnQuantity()) return;
+        setPrice(service.price);
+    }
+    const onServiceManualChange = (service: ServiceSchema) => {
+        setService(service);
+    }
+    const onPriceManualChange = (value: number | string) => {
+        if (typeof value !== 'number') return;
+        setPrice(value);
+    }
+    useEffect(() => {
+        setPriceBasedOnQuantity();
+    }, [quantity]);
+
+    useEffect(() => {
+        if (!priceProps.onChange || !price) return;
+        priceProps.onChange(price);
+    }, [price]);
+
+    useEffect(() => {
+        if (!serviceProps.onChange || !service) return;
+        setPriceBasedOnService();
+        serviceProps.onChange(service);
+    }, [service]);
+    return (
+        <Flex
+            {...containerProps}
+            gap={rem(10)}
+        >
+            <ServiceSelectNew
+                {...serviceProps}
+                value={service}
+                onChange={onServiceManualChange}
+            />
+            <NumberInput
+                {...priceProps}
+                onChange={onPriceManualChange}
+                value={price}
+            />
+        </Flex>
+    )
+}
+
+export default ServiceWithPriceInput;