From 0a1eeccf083ae3b28c52a9a2cb9bd0a0ee241926 Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Wed, 19 Mar 2025 14:11:24 +0300
Subject: [PATCH] add `ExportButton` for `CustomDataGrid` component

---
 src/components/CustomDataGrid.tsx | 37 +++++++++++++++++++++----------
 src/pages/sight/show.tsx          |  4 ++--
 src/pages/station/show.tsx        |  8 +++----
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/CustomDataGrid.tsx b/src/components/CustomDataGrid.tsx
index ce5853b..c981be1 100644
--- a/src/components/CustomDataGrid.tsx
+++ b/src/components/CustomDataGrid.tsx
@@ -1,5 +1,7 @@
 import {DataGrid, type DataGridProps, type GridColumnVisibilityModel} from '@mui/x-data-grid'
 import {Stack, Button} from '@mui/material'
+import {ExportButton} from '@refinedev/mui'
+import {useExport} from '@refinedev/core'
 import React, {useState, useEffect, useMemo} from 'react'
 import Cookies from 'js-cookie'
 
@@ -7,12 +9,18 @@ import {localeText} from '../locales/ru/localeText'
 
 interface CustomDataGridProps extends DataGridProps {
   hasCoordinates?: boolean
+  resource?: string // Add this prop
 }
 
 const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id'] as const
 
-export const CustomDataGrid = ({hasCoordinates = false, columns = [], ...props}: CustomDataGridProps) => {
+export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource, ...props}: CustomDataGridProps) => {
   const isDev = import.meta.env.DEV
+  const {triggerExport, isLoading: exportLoading} = useExport({
+    resource: resource ?? '',
+    // pageSize: 100, #*
+    // maxItemCount: 100, #*
+  })
 
   const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
   const initialShowDevData = Cookies.get('showDevData') === 'true'
@@ -90,18 +98,23 @@ export const CustomDataGrid = ({hasCoordinates = false, columns = [], ...props}:
         }}
         pageSizeOptions={[10, 25, 50, 100]}
       />
-      <Stack direction="row" spacing={2} sx={{mb: 2}}>
-        {hasCoordinates && (
-          <Button variant="contained" onClick={toggleCoordinates}>
-            {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
-          </Button>
-        )}
 
-        {isDev && availableDevFields.length > 0 && (
-          <Button variant="contained" onClick={toggleDevData}>
-            {showDevData ? 'Скрыть служебные данные' : 'Показать служебные данные'}
-          </Button>
-        )}
+      <Stack direction="row" spacing={2} justifyContent="space-between" mb={2}>
+        <Stack direction="row" spacing={2} sx={{mb: 2}}>
+          {hasCoordinates && (
+            <Button variant="contained" onClick={toggleCoordinates}>
+              {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
+            </Button>
+          )}
+
+          {isDev && availableDevFields.length > 0 && (
+            <Button variant="contained" onClick={toggleDevData}>
+              {showDevData ? 'Скрыть служебные данные' : 'Показать служебные данные'}
+            </Button>
+          )}
+        </Stack>
+
+        <ExportButton onClick={triggerExport} loading={exportLoading} />
       </Stack>
     </Stack>
   )
diff --git a/src/pages/sight/show.tsx b/src/pages/sight/show.tsx
index 45304cb..4867ff8 100644
--- a/src/pages/sight/show.tsx
+++ b/src/pages/sight/show.tsx
@@ -99,8 +99,8 @@ export const SightShow = () => {
   const fields = [
     // {label: 'ID', data: 'id'},
     {label: 'Название', data: 'name'},
-    // {label: 'Широта', data: 'latitude'}, #
-    // {label: 'Долгота', data: 'longitude'}, #
+    // {label: 'Широта', data: 'latitude'}, #*
+    // {label: 'Долгота', data: 'longitude'}, #*
     // {label: 'ID города', data: 'city_id'},
     {label: 'Город', data: 'city'},
   ]
diff --git a/src/pages/station/show.tsx b/src/pages/station/show.tsx
index cea1964..78a8960 100644
--- a/src/pages/station/show.tsx
+++ b/src/pages/station/show.tsx
@@ -100,16 +100,16 @@ export const StationShow = () => {
   const fields = [
     // {label: 'ID', data: 'id'},
     {label: 'Название', data: 'name'},
-    // {label: 'Широта', data: 'latitude'}, #
-    // {label: 'Долгота', data: 'longitude'}, #
+    // {label: 'Широта', data: 'latitude'}, #*
+    // {label: 'Долгота', data: 'longitude'}, #*
     {label: 'Описание', data: 'description'},
   ]
 
   const sightFields: Array<{label: string; data: keyof SightItem}> = [
     // {label: 'ID', data: 'id'},
     {label: 'Название', data: 'name'},
-    // {label: 'Широта', data: 'latitude'}, #
-    // {label: 'Долгота', data: 'longitude'}, #
+    // {label: 'Широта', data: 'latitude'}, #*
+    // {label: 'Долгота', data: 'longitude'}, #*
     // {label: 'ID города', data: 'city_id'},
     {label: 'Город', data: 'city'},
   ]