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

Refactor API and frontend components: update item state handling, adjust API key length, and improve table layout for MyLoansPage

Browse Source
This commit is contained in:
Theis Gaedigk
2025-11-23 19:58:04 +01:00
parent 0a4d981808
commit 07d194ee6a
6 changed files with 154 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
Docs/backend_API_docs/README.md
View File

@@ -20,7 +20,7 @@ All **protected** endpoints require an API key as a path parameter `:key`.
Rules for `:key`: Rules for `:key`:
- Exactly 8 characters - Exactly 8 characters
- Digits only (`^[0-9]{8}$`) - Digits only (`^[0-9]{8}$`)
Example: Example:
@@ -49,9 +49,11 @@ Route handlers:
## Endpoints (Overview) ## Endpoints (Overview)
1. **Public** 1. **Public**
- `GET /api/all-items` – List all items (no auth; from original docs) - `GET /api/all-items` – List all items (no auth; from original docs)
2. **Items (authenticated)** 2. **Items (authenticated)**
- `GET /api/items/:key` – List all items - `GET /api/items/:key` – List all items
- `POST /api/change-state/:key/:itemId/:state` – Toggle item safe state - `POST /api/change-state/:key/:itemId/:state` – Toggle item safe state
@@ -88,7 +90,7 @@ GET https://backend.insta.the1s.de/api/items/12345678
"id": 1, "id": 1,
"item_name": "DJI 1er Mikro", "item_name": "DJI 1er Mikro",
"can_borrow_role": 4, "can_borrow_role": 4,
"inSafe": 1, "in_safe": 1,
"safe_nr": "01", "safe_nr": "01",
"entry_created_at": "2025-08-19T22:02:16.000Z", "entry_created_at": "2025-08-19T22:02:16.000Z",
"entry_updated_at": "2025-08-19T22:02:16.000Z", "entry_updated_at": "2025-08-19T22:02:16.000Z",
@@ -115,7 +117,7 @@ GET https://backend.insta.the1s.de/api/items/12345678
### 2.2 Toggle item safe state ### 2.2 Toggle item safe state
**POST** `/api/change-state/:key/:itemId/:state` **POST** `/api/change-state/:key/:itemId`
> You do not need this endpoint to set the states of the items when the items are taken out or returned. When you take or return a loan, the item states are set automatically by the loan endpoints. This endpoint is only for manually toggling the `inSafe` state of an item. > You do not need this endpoint to set the states of the items when the items are taken out or returned. When you take or return a loan, the item states are set automatically by the loan endpoints. This endpoint is only for manually toggling the `inSafe` state of an item.
@@ -123,21 +125,20 @@ Path parameters:
- `:key` – API key (8 digits) - `:key` – API key (8 digits)
- `:itemId` – numeric `id` of the item - `:itemId` – numeric `id` of the item
- `:state` – must be `"1"` or `"0"`
Handler in `api.route.js` calls `changeInSafeStateV2(itemId)`, which executes: Handler in `api.route.js` calls `changeInSafeStateV2(itemId)`, which executes:
```sql ```sql
UPDATE items SET inSafe = NOT inSafe WHERE id = ? UPDATE items SET in_safe = NOT in_safe WHERE id = ?
``` ```
#### Example request #### Example request
```http ```http
POST https://backend.insta.the1s.de/api/change-state/12345678/42/1 POST https://backend.insta.the1s.de/api/change-state/12345678/42
``` ```
(Will toggle `inSafe` for item `42`, regardless of the final `1`.) (Will toggle `in_safe` for item `42`.)
#### Successful response (current implementation) #### Successful response (current implementation)
@@ -301,13 +302,21 @@ POST https://backend.insta.the1s.de/api/set-return-date/12345678/646473
**Success – list (authenticated items):** **Success – list (authenticated items):**
```json ```json
{ "data": [ /* array of rows */ ] } {
"data": [
/* array of rows */
]
}
``` ```
**Success – single loan:** **Success – single loan:**
```json ```json
{ "data": { /* selected loan fields */ } } {
"data": {
/* selected loan fields */
}
}
``` ```
**Success – mutations (current code):** **Success – mutations (current code):**
@@ -333,4 +342,4 @@ POST https://backend.insta.the1s.de/api/set-return-date/12345678/646473
- `400 Bad Request` – invalid `state` parameter - `400 Bad Request` – invalid `state` parameter
- `401 Unauthorized` – invalid/missing API key - `401 Unauthorized` – invalid/missing API key
- `404 Not Found` – loan not found - `404 Not Found` – loan not found
- `500 Internal Server Error` – database / server failure or `success: false` from DB layer - `500 Internal Server Error` – database / server failure or `success: false` from DB layer

