init

frontend/app/dashboard/vorlagenFlaechendruck/page.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Ellipsis } from "lucide-react"
+import { getTableData, deleteVorlageFlaechendruck } from "./action";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+
+import AddDialog from "./components/addDialog";
+import AlterDialog from "./components/alterDialog";
+
+type TableData = {
+  id: number;
+  product_type: string;
+  height: number;
+  width: number;
+  printer: string;
+  coordinates: { x: number; y: number; rotation: number }[];
+};
+export default function Page() {
+  const [data, setData] = useState<TableData[]>([]);
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const result = await getTableData();
+        setData(result);
+      } catch (error) {
+        console.error("Fehler beim Laden der Daten:", error);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  const handleNewEntry = async () => {
+    try {
+      const result = await getTableData(); // Daten erneut abrufen
+      setData(result); // Tabelle aktualisieren
+    } catch (error) {
+      console.error("Fehler beim Aktualisieren der Daten:", error);
+    }
+  };
+
+  const deleteEntry = async (id: number) => {
+    try {
+      await deleteVorlageFlaechendruck(id);
+      await handleNewEntry();
+    }
+    catch (error) {
+      console.error("Fehler beim Löschen der Daten:", error);
+    }
+  };
+
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-6">
+      <div className="max-w-5xl mx-auto">
+        {/* Table Section */}
+        <Table className="bg-white shadow-md border border-gray-300">
+          <TableCaption>Vorlagen Flächendruck</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Drucker</TableHead>
+              <TableHead>Artikel Typ</TableHead>
+              <TableHead>Höhe</TableHead>
+              <TableHead>Breite</TableHead>
+              <TableHead>Koordinaten</TableHead>
+              <TableHead className="text-right">
+                <AddDialog onNewEntry={handleNewEntry} />
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {data.map((item) => (
+              <TableRow key={item.id}>
+                <TableCell>{item.printer}</TableCell>
+                <TableCell>{item.product_type}</TableCell>
+                <TableCell>{item.height}</TableCell>
+                <TableCell >{item.width}</TableCell>
+                <TableCell>
+                  <Dialog>
+                    <DialogTrigger asChild>
+                      <Button variant="outline">Anzeigen</Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                      <DialogHeader>
+                        <DialogTitle>Koordinaten</DialogTitle>
+                        <DialogDescription>
+                          Hier sind die Koordinaten für die ausgewählte Vorlage. X und Y Werte in Millimetern.
+                        </DialogDescription>
+                      </DialogHeader>
+                      <Table>
+                        <TableCaption>Koordinaten Tabelle</TableCaption>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>X</TableHead>
+                            <TableHead>Y</TableHead>
+                            <TableHead className="text-right">Rotation</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {item.coordinates.map((coordi) => (
+                            <TableRow key={crypto.randomUUID()}>
+                              <TableCell>{coordi.x}</TableCell>
+                              <TableCell>{coordi.y}</TableCell>
+                              <TableCell className="text-right">{coordi.rotation}°</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </DialogContent>
+                  </Dialog>
+
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon">
+                        <Ellipsis />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <AlterDialog onNewEntry={handleNewEntry} data={item} />
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem variant="destructive">
+                        <AlertDialog>
+                          <AlertDialogTrigger
+                            onClick={(event) => {
+                              event.stopPropagation(); // Verhindert das Schließen des Dropdown-Menüs
+                            }}
+                          >
+                            Eintrag Löschen
+                          </AlertDialogTrigger>
+                          <AlertDialogContent>
+                            <AlertDialogHeader>
+                              <AlertDialogTitle>Sind Sie sich sicher?</AlertDialogTitle>
+                              <AlertDialogDescription>
+                                Diese Aktion ist permanent und kann nicht rückgängig gemacht werden.
+                              </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                              <AlertDialogCancel>Abbrechen</AlertDialogCancel>
+                              <AlertDialogAction
+                                onClick={() => {
+                                  deleteEntry(item.id); // Eintrag löschen
+                                }}
+                              >
+                                Löschen
+                              </AlertDialogAction>
+                            </AlertDialogFooter>
+                          </AlertDialogContent>
+                        </AlertDialog>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}