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

imrpoved table view

Browse Source
This commit is contained in:
Theis Gaedigk
2025-11-11 17:11:20 +01:00
parent a8b4ac3d60
commit e49700071b
1 changed files with 155 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
admin/src/components/ItemTable.tsx
View File

@@ -10,6 +10,7 @@ import {
Heading, Heading,
Icon, Icon,
Input, Input,
Box, // added
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { Tooltip } from "@/components/ui/tooltip"; import { Tooltip } from "@/components/ui/tooltip";
import MyAlert from "./myChakra/MyAlert"; import MyAlert from "./myChakra/MyAlert";
@@ -177,148 +178,161 @@ const ItemTable: React.FC = () => {
/> />
)} )}
<Table.Root size="sm" striped> {/* make table content-sized with horizontal scroll if needed */}
<Table.Header> <Box overflowX="auto">
<Table.Row> <Table.Root
<Table.ColumnHeader> size="sm"
<strong>#</strong> striped
</Table.ColumnHeader> tableLayout="auto"
<Table.ColumnHeader> w="max-content"
<strong>Gegenstand</strong> whiteSpace="nowrap"
</Table.ColumnHeader> >
<Table.ColumnHeader> <Table.Header>
<strong>Ausleih Berechtigung</strong> <Table.Row>
</Table.ColumnHeader> <Table.ColumnHeader>
<Table.ColumnHeader> <strong>#</strong>
<strong>Im Schließfach</strong> </Table.ColumnHeader>
</Table.ColumnHeader> <Table.ColumnHeader>
<Table.ColumnHeader> <strong>Gegenstand</strong>
<strong>Eintrag erstellt am</strong> </Table.ColumnHeader>
</Table.ColumnHeader> <Table.ColumnHeader>
<Table.ColumnHeader> <strong>Ausleih Berechtigung</strong>
<strong>Eintrag aktualisiert am</strong> </Table.ColumnHeader>
</Table.ColumnHeader> <Table.ColumnHeader>
<Table.ColumnHeader> <strong>Im Schließfach</strong>
<strong>Letzte ausleihende Person</strong> </Table.ColumnHeader>
</Table.ColumnHeader> <Table.ColumnHeader>
<Table.ColumnHeader> <strong>Eintrag erstellt am</strong>
<strong>Derzeit ausgeliehen von</strong> </Table.ColumnHeader>
</Table.ColumnHeader> <Table.ColumnHeader>
<Table.ColumnHeader> <strong>Eintrag aktualisiert am</strong>
<strong>Aktionen</strong> </Table.ColumnHeader>
</Table.ColumnHeader> <Table.ColumnHeader>
</Table.Row> <strong>Letzte ausleihende Person</strong>
</Table.Header> </Table.ColumnHeader>
<Table.Body> <Table.ColumnHeader>
{items.map((item) => ( <strong>Derzeit ausgeliehen von</strong>
<Table.Row key={item.id}> </Table.ColumnHeader>
<Table.Cell>{item.id}</Table.Cell> <Table.ColumnHeader>
<Table.Cell> <strong>Aktionen</strong>
<Input </Table.ColumnHeader>
onChange={(e) =>
handleItemNameChange(item.id, e.target.value)
}
value={item.item_name}
/>
</Table.Cell>
<Table.Cell>
<Input
onChange={(e) =>
handleCanBorrowRoleChange(item.id, e.target.value)
}
value={item.can_borrow_role}
/>
</Table.Cell>
<Table.Cell>
<Button
onClick={() =>
changeSafeState(item.id).then(() => setReload(!reload))
}
size="xs"
rounded="full"
px={3}
py={1}
gap={2}
variant="ghost"
color={item.in_safe ? "green.600" : "red.600"}
borderWidth="1px"
borderColor={item.in_safe ? "green.300" : "red.300"}
_hover={{
bg: item.in_safe ? "green.50" : "red.50",
borderColor: item.in_safe ? "green.400" : "red.400",
transform: "translateY(-1px)",
shadow: "sm",
}}
_active={{ transform: "translateY(0)" }}
aria-label={
item.in_safe ? "Mark as not in safe" : "Mark as in safe"
}
>
<Icon
as={item.in_safe ? CheckCircle2 : XCircle}
boxSize={3.5}
mr={2}
/>
<Text as="span" fontSize="xs" fontWeight="semibold">
{item.in_safe ? "Yes" : "No"}
</Text>
</Button>
</Table.Cell>
<Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
<Table.Cell>{formatDateTime(item.entry_updated_at)}</Table.Cell>
<Table.Cell>{item.last_borrowed_person}</Table.Cell>
<Table.Cell>{item.currently_borrowing}</Table.Cell>
<Table.Cell>
<Button
onClick={() =>
handleEditItems(
item.id,
item.item_name,
item.can_borrow_role
).then((response) => {
if (response.success) {
setError(
"success",
"Gegenstand erfolgreich bearbeitet!",
"Gegenstand " +
'"' +
item.item_name +
'" mit ID ' +
item.id +
" bearbeitet."
);
}
})
}
colorPalette="teal"
size="sm"
>
<Save />
</Button>
<Button
onClick={() =>
deleteItem(item.id).then((response) => {
if (response.success) {
setItems(items.filter((i) => i.id !== item.id));
setError(
"success",
"Gegenstand gelöscht",
"Der Gegenstand wurde erfolgreich gelöscht."
);
}
})
}
colorPalette="red"
size="sm"
ml={2}
>
<Trash2 />
</Button>
</Table.Cell>
</Table.Row> </Table.Row>
))} </Table.Header>
</Table.Body> <Table.Body>
</Table.Root> {items.map((item) => (
<Table.Row key={item.id}>
<Table.Cell>{item.id}</Table.Cell>
<Table.Cell>
<Input
size="sm"
w="max-content"
onChange={(e) =>
handleItemNameChange(item.id, e.target.value)
}
value={item.item_name}
/>
</Table.Cell>
<Table.Cell>
<Input
size="sm"
w="max-content"
onChange={(e) =>
handleCanBorrowRoleChange(item.id, e.target.value)
}
value={item.can_borrow_role}
/>
</Table.Cell>
<Table.Cell>
<Button
onClick={() =>
changeSafeState(item.id).then(() => setReload(!reload))
}
size="xs"
rounded="full"
px={3}
py={1}
gap={2}
variant="ghost"
color={item.in_safe ? "green.600" : "red.600"}
borderWidth="1px"
borderColor={item.in_safe ? "green.300" : "red.300"}
_hover={{
bg: item.in_safe ? "green.50" : "red.50",
borderColor: item.in_safe ? "green.400" : "red.400",
transform: "translateY(-1px)",
shadow: "sm",
}}
_active={{ transform: "translateY(0)" }}
aria-label={
item.in_safe ? "Mark as not in safe" : "Mark as in safe"
}
>
<Icon
as={item.in_safe ? CheckCircle2 : XCircle}
boxSize={3.5}
mr={2}
/>
<Text as="span" fontSize="xs" fontWeight="semibold">
{item.in_safe ? "Yes" : "No"}
</Text>
</Button>
</Table.Cell>
<Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
<Table.Cell>{formatDateTime(item.entry_updated_at)}</Table.Cell>
<Table.Cell>{item.last_borrowed_person}</Table.Cell>
<Table.Cell>{item.currently_borrowing}</Table.Cell>
<Table.Cell>
<Button
onClick={() =>
handleEditItems(
item.id,
item.item_name,
item.can_borrow_role
).then((response) => {
if (response.success) {
setError(
"success",
"Gegenstand erfolgreich bearbeitet!",
"Gegenstand " +
'"' +
item.item_name +
'" mit ID ' +
item.id +
" bearbeitet."
);
}
})
}
colorPalette="teal"
size="sm"
>
<Save />
</Button>
<Button
onClick={() =>
deleteItem(item.id).then((response) => {
if (response.success) {
setItems(items.filter((i) => i.id !== item.id));
setError(
"success",
"Gegenstand gelöscht",
"Der Gegenstand wurde erfolgreich gelöscht."
);
}
})
}
colorPalette="red"
size="sm"
ml={2}
>
<Trash2 />
</Button>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Box>
</> </>
); );
}; };