Reports test

frontend_reactjs/src/pages/ApiTest.tsx

@@ -1,31 +1,101 @@
 import { useEffect, useState } from "react"
 import { Button, Typography } from "@mui/material"
+import axiosInstance from "../http/axiosInstance"
+import DataTable from "../components/DataTable"
+import { GridColDef } from "@mui/x-data-grid"
 
 export default function ApiTest() {
-    const [data, setData] = useState<any>(null)
+    const [state, setState] = useState<any>(null)
+    const [exportData, setExportData] = useState<any>(null)
 
-    function getRealtimeData(data: any) {
-        setData(data)
+    const fetch = async () => {
+        await axiosInstance.get(`/info/reports/0?to_export=true`, {
+            responseType: 'blob'
+        }).then(response => {
+            setExportData(response.data)
+            console.log(response.data)
+
+            const url = window.URL.createObjectURL(response.data)
+            const link = document.createElement('a')
+            link.href = url
+            link.setAttribute('download', 'report.xlsx')
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        })
     }
 
-    useEffect(() => {
-        const sse = new EventSource(`${import.meta.env.VITE_API_SSE_URL}/stream`)
+    const fetchBlob = async () => {
+        // await axiosInstance.get(`/info/document/1&2`, {
+        //     responseType: 'blob'
+        // }).then(response => {
+        //     setState(response)
+        // })
 
-        sse.onmessage = e => getRealtimeData(e.data)
+        await axiosInstance.get(`/info/reports/0`).then(response => {
+            setState(JSON.parse(response.data))
+        })
+    }
 
-        sse.onerror = () => {
-            sse.close()
-        }
-
-        return () => {
-            sse.close()
-        }
-    }, [])
+    const columns: GridColDef[] =
+        [
+            { field: 'id', headerName: "№", type: "number", width: 90 },
+            { field: 'region', headerName: 'Регион', type: "string", width: 90, },
+            { field: 'city', headerName: 'Город', type: "string", width: 130 },
+            { field: 'name_type', headerName: 'Вид объекта', type: "string", width: 90, },
+            { field: 'name', headerName: 'Наименование', type: "string", width: 90, },
+            // { field: 'code', headerName: 'Код', type: "string", width: 130 },
+            // { field: 'code_city', headerName: '', type: "string", width: 90, },
+            // { field: 'code_fuel', headerName: '', type: "string", width: 90, },
+            // { field: 'code_master', headerName: '', type: "string", width: 90, },
+            // { field: 'code_region', headerName: '', type: "string", width: 90, },
+            // { field: 'code_type', headerName: '', type: "string", width: 90, },
+            { field: 'num', headerName: 'Инвентарный код', type: "string", width: 90, },
+            { field: 'fuel_type', headerName: 'Тип топлива', type: "string", width: 90, },
+            { field: 'fuel', headerName: 'Топливо', type: "string", width: 90, },
+            { field: 'zone', headerName: 'Мертвая зона', type: "string", width: 90, },
+            { field: 'active', headerName: 'Активность', type: "boolean", width: 70 },
+            // { field: 'full_name', headerName: 'Полное наименование', type: "string", width: 90, },
+        ];
 
     return (
         <>
             <Typography>
-                {JSON.stringify(data)}
+                <Button onClick={() => {
+                    fetchBlob()
+                }}>
+                    Получить таблицу
+                </Button>
+
+                <Button onClick={() => {
+                    fetch()
+                }}>
+                    Экспорт
+                </Button>
+
+                {state &&
+                    <DataTable
+                        checkboxSelection={false}
+                        columns={
+                            [
+                                { field: 'id', headerName: '№', width: 70 },
+                                ...Object.keys(state).map(key => ({
+                                    field: key,
+                                    headerName: key.charAt(0).toUpperCase() + key.slice(1),
+                                    width: 150
+                                }))
+                            ]
+                        }
+                        rows={
+                            [...new Set(Object.keys(state).flatMap(key => Object.keys(state[key])))].map(id => {
+                                const row: any = { id: Number(id) };
+                                Object.keys(state).forEach(key => {
+                                    row[key] = state[key][id];
+                                });
+                                return row;
+                            })
+                        } />
+                }
             </Typography>
         </>
     )