feat: export services

src/pages/ServicesPage/ui/ServicesPage.tsx

@@ -2,7 +2,7 @@ import { FC, useState } from "react";
 import ServicesTable from "../components/ServicesTable/ServicesTable.tsx";
 import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
 import styles from "./ServicesPage.module.css";
-import { Button, Flex, rem, Switch } from "@mantine/core";
+import { Button, Flex, Popover, rem, Switch } from "@mantine/core";
 import ServiceTypeSegmentedControl, {
     ServicesTab,
 } from "../components/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl.tsx";
@@ -12,6 +12,9 @@ import useServicesState from "../hooks/useServicesState.tsx";
 import useServicesKitsState from "../hooks/useServicesKitsState.tsx";
 import useServicePriceCategoryState from "../hooks/useServicePriceCategoryState.tsx";
 import { ObjectStateToTableProps } from "../../../types/utils.ts";
+import { IconDownload, IconFileExcel, IconFileTypePdf } from "@tabler/icons-react";
+import FileSaver from "file-saver";
+import { getCurrentDateTimeForFilename } from "../../../shared/lib/date.ts";
 
 export const ServicesPage: FC = () => {
     const [serviceType, setServiceType] = useState(ServicesTab.DEAL_SERVICE);
@@ -65,7 +68,6 @@ export const ServicesPage: FC = () => {
                 );
         }
     };
-
     const getControls = () => {
         switch (serviceType) {
             case ServicesTab.SERVICES_KITS:
@@ -80,22 +82,62 @@ export const ServicesPage: FC = () => {
             case ServicesTab.PRODUCT_SERVICE:
                 return (
                     <Flex align={"center"} gap={rem(10)}>
-                        <Button
-                            onClick={onCreateClick}
-                            variant={"default"}>
-                            Создать услугу
-                        </Button>
-                        <Button
-                            onClick={onCreateCategoryClick}
-                            variant={"default"}>
-                            Создать категорию
-                        </Button>
+                        <div style={{
+                            display: "grid",
+                            gridAutoFlow: "column",
+                            gridAutoColumns: "1fr",
+                            width: "max-content",
+                            gap: rem(10),
+                        }}>
+
+                            <Button
+                                onClick={onCreateClick}
+                                variant={"default"}>
+                                Создать услугу
+                            </Button>
+                            <Button
+
+                                onClick={onCreateCategoryClick}
+                                variant={"default"}>
+                                Создать категорию
+                            </Button>
+                            <Popover withArrow shadow={"md"}>
+                                <Popover.Target>
+
+                                    <Button
+                                        leftSection={<IconDownload />}
+                                        variant={"default"}>
+                                        Скачать
+                                    </Button>
+                                </Popover.Target>
+                                <Popover.Dropdown>
+                                    <Flex direction={"column"} gap={rem(10)}>
+                                        <Button
+                                            onClick={onDownloadPdfClick}
+                                            variant={"default"}
+                                            leftSection={<IconFileTypePdf />}
+                                        >
+                                            В формате PDF
+                                        </Button>
+                                        <Button
+                                            onClick={onDownloadExcelClick}
+                                            variant={"default"}
+                                            leftSection={<IconFileExcel />}
+                                        >
+                                            В формате Excel
+                                        </Button>
+                                    </Flex>
+                                </Popover.Dropdown>
+                            </Popover>
+
+                        </div>
+
                         <Switch
+
                             variant={"default"}
                             label={"Режим редактирования"}
                             checked={isEditMode}
                             onChange={() => setIsEditMode(!isEditMode)}
-
                         />
                     </Flex>
                 );
@@ -113,6 +155,19 @@ export const ServicesPage: FC = () => {
                 );
         }
     };
+
+    const onDownloadPdfClick = () => {
+        const date = getCurrentDateTimeForFilename();
+        FileSaver.saveAs(`${import.meta.env.VITE_API_URL}/service/export-list/pdf`,
+            `прайс_лист_${date}.pdf`,
+        );
+    };
+    const onDownloadExcelClick = () => {
+        const date = getCurrentDateTimeForFilename();
+        FileSaver.saveAs(`${import.meta.env.VITE_API_URL}/service/export-list/excel`,
+            `прайс_лист_${date}.xlsx`,
+        );
+    };
     return (
         <div className={styles["container"]}>
             <PageBlock>