75 lines
3.3 KiB
TypeScript
75 lines
3.3 KiB
TypeScript
import { useParams } from 'react-router-dom';
|
||
import { useApiDocumentation, useDataPage } from "../../API/hooks.ts";
|
||
import { FieldInfo } from "../../types/common.ts";
|
||
|
||
export function DataPage() {
|
||
const { applicationName, endpointName } = useParams<{ applicationName: string; endpointName: string }>();
|
||
|
||
// Получаем схему документации API
|
||
const { schema, loading: loadingSchema } = useApiDocumentation(applicationName || "", endpointName || "");
|
||
|
||
// Получаем данные с помощью пагинации
|
||
const dataPage = useDataPage(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">
|
||
<button className="export-excel-button" onClick={handleExport}>Экспорт в Excel</button>
|
||
<button className="add-button" onClick={handleAdd}>Добавление</button>
|
||
<button className="filters-button" onClick={handleFilters}>Фильтры</button>
|
||
</div>
|
||
<div className="table-container">
|
||
<table className="data-table" style={{ overflowX: 'auto', display: 'block' }}>
|
||
<thead>
|
||
<tr>
|
||
{schema?.map((field: FieldInfo) => (
|
||
<th key={field.name} className="column-header">
|
||
{field.title}
|
||
</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>
|
||
</div>
|
||
);
|
||
} |