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

2025-11-23 19:58:04 +01:00
parent 0a4d981808
commit 07d194ee6a
6 changed files with 154 additions and 142 deletions
--- a/Docs/backend_API_docs/README.md
+++ b/Docs/backend_API_docs/README.md
@@ -20,7 +20,7 @@ All **protected** endpoints require an API key as a path parameter `:key`.

 Rules for `:key`:

- Exactly 8 characters  
+- Exactly 8 characters
 - Digits only (`^[0-9]{8}$`)

 Example:
@@ -49,9 +49,11 @@ Route handlers:
 ## Endpoints (Overview)

 1. **Public**
+
   - `GET /api/all-items` – List all items (no auth; from original docs)

 2. **Items (authenticated)**
+
   - `GET /api/items/:key` – List all items
   - `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,
      "item_name": "DJI 1er Mikro",
      "can_borrow_role": 4,
-      "inSafe": 1,
+      "in_safe": 1,
      "safe_nr": "01",
      "entry_created_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

-**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.

@@ -123,21 +125,20 @@ Path parameters:

 - `:key` – API key (8 digits)
 - `:itemId` – numeric `id` of the item
- `:state` – must be `"1"` or `"0"`

 Handler in `api.route.js` calls `changeInSafeStateV2(itemId)`, which executes:

 ```sql
-UPDATE items SET inSafe = NOT inSafe WHERE id = ?
+UPDATE items SET in_safe = NOT in_safe WHERE id = ?
 ```

 #### Example request

 ```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)

