get pages

src/pages/dashboards/DataPage.tsx

@@ -1,25 +1,36 @@
 import { useParams } from 'react-router-dom';
-import {useApiDocumentation} from "../../API/hooks.ts";
+import { useApiDocumentation, useDataPage } from "../../API/hooks.ts";
+import { FieldInfo } from "../../types/common.ts";
 
 export function DataPage() {
     const { applicationName, endpointName } = useParams<{ applicationName: string; endpointName: string }>();
 
-    const {schema} = useApiDocumentation(applicationName || "", endpointName || "");
+    // Получаем схему документации API
+    const { schema, loading: loadingSchema } = useApiDocumentation(applicationName || "", endpointName || "");
 
-    console.log(schema)
+    // Получаем данные с помощью пагинации
+    const dataPage = useDataPage<object>(applicationName || "", endpointName || "", {}, !loadingSchema);
 
+    // Функция для экспорта данных в Excel (пока пустая)
     const handleExport = () => {
-        // Пока пусто
+        // Логика для экспорта данных
     };
 
+    // Функция для добавления новых данных (пока пустая)
     const handleAdd = () => {
-        // Пока пусто
+        // Логика для добавления данных
     };
 
+    // Функция для фильтрации данных (пока пустая)
     const handleFilters = () => {
-        // Пока пусто
+        // Логика для фильтрации данных
     };
 
+    // Если данные или схема загружаются, отображаем загрузку
+    if (loadingSchema) {
+        return <div className="loading">Загрузка схемы...</div>;
+    }
+
     return (
         <div className="data-page">
             <div className="buttons-container">
@@ -31,14 +42,31 @@ export function DataPage() {
                 <table className="data-table" style={{ overflowX: 'auto', display: 'block' }}>
                     <thead>
                     <tr>
-                        <th className="column-header">Header 1</th>
+                        {schema?.map((field: FieldInfo) => (
-                        <th className="column-header">Header 2</th>
+                            <th key={field.name} className="column-header">
-                        <th className="column-header">Header 3</th>
+                                {field.title}
-                        <th className="column-header">Header 4</th>
+                            </th>
+                        ))}
                     </tr>
                     </thead>
                     <tbody>
-                    {/* Тут могут быть строки данных */}
+                    {dataPage.items && dataPage.items.length > 0 ? (
+                        dataPage.items.map((item: unknown) => (
+                            <tr key={item.id}>
+                                {schema?.map((field: FieldInfo) => (
+                                    <td key={field.name} className="data-cell">
+                                        {item[field.name]}
+                                    </td>
+                                ))}
+                            </tr>
+                        ))
+                    ) : (
+                        <tr>
+                            <td colSpan={schema?.length} className="no-data">
+                                Нет данных для отображения
+                            </td>
+                        </tr>
+                    )}
                     </tbody>
                 </table>
             </div>