Matthias-Claudius-Schule/borrow-system
4
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

improved table view

Browse Source
This commit is contained in:
Theis Gaedigk
2025-11-11 17:18:16 +01:00
parent e49700071b
commit 16e48aaf3f
2 changed files with 50 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
admin/src/components/APIKeyTable.tsx
View File

@@ -150,10 +150,16 @@ const APIKeyTable: React.FC = () => {
/>
)}
<Table.Root size="sm" striped>
<Table.Root
size="sm"
striped
w="100%"
// table-layout: auto => Spaltenbreite nach Content; volle Breite nutzen
style={{ tableLayout: "auto" }}
>
<Table.Header>
<Table.Row>
<Table.ColumnHeader>
<Table.ColumnHeader width="1%" whiteSpace="nowrap">
<strong>#</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
@@ -162,13 +168,13 @@ const APIKeyTable: React.FC = () => {
<Table.ColumnHeader>
<strong>Name</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<Table.ColumnHeader whiteSpace="nowrap">
<strong>Eintrag erstellt am</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<Table.ColumnHeader whiteSpace="nowrap">
<strong>Zuletzt benutzt am</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<Table.ColumnHeader width="1%" whiteSpace="nowrap">
<strong>Aktionen</strong>
</Table.ColumnHeader>
</Table.Row>
@@ -176,16 +182,18 @@ const APIKeyTable: React.FC = () => {
<Table.Body>
{items.map((item) => (
<Table.Row key={item.id}>
<Table.Cell>{item.id}</Table.Cell>
<Table.Cell>{item.api_key}</Table.Cell>
<Table.Cell whiteSpace="nowrap">{item.id}</Table.Cell>
<Table.Cell fontFamily="mono">{item.api_key}</Table.Cell>
<Table.Cell>{item.entry_name}</Table.Cell>
<Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
<Table.Cell>
<Table.Cell whiteSpace="nowrap">
{formatDateTime(item.entry_created_at)}
</Table.Cell>
<Table.Cell whiteSpace="nowrap">
{!item.last_used_at
? "Nie benutzt"
: formatDateTime(item.last_used_at)}
</Table.Cell>
<Table.Cell>
<Table.Cell whiteSpace="nowrap">
<Button
onClick={() =>
deleteAPKey(item.id).then((response) => {

58
admin/src/components/UserTable.tsx
View File

@@ -195,10 +195,15 @@ const UserTable: React.FC = () => {
</VStack>
)}
{!isLoading && (
<Table.Root size="sm" striped>
<Table.Root
size="sm"
striped
w="100%"
style={{ tableLayout: "auto" }} // Spalten nach Content
>
<Table.Header>
<Table.Row>
<Table.ColumnHeader>
<Table.ColumnHeader width="1%" whiteSpace="nowrap">
<strong>#</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
@@ -213,22 +218,22 @@ const UserTable: React.FC = () => {
<Table.ColumnHeader>
<strong>E-Mail</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<Table.ColumnHeader width="1%" whiteSpace="nowrap">
<strong>Admin</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<Table.ColumnHeader whiteSpace="nowrap">
<strong>Passwort ändern</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<Table.ColumnHeader width="1%" whiteSpace="nowrap">
<strong>Rolle</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<Table.ColumnHeader whiteSpace="nowrap">
<strong>Eintrag erstellt am</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<Table.ColumnHeader whiteSpace="nowrap">
<strong>Eintrag aktualisiert am</strong>
</Table.ColumnHeader>
<Table.ColumnHeader>
<Table.ColumnHeader width="1%" whiteSpace="nowrap">
<strong>Aktionen</strong>
</Table.ColumnHeader>
</Table.Row>
@@ -236,10 +241,8 @@ const UserTable: React.FC = () => {
<Table.Body>
{users.map((user) => (
<Table.Row key={user.id}>
<Table.Cell>{user.id}</Table.Cell>
<Table.Cell whiteSpace="nowrap">{user.id}</Table.Cell>
<Table.Cell>{user.username}</Table.Cell>
{/* Vorname */}
<Table.Cell>
<Input
size="sm"
@@ -249,8 +252,6 @@ const UserTable: React.FC = () => {
}
/>
</Table.Cell>
{/* Nachname */}
<Table.Cell>
<Input
size="sm"
@@ -260,8 +261,6 @@ const UserTable: React.FC = () => {
}
/>
</Table.Cell>
{/* E-Mail */}
<Table.Cell>
<Input
type="email"
@@ -272,14 +271,12 @@ const UserTable: React.FC = () => {
}
/>
</Table.Cell>
{/* Admin */}
<Table.Cell>
<Table.Cell whiteSpace="nowrap">
<Switch.Root
size="sm"
checked={!!user.is_admin}
onCheckedChange={(details) =>
handleInputChange(user.id, "is_admin", details.checked)
onCheckedChange={(d) =>
handleInputChange(user.id, "is_admin", d.checked)
}
aria-label="Adminrechte umschalten"
>
@@ -289,23 +286,32 @@ const UserTable: React.FC = () => {
<Switch.HiddenInput />
</Switch.Root>
</Table.Cell>
<Table.Cell>
<Button onClick={() => handlePasswordChange(user.username)}>
<Table.Cell whiteSpace="nowrap">
<Button
size="sm"
onClick={() => handlePasswordChange(user.username)}
>
Passwort ändern
</Button>
</Table.Cell>
<Table.Cell>
<Table.Cell whiteSpace="nowrap">
<Input
type="number"
size="sm"
onChange={(e) =>
handleInputChange(user.id, "role", e.target.value)
}
value={user.role}
width="70px"
/>
</Table.Cell>
<Table.Cell>{formatDateTime(user.entry_created_at)}</Table.Cell>
<Table.Cell>{formatDateTime(user.entry_updated_at)}</Table.Cell>
<Table.Cell>
<Table.Cell whiteSpace="nowrap">
{formatDateTime(user.entry_created_at)}
</Table.Cell>
<Table.Cell whiteSpace="nowrap">
{formatDateTime(user.entry_updated_at)}
</Table.Cell>
<Table.Cell whiteSpace="nowrap">
<Button
onClick={() =>
handleEdit(