@@ -301,13 +302,21 @@ POST https://backend.insta.the1s.de/api/set-return-date/12345678/646473
 **Success – list (authenticated items):**

 ```json
-{ "data": [ /* array of rows */ ] }
+{
+  "data": [
+    /* array of rows */
+  ]
+}
 ```

 **Success – single loan:**

 ```json
-{ "data": { /* selected loan fields */ } }
+{
+  "data": {
+    /* selected loan fields */
+  }
+}
 ```

 **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
 - `401 Unauthorized` – invalid/missing API key
 - `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
--- a/FrontendV2/src/pages/MyLoansPage.tsx
+++ b/FrontendV2/src/pages/MyLoansPage.tsx
@@ -13,6 +13,7 @@ import {
  Dialog,
  Portal,
  Code,
+  Box,
 } from "@chakra-ui/react";
 import { Header } from "@/components/Header";
 import { Trash2 } from "lucide-react";
@@ -129,114 +130,125 @@ export const MyLoansPage = () => {
          </VStack>
        )}
        {loans && (
-          <Table.Root
-            size="sm"
-            variant="outline"
-            style={{ tableLayout: "fixed", width: "100%" }}
+          <Box
+            overflowX="auto"
+            width="100%"
+            // Optional: add bottom padding to avoid scrollbar overlap
+            pb={2}
          >
-            <Table.ColumnGroup>
-              {/* Ausleihcode */}
-              <Table.Column style={{ width: "14%" }} />
-              {/* Startdatum */}
-              <Table.Column style={{ width: "14%" }} />
-              {/* Enddatum */}
-              <Table.Column style={{ width: "14%" }} />
-              {/* Geräte (flexibler) */}
-              <Table.Column style={{ width: "28%" }} />
-              {/* Ausleihdatum */}
-              <Table.Column style={{ width: "14%" }} />
-              {/* Rückgabedatum */}
-              <Table.Column style={{ width: "14%" }} />
-              {/* Notiz */}
-              <Table.Column style={{ width: "14%" }} />
-              {/* Aktionen */}
-              <Table.Column style={{ width: "8%" }} />
-            </Table.ColumnGroup>
-            <Table.Header>
-              <Table.Row>
-                <Table.ColumnHeader>{t("loan-code")}</Table.ColumnHeader>
-                <Table.ColumnHeader>{t("start-date")}</Table.ColumnHeader>
-                <Table.ColumnHeader>{t("end-date")}</Table.ColumnHeader>
-                <Table.ColumnHeader>{t("devices")}</Table.ColumnHeader>
-                <Table.ColumnHeader>{t("take-date")}</Table.ColumnHeader>
-                <Table.ColumnHeader>{t("return-date")}</Table.ColumnHeader>
-                <Table.ColumnHeader>{t("note")}</Table.ColumnHeader>
-                <Table.ColumnHeader>{t("actions")}</Table.ColumnHeader>
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {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.Root
+              size="sm"
+              variant="outline"
+              // minWidth ensures we don't cram all columns on tiny screens;
+              // horizontal scrolling will appear instead.
+              style={{ tableLayout: "fixed", width: "100%", minWidth: "800px" }}
+            >
+              <Table.ColumnGroup>
+                {/* Ausleihcode */}
+                <Table.Column style={{ width: "14%" }} />
+                {/* Startdatum */}
+                <Table.Column style={{ width: "14%" }} />
+                {/* Enddatum */}
+                <Table.Column style={{ width: "14%" }} />
+                {/* Geräte (flexibler) */}
+                <Table.Column style={{ width: "28%" }} />
+                {/* Ausleihdatum */}
+                <Table.Column style={{ width: "14%" }} />
+                {/* Rückgabedatum */}
+                <Table.Column style={{ width: "14%" }} />
+                {/* Notiz */}
+                <Table.Column style={{ width: "14%" }} />
+                {/* Aktionen */}
+                <Table.Column style={{ width: "8%" }} />
+              </Table.ColumnGroup>
+              <Table.Header>
+                <Table.Row>
+                  <Table.ColumnHeader>{t("loan-code")}</Table.ColumnHeader>
+                  <Table.ColumnHeader>{t("start-date")}</Table.ColumnHeader>
+                  <Table.ColumnHeader>{t("end-date")}</Table.ColumnHeader>
+                  <Table.ColumnHeader>{t("devices")}</Table.ColumnHeader>
+                  <Table.ColumnHeader>{t("take-date")}</Table.ColumnHeader>
+                  <Table.ColumnHeader>{t("return-date")}</Table.ColumnHeader>
+                  <Table.ColumnHeader>{t("note")}</Table.ColumnHeader>
+                  <Table.ColumnHeader>{t("actions")}</Table.ColumnHeader>
                </Table.Row>
-              ))}
-            </Table.Body>
-          </Table.Root>
+              </Table.Header>
+              <Table.Body>
+                {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>
    </>
--- a/admin/src/components/AddAPIKey.tsx
+++ b/admin/src/components/AddAPIKey.tsx
@@ -37,17 +37,17 @@ const AddAPIKey: React.FC<AddAPIKeyProps> = ({ onClose, alert }) => {
            <InputGroup
              endElement={
                <Span color="fg.muted" textStyle="xs">
-                  {value.length} / {15}
+                  {value.length} / {8}
                </Span>
              }
            >
              <Input
-                placeholder="Er muss 15 Zeichen lang sein"
+                placeholder="Er muss 8 zahlen lang sein"
                value={value}
                id="apiKey"
-                maxLength={15}
+                maxLength={8}
                onChange={(e) => {
-                  setValue(e.currentTarget.value.slice(0, 15));
+                  setValue(e.currentTarget.value.slice(0, 8));
                }}
              />
            </InputGroup>
--- a/backend/services/database.js
+++ b/backend/services/database.js
@@ -41,7 +41,7 @@ export const getLoanByCodeV2 = async (loan_code) => {

 export const changeInSafeStateV2 = async (itemId) => {
  const [result] = await pool.query(
-    "UPDATE items SET inSafe = NOT inSafe WHERE id = ?",
+    "UPDATE items SET in = NOT inSafe WHERE id = ?",
    [itemId]
  );
  if (result.affectedRows > 0) {
--- a/backendV2/routes/api/api.database.js
+++ b/backendV2/routes/api/api.database.js
@@ -21,7 +21,7 @@ export const getItemsFromDatabaseV2 = async () => {

 export const getLoanByCodeV2 = async (loan_code) => {
  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]
  );
  if (result.length > 0) {
@@ -32,7 +32,7 @@ export const getLoanByCodeV2 = async (loan_code) => {

 export const changeInSafeStateV2 = async (itemId) => {
  const [result] = await pool.query(
-    "UPDATE items SET inSafe = NOT inSafe WHERE id = ?",
+    "UPDATE items SET in_safe = NOT in_safe WHERE id = ?",
    [itemId]
  );
  if (result.affectedRows > 0) {
@@ -59,7 +59,7 @@ export const setReturnDateV2 = async (loanCode) => {
    : JSON.parse(items[0].loaned_items_id || "[]");

  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]
  );

@@ -92,7 +92,7 @@ export const setTakeDateV2 = async (loanCode) => {
    : JSON.parse(items[0].loaned_items_id || "[]");

  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]
  );

--- a/backendV2/routes/api/api.route.js
+++ b/backendV2/routes/api/api.route.js
@@ -23,25 +23,16 @@ router.get("/items/:key", authenticate, async (req, res) => {
 });

 // Route for API to control the safe state of an item
-router.post(
-  "/change-state/:key/:itemId/:state",
-  authenticate,
-  async (req, res) => {
-    const itemId = req.params.itemId;
-    const state = req.params.state;
+router.post("/change-state/:key/:itemId", authenticate, async (req, res) => {
+  const itemId = req.params.itemId;

-    if (state === "1" || state === "0") {
-      const result = await changeInSafeStateV2(itemId, state);
-      if (result.success) {
-        res.status(200).json({ data: result.data });
-      } else {
-        res.status(500).json({ message: "Failed to update item state" });
-      }
-    } else {
-      res.status(400).json({ message: "Invalid state value" });
-    }
+  const result = await changeInSafeStateV2(itemId);
+  if (result.success) {
+    res.status(200).json({ data: result.data });
+  } else {
+    res.status(500).json({ message: "Failed to update item state" });
  }
-);
+});

 // Route for API to get a loan by its code
 router.get(