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.Header>
<Table.Row> <Table.Row>
<Table.ColumnHeader> <Table.ColumnHeader width="1%" whiteSpace="nowrap">
<strong>#</strong> <strong>#</strong>
</Table.ColumnHeader> </Table.ColumnHeader>
<Table.ColumnHeader> <Table.ColumnHeader>
@@ -162,13 +168,13 @@ const APIKeyTable: React.FC = () => {
<Table.ColumnHeader> <Table.ColumnHeader>
<strong>Name</strong> <strong>Name</strong>
</Table.ColumnHeader> </Table.ColumnHeader>
<Table.ColumnHeader> <Table.ColumnHeader whiteSpace="nowrap">
<strong>Eintrag erstellt am</strong> <strong>Eintrag erstellt am</strong>
</Table.ColumnHeader> </Table.ColumnHeader>
<Table.ColumnHeader> <Table.ColumnHeader whiteSpace="nowrap">
<strong>Zuletzt benutzt am</strong> <strong>Zuletzt benutzt am</strong>
</Table.ColumnHeader> </Table.ColumnHeader>
<Table.ColumnHeader> <Table.ColumnHeader width="1%" whiteSpace="nowrap">
<strong>Aktionen</strong> <strong>Aktionen</strong>
</Table.ColumnHeader> </Table.ColumnHeader>
</Table.Row> </Table.Row>
@@ -176,16 +182,18 @@ const APIKeyTable: React.FC = () => {
<Table.Body> <Table.Body>
{items.map((item) => ( {items.map((item) => (
<Table.Row key={item.id}> <Table.Row key={item.id}>
<Table.Cell>{item.id}</Table.Cell> <Table.Cell whiteSpace="nowrap">{item.id}</Table.Cell>
<Table.Cell>{item.api_key}</Table.Cell> <Table.Cell fontFamily="mono">{item.api_key}</Table.Cell>
<Table.Cell>{item.entry_name}</Table.Cell> <Table.Cell>{item.entry_name}</Table.Cell>
<Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell> <Table.Cell whiteSpace="nowrap">
<Table.Cell> {formatDateTime(item.entry_created_at)}
</Table.Cell>
<Table.Cell whiteSpace="nowrap">
{!item.last_used_at {!item.last_used_at
? "Nie benutzt" ? "Nie benutzt"
: formatDateTime(item.last_used_at)} : formatDateTime(item.last_used_at)}
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell whiteSpace="nowrap">
<Button <Button
onClick={() => onClick={() =>
deleteAPKey(item.id).then((response) => { deleteAPKey(item.id).then((response) => {

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

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