97 lines
3 KiB
TypeScript
97 lines
3 KiB
TypeScript
/**
|
||
* TrusteeOrganisationsView
|
||
*
|
||
* Organisations-Verwaltung für eine Trustee-Instanz
|
||
*/
|
||
|
||
import React from 'react';
|
||
import { useTrusteeOrganisations, useTrusteeOrganisationOperations } from '../../../hooks/useTrustee';
|
||
import { useTablePermission } from '../../../hooks/useInstancePermissions';
|
||
import styles from './TrusteeViews.module.css';
|
||
|
||
export const TrusteeOrganisationsView: React.FC = () => {
|
||
const { items: organisations, loading, error, refetch } = useTrusteeOrganisations();
|
||
const { handleDelete, deletingItems } = useTrusteeOrganisationOperations();
|
||
const { canCreate, canUpdate, canDelete } = useTablePermission('TrusteeOrganisation');
|
||
|
||
if (loading) {
|
||
return <div className={styles.loading}>Lade Organisationen...</div>;
|
||
}
|
||
|
||
if (error) {
|
||
return <div className={styles.error}>Fehler: {error}</div>;
|
||
}
|
||
|
||
const onDelete = async (orgId: string) => {
|
||
if (window.confirm('Organisation wirklich löschen?')) {
|
||
const success = await handleDelete(orgId);
|
||
if (success) {
|
||
refetch();
|
||
}
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={styles.listView}>
|
||
{/* Toolbar */}
|
||
<div className={styles.toolbar}>
|
||
{canCreate && (
|
||
<button className={styles.primaryButton}>
|
||
+ Neue Organisation
|
||
</button>
|
||
)}
|
||
<button className={styles.secondaryButton} onClick={() => refetch()}>
|
||
Aktualisieren
|
||
</button>
|
||
</div>
|
||
|
||
{/* Tabelle */}
|
||
{organisations.length === 0 ? (
|
||
<div className={styles.emptyState}>
|
||
<p>Keine Organisationen vorhanden.</p>
|
||
</div>
|
||
) : (
|
||
<table className={styles.dataTable}>
|
||
<thead>
|
||
<tr>
|
||
<th>Label</th>
|
||
<th>Status</th>
|
||
<th>Aktionen</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{organisations.map((org) => (
|
||
<tr key={org.id}>
|
||
<td>{org.label}</td>
|
||
<td>
|
||
<span className={`${styles.badge} ${org.enabled ? styles.badgeSuccess : styles.badgeWarning}`}>
|
||
{org.enabled ? 'Aktiv' : 'Inaktiv'}
|
||
</span>
|
||
</td>
|
||
<td className={styles.actions}>
|
||
{canUpdate && (
|
||
<button className={styles.iconButton} title="Bearbeiten">
|
||
✏️
|
||
</button>
|
||
)}
|
||
{canDelete && (
|
||
<button
|
||
className={styles.iconButton}
|
||
title="Löschen"
|
||
onClick={() => onDelete(org.id)}
|
||
disabled={deletingItems.has(org.id)}
|
||
>
|
||
{deletingItems.has(org.id) ? '...' : '🗑️'}
|
||
</button>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TrusteeOrganisationsView;
|