updated the table view
This commit is contained in:
parent
101b3063c0
commit
aa34508be4
4 changed files with 234 additions and 11 deletions
|
|
@ -5,6 +5,7 @@ import { privilegeCheckers } from '../../../../utils/privilegeCheckers';
|
|||
import { usePekTablesContext } from '../../../../hooks/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 = () => {
|
||||
|
|
@ -98,17 +99,8 @@ export const pekTablesPageData: GenericPageData = {
|
|||
},
|
||||
{
|
||||
id: 'pek-tables-table',
|
||||
type: 'table',
|
||||
tableConfig: {
|
||||
hookFactory: createPekTablesHook,
|
||||
columns: [], // Auto-detect columns
|
||||
searchable: true,
|
||||
filterable: true,
|
||||
sortable: true,
|
||||
pagination: true,
|
||||
pageSize: 10,
|
||||
selectable: true
|
||||
}
|
||||
type: 'custom',
|
||||
customComponent: PekTablesTable
|
||||
}
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
.collapsableContainer {
|
||||
width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid var(--color-border, #e5e7eb);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-bg, #ffffff);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.collapseButton {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: var(--color-bg-secondary, #f9fafb);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border, #e5e7eb);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
.collapseButton:hover {
|
||||
background-color: var(--color-hover, #f3f4f6);
|
||||
}
|
||||
|
||||
.collapseButton:focus {
|
||||
outline: 2px solid var(--color-primary, #3b82f6);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.collapseButtonText {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text, #111827);
|
||||
}
|
||||
|
||||
.collapseIcon {
|
||||
color: var(--color-text-secondary, #6b7280);
|
||||
font-size: 1rem;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.collapsableContent {
|
||||
padding: 0;
|
||||
animation: slideDown 0.2s ease-out;
|
||||
height: calc(100vh - 250px); /* Very tall height, starting below dropdown and extending downward */
|
||||
min-height: 500px; /* Minimum height for usability */
|
||||
max-height: calc(100vh - 150px); /* Maximum height to leave minimal space for other elements */
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
max-height: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
|
||||
import styles from './PekTablesCollapsable.module.css';
|
||||
|
||||
interface PekTablesCollapsableProps {
|
||||
title?: string;
|
||||
children: React.ReactNode;
|
||||
defaultCollapsed?: boolean;
|
||||
}
|
||||
|
||||
const PekTablesCollapsable: React.FC<PekTablesCollapsableProps> = ({
|
||||
title = 'Tabellenansicht',
|
||||
children,
|
||||
defaultCollapsed = false
|
||||
}) => {
|
||||
const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
|
||||
|
||||
const toggleCollapse = () => {
|
||||
setIsCollapsed(!isCollapsed);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.collapsableContainer}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.collapseButton}
|
||||
onClick={toggleCollapse}
|
||||
aria-expanded={!isCollapsed}
|
||||
>
|
||||
<span className={styles.collapseButtonText}>{title}</span>
|
||||
{isCollapsed ? (
|
||||
<FaChevronDown className={styles.collapseIcon} />
|
||||
) : (
|
||||
<FaChevronUp className={styles.collapseIcon} />
|
||||
)}
|
||||
</button>
|
||||
{!isCollapsed && (
|
||||
<div className={styles.collapsableContent}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PekTablesCollapsable;
|
||||
|
||||
115
src/core/PageManager/data/pages/pek-tables/PekTablesTable.tsx
Normal file
115
src/core/PageManager/data/pages/pek-tables/PekTablesTable.tsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormGenerator } from '../../../../../components/FormGenerator';
|
||||
import { usePekTablesContext } from '../../../../../hooks/PekTablesContext';
|
||||
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
|
||||
import styles from './PekTablesCollapsable.module.css';
|
||||
|
||||
const PekTablesTable: React.FC = () => {
|
||||
const {
|
||||
tableData,
|
||||
isLoadingTableData,
|
||||
tableDataError,
|
||||
refreshTableData,
|
||||
selectedTable
|
||||
} = usePekTablesContext();
|
||||
|
||||
const [isCollapsed, setIsCollapsed] = useState(true); // Default collapsed to show chat window
|
||||
|
||||
// Debug logging
|
||||
if (import.meta.env.DEV) {
|
||||
console.log('📊 PekTablesTable render:', {
|
||||
selectedTable,
|
||||
tableDataLength: tableData?.length || 0,
|
||||
isLoadingTableData,
|
||||
tableDataError
|
||||
});
|
||||
}
|
||||
|
||||
const toggleCollapse = () => {
|
||||
setIsCollapsed(!isCollapsed);
|
||||
};
|
||||
|
||||
// Show error state if there's an error
|
||||
if (tableDataError) {
|
||||
return (
|
||||
<div className={styles.collapsableContainer}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.collapseButton}
|
||||
onClick={toggleCollapse}
|
||||
aria-expanded={!isCollapsed}
|
||||
>
|
||||
<span className={styles.collapseButtonText}>Tabellenansicht</span>
|
||||
{isCollapsed ? (
|
||||
<FaChevronDown className={styles.collapseIcon} />
|
||||
) : (
|
||||
<FaChevronUp className={styles.collapseIcon} />
|
||||
)}
|
||||
</button>
|
||||
{!isCollapsed && (
|
||||
<div className={styles.collapsableContent}>
|
||||
<div style={{ padding: '1rem', color: '#ef4444' }}>
|
||||
<p>Fehler beim Laden der Daten: {tableDataError}</p>
|
||||
{refreshTableData && (
|
||||
<button onClick={refreshTableData} style={{ marginTop: '0.5rem', padding: '0.5rem 1rem', backgroundColor: '#3b82f6', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Only show loading spinner on initial load (when there's no data yet)
|
||||
const showLoadingSpinner = isLoadingTableData && (!tableData || tableData.length === 0);
|
||||
|
||||
return (
|
||||
<div className={styles.collapsableContainer}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.collapseButton}
|
||||
onClick={toggleCollapse}
|
||||
aria-expanded={!isCollapsed}
|
||||
>
|
||||
<span className={styles.collapseButtonText}>
|
||||
Tabellenansicht {selectedTable && `(${selectedTable})`} {tableData && tableData.length > 0 && `- ${tableData.length} Einträge`}
|
||||
</span>
|
||||
{isCollapsed ? (
|
||||
<FaChevronDown className={styles.collapseIcon} />
|
||||
) : (
|
||||
<FaChevronUp className={styles.collapseIcon} />
|
||||
)}
|
||||
</button>
|
||||
{!isCollapsed && (
|
||||
<div className={styles.collapsableContent}>
|
||||
{tableData && tableData.length > 0 ? (
|
||||
<FormGenerator
|
||||
data={tableData}
|
||||
columns={undefined} // Auto-detect columns - undefined triggers auto-detection
|
||||
loading={showLoadingSpinner}
|
||||
searchable={true}
|
||||
filterable={true}
|
||||
sortable={true}
|
||||
pagination={true}
|
||||
pageSize={10}
|
||||
selectable={true}
|
||||
/>
|
||||
) : isLoadingTableData ? (
|
||||
<div style={{ padding: '1rem', textAlign: 'center', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<div>Lade Daten...</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ padding: '1rem', textAlign: 'center', color: '#6b7280', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
Keine Daten verfügbar. Bitte wählen Sie eine Tabelle aus.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PekTablesTable;
|
||||
|
||||
Loading…
Reference in a new issue