127 lines
4 KiB
TypeScript
127 lines
4 KiB
TypeScript
import { GenericPageData } from '../../pageInterface';
|
|
import { FaTable, FaBuilding } from 'react-icons/fa';
|
|
import { IoMdSend } from 'react-icons/io';
|
|
import { usePekTablesContext } from '../../../../contexts/PekTablesContext';
|
|
import PekTablesDropdown from './pek-tables/PekTablesDropdown';
|
|
import PekTablesPageWrapper from './pek-tables/PekTablesPageWrapper';
|
|
import PekTablesTable from './pek-tables/PekTablesTable';
|
|
|
|
// Hook factory for PEK Tables page
|
|
const createPekTablesHook = () => {
|
|
return () => {
|
|
const pekTablesData = usePekTablesContext();
|
|
|
|
const handleSubmit = async () => {
|
|
await pekTablesData.processCommand(pekTablesData.commandInput);
|
|
};
|
|
|
|
return {
|
|
// Table data
|
|
data: pekTablesData.tableData,
|
|
loading: pekTablesData.isLoadingTableData || pekTablesData.isLoadingTables,
|
|
error: pekTablesData.tableDataError || pekTablesData.tablesError,
|
|
|
|
// Messages for command results
|
|
messages: pekTablesData.messages.map(msg => ({
|
|
id: msg.id,
|
|
role: msg.role,
|
|
message: msg.message,
|
|
publishedAt: msg.timestamp.getTime(),
|
|
...(msg.data && { data: msg.data })
|
|
})),
|
|
|
|
// Input form properties (for command input)
|
|
inputValue: pekTablesData.commandInput,
|
|
onInputChange: pekTablesData.setCommandInput,
|
|
handleSubmit,
|
|
isSubmitting: pekTablesData.isProcessingCommand,
|
|
|
|
// Refresh function
|
|
onRefresh: pekTablesData.refreshTableData,
|
|
isRefetching: false
|
|
};
|
|
};
|
|
};
|
|
|
|
export const pekTablesPageData: GenericPageData = {
|
|
id: 'pek-tables',
|
|
path: 'start/pek-tables',
|
|
name: 'PEK Tabellen',
|
|
description: 'PEK Datenverwaltung mit Tabellen',
|
|
|
|
// Parent page
|
|
parentPath: 'start',
|
|
|
|
// Visual
|
|
icon: FaTable,
|
|
title: 'PEK Tabellen',
|
|
subtitle: 'Datenverwaltung',
|
|
|
|
// Header buttons
|
|
headerButtons: [],
|
|
|
|
// Content sections
|
|
content: [
|
|
{
|
|
id: 'pek-tables-description',
|
|
type: 'paragraph',
|
|
content: 'Verwalten Sie PEK-Daten über Tabellen. Wählen Sie eine Tabelle aus oder verwenden Sie natürliche Sprache, um Befehle auszuführen.'
|
|
},
|
|
{
|
|
id: 'pek-tables-dropdown',
|
|
type: 'custom',
|
|
customComponent: PekTablesDropdown
|
|
},
|
|
{
|
|
id: 'pek-tables-command-input',
|
|
type: 'inputForm',
|
|
inputFormConfig: {
|
|
hookFactory: createPekTablesHook,
|
|
placeholder: 'Befehl eingeben (z.B., "Erstelle ein neues Projekt namens \'Hauptstrasse 42\'")',
|
|
buttonLabel: 'Senden',
|
|
buttonIcon: IoMdSend,
|
|
buttonVariant: 'primary',
|
|
buttonSize: 'md',
|
|
textFieldSize: 'md'
|
|
}
|
|
},
|
|
{
|
|
id: 'pek-tables-command-results',
|
|
type: 'messages',
|
|
messagesConfig: {
|
|
variant: 'chat',
|
|
showDocuments: false,
|
|
showMetadata: false,
|
|
showProgress: false,
|
|
emptyMessage: 'Noch keine Befehle ausgeführt. Senden Sie einen Befehl, um Ergebnisse hier zu sehen.'
|
|
}
|
|
},
|
|
{
|
|
id: 'pek-tables-table',
|
|
type: 'custom',
|
|
customComponent: PekTablesTable
|
|
}
|
|
],
|
|
|
|
// Page behavior
|
|
persistent: false,
|
|
preload: false,
|
|
preserveState: true,
|
|
moduleEnabled: true,
|
|
|
|
// Sidebar
|
|
order: 11,
|
|
showInSidebar: true,
|
|
|
|
// Custom component wrapper with PekTablesProvider
|
|
customComponent: PekTablesPageWrapper,
|
|
|
|
// Lifecycle hooks
|
|
onActivate: async () => {
|
|
if (import.meta.env.DEV) console.log('PEK Tables page activated');
|
|
},
|
|
onDeactivate: async () => {
|
|
if (import.meta.env.DEV) console.log('PEK Tables page deactivated');
|
|
}
|
|
};
|
|
|