feat: services kit and copy

src/pages/ServicesPage/components/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl.tsx

@@ -1,17 +1,25 @@
 import {FC} from "react";
 import {SegmentedControl, SegmentedControlProps} from "@mantine/core";
-import {ServiceType} from "../../../../shared/enums/ServiceType.ts";
+export enum ServicesTab {
+    DEAL_SERVICE,
+    PRODUCT_SERVICE,
+    SERVICES_KITS
+}
 
 
 type Props = Omit<SegmentedControlProps, 'data'>;
 const data = [
     {
         label: 'Для товара',
-        value: ServiceType.PRODUCT_SERVICE.toString()
+        value: ServicesTab.PRODUCT_SERVICE.toString()
     },
     {
         label: 'Для сделки',
-        value: ServiceType.DEAL_SERVICE.toString()
+        value: ServicesTab.DEAL_SERVICE.toString()
+    },
+    {
+        label: 'Наборы услуг',
+        value: ServicesTab.SERVICES_KITS.toString()
     }
 ]
 const ServiceTypeSegmentedControl: FC<Props> = (props) => {

src/pages/ServicesPage/components/ServicesKitsTable/ServicesKitsTable.tsx

@@ -0,0 +1,61 @@
+import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
+import {GetServiceKitSchema} from "../../../../client";
+import {FC} from "react";
+import useServicesKitsTableColumns from "./columns.tsx";
+import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
+import {ActionIcon, Flex, Tooltip} from "@mantine/core";
+import {IconEdit, IconTrash} from "@tabler/icons-react";
+import {MRT_TableOptions} from "mantine-react-table";
+import {modals} from "@mantine/modals";
+
+type Props = CRUDTableProps<GetServiceKitSchema>;
+const ServicesKitsTable: FC<Props> = ({items, onDelete, onChange}) => {
+    const columns = useServicesKitsTableColumns();
+    const onEditClick = (kit: GetServiceKitSchema) => {
+        if (!onChange) return;
+        modals.openContextModal({
+            modal: 'serviceKitModalForm',
+            title: 'Создание набора услуг',
+            withCloseButton: false,
+            innerProps: {
+                element: kit,
+                onChange
+            }
+        })
+    }
+    const onDeleteClick = (kit: GetServiceKitSchema) => {
+        if (!onDelete) return;
+        console.log(kit)
+    }
+    return (
+        <BaseTable
+            data={items}
+            columns={columns}
+            restProps={{
+                enableSorting: false,
+                enableColumnActions: false,
+                enableRowActions: true,
+                renderRowActions: ({row}) => (
+                    <Flex gap="md">
+                        <Tooltip label="Редактировать">
+                            <ActionIcon
+                                onClick={() => onEditClick(row.original)}
+                                variant={"default"}>
+                                <IconEdit/>
+                            </ActionIcon>
+                        </Tooltip>
+                        <Tooltip label="Удалить">
+                            <ActionIcon onClick={() => {
+                                if (onDelete) onDeleteClick(row.original);
+                            }} variant={"default"}>
+                                <IconTrash/>
+                            </ActionIcon>
+                        </Tooltip>
+                    </Flex>
+                )
+            } as MRT_TableOptions<GetServiceKitSchema>}
+        />
+    )
+}
+
+export default ServicesKitsTable;

src/pages/ServicesPage/components/ServicesKitsTable/columns.tsx

@@ -0,0 +1,17 @@
+import {useMemo} from "react";
+import {MRT_ColumnDef} from "mantine-react-table";
+import {GetServiceKitSchema} from "../../../../client";
+
+const useServicesKitsTableColumns = () => {
+    return useMemo<MRT_ColumnDef<GetServiceKitSchema>[]>(() => [
+        {
+            accessorKey: "name",
+            header: "Название набора"
+        },
+        {
+            header: "Кол-во услуг",
+            Cell: ({row}) => row.original.services.length
+        }
+    ], []);
+}
+export default useServicesKitsTableColumns;

src/pages/ServicesPage/hooks/useServicesKitsList.tsx

@@ -0,0 +1,10 @@
+import ObjectList from "../../../hooks/objectList.tsx";
+import {ServiceService} from "../../../client";
+
+const useServicesKitsList = () => ObjectList({
+    queryFn: ServiceService.getAllServicesKits,
+    getObjectsFn: (response) => response.servicesKits,
+    queryKey: "getAllServicesKits"
+})
+
+export default useServicesKitsList;

src/pages/ServicesPage/modals/ServicesKitModalForm.tsx

@@ -0,0 +1,60 @@
+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;

src/pages/ServicesPage/ui/ServicesPage.tsx

@@ -4,15 +4,21 @@ import useServicesList from "../hooks/useServicesList.tsx";
 import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
 import styles from './ServicesPage.module.css';
 import {Button, Text} from "@mantine/core";
-import {ServiceCategorySchema, ServiceSchema, ServiceService} from "../../../client";
+import {GetServiceKitSchema, ServiceCategorySchema, ServiceSchema, ServiceService} from "../../../client";
 import {notifications} from "../../../shared/lib/notifications.ts";
 import {modals} from "@mantine/modals";
-import ServiceTypeSegmentedControl from "../components/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl.tsx";
-import {ServiceType} from "../../../shared/enums/ServiceType.ts";
+import ServiceTypeSegmentedControl, {
+    ServicesTab
+} from "../components/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl.tsx";
+import useServicesKitsList from "../hooks/useServicesKitsList.tsx";
+import ServicesKitsTable from "../components/ServicesKitsTable/ServicesKitsTable.tsx";
+import {omit} from "lodash";
+
 
 export const ServicesPage: FC = () => {
     const {services, refetch} = useServicesList();
-    const [serviceType, setServiceType] = useState(ServiceType.DEAL_SERVICE)
+    const {objects: servicesKits, refetch: refetchKits} = useServicesKitsList();
+    const [serviceType, setServiceType] = useState(ServicesTab.DEAL_SERVICE)
     // region Service create
     const onCreateClick = () => {
         modals.openContextModal({
@@ -86,15 +92,60 @@ export const ServicesPage: FC = () => {
                 await refetch();
             })
     }
- 
 
+    const onKitCreate = (kit: GetServiceKitSchema) => {
+        ServiceService.createServicesKit({
+            requestBody: {
+                data: {
+                    ...omit(kit, ["services", "id"]),
+                    servicesIds: kit.services.map(service => service.id)
+                }
+            }
+        }).then(async ({ok, message}) => {
+            notifications.guess(ok, {message: message});
+            if (!ok) return;
+            await refetchKits();
+        })
+    }
 
+    const onKitCreateClick = () => {
+        modals.openContextModal({
+            modal: 'serviceKitModalForm',
+            title: 'Создание набора услуг',
+            withCloseButton: false,
+            innerProps: {
+                onCreate: onKitCreate
+            }
+        })
+    }
+    const onKitUpdate = (kit: GetServiceKitSchema) => {
+        ServiceService.updateServicesKit({
+            requestBody: {
+                data: {
+                    ...omit(kit, ["services"]),
+                    servicesIds: kit.services.map(service => service.id)
+                }
+            }
+        }).then(async ({ok, message}) => {
+            notifications.guess(ok, {message: message});
+            if (!ok) return;
+            await refetchKits();
+        })
+    }
     return (
         <div className={styles['container']}>
             <PageBlock>
                 <div className={styles['top-panel']}>
-                    <Button onClick={onCreateClick} variant={"default"}>Создать услугу</Button>
-                    <Button onClick={onCreateCategoryClick} variant={"default"}>Создать категорию</Button>
+                    {
+                        serviceType === ServicesTab.SERVICES_KITS ?
+                            <Button onClick={onKitCreateClick} variant={"default"}>Создать набор</Button> :
+                            <>
+                                <Button onClick={onCreateClick} variant={"default"}>Создать услугу</Button>
+                                <Button onClick={onCreateCategoryClick} variant={"default"}>Создать
+                                    категорию</Button>
+                            </>
+                    }
+
                     <ServiceTypeSegmentedControl
                         className={styles['top-panel-last-item']}
                         value={serviceType.toString()}
@@ -103,11 +154,19 @@ export const ServicesPage: FC = () => {
                 </div>
             </PageBlock>
             <PageBlock>
-            <ServicesTable
-                onDelete={onServiceDelete}
-                onChange={onServiceUpdate}
-                items={services.filter(service => service.serviceType == serviceType)}
-            />
+                {
+                    serviceType === ServicesTab.SERVICES_KITS ?
+                        <ServicesKitsTable
+                            items={servicesKits}
+                            onChange={onKitUpdate}
+                        />
+                        :
+                        <ServicesTable
+                            onDelete={onServiceDelete}
+                            onChange={onServiceUpdate}
+                            items={services.filter(service => service.serviceType == serviceType)}
+                        />
+                }
             </PageBlock>
         </div>
     )