feat: add user confirmation functionality and dynamic table creation; enhance MainForm with user selection and next ID display

backend/routes/default/frontend.data.js

@@ -22,4 +22,59 @@ export const getUser = async () => {
   }
 };
 
+export const confirmUser = async (username) => {
+  const [rows] = await pool.query("SELECT * FROM usersNEW WHERE username = ?", [
+    username,
+  ]);
+
+  if (rows.length > 0) {
+    // creating userTicketTable
+    const d = new Date();
+
+    const day = d.getDate();
+    const month = d.getMonth() + 1;
+    const year = d.getFullYear();
+    const date = `${day}_${month}_${year}`;
+    const tableName = `${username}_${date}`;
+
+    console.log(tableName);
+
+    const [createTable] = await pool.query(
+      `CREATE TABLE IF NOT EXISTS ${tableName} (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        Vorname VARCHAR(100) NOT NULL,
+        Nachname Varchar(100) NOT NULL,
+        EMail Varchar(100) NOT NULL,
+        Telefonnummer Varchar(100) NOT NULL,
+        Lose INT NOT NULL,
+        Firmenname Varchar(100),
+        Vorname_Geschaeftlich Varchar(100),
+        Nachname_Geschaeftlich Varchar(100),
+        EMail_Geschaeftlich Varchar(100),
+        Telefonnummer_Geschaeftlich Varchar(100),
+        Strasse_Hausnr Varchar(100),
+        Plz_Ort Varchar(100),
+        Zahlungsmethode Varchar(100),
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+      )`
+    );
+
+    if (createTable) {
+      let nextID;
+      const getNextID = async () => {
+        const [rows] = await pool.query(
+          `SELECT id FROM ${tableName} ORDER BY id DESC LIMIT 1`
+        );
+        nextID = rows.length > 0 ? rows[0].id + 1 : 1;
+      };
+      await getNextID();
+      return { success: true, nextID };
+    } else {
+      return { success: false, message: "Table creation failed" };
+    }
+  } else {
+    return null;
+  }
+};
+
 export const confirmData = async (data) => {};

backend/routes/default/frontend.route.js

@@ -3,7 +3,7 @@ import dotenv from "dotenv";
 const router = express.Router();
 dotenv.config();
 
-import { getUser, confirmData } from "./frontend.data.js";
+import { getUser, confirmData, confirmUser } from "./frontend.data.js";
 
 router.post("/frontend", async (req, res) => {
   const result = await confirmData(req.body);
@@ -11,7 +11,6 @@ router.post("/frontend", async (req, res) => {
     return res.status(500).json({ message: "Form Data Invalid" });
   }
   console.log(req.body);
-  const user = await getUser(req.body.code);
   console.log(user);
   res.sendStatus(204);
 });
@@ -21,4 +20,16 @@ router.get("/users", async (req, res) => {
   res.json(users);
 });
 
+router.get("/confirm-user", async (req, res) => {
+  const username = req.query.username;
+  if (!username) {
+    return res.status(400).json({ message: "Username is required" });
+  }
+  const user = await confirmUser(username);
+  if (!user) {
+    return res.status(404).json({ message: "User not found" });
+  }
+  res.json(user);
+});
+
 export default router;

frontend/src/pages/MainForm.tsx

@@ -6,6 +6,7 @@ import {
   Alert,
   CircularProgress,
   Autocomplete,
+  Chip,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect } from "react";
@@ -22,6 +23,7 @@ export const MainForm = () => {
   const [invoice, setInvoice] = useState(false);
   const [msg, setMsg] = useState<Message | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [nextID, setNextID] = useState<number | null>(null);
   const [formData, setFormData] = useState({
     firstName: "",
     lastName: "",
@@ -63,6 +65,22 @@ export const MainForm = () => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
+  const handleUserSelection = (selectedUser: string | null) => {
+    if (!selectedUser) return;
+    const confirmUser = async () => {
+      try {
+        const response = await fetch(
+          `http://localhost:8004/default/confirm-user?username=${selectedUser}`
+        );
+        const data = await response.json();
+        setNextID(data.nextID);
+      } catch (error) {
+        console.error("Error confirming user:", error);
+      }
+    };
+    confirmUser();
+  };
+
   const handleSubmit = async () => {
     setIsLoading(true);
     try {
@@ -87,6 +105,7 @@ export const MainForm = () => {
 
   return (
     <>
+      <Chip label={`${t("next-id")}#${nextID ?? "N/A"}`} />
       <form
         onSubmit={(e) => {
           e.preventDefault();
@@ -98,6 +117,12 @@ export const MainForm = () => {
           options={users}
           sx={{ width: 300 }}
           renderInput={(params) => <TextField {...params} label={t("user")} />}
+          onChange={(_event, value) => handleUserSelection(value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.defaultMuiPrevented = true;
+            }
+          }}
         />
         <TextField
           required

frontend/src/utils/i18n/locales/de/de.json

@@ -10,5 +10,6 @@
     "email": "E-Mail",
     "submit": "Kaufen",
     "failed-to-load-users": "Das Laden der Benutzer ist fehlgeschlagen.",
-    "user": "Benutzer"
+    "user": "Benutzer",
+    "next-id": "Nächste Eintragsnummer: "
 }

frontend/src/utils/i18n/locales/en/en.json

@@ -10,5 +10,6 @@
     "email": "Email",
     "submit": "Buy",
     "failed-to-load-users": "Failed to load users.",
-    "user": "User"
+    "user": "User",
+    "next-id": "Next Entry Number: "
 }