refactor: remove LockerTable component, enhance ItemTable and LoanTable with CRUD functionality, and implement AddItemForm for item creation
This commit is contained in:
84
admin/src/components/AddItemForm.tsx
Normal file
84
admin/src/components/AddItemForm.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import React from "react";
|
||||
import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
|
||||
import { createItem } from "@/utils/userActions";
|
||||
|
||||
type AddItemFormProps = {
|
||||
onClose: () => void;
|
||||
alert: (
|
||||
status: "success" | "error",
|
||||
message: string,
|
||||
description: string
|
||||
) => void;
|
||||
};
|
||||
|
||||
const AddItemForm: React.FC<AddItemFormProps> = ({ onClose, alert }) => {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
|
||||
<Card.Root maxW="sm">
|
||||
<Card.Header>
|
||||
<Card.Title>Neuen Gegenstand erstellen</Card.Title>
|
||||
<Card.Description>
|
||||
Füllen Sie das folgende Formular aus, um einen Gegenstand zu
|
||||
erstellen.
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Body>
|
||||
<Stack gap="4" w="full">
|
||||
<Field.Root>
|
||||
<Field.Label>Gegenstandsname</Field.Label>
|
||||
<Input id="item_name" placeholder="z.B. Laptop" />
|
||||
</Field.Root>
|
||||
<Field.Root>
|
||||
<Field.Label>Ausleih-Berechtigung (Rolle)</Field.Label>
|
||||
<Input
|
||||
id="can_borrow_role"
|
||||
type="number"
|
||||
placeholder="Zahl (z.B. 2)"
|
||||
/>
|
||||
</Field.Root>
|
||||
</Stack>
|
||||
</Card.Body>
|
||||
<Card.Footer justifyContent="flex-end" gap="2">
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button
|
||||
variant="solid"
|
||||
onClick={async () => {
|
||||
const name =
|
||||
(
|
||||
document.getElementById("item_name") as HTMLInputElement
|
||||
)?.value.trim() || "";
|
||||
const role = Number(
|
||||
(document.getElementById("can_borrow_role") as HTMLInputElement)
|
||||
?.value
|
||||
);
|
||||
|
||||
if (!name || Number.isNaN(role)) return;
|
||||
|
||||
const res = await createItem(name, role);
|
||||
if (res.success) {
|
||||
alert(
|
||||
"success",
|
||||
"Gegenstand erstellt",
|
||||
"Der Gegenstand wurde erfolgreich erstellt."
|
||||
);
|
||||
onClose();
|
||||
} else {
|
||||
alert(
|
||||
"error",
|
||||
"Fehler",
|
||||
"Der Gegenstand konnte nicht erstellt werden."
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Erstellen
|
||||
</Button>
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddItemForm;
|
Reference in New Issue
Block a user