224
FrontendV2/src/pages/MyLoansPage.tsx
View File

@@ -13,6 +13,7 @@ import {
Dialog, Dialog,
Portal, Portal,
Code, Code,
Box,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { Header } from "@/components/Header"; import { Header } from "@/components/Header";
import { Trash2 } from "lucide-react"; import { Trash2 } from "lucide-react";
@@ -129,114 +130,125 @@ export const MyLoansPage = () => {
</VStack> </VStack>
)} )}
{loans && ( {loans && (
<Table.Root <Box
size="sm" overflowX="auto"
variant="outline" width="100%"
style={{ tableLayout: "fixed", width: "100%" }} // Optional: add bottom padding to avoid scrollbar overlap
pb={2}
> >
<Table.ColumnGroup> <Table.Root
{/* Ausleihcode */} size="sm"
<Table.Column style={{ width: "14%" }} /> variant="outline"
{/* Startdatum */} // minWidth ensures we don't cram all columns on tiny screens;
<Table.Column style={{ width: "14%" }} /> // horizontal scrolling will appear instead.
{/* Enddatum */} style={{ tableLayout: "fixed", width: "100%", minWidth: "800px" }}
<Table.Column style={{ width: "14%" }} /> >
{/* Geräte (flexibler) */} <Table.ColumnGroup>
<Table.Column style={{ width: "28%" }} /> {/* Ausleihcode */}
{/* Ausleihdatum */} <Table.Column style={{ width: "14%" }} />
<Table.Column style={{ width: "14%" }} /> {/* Startdatum */}
{/* Rückgabedatum */} <Table.Column style={{ width: "14%" }} />
<Table.Column style={{ width: "14%" }} /> {/* Enddatum */}
{/* Notiz */} <Table.Column style={{ width: "14%" }} />
<Table.Column style={{ width: "14%" }} /> {/* Geräte (flexibler) */}
{/* Aktionen */} <Table.Column style={{ width: "28%" }} />
<Table.Column style={{ width: "8%" }} /> {/* Ausleihdatum */}
</Table.ColumnGroup> <Table.Column style={{ width: "14%" }} />
<Table.Header> {/* Rückgabedatum */}
<Table.Row> <Table.Column style={{ width: "14%" }} />
<Table.ColumnHeader>{t("loan-code")}</Table.ColumnHeader> {/* Notiz */}
<Table.ColumnHeader>{t("start-date")}</Table.ColumnHeader> <Table.Column style={{ width: "14%" }} />
<Table.ColumnHeader>{t("end-date")}</Table.ColumnHeader> {/* Aktionen */}
<Table.ColumnHeader>{t("devices")}</Table.ColumnHeader> <Table.Column style={{ width: "8%" }} />
<Table.ColumnHeader>{t("take-date")}</Table.ColumnHeader> </Table.ColumnGroup>
<Table.ColumnHeader>{t("return-date")}</Table.ColumnHeader> <Table.Header>
<Table.ColumnHeader>{t("note")}</Table.ColumnHeader> <Table.Row>
<Table.ColumnHeader>{t("actions")}</Table.ColumnHeader> <Table.ColumnHeader>{t("loan-code")}</Table.ColumnHeader>
</Table.Row> <Table.ColumnHeader>{t("start-date")}</Table.ColumnHeader>
</Table.Header> <Table.ColumnHeader>{t("end-date")}</Table.ColumnHeader>
<Table.Body> <Table.ColumnHeader>{t("devices")}</Table.ColumnHeader>
{loans.map((loan) => ( <Table.ColumnHeader>{t("take-date")}</Table.ColumnHeader>
<Table.Row key={loan.id}> <Table.ColumnHeader>{t("return-date")}</Table.ColumnHeader>
<Table.Cell> <Table.ColumnHeader>{t("note")}</Table.ColumnHeader>
<Text title={loan.loan_code}> <Table.ColumnHeader>{t("actions")}</Table.ColumnHeader>
<Code variant="solid">{`${loan.loan_code}`}</Code>
</Text>
</Table.Cell>
<Table.Cell>{formatDate(loan.start_date)}</Table.Cell>
<Table.Cell>{formatDate(loan.end_date)}</Table.Cell>
<Table.Cell>
<Text title={loan.loaned_items_name}>
{loan.loaned_items_name}
</Text>
</Table.Cell>
<Table.Cell>{formatDate(loan.take_date)}</Table.Cell>
<Table.Cell>{formatDate(loan.returned_date)}</Table.Cell>
<Table.Cell>{loan.note}</Table.Cell>
<Table.Cell>
<Dialog.Root role="alertdialog">
<Dialog.Trigger asChild>
<Button
onClick={() => setDelLoanCode(loan.loan_code)}
aria-label="Ausleihe löschen"
style={{
display: "inline-flex",
alignItems: "center",
}}
>
<Trash2 />
</Button>
</Dialog.Trigger>
<Portal>
<Dialog.Backdrop />
<Dialog.Positioner>
<Dialog.Content>
<Dialog.Header>
<Dialog.Title>{t("sure")}</Dialog.Title>
</Dialog.Header>
<Dialog.Body>
<Text>
{t("sure-delete-loan-0")}
<strong>
<Code>{delLoanCode}</Code>
</strong>{" "}
{t("sure-delete-loan-1")}
<br />
{t("sure-delete-loan-2")}
</Text>
</Dialog.Body>
<Dialog.Footer>
<Dialog.ActionTrigger asChild>
<Button variant="outline">{t("cancel")}</Button>
</Dialog.ActionTrigger>
<Button
colorPalette="red"
onClick={() => deleteLoan(loan.id)}
>
<strong>{t("delete")}</strong>
</Button>
</Dialog.Footer>
<Dialog.CloseTrigger asChild>
<CloseButton size="sm" />
</Dialog.CloseTrigger>
</Dialog.Content>
</Dialog.Positioner>
</Portal>
</Dialog.Root>
</Table.Cell>
</Table.Row> </Table.Row>
))} </Table.Header>
</Table.Body> <Table.Body>
</Table.Root> {loans.map((loan) => (
<Table.Row key={loan.id}>
<Table.Cell>
<Text title={loan.loan_code}>
<Code variant="solid">{`${loan.loan_code}`}</Code>
</Text>
</Table.Cell>
<Table.Cell>{formatDate(loan.start_date)}</Table.Cell>
<Table.Cell>{formatDate(loan.end_date)}</Table.Cell>
<Table.Cell>
<Text title={loan.loaned_items_name}>
{loan.loaned_items_name}
</Text>
</Table.Cell>
<Table.Cell>{formatDate(loan.take_date)}</Table.Cell>
<Table.Cell>{formatDate(loan.returned_date)}</Table.Cell>
<Table.Cell>{loan.note}</Table.Cell>
<Table.Cell>
<Dialog.Root role="alertdialog">
<Dialog.Trigger asChild>
<Button
onClick={() => setDelLoanCode(loan.loan_code)}
aria-label="Ausleihe löschen"
style={{
display: "inline-flex",
alignItems: "center",
}}
>
<Trash2 />
</Button>
</Dialog.Trigger>
<Portal>
<Dialog.Backdrop />
<Dialog.Positioner>
<Dialog.Content>
<Dialog.Header>
<Dialog.Title>{t("sure")}</Dialog.Title>
</Dialog.Header>
<Dialog.Body>
<Text>
{t("sure-delete-loan-0")}
<strong>
<Code>{delLoanCode}</Code>
</strong>{" "}
{t("sure-delete-loan-1")}
<br />
{t("sure-delete-loan-2")}
</Text>
</Dialog.Body>
<Dialog.Footer>
<Dialog.ActionTrigger asChild>
<Button variant="outline">
{t("cancel")}
</Button>
</Dialog.ActionTrigger>
<Button
colorPalette="red"
onClick={() => deleteLoan(loan.id)}
>
<strong>{t("delete")}</strong>
</Button>
</Dialog.Footer>
<Dialog.CloseTrigger asChild>
<CloseButton size="sm" />
</Dialog.CloseTrigger>
</Dialog.Content>
</Dialog.Positioner>
</Portal>
</Dialog.Root>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Box>
)} )}
</Container> </Container>
</> </>

8
admin/src/components/AddAPIKey.tsx
View File

@@ -37,17 +37,17 @@ const AddAPIKey: React.FC<AddAPIKeyProps> = ({ onClose, alert }) => {
<InputGroup <InputGroup
endElement={ endElement={
<Span color="fg.muted" textStyle="xs"> <Span color="fg.muted" textStyle="xs">
{value.length} / {15} {value.length} / {8}
</Span> </Span>
} }
> >
<Input <Input
placeholder="Er muss 15 Zeichen lang sein" placeholder="Er muss 8 zahlen lang sein"
value={value} value={value}
id="apiKey" id="apiKey"
maxLength={15} maxLength={8}
onChange={(e) => { onChange={(e) => {
setValue(e.currentTarget.value.slice(0, 15)); setValue(e.currentTarget.value.slice(0, 8));
}} }}
/> />
</InputGroup> </InputGroup>

2
backend/services/database.js
View File

@@ -41,7 +41,7 @@ export const getLoanByCodeV2 = async (loan_code) => {
export const changeInSafeStateV2 = async (itemId) => { export const changeInSafeStateV2 = async (itemId) => {
const [result] = await pool.query( const [result] = await pool.query(
"UPDATE items SET inSafe = NOT inSafe WHERE id = ?", "UPDATE items SET in = NOT inSafe WHERE id = ?",
[itemId] [itemId]
); );
if (result.affectedRows > 0) { if (result.affectedRows > 0) {

8
backendV2/routes/api/api.database.js
View File

@@ -21,7 +21,7 @@ export const getItemsFromDatabaseV2 = async () => {
export const getLoanByCodeV2 = async (loan_code) => { export const getLoanByCodeV2 = async (loan_code) => {
const [result] = await pool.query( const [result] = await pool.query(
"SELECT first_name, returned_date, take_date, lockers FROM loans WHERE loan_code = ?;", "SELECT username, returned_date, take_date, lockers FROM loans WHERE loan_code = ?;",
[loan_code] [loan_code]
); );
if (result.length > 0) { if (result.length > 0) {
@@ -32,7 +32,7 @@ export const getLoanByCodeV2 = async (loan_code) => {
export const changeInSafeStateV2 = async (itemId) => { export const changeInSafeStateV2 = async (itemId) => {
const [result] = await pool.query( const [result] = await pool.query(
"UPDATE items SET inSafe = NOT inSafe WHERE id = ?", "UPDATE items SET in_safe = NOT in_safe WHERE id = ?",
[itemId] [itemId]
); );
if (result.affectedRows > 0) { if (result.affectedRows > 0) {
@@ -59,7 +59,7 @@ export const setReturnDateV2 = async (loanCode) => {
: JSON.parse(items[0].loaned_items_id || "[]"); : JSON.parse(items[0].loaned_items_id || "[]");
const [setItemStates] = await pool.query( const [setItemStates] = await pool.query(
"UPDATE items SET inSafe = 1, currently_borrowing = NULL, last_borrowed_person = (?) WHERE id IN (?)", "UPDATE items SET in_safe = 1, currently_borrowing = NULL, last_borrowed_person = (?) WHERE id IN (?)",
[owner[0].username, itemIds] [owner[0].username, itemIds]
); );
@@ -92,7 +92,7 @@ export const setTakeDateV2 = async (loanCode) => {
: JSON.parse(items[0].loaned_items_id || "[]"); : JSON.parse(items[0].loaned_items_id || "[]");
const [setItemStates] = await pool.query( const [setItemStates] = await pool.query(
"UPDATE items SET inSafe = 0, currently_borrowing = (?) WHERE id IN (?)", "UPDATE items SET in_safe = 0, currently_borrowing = (?) WHERE id IN (?)",
[owner[0].username, itemIds] [owner[0].username, itemIds]
); );

25
backendV2/routes/api/api.route.js
View File

@@ -23,25 +23,16 @@ router.get("/items/:key", authenticate, async (req, res) => {
}); });
// Route for API to control the safe state of an item // Route for API to control the safe state of an item
router.post( router.post("/change-state/:key/:itemId", authenticate, async (req, res) => {
"/change-state/:key/:itemId/:state", const itemId = req.params.itemId;
authenticate,
async (req, res) => {
const itemId = req.params.itemId;
const state = req.params.state;
if (state === "1" || state === "0") { const result = await changeInSafeStateV2(itemId);
const result = await changeInSafeStateV2(itemId, state); if (result.success) {
if (result.success) { res.status(200).json({ data: result.data });
res.status(200).json({ data: result.data }); } else {
} else { res.status(500).json({ message: "Failed to update item state" });
res.status(500).json({ message: "Failed to update item state" });
}
} else {
res.status(400).json({ message: "Invalid state value" });
}
} }
); });
// Route for API to get a loan by its code // Route for API to get a loan by its code
router.get( router.get(